python 之前端开发（ jQuery选择器、筛选器、样式操作、文本操作、属性操作、文档操作）

11.5 jQuery

引入方式：

方式一：本地引入

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

<script>        //注意，一定在引入jQuery之后，再使用jQuery提供的各种操作

    code...

</script>



方式二：直接使用CDN

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

<script>

    code...

</script>

文档就绪事件：

DOM文档加载的步骤

1. 解析HTML结构。

2. 加载外部脚本和样式表文件。

3. 解析并执行脚本代码。

4. DOM树构建完成。

5. 加载图片等外部文件。

6. 页面加载完毕

11.51 选择器

id选择器：

$("#i1")

标签选择器：

$("p")

class选择器：

$(".c1")

所有元素选择器：

$("*")

交集选择器：

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

并集选择器：

$("#i1,.c1,p")  // 找到所有id="i1"的标签和class="c1"的标签和p标签

层级选择器：

$("x y");       // x的所有后代y（子子孙孙）

$("x>y");       // x的所有儿子y（儿子）

$("x+y")        // 找到所有紧挨在x后面的兄弟y

$("x~y")        // x之后所有的兄弟y

属性选择器：

$("input[type='checkbox']");    // 取到checkbox类型的input标签

$("input[type!='text']");       // 取到类型不是text的input标签

基本筛选器：

:first              // 第一个

:last               // 最后一个

:eq(index)          // 索引等于index的那个元素

:even               // 匹配所有索引值为偶数的元素，从 0 开始计数

:odd                // 匹配所有索引值为奇数的元素，从 0 开始计数

:gt(index)           // 匹配所有大于给定索引值的元素

:lt(index)          // 匹配所有小于给定索引值的元素

:not(选择器)         // 过滤掉所有满足not条件的标签

:has(选择器)         // 过滤出所有后代中满足has条件的父标签



//例如

$("div:has(h1)")    // 找到所有后代中有h1标签的div标签

$("div:has(.c1)")   // 找到所有后代中有c1样式类的div标签

$("li:not(.c1)")    // 找到所有不包含c1样式类的li标签

$("li:not(:has(a))") // 找到所有后代中不含a标签的li标签

11.52 表单常用筛选器

表单常用筛选：

:text

:password

:file

:radio

:checkbox

:submit

:reset

:button

例：

$(":checkbox")      // 找到所有的checkbox

表单对象状态属性筛选:

:enabled

:disabled

:checked

:selected

注意：$(":checked")选择时连select中的带有selected属性的option标签也会选上，所以要用$("input:checked")

11.53 筛选器

下一个兄弟元素：

$("#id").next()

$("#id").nextAll()

$("#id").nextUntil("#i2")  //从id="id"的标签开始往下选择兄弟标签直到id=i2的标签(不包含id=i2的标签)

上一个兄弟元素：

$("#id").prev()

$("#id").prevAll()

$("#id").prevUntil("#i2") //从id="id"的标签开始往上选择兄弟标签直到id=i2的标签(不包含id=i2的标签)

父亲元素：

$("#id").parent()

$("#id").parents()                  // 查找当前元素的所有的父辈元素

$("#id").parentsUntil("某个父元素")   // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

儿子和兄弟元素：

$("#id").children();        // 所有子标签

$("#id").siblings();        // 兄弟标签、

查找

$("div").find("p") <==> $("div p")

//搜索所有与指定表达式匹配的元素,这个函数是找出正在处理的元素的后代元素的好方法。

筛选

$("div").filter(".c1")  <==>  $("div.c1")  // 从结果集中过滤出有c1样式类的

//筛选出与指定表达式匹配的元素集合,这个方法用于缩小匹配的范围,用逗号分隔多个表达式。

.first()    // 获取匹配的第一个元素

.last()     // 获取匹配的最后一个元素

.not()      // 从匹配元素的集合中删除与指定表达式匹配的元素

.has()      // 保留包含特定后代的父元素，去掉那些不含有指定后代的元素。

.eq()       // 索引值等于指定值的元素

11.54 标签操作之样式操作

11.541 通过类属性操作样式

addClass();      // 添加指定的CSS类名。

removeClass();   // 移除指定的CSS类名。

hasClass();      // 判断样式存不存在

toggleClass();   // 切换CSS类名，如果有就移除，如果没有就添加。

11.542 直接操作CSS样式

css("color","red")                                    //DOM操作：Elem.style.color="red"

$("p").css("color", "red");                            //将所有p标签的字体设置为红色

$("#p1").css({"border":"1px solid black","color":"red"});//同时设置多个css样式

11.543 jQuery版模态框

<head>

<style>

        .cover {

            position: fixed;

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

            background-color: rgba(0,0,0,0.4);

            z-index: 999;

        }

        .modal {

            background-color: white;

            height: 300px;

            width: 500px;

            position: absolute;

            top: 50%;

            left: 50%;

            z-index:1000;

            margin-top: -150px;

            margin-left: -250px;

        }

        .hide {

            display: none;      //不占空间，也不显示

        }

    </style>

