day54 DOM补充练习 jQuery基本选择器

上节回顾：

day54

1. 前情回顾

        1. DOM对象和BOM对象
            1. BOM 对象 --> window
                location
                    location.href    
                    location.href="https://www.sogo.com"
                    location.reload
                history
                navigator
            2. DOM
                1. document结构
                    1. 节点
                        1. 文档节点
                        2. 元素节点
                        3. 属性节点
                        4. 文本节点
                    2. 查找标签
                        1. 基本查找
                            1. ID查找 --> docuemnt.getElementById
                            2. 标签名查找 --> document.getElementsByTagName
                            3. class名查找 --> document.getElementsByClassName
                            // 4. 属性查找    --> document.getElementsByName
                        2. 层级查找
                            1. 上一级父标签 --> eleObj.parentElement
                            2. 儿子标签     --> eleObj.children
                            3. 第一个儿子   --> eleObj.firstElementChild
                            4. 最后一个儿子 --> eleObj.lastElementChild
                            5. 上一个兄弟标签 --> eleObj.previousElementSibling
                            5. 下一个兄弟标签  --> eleObj.nextElementSibling
                            
                    3. 创建标签
                        1. doucument.creatElement("div")  --> 要创建什么标签括号里面就写什么
                        2. 设置标签内容
                            1. eleObj.innerHTML = "<p>P标签</p>"
                            2. eleObj.innerText = "标签中间的文本"
                    
                        3. 标签属性
                            1. input标签相关
                                1. inputEle.value  --> 获取input框的输入值
                                2. inputEle.value = "请输入xxx" --> 设置input框的值
                            2. checkbox标签相关
                                1. checkboxEle.checked --> 返回true或false
                                2. checkboxEle.checked = true  --> 选中该checkbox
                            3. select标签相关
                                1. selectObj.options  --> 获取所有的option选项 （数组）
                                2. selecObj.selectedIndex  --> 获取选中的option的索引值
                                3. selecObj.options.length=0 --> 快速清空option
        
        2. JS 事件
            常用事件
                onclick
                ondbclick
                onload
                blur
                fouces
                onchange (select联动示例)
            绑定事件方法
                1. 在标签上通过特定的事件属性绑定事件
                    比如： <div onclick="f()">点我点我点我</div> 
                2. 通过JS绑定事件
                    eleObj.onclick = function(){ ... }
                3. 事件委托（利用事件冒泡）
                    找到父标签，给子标签绑定事件
                    <ul>li*100</ul>
                    
                    ulEle.onclick=function(){
                        event.target  --> 点击的那个标签对象
                        alert(event.target.innerText)
                    }
                    
    补充知识点
        1. 定时器示例
        2. addEventListener

今日内容：

2. 今日内容

    补充经验：
        1. 项目不要一开始就规划十分完美，要从最基本的功能开始写起，然后逐渐丰富
        2. 与同事沟通以正式邮件为主
        3. 项目时间要给自己留有富余
        
        4. CDN是什么？

    1. jQuery是什么    --> 写项目都用这个
    
        2. jQuery短小精悍
        write less，do more
        
        是一个别人写好的类库（模块），我们直接在页面上引用这个类库（模块），就可以直接使用类库里面定义好的方法
        
    2. jQuery怎么用
        1. 引用jQuery文件
            两种方式：
            1. 本地文件
                <script src="jquery-3.2.1.min.js"></script>
                <script>按照jQuery的规则写代码</script>
            2. CDN方式
                <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
                <script>按照jQuery的规则写代码</script>
        2. jQuery版本
            3.x
            
            jQuery.js
            jQuery.min.js
    3. jQuery使用
    
        1. 查找标签
            军规：$("这里面写条件")  $后面没有空格
                
            1. 基本查找
                1. ID查找
                $("#id值")
                2. class名找
                $(".class名")
                
                3. 标签名找
                $("标签名")
                
                4. :has
        
        2. 修改标签的样式
            原生JS:
                获取样式类： classList
                添加样式类名 classList.add(.cls)
                移除样式类名 classList.remove(.cls)
            JQuery版：
                获取样式类
                添加样式类名
                移除样式类名
        
        3. 修改标签
        
        4. 创建标签/添加标签/删除标签
        
        5. 事件
        
        6. 动画
        
        7. 插件
        
        8.Ajax

