• 【jQuery】jQuery操作之如何查找元素_02

    目录

    ❣️ 闲话：万字总结，倾情奉献

    一. 什么是jQuery

    二. 如何使用jQuery

    三. jQuery原理

    四. 按选择器查找

    1. jQuery支持CSS选择器查找元素

    2. 基本过滤选择器

    3. 内容过滤选择器:

    4. 可见性过滤选择器

    5. 表单元素过滤选择器

    五. 按节点间关系查找

    1. DOM中: 2大类关系，6个属性

    2. jQuery中: 2大类关系，8个函数

    ❣️ 总结：jQuery简化版函数3大特点

    ❣️ 总结：$()共有4种

    ❣️ 总结：知识点提炼

    【前文回顾】👉  jQuery概述及jQuery的原理_01

    ❣️ 闲话：万字总结，倾情奉献

    本文对jQuery中常用的元素查找方法进行了全面详细的总结和介绍，过万字的梳理，倾情奉献给大家，需要的朋友可以参考收藏，并订阅我的jQuery专栏，后续会持续更新！

    一. 什么是jQuery

    二. 如何使用jQuery

    三. jQuery原理

    四. 按选择器查找

    1. jQuery支持CSS选择器查找元素

    jQuery中支持使用CSS选择器查找元素。并且扩展了一些css没有，但是jquery中独有的新选择器。

    2. 基本过滤选择器

             (1). 回顾子元素过滤选择器: (css中的)

              a. 什么是: 根据元素在其父元素内的相对下标位置来选择子元素。

              b. 包括：

                      1). :first-child  : 选择作为其所在的父元素下的第一个孩子的子元素。

                      2). :last-child  : 选择作为其所在的父元素下的最后一个孩子的子元素。

                      3). :nth-child(i)  : 选择作为其所在的父元素下的第i个孩子的子元素。i从1开始！

                      4). :only-child  : 选择作为其所在的父元素下的唯一一个子元素的元素。

    ❗ 关于子元素过滤选择器的补充说明
     

    由于可能有多个父元素，所以1). 2). 3).4)都可能有多个first-child、last-child、nth-child(i)、:only-child

             c. 示例:使用子元素过滤选择并修改指定元素:

             5_child filter.html

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.  <meta charset="utf-8" />
    5.  <title></title>
    6. </head>
    7. <body>
    8.   <h3>子元素过滤选择器.</h3>
    9.   <ul>
    10.     <li>child1-basic0</li>
    11.     <li>child2-basic1</li>
    12.     <li>child3-basic2</li>
    13.   </ul>
    14.   <ul>
    15.     <li>child1-basic3</li>
    16.     <li>child2-basic4</li>
    17.     <li>child3-basic5</li>
    18.   </ul>
    19.   <ul>
    20.     <li>child1-basic6</li>
    21.   </ul>
    22.   <script src="js/jquery-1.11.3.js"></script>
    23.   <script>
    24.     //查找每个ul中第一个li
    25.     $("ul>li:first-child")
    26.     .css("border","2px solid red");
    27.     //相当于.style.border="2px solid red";
    28.     //查找每个ul中最后一个li
    29.     $("ul>li:last-child")
    30.     .css("color","green");
    31.     //查找每个ul中处于偶数位置的
    32.     $("ul>li:nth-child(2n)")
    33.     .css("box-shadow","0 0 5px blue")
    34.     //查找每个ul中第2个li
    35.     $("ul>li:nth-child(2)")
    36.     .css("background-color","yellow")
    37.     //查找作为ul下唯一子元素的li
    38.     $("ul>li:only-child")
    39.     .css("font-size","32px")
    40.   </script>
    41. </body>
    42. </html>

    运行结果：

             (2). 基本过滤选择器: （jq新增，css中没有）

             a. 什么是: 先将所有符合条件的元素集中保存在一个大的集合中，统一编号！然后，再按照元素在集合中的大排名，选择元素！

              b. 包括：

                      1). :first  选择所有符合要求的元素中第一个元素

                      2). :last  选择所有符合要求的元素中最后一个元素

                      3). :even  选择所有符合要求的元素中下标位置为偶数的元素

                      4). :odd  选择所有符合要求的元素中下标位置为奇数的元素

                      5). :eq(i)  eq是equal(等于)的简写。选择所有符合要求的元素中下标等于i位置的元素

                      6). :gt(i)  gt是greater than(大于)的简写。选择所有符合要求的元素中下标>i位置的所有元素

                      7). :lt(i)  lt是less than(小于)的缩写。选择所有符合要求的元素中下标<i位置的所有元素

             c. 强调:

                      1). 因为jq中新增的选择器，底层是用js程序模拟的。所以，jq新增的选择器的下标都从0开始！

                      2). :even虽然表示偶数位置的意思，但是，因为下标从0开始，实际选择的是正常人眼里的奇数位置的元素; :odd虽然表示奇数位置的意思，但是因为下标从0开始，实际选择的是正常人眼里的偶数位置的元素

             d. 示例:使用基本过滤选择并修改元素

             6_basic filter.html

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="utf-8" />
    5.   <title></title>
    6. </head>
    7. <body>
    8.   <h3>基本过滤选择器.</h3>
    9.   <ul>
    10.     <li>child1-basic0</li>
    11.     <li>child2-basic1</li>
    12.     <li>child3-basic2</li>
    13.   </ul>
    14.   <ul>
    15.     <li>child1-basic3</li>
    16.     <li>child2-basic4</li>
    17.     <li>child3-basic5</li>
    18.   </ul>
    19.   <ul>
    20.     <li>child1-basic6</li>
    21.   </ul>
    22.   <script src="js/jquery-1.11.3.js"></script>
    23.   <script>
    24.     //查找第一个li
    25.     $("ul>li:first").css("border", "2px solid red")
    26.     //查找最后一个li
    27.     $("ul>li:last").css("color", "green");
    28.     //查找处于偶数(用户视角)位置的li
    29.     $("ul>li:odd").css("box-shadow", "0 0 5px blue");
    30.     //查找第2个(用户视角)li
    31.     $("ul>li:eq(1)").css("background-color", "yellow");
    32.   </script>
    33. </body>
    34. </html>

     运行结果：

            (3). 示例: 按钮组效果:

             7_basic filter2.html

    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. 	<meta charset="utf-8" />
    6. 	<title>...</title>
    7. 	<style>
    8. 		ul{
    9. 			list-style:none
    10. 		}
    11. 		ul>li{
    12. 			float:left;
    13. 			border:1px solid #aaa;
    14. 			padding:5px 10px;
    15. 		}
    16. 		/*用纯css实现按钮组效果*/
    17. 		/*第一个li左上，左下变圆角*/
    18. 		/* ul>li:first-child{
    19. 			border-radius:5px 0 0 5px
    20. 		} */
    21. 		/*最后一个li右上, 右下变圆角*/
    22. 		/* ul>li:last-child{
    23. 			border-radius:0 5px 5px 0
    24. 		} */
    25. 		/*将第一li之后所有兄弟去掉左边框*/
    26. 		/* ul>li~li{
    27. 			border-left:0
    28. 		} */
    29.  
    30. 	</style>
    31. 	<script src="js/jquery-1.11.3.js"></script>
    32. </head>
    33. <body>
    34. 	<h1>实现按钮组效果</h1>
    35. 	<ul>
    36. 		<li>1</li>
    37. 		<li>2</li>
    38. 		<li>3</li>
    39. 		<li>4</li>
    40. 	</ul>
    41. 	<script>
    42. 		/*用js实现按钮组效果*/
    43. 		/*第一个li左上，左下变圆角*/
    44. 		$("ul>li:first").css("border-radius","5px 0 0 5px");
    45. 		/*最后一个li右上, 右下变圆角*/
    46. 		$("ul>li:last").css("border-radius","0 5px 5px 0");
    47. 		/*将第一li之后所有兄弟去掉左边框*/
    48. 		$("ul>li:gt(0)").css("border-left",0)
    49. 	</script>
    50. </body>
    51. </html>

    运行结果：

            (4). 示例: 实现表格隔行变色效果：

             7_basic filter3.html

    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <meta charset="utf-8" />
    5.     <title>...</title>
    6.     <style>
    7.       table {
    8.         width: 400px;
    9.         border-collapse: collapse;
    10.         text-align: center;
    11.       }
    12.       table > thead {
    13.         border-bottom: 3px solid #aaa;
    14.       }
    15.       /*表格隔行变色效果*/
    16.       /*tbody中第一行之后的所有兄弟行加上边框*/
    17.       /* tbody>tr~tr{
    18. 			border-top:1px solid gray
    19. 		} */
    20.       /*偶数行变色*/
    21.       /* tbody>tr:nth-child(2n){
    22. 			background-color:lightBlue;
    23. 		} */
    24.     </style>
    25.     <script src="js/jquery-1.11.3.js"></script>
    26.   </head>
    27.  
    28.   <body>
    29.     <h1>实现表格隔行变色效果</h1>
    30.     <!--table>(thead>tr>th*4)+(tbody>tr*4>td*4)-->
    31.     <table>
    32.       <thead>
    33.         <tr>
    34.           <th>#</th>
    35.           <th>First Name</th>
    36.           <th>Last Name</th>
    37.           <th>User Name</th>
    38.         </tr>
    39.       </thead>
    40.       <tbody>
    41.         <tr>
    42.           <td>1</td>
    43.           <td>亮</td>
    44.           <td>成</td>
    45.           <td>@liang</td>
    46.         </tr>
    47.         <tr>
    48.           <td>2</td>
    49.           <td>然</td>
    50.           <td>李</td>
    51.           <td>@ran</td>
    52.         </tr>
    53.         <tr>
    54.           <td>3</td>
    55.           <td>东</td>
    56.           <td>张</td>
    57.           <td>@dong</td>
    58.         </tr>
    59.         <tr>
    60.           <td>4</td>
    61.           <td>华</td>
    62.           <td>吴</td>
    63.           <td>@hua</td>
    64.         </tr>
    65.       </tbody>
    66.     </table>
    67.     <script>
    68.       /*表格隔行变色效果*/
    69.       /*tbody中第一行之后的所有兄弟行加上边框*/
    70.       $("tbody>tr:gt(0)").css("border-top", "1px solid gray");
    71.       /*偶数行变色*/
    72.       $("tbody>tr:odd").css("background-color", "lightBlue");
    73.     </script>
    74.   </body>
    75. </html>

    运行结果:

            (5). 总结: 如果今后一个效果既可以用css来实现，又可以用js来实现，首选css。

             a. css的效率远比js高的多！

             b. css的一致性很好！现在写好的css，将来到框架中，复制粘贴过去，直接可用！几乎不用修改！而现在写的js代码，将来到了框架中，几乎都要重新编写！

    3. 内容过滤选择器

            🆕 css中没有，jq新增的

             (1). 什么是: 根据元素的内容中的关键词或子元素特征来选择元素。

             (2). 包括:

             a.  :contains(文本)  选择元素内容中包含指定文本的元素

             b.  :has(选择器)  选择包含符合要求的子元素的父元素

             c.  :parent   选择内容非空的元素

             d.  :empty   选择内容为空的元素

             (3). 示例: 使用内容过滤选择器选择元素并修改元素

             10_content filter.html

    1. <!DOCTYPE html>
    2. <html>
    3.   <head lang="en">
    4.     <meta charset="UTF-8" />
    5.     <title></title>
    6.     <link rel="stylesheet" href="css/bootstrap.css" />
    7.     <style></style>
    8.   </head>
    9.   <body>
    10.     <div class="container">
    11.       <h1>jQuery中的选择器——内容过滤选择器</h1>
    12.  
    13.       <button>提交订单</button>
    14.       <button>Submit注册信息</button>
    15.       <button>马上提交</button>
    16.       <button>清空重填</button>
    17.  
    18.       <hr />
    19.       <div class="alert" id="alert1"></div>
    20.       <div class="alert" id="alert2">
    21.         <span class="close">×</span>
    22.       </div>
    23.     </div>
    24.     <script src="js/jquery-1.11.3.js"></script>
    25.     <script>
    26.       //选择包含"提交"二字的按钮，变为绿色按钮
    27.       $("button:contains(提交)").css("background-color", "lightGreen");
    28.       //选中包含.close按钮的.alert元素，让它们变为红色的警告框
    29.       $(".alert:has(.close)").css("background-color", "pink");
    30.       //选中不包含.close按钮的.alert元素，让它们变为绿色的警告框
    31.       $(".alert:not(:has(.close))").css("background-color", "lightGreen");
    32.       //选择内容为空的.alert元素，添加红色阴影
    33.       $(".alert:empty").css("box-shadow", "0 0 5px red");
    34.       //选择内容不为空的.alert元素，添加绿色阴影
    35.       $(".alert:parent").css("box-shadow", "0 0 5px green");
    36.     </script>
    37.   </body>
    38. </html>

    运行结果:

    4. 可见性过滤选择器

             (1). 什么是: 根据元素是否隐藏来选择隐藏的元素

             (2). 包括:

             a. :visible  专门选择可见的元素

             b. :hidden  专门选择不可见的元素

             (3). 坑: HTML+CSS中要隐藏一个元素有四种办法:

             a. display:none

             b. opacity:0

             c. visibility:hidden

             d. <input type="hidden">

             但是，:hidden只能选择其中2种: display:none和<input type="hidden">

            12_visibility filter

    1. <!DOCTYPE html>
    2. <html>
    3. <head lang="en">
    4.   <meta charset="UTF-8">
    5.   <title></title>
    6.   <link rel="stylesheet" href="css/bootstrap.css"/>
    7.   <style>
    8.   </style>
    9. </head>
    10. <body>
    11. <div class="container">
    12.   <h1>可见性选择器</h1>
    13.  
    14.   <div id="d1" style="display: none">lorem</div>
    15.   <div id="d2" style="visibility: hidden">lorem</div>
    16.   <div id="d3" style="opacity: 0">lorem</div>
    17.   <input id="d4" type="hidden" name="aa" value="bb"/>
    18.  
    19. </div>
    20. <script src="js/jquery-1.11.3.js"></script>
    21. <script>
    22.   //获得class为container的父元素下的隐藏的元素
    23.   // :hidden只能选择其中2种: display:none和<input type="hidden">
    24.   // 所以，f12 控制台里只有2个    0: div#d1 1: input#d4
    25.   console.log( $(".container>:hidden") )
    26. </script>
    27. </body>
    28. </html>

    运行结果：

    👉 :hidden只能选择获取其中2种: display:none和<input type="hidden">

    👉 从下图可见， 1️⃣display:none和2️⃣<input type="hidden">让元素隐藏且不占页面位置，而3️⃣opacity:0设置元素全透明隐藏、4️⃣visibility: hidden设置元素隐藏，这2个元素属性虽然可让元素隐藏，但仍然在页面占位置

    5. 表单元素过滤选择器

             (1). :input  专门选择一个表单中的所有表单元素(input, select, textarea, button)

                      vs input  是css中的普通的元素选择器，只能选择input元素

             (2). 问题: 仅仅是input元素就有很多种！如何精确的选择某一类input元素呢？

             (3). 解决: jq中为每种input的type属性值都提供了一个专门的选择器

             a. :text  专门选择普通文本框<input type="text">

             b. :radio 专门选择所有单选按钮<input type="radio">

             c. :button 专门选择所有input按钮<input type="button">

             ... HTML中<input>元素有几种type值，jq就新增了几种对应选择器 ...

             (4). 示例: 使用表单元素过滤选择器实现点同意才启用元素效果

             13_form state selector.html

    1. <!DOCTYPE html>
    2. <html>
    3.  <head>
    4.   <title>.....</title>
    5.   <meta charset="utf-8"/>
    6.   <style>
    7.   </style>
    8.  </head>
    9.  <body>
    10. 	<form>
    11. 		用户名:<input disabled></br><span>*</span>
    12. 		密码:<input type="password" disabled></br><span>*</span>
    13. 		<input type="checkbox">我同意本站的使用条款<br>
    14. 		<input type="submit" value="提交注册信息" disabled/>
    15. 	</form>
    16. 	<script src="js/jquery-1.11.3.js"></script>
    17. 	<script>
    18. 		//DOM 4步
    19. 		//1. 查找触发事件的元素
    20. 		//本例中：用户点type=checkbox的复选框触发变化
    21. 		var $chb=$(":checkbox")
    22. 		//2. 绑定事件处理函数
    23. 		$chb.click(function(){
    24. 			//3. 查找要修改的元素
    25. 			//本例中: 选择除了:checkbox之外的其余表单元素
    26. 			var $others=$(":input:not(:checkbox)")
    27. 			//4. 修改元素
    28. 			//如果当前checkbox被选中时
    29. 			if(this.checked==true){
    30. 				//其它元素启用: disabled=false
    31. 				//jq中修改标准属性，都可用.prop()代替DOM中的.操作！
    32. 				$others.prop("disabled",false);
    33. 			}else{//否则如果当前checkbox未选中
    34. 				//其它元素禁用: disabled=true
    35. 				$others.prop("disabled",true);
    36. 			}
    37.  
    38. 			//结论: 其它元素的disabled属性和当前checkbox的checked属性是相反的！
    39. 			//$others.prop("disabled",!this.checked)
    40. 		})
    41. 	</script>
    42.  </body>
    43. </html>

    运行结果:

    五. 按节点间关系查找

    1. DOM中: 2大类关系，6个属性

             (1). 父子关系

             a. 元素.parentElement

             b. 元素.children

             c. 元素.firstElementChild

             d. 元素.lastElementChild

             (2). 兄弟关系

             a. 元素.previousElementSibling

             b. 元素.nextElementSibling

    2. jQuery中: 2大类关系，8个函数

             (1). 父子关系: 3个函数

             a. 获得一个元素的父元素: $元素.parent()

             b. 获得一个元素的所有直接子元素:

                      1). $元素.children("选择器")

                      2). 增强版:

                      i. 加选择器，就只获得符合条件的子元素

                      ii. 不加选择器，默认获得所有直接子元素

               3). 因为children可以加筛选条件了，所以就不再有专门的firstElementChild和lastElementChild

                      i. 获得元素下第一个直接子元素

                      $元素.children(":first-child")

                      ii. 获得元素下最后一个直接子元素

                      $元素.children(":last-child")

                      4). 问题: children只能在直接子元素中查找符合条件的元素。无法在所有后代中查找！

             c. 新增了: 在当前元素所有后代中查找符合条件的元素。

                      $元素.find("选择器")

             (2). 兄弟关系: 5个函数

             a. 前一个兄弟: $元素.prev()

                      只能找前一个元素

             b. 后一个兄弟: $元素.next()

                      只能找后一个元素

             c. 之前所有兄弟: $元素.prevAll("选择器")

             d. 之后所有兄弟: $元素.nextAll("选择器")

             e. 选择除当前元素之外，其余所有兄弟:

                      $元素.siblings("选择器")

    补：$元素.first()

    想获得任意查找结果中第一个元素，即获取匹配元素集合中第一个元素。可用: .first()
    这个方法不接受任何参数。
     

    first() 方法返回被选元素的第一个元素。提示：如需返回最后一个元素，请使用 last() 方法。

    注意：first()、last()跟基本过滤选择器一样，都是先将所有符合条件的元素集中保存在一个大的集合中，统一编号！然后，再按照元素在集合中的大排名，选择元素！

    👉 更多参考资料：请移步jQuery官方关于 .first()  的介绍

    以下示例，可以看出：⏬

    first()跟:first实现的功能效果是一样的，2者等价，且都是先将所有符合条件的元素集中保存在一个大的集合中，统一编号！然后，再按照元素在集合中的大排名，选择元素！事例中，被选中的始终是li.item-1

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="utf-8" />
    5.     <title></title>
    6.     <style>
    7.       /* ul { list-style: none; } */
    8.     </style>
    9.   </head>
    10.   <body>
    11.     <ul class="level-1">
    12.       <li class="item-i">I</li>
    13.       <li class="item-ii">
    14.         II
    15.         <ul class="level-2">
    16.           不包括自己
    17.           <li class="item-a">A</li>
    18.           <li class="item-b">
    19.             B
    20.             <ul class="level-3">
    21.               <li class="item-1">1</li>
    22.               <li class="item-2">2</li>
    23.               <li class="item-3">3</li>
    24.             </ul>
    25.           </li>
    26.           <li class="item-c">C</li>
    27.         </ul>
    28.       </li>
    29.       <li class="item-iii">III</li>
    30.     </ul>
    31.     <script src="js/jquery-1.11.3.js"></script>
    32.     <script>
    33.       $('ul li').first().css('background-color','green');
    34.       // $('ul>li').first().css('background-color','red');
    35.       // $("ul li:first").css("background-color", "green");
    36.       // $("ul>li:first").css("background-color", "red");
    37.     </script>
    38.   </body>
    39. </html>

    运行结果：

    3. 示例: 使用节点间关系查找，选择指定的元素：

    6_traverse.html

    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <meta charset="utf-8" />
    5.     <title>...</title>
    6.     <script></script>
    7.   </head>
    8.  
    9.   <body>
    10.     <!--    ul.top>(li.parent>ul>li.child*3)*2 -->
    11.     <ul class="top">
    12.       <li class="parent1">
    13.         parent1
    14.         <ul>
    15.           <li class="child">child1</li>
    16.           <li class="child">child2</li>
    17.           <li class="child">child3</li>
    18.         </ul>
    19.       </li>
    20.       <li class="parent2">
    21.         parent2
    22.         <ul>
    23.           <li class="child">child1</li>
    24.           <li class="child">child2</li>
    25.           <li class="child">child3</li>
    26.         </ul>
    27.       </li>
    28.     </ul>
    29.     <script src="js/jquery-1.11.3.js"></script>
    30.     <script>
    31.       //修改class为top的ul的所有直接子元素
    32.       $("ul.top").children().css("border", "1px solid red");
    33.       //修改class为top的ul的所有后代li
    34.       $("ul.top").find("li").css("box-shadow", "0 0 5px green");
    35.       //为class为child的li绑定单击事件
    36.       $("ul.top li.child").click(function () {
    37.         //选择当前元素的下一个元素/前一个元素/之前所有/之后所有/除自己之外所有
    38.         $(this)
    39.           .siblings() //.nextAll()//.prevAll()//.prev()//.next()
    40.           .css("background-color", "yellow");
    41.       });
    42.     </script>
    43.   </body>
    44. </html>

    运行结果:

    4. 示例: 标签页

    7_tabs.html

    1. <!doctype html>
    2. <html lang="en">
    3.  <head>
    4.   <meta charset="UTF-8">
    5.   <style>
    6.     .tabs{ list-style:none; padding:0 }
    7.     .tabs a{
    8.       text-decoration:none;
    9. 			color:#000;
    10. 			padding:6px 12px;
    11. 			display:inline-block;
    12.     }
    13.     .tabs>li{
    14.       float:left;
    15.       border-bottom:1px solid #000;
    16.     }
    17.     .tabs>.active{
    18.       border:1px solid #000;
    19.       border-bottom:0;
    20.     }
    21.   </style>
    22.  </head>
    23.  <body>
    24. 		<h1>使用属性选择器实现标签页头的切换</h1>
    25. 		<ul class="tabs">
    26. 			<li class="active">
    27.         <a data-toggle="tab" href="#">十元套餐</a>
    28.       </li>
    29. 			<li>
    30.         <a data-toggle="tab" href="#">二十元套餐</a>
    31.       </li>
    32. 			<li>
    33.         <a data-toggle="tab" href="#">三十元套餐</a>
    34.       </li>
    35.     </ul>
    36.     <script src="js/jquery-1.11.3.js"></script>
    37.     <script>
    38.       //DOM 4步
    39.       //1. 查找触发事件的元素
    40.       //本例中: 查找data-toggle属性为tab的元素
    41.       //  CSS知识点：属性选择器
    42.       var $as=$("[data-toggle=tab]")
    43.       //2. 绑定事件处理函数
    44.       $as.click(function(){
    45.         //3. 查找要修改的元素
    46.         //4. 修改元素
    47.         //给当前a元素的爹li加class active
    48.         $(this).parent() //当前a的爹li
    49.         .addClass("active")
    50.         //return $(this).parent()
    51.         //再给当前元素的爹li的所有兄弟标签去掉class active
    52.         .siblings().removeClass("active");
    53.         //链式操作！⏬⏫
    54.        //绝大多数函数都会自动返回正在操作的.前的主语jq对象。如果后一句话所需的.前的主语，刚        
    55.       //好和前一句话返回的主语相同，则可以直接用.继续操作，不用把.前主语反复写2遍！——链式操作
    56.       })
    57.     </script>
    58.  </body>
    59. </html>

    运行结果:

    ❣️ 总结：jQuery简化版函数3大特点

    1. 自带for循环

    2. 一个函数两用

    3. 绝大多数函数都会自动返回正在操作的.前的主语jq对象。如果后一句话所需的.前的主语，刚好和前一句话返回的主语相同，则可以直接用.继续操作，不用把.前主语反复写2遍！——链式操作。👉 链式操作具体示例——参看按节点间关系查找之示例7_tabs.html⏫

    ❣️ 总结：$()共有4种

    1. $("选择器") 查找DOM元素，并包装进jQuery对象中

    2. $(DOM元素对象) 不用查找，直接将DOM元素包装进jQuery对象中

    3. $(`HTML片段`) 创建新元素

    4. $(function(){ ... }) 绑定DOMContentLoaded事件处理函数，在DOM内容加载后就自动提前执行！

    ❣️ 总结：知识点提炼

    1. 引入jQuery.js: 2种

    (1). 引入项目本地jquery.js文件:

    <script src="js/jquery-1.11.3.js">

    (2). 引入CDN网络中共享的jquery.js文件:

    <script src="官方提供的CDN上jquery.js文件地址">

    2. 创建jQuery类型子对象: 2种

    (1). 只有jQuery类型子对象才能使用jQuery家简化版函数。

    DOM家元素对象无权直接使用jQuery家简化版函数。

    所以只要使用jQuery家简化版函数，都要先创建jQuery家子对象，其中保存一个要操作的DOM元素对象。

    (2). 如何:2种:

             a. 查找DOM元素对象，并保存进新创建的jQuery对象中:

             var $jq子对象=$("选择器")

             b. 不查找，直接将DOM元素对象保存进新创建的jQuery对象中:

             var $jq子对象=$(DOM元素对象)

    3. 原理:

    (1). $=jQuery=new jQuery

    (2). jq子对象其实是一个类数组对象，可保存找到的多个DOM元素对象

    (3). 对jq子对象调用简化版函数，会被自动翻译为对应的原生DOM的方法和属性。

             所以jQuery中的所有简化版函数效果和DOM中原生方法和属性效果一样。

             jQuery中的this、e、e.target等，和DOM中的完全一样！

    4. jQuery简化版函数3大特点:

    (1). 自带for循环: 对整个jquery子对象调用一次简化版函数，等效于对jQuery子对象中保存的每个DOM元素对象分别调用一次对等的DOM原生方法或属性——不用自己写for循环

    (2). 一个函数两用: 调用函数时:

             a. 没给新值作为参数，默认执行获取旧值的操作

             b. 给了新值作为参数，自动切换为执行修改操作

    (3). 多数函数都会返回正在操作的.前的主语jq对象——链式操作。

    5. 查找元素: ⏬ 👇

    (1). jQuery支持用所以CSS3选择器查找

    (2). jQuery新增选择器: (css中不能用)

             a. 基本过滤: (下标从0开始)

             :first :last :eq(i) :lt(i) :gt(i) :even  :odd

             b. 内容过滤:

             :contains(文本) :has(选择器) :parent :empty

             c. 可见性过滤:

             :visible  :hidden(只能选择display:none和input type="hidden")

             d. 表单元素过滤:
             :input  :text  :password  :radio  :checkbox ... ...

    (3).用节点间关系查找: 2大类关系, 8个函数

          a. 父子关系：3个函数:

          $元素.parent()

          $元素.children("选择器")

          $元素.find("选择器")

          b. 兄弟关系：5个

          $元素.prev() 

          $元素.prevAll("选择器")

          $元素.next() 

          $元素.nextAll("选择器")

          $元素.siblings("选择器")

    ​​​

    如果这篇【文章】有帮助到你，希望可以给【青春木鱼】点个赞👍，创作不易，相比官方的陈述，我更喜欢用【通俗易懂】的文笔去讲解每一个知识点，如果有对【前端技术】感兴趣的小可爱，也欢迎关注❤️❤️❤️【青春木鱼】❤️❤️❤️，我将会给你带来巨大的【收获与惊喜】💕💕！ 

  • 相关阅读:
    PAT甲级打卡-1005-1010
    MySQL之数据库三大范式
    有关git commit --amend的用法及若干个问题
    （附源码）springboot 中小学餐饮配送系统 毕业设计645661
    java通用分页
    TSN新技术，让您的设备网络“更实时、更确定、更安全”
    6、集合之Collection、泛型
    Qlik Sense 内联加载详解（Load * Inline）
    消息转化器(解决由于后端给前端响应的格式中不能处理Long类型，因为js只会处理前16位，这样会导致后面的精度丢失)
    14. v-model 是如何实现的, 语法糖实际是什么？
  • 原文地址：https://blog.csdn.net/sunyctf/article/details/125180618