</head>

<body>

<div>

    <h1>海燕</h1>

    <p>在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</p>

</div>

<button id="b1">点我登录</button>

<div class="cover hide"></div>

<div class="modal hide">

    <form action="">

        <p>

            <label>用户名

                <input type="text">

            </label>

        </p>

        <p>

            <label>密码

                <input type="password">

            </label>

        </p>

        <p>

            <input type="submit">

            <input type="button" id="cancel" value="取消">

        </p>

    </form>

</div>

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

<script>

    // var b1Ele=document.getElementById("b1");     //原生DOM对象

    // var b1Ele = $("#b1")[0];                  //通过jQuery对象找到DOM对象,找到按钮，给它绑定事件，

    // b1Ele.onclick = function () {               //使用的是js对象

    //     $(".cover,.modal").removeClass("hide");  // 事件触发后，找到那两个div,移除它们的hide样式类

    // };



     var b1Ele = $("#b1");

     b1Ele.click(function () {

         $(".cover,.modal").removeClass("hide");

     });



    // var cancelButton = $("#cancel")[0];          //使用的是DOM对象

    // cancelButton.onclick = ()=>{

    //     $(".cover,.modal").addClass("hide");     // 事件触发后，找到那两个div,给它们添加hide样式类

    // };

    var cancelButton = $("#cancel");

    cancelButton.click(function () {

        $(".cover,.modal").addClass("hide");

    });

</script>

</body>

11.544 位置

offset()                // 获取匹配元素在当前窗口的相对偏移或设置元素位置，可设置

$(".c3").offset({top:284,left:400})

position()              // 获取匹配元素相对父元素的偏移,不可设置

$(window).scrollTop()               // 获取匹配元素相对滚动条顶部的偏移，可设置

$(window).scrollTop(0)              //获取当前窗口相对滚动条顶部的偏移，并且可设置

$(window).scrollLeft()              // 获取匹配元素相对滚动条左侧的偏移，可设置

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。.position()的差别在于： .position()是相对于父级元素的位移。

11.545 尺寸

height()         //获取当前标签内容高度，并且可设置高度

width()         //获取当前标签内容宽度，并且可设置宽度

innerHeight()    //内容+padding

innerWidth()     //内容+padding

outerHeight()    //内容+padding+border

outerWidth()     //内容+padding+border

11.55 标签操作之文本内容操作

text()                      //只查看所有标签内的文本

text(val)                   //先清空节点内容，再添加文本字符串:('<h1>我是h1</h1>')

注意：值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中



html()                      //查看所有子标签，包括文本和子标签

html(val)                   //先清空节点内容，可识别文本内的html标签('<h1>我是h1</h1>')

$('ul').html('<a href="#">百度一下</a>')

$('ul').html(function(){     //可以使用函数来设置所有匹配元素的内容

    return '哈哈哈'

})



val

// 用途：val()用于操作input、select、textarea的value值

// 示范一：

<input type="text" name="username" >

$('input[type=text]').val()                         //查看输入框内的值或添加值

<input type="radio" name="sex" value="male">

<input type="radio" name="sex" value="female">

<input type="radio" name="sex" value="none">

$('input[type=radio]').val(['male',])                //查看所选选项或选择选项，选择选项时使用列表



// 示范二：

<input type="checkbox" name="hobbies" value="basketball">

<input type="checkbox" name="hobbies" value="football">

<input type="checkbox" name="hobbies" value="doublecolorball">

$('input[type=checkbox]').val(['basketball','football']) //查看所选选项或选择选项(选择选项时使用列表)

11.551 登录注册示例

    <style>

        .error {color: red;}

    </style>

<body>

<form action="" method="">

    <p>

        <label for="username">用户名</label>

        <input type="text" id="username" name="username">

        <span class="error"></span>

    </p>

    <p>

        <label for="pwd">密码</label>

        <input type="password" id="pwd" name="pwd">

        <span class="error"></span>

    </p>

    <p>

        <input type="submit" id="b1" value="登录">

    </p>

</form>

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

<script>

    $("#b1").click(function () {

        var flag = true;

        $(".error").text("");

        var $username = $("#username");

        var $pwd = $("#pwd");

        if ($username.val().length === 0){            // 取input框的值(用户名)判断长度是否为0

            $username.next().text("用户名不能为空！"); //找到class="error"的span标签添加提示信息

            flag = false;                           //用户名或密码为空时不提交表单

        }

        if ($pwd.val().length === 0){                //取input框的值(密码)判断长度是否为0

            $pwd.next().text("密码不能为空！");       //找到class="error"的span标签添加提示信息

            flag = false;

        }

        return flag;                      // 表单填写有误就会返回false，阻止submit按钮默认的提交表单事件

    })

</script>

</body>

11.56 标签操作之属性操作

用于id、class、name、value等或自定义属性：

<images src="1.jpg" alt="图片不见了" title="这绝对正常的图片">

attr(属性名)                                                // 返回第一个匹配元素的属性值

$('.box2 img').attr('title','美女')                         // 为所有匹配元素设置一个属性值