3. 今日作业

    1. 上午的DOM补充的两个例子
        1. 定时器 （全局变量）
        2. addEventListener （绑定多个事件）
        
    2. 课上练习题（做完）
    
    3. 左侧菜单改成使用jQuery找标签的方式
    
    4. 五点检查抽屉作业
            

作业讲解：

1.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业分解大礼包</title>
    <style>
        .cover {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 999;
        }

        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
             600px;
            height: 400px;
            margin-left: -300px;
            margin-top: -200px;
            z-index: 1000;
            background-color: white;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>

<input type="button" id="b1" value="添加">

<table border="1" id="t1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
     <tr>
        <td>1</td>
        <td>Egon</td>
        <td>杠娘</td>
        <td>
            <input type="button" value="编辑">
            <input class="delete" type="button" value="删除">
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>Alex</td>
        <td>吹牛逼</td>
        <td>
            <input type="button" value="编辑">
            <input class="delete" type="button" value="删除">
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>Yuan</td>
        <td>日天</td>
        <td>
            <input type="button" value="编辑">
            <input class="delete" type="button" value="删除">
        </td>
    </tr>
    </tbody>
</table>


<div class="cover hide c1"></div>
<div class="modal hide c1">
    <p>姓名<input type="text" id="modal-name"></p>
    <p>爱好<input type="text" id="modal-hobby"></p>

    <input type="button" value="提交" id="modal-submit">
    <input type="button" value="取消" id="modal-cancel">
</div>

<script>
    // 显示模态框
    function showModal() {
        // 找到那两个div
        var c1Eles = document.getElementsByClassName("c1");
        for (var i=0;i<c1Eles.length;i++) {
            c1Eles[i].classList.remove("hide");
        }
    }

    // 隐藏模态框
    function hideModal() {
        // 找到那两个div
        var c1Eles = document.getElementsByClassName("c1");
        for (var i=0;i<c1Eles.length;i++) {
            c1Eles[i].classList.add("hide");
        }
    }

    // 找到添加按钮绑定事件
    var b1Ele = document.getElementById("b1");
    b1Ele.onclick=function () {
        showModal();
    };

    // 找到取消按钮
    var cancelEle = document.getElementById("modal-cancel");
    cancelEle.onclick=function () {
        //  点击取消按钮要做的事儿
        // 添加hide class
        hideModal();
    };

    //  找modal中的提交按钮，绑定事件
    var submitEle = document.getElementById("modal-submit");
    submitEle.onclick=function () {
        // 模态框里点击提交按钮要做的事儿
        // 1. 取到input筐的值
        var nameInput = document.getElementById("modal-name");
        var hobbyInput = document.getElementById("modal-hobby");

        var name = nameInput.value;
        var hobby = hobbyInput.value;

        // 2. 创建tr标签
        var trEle = document.createElement("tr");
        // 序号
        var tableEle = document.getElementById("t1");
        var number = tableEle.getElementsByTagName("tr").length;


        // 拼接tr的内容
        trEle.innerHTML = "<td>" + number + "</td>" + "<td>" + name + "</td>" + "<td>" + hobby + "</td>" + '<td><input type="button" value="编辑"> <input class="delete" type="button" value="删除"></td>'

        // 3. 添加到tbody里
        var tbodyEle = tableEle.getElementsByTagName("tbody")[0];
        tbodyEle.appendChild(trEle);
        // 4. 隐藏modal
        hideModal();
    };
        // 删除按钮绑定事件
        // 1. 找标签
        var tableEle = document.getElementById("t1");
        tableEle.onclick=function () {
            // 删除按钮
            var currentEle = event.target;
            if (currentEle.classList.contains("delete")) {
                // 执行删除操作
                var currentTr = currentEle.parentElement.parentElement;
                var tbodyEle = tableEle.getElementsByTagName("tbody")[0];
                tbodyEle.removeChild(currentTr);
                // ID重排
            }
        }
