JavaScript之jQuery够用即可（查找筛选器、属性操作、jQuery文档处理）

小鱼儿 2023-03-14 10:58 12阅读 0赞

### 文章目录 ###

*   *   *   *  一、筛选器补充
             *  二、jQuery属性操作
             *  三、jQuery文档处理

#### 一、筛选器补充 ####

**1、过滤筛选器**  
就是查看某个标签中是否存在另外一个标签

// console.log($("div").hasClass("div1")); //判断div中是否存在class为div1的标签，返回布尔值

**2、查找筛选器**  
请区分文章：[JavaScript之jQuery够用即可（jQuery的引入、查找选择器、左侧菜单栏）][JavaScript_jQuery_jQuery]中的选择器，这里介绍的是筛选器。  
它们主要功能是差不多的，但是用法上有一定区别，不过它们和JS中的用法几乎一样，JS筛选器的用法请查阅文章

*  $(“div”).children(".test")——> 查找子元素
 *  $(“div”).find(".test")——> 查找子元素

--------------------

*  $(".test").next()——>查找下一个元素
 *  $(".test").nextAll()——>查找往下所有元素
 *  $(".test1").nextUntil(".test2") ——>查找往下的元素，直到某个元素停止

--------------------

*  $(“div”).prev()——查找前一个元素
 *  $(“div”).prevAll()——>查找前面所有元素
 *  $(“div”).prevUntil()——>查找往前的元素，直到某个元素停止

--------------------

*  $(".test").parent()——>查找直属父级元素
 *  $(".test").parents()——>查找父级的父级的父级…
 *  $(".test1").parentUntil(“test2”)——>查找父级的父级…直到某个元素停止

--------------------

*  $(“div”).siblings()——查找非本身元素

#### 二、jQuery属性操作 ####

**1、attr修改属性（常用于自定义的属性）**

console.log($("div").attr("name"));  //只有一个参数时会取对应属性的值
        $("div").attr("name","n2");  //两个参数则，表示将属性name的值改为n2
        console.log($("div").attr("name"));

**2、prop修改属性（常用于固有的属性）**

console.log($("div").prop("class"));
        $("div").prop("class","div2");
        console.log($("div").prop("class"));
        // 未定义的属性则会返回false，而不是undefined
        console.log($("input:first").prop("checked"));
        console.log($("input:last").prop("checked"));

**3、html()和text()更改标签内容**

console.log($("#id1").html());  //取标签和文本内容
        console.log($("#id1").text());  //只取文本内容
        $("#id1").html("<h1>我是新的</h1>");  //重新设置标签内容并且更改样式
        $("#id1").text("<h1>我是新的</h1>");  //重新设置内容，但不能改变样式

**4、val()查看和修改固有value属性的值，自定义的无法显示**

console.log($(":text").val());  //无参数时是查看
        console.log($(":text").next().val());
        $(":text").val("感谢配合");  //带参数则重新设置value值

**5、设置CSS属性**

//CSS属性，因为CSS代码都是键值对组成的；
        // 因此传入两个参数，第一个是要设置的CSS属性，第二个是设置的样式值
        $("div").css("color","red");  //一对键值对
        $("[value='self_value']").css({ "color":"yellow","background-color":"green"});  //多个键值对

**6、测试代码**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery属性操作</title>
    </head>
    <body>
    <div class="div1" name="n1"></div>
    <input type="checkbox">选项一
    <input type="checkbox" checked="checked">选项二
    
    <div id="id1">
        <p>一个P标签</p>
    </div>
    
    <input type="text" value="请输入">
    <div value="self_value">DIVVVV</div>
    
    
    <script src="jquery-3.4.1.js"></script>
    <script>
        //过滤筛选器
        // console.log($("div").hasClass("div1")); //判断div中是否存在class为div1的标签，返回布尔值
    
        //attr修改属性（常用于自定义的属性）
        // console.log($("div").attr("name")); //只有一个参数时会取对应属性的值
        // $("div").attr("name","n2"); //两个参数则，表示将属性name的值改为n2
        // console.log($("div").attr("name"));
    
        //prop修改属性（常用于固有的属性）
        // console.log($("div").prop("class"));
        // $("div").prop("class","div2");
        // console.log($("div").prop("class"));
        // // 未定义的属性则会返回false，而不是undefined
        // console.log($("input:first").prop("checked"));
        // console.log($("input:last").prop("checked"));
    
        // console.log($("#id1").html()); //取标签和文本内容
        // console.log($("#id1").text()); //只取文本内容
        // $("#id1").html("<h1>我是新的</h1>"); //重新设置标签内容并且更改样式
        // $("#id1").text("<h1>我是新的</h1>"); //重新设置内容，但不能改变样式
    
        // val查看和修改固有value属性的值，自定义的无法显示
        // console.log($(":text").val()); //无参数时是查看
        // console.log($(":text").next().val());
        // $(":text").val("感谢配合"); //带参数则重新设置value值
    
        //CSS属性，因为CSS代码都是键值对组成的；
        // 因此传入两个参数，第一个是要设置的CSS属性，第二个是设置的样式值
        $("div").css("color","red");  //一对键值对
        $("[value='self_value']").css({ "color":"yellow","background-color":"green"});  //多个键值对
    </script>
    </body>
    </html>