$('.box2 img').attr({'title': '美女', 'alt':'图片被狗吃了'})  // 为所有匹配元素设置多个属性值

$('.box2 img').removeAttr('title')                          // 从每一个匹配的元素中删除一个属性

用于checkbox和radio：

<input type="radio" name="sex" value="male">

$(':radio[value=male]').prop('checked',true);// 设置属性



<input type="checkbox" name="hobbies" value="basketball">

$("input :checkbox").prop('value')          // 获取value属性的值

$("input :checkbox").prop('checked',true);   // 设置属性

$(':checkbox[value=football]').prop('checked',true);

$("table :checkbox").removeProp('value')     // 移除value属性

注意：在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")

总结：1. 对于标签上有的能看到的属性和自定义属性都用attr 2. 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。

11.561 全选反选取消

<body>

<button id="b1">全选</button>

<button id="b2">取消</button>

<button id="b3">反选</button>

<table border="1">

    <thead>

    <tr>

        <th>#</th>

        <th>姓名</th>

        <th>爱好</th>

    </tr>

    </thead>

    <tbody>

    <tr>

        <td><input type="checkbox"></td>

        <td>Egon</td>

        <td>喊麦</td>

    </tr>

    <tr>

        <td><input type="checkbox"></td>

        <td>Alex</td>

        <td>吹牛逼</td>

    </tr>

    <tr>

        <td><input type="checkbox"></td>

        <td>Yuan</td>

        <td>不洗头</td>

    </tr>

    </tbody>

</table>

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

<script>

    // 全选

    $("#b1").click(function () {

        $("table :checkbox").prop("checked", true)// 让所有的checkbox选中

    });

    // 取消

    $("#b2").click(function () {

        $("table :checkbox").prop("checked", false)// 让所有的checkbox取消选中

    });

    // 反选

    $("#b3").click(function () {

        //$("table input:not(:checked)").prop("checked", true); // 找到没有选中的让它们选中

        //$("table input:checked").prop("checked", false);        // 找到所有选中的让它们取消选中

         // 方法1：循环判断

         var $checkboxs = $("table input:checkbox");

        for (let i=0;i<$checkboxs.length;i++){

             var $currentCheckbox = $($checkboxs[i]);

             if ($currentCheckbox.prop("checked")){    // 如果之前是选中的，则取消选择

                $currentCheckbox.prop("checked", false);

            }else {

               $currentCheckbox.prop("checked", true);// 如果之前没有选中，则选择

            }

        }

        //方法2：直接取当前标签的checked属性的相反值

        for (let i=0;i<$checkboxs.length;i++){

            var $currentCheckbox = $($checkboxs[i]);

            var flag = $currentCheckbox.prop("checked");

            $currentCheckbox.prop("checked", !flag)

        }

        //方法3：

        $('td input').each(function () {

            $(this).prop('checked', !$(this).prop('checked'));

        }

    });

</script>

</body>

11.57 标签操作之文档处理

//内部

$(A).appendTo(B)        // 把A追加到B内部的最后面

$(A).prependTo(B)       // 把A前置到B内部的最前面

//内部

$(A).append(B)  // 把B追加到A内部的最后

$(A).prepend(B) // 把B前置到A内部的最前面



//外部

$(A).insertAfter(B)     // 把A放到B外部的后面

$(A).insertBefore(B)    // 把A放到B外部的前面

//外部

$(A).after(B)    // 把B放到A外部的后面

$(A).before(B)  // 把B放到A外部的前面

移除和清空元素:

$('.p1').remove()           //从DOM中删除所有匹配的元素(标签和事件)，被删掉的对象做返回值，包括删除自身



var $btn=$('button').detach()      // 删除标签，保留事件，被删掉的对象做返回值

$('ul').append($btn)               //此时按钮能追加到ul中



$('.p1').empty()                  // 清空匹配的元素集合中所有的子节点，不包括自身

替换:

$('.p1').replaceWith($('.p2'))        //后面的替换前面的所有.p1标签

$('.p1').replaceAll($('.p2'))        //前面的替换后面的所有.p2标签

克隆:

.clone(true)    //不加参数true，克隆标签但不克隆标签带的事件,加参数true，克隆标签并且克隆标签带的事件

11.571 克隆示例

<head>

<style>

    #b1 {

      background-color: deeppink;

      padding: 5px;

      color: white;

      margin: 5px;

    }

    #b2 {

      background-color: dodgerblue;

      padding: 5px;

      color: white;

      margin: 5px;

    }

</style>

</head>

<body>

<button id="b1">屠龙宝刀，点击就送</button>

<button id="b2">屠龙宝刀，点击就送</button>

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

<script>

  $("#b1").on("click", function () {        // clone方法不加参数true，克隆标签但不克隆标签带的事件

    $(this).clone().insertAfter(this);

  });

  $("#b2").on("click", function () {        // clone方法加参数true，克隆标签并且克隆标签带的事件

    $(this).clone(true).insertAfter(this);

  });

</script>

</body>