</script>
</body>

2.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器示例</title>
</head>
<body>

<input type="text" id="i1">

<input type="button" value="开始" onclick="start();">
<input type="button" value="结束" onclick="end();">

<script>
    var t;   // undefined
   function f() {
        var dateObj = new Date();
    //  获取i1标签
    var i1Ele = document.getElementById("i1");
    i1Ele.value=dateObj.toLocaleString();
   }
    // 每隔一秒就执行一次f()
    function start() {
       f();
       // 只创建一个定时器，有定时器的话我就不创建了
        if (t === undefined) {
            t = setInterval(f, 1000);
        }
    }

    // 停止计时
    function end() {
        clearInterval(t);
        // t现在是什么？
        console.log("---> ", t)
        t = undefined;
    }

</script>
</body>
</html>

3.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>绑定多个事件</title>
</head>
<body>
<input type="button" value="点我" id="il">
<script>
    function f1() {
        console.log(1);
    }
    function f2() {
        consol.log(2)
    }
    var ilEle =document.getElementById("il");
//    ilEle.onclick=function () {
//        //点我之后要执行的函数
//        f1();
//    };
//    ilEle.onclick=function () {
//        f2();
//    };
//    addEventListener,绑定多个事件不覆盖
    ilEle.addEventListener("click",f1);
    ilEle.addEventListener("click",f2);
</script>
</body>
</html>

 

上节补充：

新内容：

jQuery

 1、jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。

$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。

相当于： document.getElementById("i1").innerHTML;

虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：

一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：

var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象

 拿上面那个例子举例，jQuery对象和DOM对象的使用：

$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

 

 

jQuery基础语法

$(selector).action()

查找标签

选择器

id选择器：

$("#id")

标签选择器：

$("tagName")

class选择器：

$(".className")

配合使用：

$("div.c1")  // 找到有c1 class类的div标签

所有元素选择器：

$("*")

组合选择器：

$("#id, .className, tagName")

层级选择器：

x和y可以为任意选择器

$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery引出</title>
</head>
<body>


<p>我是前面的p标签</p>
<div id="i1">我是id为i1的div标签</div>
<script src="jquery-3.2.1.min.js"></script>
<!--<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>-->
</body>
</html>

基本筛选器：

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

例子：

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1 class的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

注意：

1. 这里的has和not不是简单的 有和 没有的意思，它俩没啥关系（不是一组）
2. :not和:has通常用.not()和.has()代替。
3. $("div:has(.c1)")中的:has(.c1)等价于$("div .c1")，也就是找后代里面有c1的div标签。

练习：

自定义模态框，使用jQuery实现弹出和隐藏功能。

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>基本选择器</title>
</head>
<body>
<div id="il">id值为il</div>
<div class="c1">c1</div>
<div class="c1">c1</div>

<p>p</p>
<p>p2</p>

<script src="jquery-3.2.1.min.js"></script>
</body>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>7 jQuery 层级选择器</title>
</head>
<body>
<div id="d1" class="c1 c2 c3">
    <p>d1的儿子p</p>
    <div id="d2">
        <p>d1的孙子p 0</p>
        <p>d1的孙子p 1</p>
        <p>d1的孙子p 2</p>
        <p>d1的孙子p 3</p>
        <p>d1的孙子p 4</p>
    </div>
</div>
<input type="text" value="我是前面的">
<label for="il">姓名</label>

<input type="text" id="il">
<input type="text" value="111">

<input type="button" value="点我">

<label for="i2" id="11">爱好
    <input type="text" id="i2">
    <div>
        <input type="text">
    </div>
    <span class="s1"><i>1</i>span 0</span>
    <span>span1</span>
</label>

<script src="jquery-3.2.1.min.js"></script>
</body>
</html>

作业练习：