python网站创建014：jQuery的引入、选择器和筛选器
1. 下载jQuery之后， 那如何使用呢？假如我想操作一个div标签， 给这个标签补充文字
<!DOCTYPE html> <html> <head> <title>初识：JavaScript</title> <meta charset="UTF-8"> </head> <body> <!--定义一个无文本的div标签--> <div id = "info"></div> <!--将jQuery引入--> <script src="../file/jquery-3.7.1.min.js"></script> <script> // $("#info")：意思是找到id为“info”的标签，.text的意思是给这个标签插入文本 $("#info").text("插入的数据"); </script> </body> </html>
效果：
2、 jQuery的选择器：使用jQuery操作标签时，首先第一部得找到要操作的标签，如何寻找自己想要的标签？ 就通过选择器来寻找
id选择器：$("#info")
<body> <div id = "info"></div> <script src="../file/jquery-3.7.1.min.js"></script> <script> $("#info").text("插入的数据"); </script> </body>
class选择器：$(".info")
<body> <div class="info"></div> <div class="info"></div> <script src="../file/jquery-3.7.1.min.js"></script> <script> $(".info").text("插入的数据"); </script> </body>
标签选择器：$("h1")
<body> <h1 class="info"></h1> <h2 class="info"></h2> <script src="../file/jquery-3.7.1.min.js"></script> <script> $("h1").text("插入的数据"); </script> </body>
多选择器，也就是以不同条件选择多个标签：$("h1,.info2,#v1")
<body> <h1 class="info"></h1> <h2 class="info2"></h2> <div id ='v1'></div> <script src="../file/jquery-3.7.1.min.js"></script> <script> $("h1,.info2,#v1").text("插入的数据"); </script> </body>
层级选择器，空格代表下一层级：$("#v1 h1.info2")
<body> <div id ='v1'> <h1 class="info"></h1> <h1 class="info2"></h1> </div> <script src="../file/jquery-3.7.1.min.js"></script> <script> $("#v1 h1.info2").text("插入的数据"); </script> </body>
3、 jQuery的筛选器：有了选择器之后为啥还有筛选器呢？在实际工作当中，当使用（选择器）之后可能要需要再做一层筛选，这时就用到了筛选器， 其实（筛选器）更像（关系选择器），它是使用（子、兄、父、子孙...）关系来进行筛选标签的
父级：parent
<body> <div id ='v1'> <h1 id="info"></h1> </div> <script src="../file/jquery-3.7.1.min.js"></script> <script> // .info 找到h1标签，parent找到它的父级标签，最后找到div标签 $(".info").parent(); </script> </body>
孩子：children
<body> <div id ='v1'> <h1 id="info1"></h1> <h2 id="info2"></h2> </div> <script src="../file/jquery-3.7.1.min.js"></script> <script> // .v1 找到div标签，children找到它的孩子标签，最后找到h1和h2标签 $(".v1").children(); </script> </body>
兄弟：
上面的兄弟：prev
下面的兄弟：next
找与自己同层级上面和下面所有兄弟，除自己外：siblings
<body> <div id ='v1'> <h1 id="info1"></h1> <h2 id="info2"></h2> <h3 id="info3"></h3> <h4 id="info4"></h4> </div> <script src="../file/jquery-3.7.1.min.js"></script> <script> // .info2 找到h2标签，prev上面兄弟h1标签 $(".info2").prev(); // .info2 找到h2标签，prev下面兄弟h3标签 $(".info2").next(); // .info2 找到h2标签，siblings与自己同级的所有兄弟，找到h1、h3、h4标签 $(".info2").siblings(); </script> </body>
子孙：find
<body> <div id="v1"> <div id ='v2'> <h1 id="info1"></h1> <h1 id="info2"></h1> <h1 id="info3"></h1> <h1 id="info4"></h1> </div> </div> <script src="../file/jquery-3.7.1.min.js"></script> <script> // 找到所有h1标签 $(".v1").find('h1'); // 找到id=info1的h1标签 $(".v1").find('#info1'); </script> </body>
补充1：在（筛选器）里面是可以加条件的， 如下：在找其他兄弟过程中， 加上#test，意思是找其他兄弟id等于test的兄弟
$(".info2").siblings(“#test”);
补充2：jQuery支持链式编程，也就是不断地在后面点下去
$(".v1").find('#info1').find('#info2')...;