**7、jQuery实现的正反选**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>正反选</title>
    </head>
    <body>
    <button onclick="allSelect()">全选</button>
    <button onclick="cancel()">取消</button>
    <button onclick="reverse()">反选</button>
    
    
    <table border="2px">
        <tr>
            <td><input type="checkbox"></td>
            <td>培根</td>
            <td>鸡排套餐</td>
            <td>白开水</td>
        </tr>
    
        <tr>
            <td><input type="checkbox"></td>
            <td>牛肉饭</td>
            <td>鸡腿</td>
            <td>冰淇淋</td>
        </tr>
    
        <tr>
            <td><input type="checkbox"></td>
            <td>汉堡</td>
            <td>瘦肉粥</td>
            <td>奶茶</td>
        </tr>
    
        <tr>
            <td><input type="checkbox"></td>
            <td>鸡排</td>
            <td>薯条</td>
            <td>奶昔</td>
        </tr>
    </table>
    
    <script src="jquery-3.4.1.js"></script>
    <script>
        function allSelect(){ 
            $(":checkbox").each(function(){ 
                $(this).prop("checked",true);
            });
        }
    
        function cancel(){ 
            $(":checkbox").each(function(){ 
                $(this).prop("checked",false);
            });
        }
    
        function reverse(){ 
            $(":checkbox").each(function(){ 
                $(this).prop("checked",!$(this).prop('checked'));  //此处用非“！”，原来是true就变成false，反之亦然
            });
        }
    </script>
    </body>
    </html>

#### 三、jQuery文档处理 ####

**1、内部插入**

*  append，prepend添加标签
 *  appendTo，prependTo添加到标签

$(".c1").append($ele);  //向下累加，在名为c1的div标签中添加变量$ele
            $ele.appendTo(".c1");  //向下累加，将变量$ele添加到c1的标签里
    
            $(".c1").prepend($ele);  //向上累加，向名为c1的div标签里加$ele变量
            $ele.prependTo(".c1");  //向上累加，将变量$ele添加到c1的标签里

**2、外部插入**

*  after，before添加
 *  insertAfter，insertBefore添加到

$(".c1").after($ele);  //在其后面添加内容
            $(".c1").before($ele);  //在其前面添加内容
            $ele.insertAfter(".c1");  //将$ele添加到c1的后面
            $ele.insertBefore(".c1");  将$ele添加到c1的前面

**3、替换：replaceWith**

$("p").replaceWith($ele);  //用$ele替换p标签

**4、删除与清空：remove，empty**

$(".c1").empty();  //将c1的内容清空（只是内容没了）
            $(".c1").remove();  //将c1的内容删除（整个标签都没了）

**5、克隆：clone**

var $ele2=$(".c1").clone();  //将c1赋值一份
          $(".c1").after($ele2);  //将克隆的内容添加到c1后面

**6、创建jQuery变量**

var $ele=$("<h1></h1>");  //用jQuery创建一个名为$ele的变量，它是一个<h1>标签
            $ele.html("新加内容");  //设置文本内容
            $ele.css("color","red");  //改变样式

**7、测试代码**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <div class="c1">
        <p>第一个P标签</p>
    </div>
    
    <button>点我</button>
    
    <script src="jquery-3.4.1.js"></script>
    <script>
        $("button").click(function(){   //jquery中的事件都少了一个on
    //内部插入：append，prepend添加标签；appendTo，prependTo添加到标签
            //$(".c1").append("<h1>新加内容</h1>"); //直接添加文本内容
    
            var $ele=$("<h1></h1>");  //用jQuery创建一个名为$ele的变量，它是一个<h1>标签
            $ele.html("新加内容");  //设置文本内容
            $ele.css("color","red");  //改变样式
    
            // $(".c1").append($ele); //向下累加，在名为c1的div标签中添加变量$ele
            // $ele.appendTo(".c1"); //向下累加，将变量$ele添加到c1的标签里
            //
            // $(".c1").prepend($ele); //向上累加，向名为c1的div标签里加$ele变量
            // $ele.prependTo(".c1"); //向上累加，将变量$ele添加到c1的标签里
    
    //外部插入：after，before添加，insertAfter，insertBefore添加到
    // $(".c1").after($ele); //在其后面添加内容
    // $(".c1").before($ele); //在其前面添加内容
    // $ele.insertAfter(".c1"); //将$ele添加到c1的后面
    // $ele.insertBefore(".c1"); 将$ele添加到c1的前面
    
    //替换：replaceWith
            $("p").replaceWith($ele);  //用$ele替换p标签
    
    //删除与清空：remove，empty
            $(".c1").empty();  //将c1的内容清空（只是内容没了）
            $(".c1").remove();  //将c1的内容删除（整个标签都没了）
    
    //克隆：clone
          var $ele2=$(".c1").clone();  //将c1赋值一份
          $(".c1").after($ele2);  //将克隆的内容添加到c1后面
        })
        
    </script>
    </body>
    </html>

[JavaScript_jQuery_jQuery]: https://blog.csdn.net/Viewinfinitely/article/details/106144763