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

已于 2022-10-11 23:34:21 修改
阅读量1.9k 收藏
点赞数 1
分类专栏： # ⭐️ JQuery教程 文章标签： jquery javascript 前端框架 DOM jQuery函数库
于 2022-07-04 19:29:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunyctf/article/details/125180618
版权

目录

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

一. 什么是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

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title></title>
</head>
<body>
  <h3>子元素过滤选择器.</h3>
  <ul>
    <li>child1-basic0</li>
    <li>child2-basic1</li>
    <li>child3-basic2</li>
  </ul>
  <ul>
    <li>child1-basic3</li>
    <li>child2-basic4</li>
    <li>child3-basic5</li>
  </ul>
  <ul>
    <li>child1-basic6</li>
  </ul>
  <script src="js/jquery-1.11.3.js"></script>
  <script>
    //查找每个ul中第一个li
    $("ul>li:first-child")
    .css("border","2px solid red");
    //相当于.style.border="2px solid red";
    //查找每个ul中最后一个li
    $("ul>li:last-child")
    .css("color","green");
    //查找每个ul中处于偶数位置的
    $("ul>li:nth-child(2n)")
    .css("box-shadow","0 0 5px blue")
    //查找每个ul中第2个li
    $("ul>li:nth-child(2)")
    .css("background-color","yellow")
    //查找作为ul下唯一子元素的li
    $("ul>li:only-child")
    .css("font-size","32px")
  </script>
</body>
</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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <h3>基本过滤选择器.</h3>
  <ul>
    <li>child1-basic0</li>
    <li>child2-basic1</li>
    <li>child3-basic2</li>
  </ul>
  <ul>
    <li>child1-basic3</li>
    <li>child2-basic4</li>
    <li>child3-basic5</li>
  </ul>
  <ul>
    <li>child1-basic6</li>
  </ul>
  <script src="js/jquery-1.11.3.js"></script>
  <script>
    //查找第一个li
    $("ul>li:first").css("border", "2px solid red")
    //查找最后一个li
    $("ul>li:last").css("color", "green");
    //查找处于偶数(用户视角)位置的li
    $("ul>li:odd").css("box-shadow", "0 0 5px blue");
    //查找第2个(用户视角)li
    $("ul>li:eq(1)").css("background-color", "yellow");
  </script>
</body>
</html>

 运行结果：

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

         7_basic filter2.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>...</title>
	<style>
		ul{
			list-style:none
		}
		ul>li{
			float:left;
			border:1px solid #aaa;
			padding:5px 10px;
		}
		/*用纯css实现按钮组效果*/
		/*第一个li左上，左下变圆角*/
		/* ul>li:first-child{
			border-radius:5px 0 0 5px
		} */
		/*最后一个li右上, 右下变圆角*/
		/* ul>li:last-child{
			border-radius:0 5px 5px 0
		} */
		/*将第一li之后所有兄弟去掉左边框*/
		/* ul>li~li{
			border-left:0
		} */

	</style>
	<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
	<h1>实现按钮组效果</h1>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<script>
		/*用js实现按钮组效果*/
		/*第一个li左上，左下变圆角*/
		$("ul>li:first").css("border-radius","5px 0 0 5px");
		/*最后一个li右上, 右下变圆角*/
		$("ul>li:last").css("border-radius","0 5px 5px 0");
		/*将第一li之后所有兄弟去掉左边框*/
		$("ul>li:gt(0)").css("border-left",0)
	</script>
</body>
</html>

运行结果：

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

         7_basic filter3.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>...</title>
    <style>
      table {
        width: 400px;
        border-collapse: collapse;
        text-align: center;
      }
      table > thead {
        border-bottom: 3px solid #aaa;
      }
      /*表格隔行变色效果*/
      /*tbody中第一行之后的所有兄弟行加上边框*/
      /* tbody>tr~tr{
			border-top:1px solid gray
		} */
      /*偶数行变色*/
      /* tbody>tr:nth-child(2n){
			background-color:lightBlue;
		} */
    </style>
    <script src="js/jquery-1.11.3.js"></script>
  </head>

  <body>
    <h1>实现表格隔行变色效果</h1>
    <!--table>(thead>tr>th*4)+(tbody>tr*4>td*4)-->
    <table>
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>User Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>亮</td>
          <td>成</td>
          <td>@liang</td>
        </tr>
        <tr>
          <td>2</td>
          <td>然</td>
          <td>李</td>
          <td>@ran</td>
        </tr>
        <tr>
          <td>3</td>
          <td>东</td>
          <td>张</td>
          <td>@dong</td>
        </tr>
        <tr>
          <td>4</td>
          <td>华</td>
          <td>吴</td>
          <td>@hua</td>
        </tr>
      </tbody>
    </table>
    <script>
      /*表格隔行变色效果*/
      /*tbody中第一行之后的所有兄弟行加上边框*/
      $("tbody>tr:gt(0)").css("border-top", "1px solid gray");
      /*偶数行变色*/
      $("tbody>tr:odd").css("background-color", "lightBlue");
    </script>
  </body>
</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

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <style></style>
  </head>
  <body>
    <div class="container">
      <h1>jQuery中的选择器——内容过滤选择器</h1>

      <button>提交订单</button>
      <button>Submit注册信息</button>
      <button>马上提交</button>
      <button>清空重填</button>

      <hr />
      <div class="alert" id="alert1"></div>
      <div class="alert" id="alert2">
        <span class="close">×</span>
      </div>
    </div>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
      //选择包含"提交"二字的按钮，变为绿色按钮
      $("button:contains(提交)").css("background-color", "lightGreen");
      //选中包含.close按钮的.alert元素，让它们变为红色的警告框
      $(".alert:has(.close)").css("background-color", "pink");
      //选中不包含.close按钮的.alert元素，让它们变为绿色的警告框
      $(".alert:not(:has(.close))").css("background-color", "lightGreen");
      //选择内容为空的.alert元素，添加红色阴影
      $(".alert:empty").css("box-shadow", "0 0 5px red");
      //选择内容不为空的.alert元素，添加绿色阴影
      $(".alert:parent").css("box-shadow", "0 0 5px green");
    </script>
  </body>
</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

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="css/bootstrap.css"/>
  <style>
  </style>
</head>
<body>
<div class="container">
  <h1>可见性选择器</h1>

  <div id="d1" style="display: none">lorem</div>
  <div id="d2" style="visibility: hidden">lorem</div>
  <div id="d3" style="opacity: 0">lorem</div>
  <input id="d4" type="hidden" name="aa" value="bb"/>

</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
  //获得class为container的父元素下的隐藏的元素
  // :hidden只能选择其中2种: display:none和<input type="hidden">
  // 所以，f12 控制台里只有2个    0: div#d1 1: input#d4
  console.log( $(".container>:hidden") )
</script>
</body>
</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

<!DOCTYPE html>
<html>
 <head>
  <title>.....</title>
  <meta charset="utf-8"/>
  <style>
  </style>
 </head>
 <body>
	<form>
		用户名:<input disabled></br><span>*</span>
		密码:<input type="password" disabled></br><span>*</span>
		<input type="checkbox">我同意本站的使用条款<br>
		<input type="submit" value="提交注册信息" disabled/>
	</form>
	<script src="js/jquery-1.11.3.js"></script>
	<script>
		//DOM 4步
		//1. 查找触发事件的元素
		//本例中：用户点type=checkbox的复选框触发变化
		var $chb=$(":checkbox")
		//2. 绑定事件处理函数
		$chb.click(function(){
			//3. 查找要修改的元素
			//本例中: 选择除了:checkbox之外的其余表单元素
			var $others=$(":input:not(:checkbox)")
			//4. 修改元素
			//如果当前checkbox被选中时
			if(this.checked==true){
				//其它元素启用: disabled=false
				//jq中修改标准属性，都可用.prop()代替DOM中的.操作！
				$others.prop("disabled",false);
			}else{//否则如果当前checkbox未选中
				//其它元素禁用: disabled=true
				$others.prop("disabled",true);
			}

			//结论: 其它元素的disabled属性和当前checkbox的checked属性是相反的！
			//$others.prop("disabled",!this.checked)
		})
	</script>
 </body>
</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("选择器")

                  find() 方法示例

<!DOCTYPE html>
<html>
  <head>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>
    <p><span>Hello</span>, how are you?</p>
    <p>Me? I'm <span>good</span>.</p>
    <script>
      $("p").find("span").css("color", "red");
    </script>
  </body>
</html>

         (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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      /* ul { list-style: none; } */
    </style>
  </head>
  <body>
    <ul class="level-1">
      <li class="item-i">I</li>
      <li class="item-ii">
        II
        <ul class="level-2">
          不包括自己
          <li class="item-a">A</li>
          <li class="item-b">
            B
            <ul class="level-3">
              <li class="item-1">1</li>
              <li class="item-2">2</li>
              <li class="item-3">3</li>
            </ul>
          </li>
          <li class="item-c">C</li>
        </ul>
      </li>
      <li class="item-iii">III</li>
    </ul>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
      $('ul li').first().css('background-color','green');
      // $('ul>li').first().css('background-color','red');
      // $("ul li:first").css("background-color", "green");
      // $("ul>li:first").css("background-color", "red");
    </script>
  </body>
</html>

运行结果：

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

6_traverse.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>...</title>
    <script></script>
  </head>

  <body>
    <!--    ul.top>(li.parent>ul>li.child*3)*2 -->
    <ul class="top">
      <li class="parent1">
        parent1
        <ul>
          <li class="child">child1</li>
          <li class="child">child2</li>
          <li class="child">child3</li>
        </ul>
      </li>
      <li class="parent2">
        parent2
        <ul>
          <li class="child">child1</li>
          <li class="child">child2</li>
          <li class="child">child3</li>
        </ul>
      </li>
    </ul>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
      //修改class为top的ul的所有直接子元素
      $("ul.top").children().css("border", "1px solid red");
      //修改class为top的ul的所有后代li
      $("ul.top").find("li").css("box-shadow", "0 0 5px green");
      //为class为child的li绑定单击事件
      $("ul.top li.child").click(function () {
        //选择当前元素的下一个元素/前一个元素/之前所有/之后所有/除自己之外所有
        $(this)
          .siblings() //.nextAll()//.prevAll()//.prev()//.next()
          .css("background-color", "yellow");
      });
    </script>
  </body>
</html>

运行结果:

4. 示例: 标签页

7_tabs.html

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <style>
    .tabs{ list-style:none; padding:0 }
    .tabs a{
      text-decoration:none;
			color:#000;
			padding:6px 12px;
			display:inline-block;
    }
    .tabs>li{
      float:left;
      border-bottom:1px solid #000;
    }
    .tabs>.active{
      border:1px solid #000;
      border-bottom:0;
    }
  </style>
 </head>
 <body>
		<h1>使用属性选择器实现标签页头的切换</h1>
		<ul class="tabs">
			<li class="active">
        <a data-toggle="tab" href="#">十元套餐</a>
      </li>
			<li>
        <a data-toggle="tab" href="#">二十元套餐</a>
      </li>
			<li>
        <a data-toggle="tab" href="#">三十元套餐</a>
      </li>
    </ul>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
      //DOM 4步
      //1. 查找触发事件的元素
      //本例中: 查找data-toggle属性为tab的元素
      //  CSS知识点：属性选择器
      var $as=$("[data-toggle=tab]")
      //2. 绑定事件处理函数
      $as.click(function(){
        //3. 查找要修改的元素
        //4. 修改元素
        //给当前a元素的爹li加class active
        $(this).parent() //当前a的爹li
        .addClass("active")
        //return $(this).parent()
        //再给当前元素的爹li的所有兄弟标签去掉class active
        .siblings().removeClass("active");
        //链式操作！⏬⏫
       //绝大多数函数都会自动返回正在操作的.前的主语jq对象。如果后一句话所需的.前的主语，刚        
      //好和前一句话返回的主语相同，则可以直接用.继续操作，不用把.前主语反复写2遍！——链式操作
      })
    </script>
 </body>
</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("选择器")

🆕【后文传送门】👉  jQuery操作之如何修改元素_03

​​​

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

儒雅的烤地瓜
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
通过jQuery实现淘宝搜索提示功能
weixin_45728088的博客
06-25 858
通过jQuery封装的ajax里的jsonp来发起请求获得数据，再把数据渲染出来。加了防抖和数据缓存，提高运行效率。
jQuery 查找元素操作实例小结
10-16
主要介绍了jQuery 查找元素操作,结合实例形式总结分析了jQuery针对页面元素的各种常见查找操作实现方法,需要的朋友可以参考下
【JQuery】查找元素
liuyanjinbaobao的博客
11-17 1136
JQuery查找元素
JQuery获取元素的N种方法
Java仗剑走天涯
06-12 1万+
一.根据标签属性或属性值获取 二.根据标签选择器以及父子节点获取指定元素
jQuery（二）修改元素、查找元素_jquery修改元素内容
最新发布
2401_84572577的博客
05-15 357
Python所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照下面的知识点去找对应的学习资源，保证自己学得较为全面。工具都帮大家整理好了，安装就可直接上手！当我学到一定基础，有自己的理解能力的时候，会去阅读一些前辈整理的书籍或者手写的笔记资料，这些笔记详细记载了他们对一些技术点的理解，这些理解是比较独到，可以学到不一样的思路。观看全面零基础学习视频，看视频学习是最快捷也是最有效果的方式，跟着视频中老师的思路，从基础到深入，还是很容易入门的。
Jquey
hary1987的专栏
12-05 350
jQuery.parent(expr)           //找父元素 jQuery.parents(expr)          //找到所有祖先元素，不限于父元素 jQuery.children(expr)        //查找所有子元素，只会找到直接的孩子节点，不会返回所有子孙 jQuery.contents()            //查找下面的所有内容，包括节点和
如何在 jQuery 中选择具有多个类的元素？
kalman2019的博客
01-10 1047
我想选择具有 a 和 b 两个类的所有元素。因此，只有具有这两个类的元素。当我使用 $(".a, .b") 时，它给了我联合，但我想要交集。
JQuery元素快速查找与操作
12-09
首先，我们来看看jquery中如何查找到想要的结点。 第一步：sizzle选择器 基于元素的id、类、类型、属性、属性值等”查找”（或选择）HTML元素，简单的说是基于css选择器，除此之外还有一些特定的选择器。 第二步：...
Jquery搜索父元素操作方法
10-24
主要介绍了Jquery搜索父元素操作方法,实例分析了parents、cloest、parent、parentsUtil及offsetParent方法的使用技巧,需要的朋友可以参考下
jQuery筛选-查找
Sore4的博客
06-09 380
在讲解之前，还是要注意：要引入jquery-3.6.0.jsjQuery查找find()方法，这个函数是找出正在处理的元素的后代元素的好方法而这个是find输出的值是第二个span标签，还有个别的查找方法，比如：(expr、obj、ele)来进行查找 Parent是取得一个包含着所有匹配元素的唯一父元素的元素集合。你可以使用可选的表达式来筛选Parents（[expr]）取得一个包含着所有匹配元素的祖先元素的元素组合Next（[expr]）下一个，获取得到P元素后面的元素div进行筛选取得一个包含匹配的元素
浅析jQuery中常用的元素查找方法总结
liuby1992的专栏
03-23 290
浅析jQuery中常用的元素查找方法总结
JS和jQuery查找元素的方法总结
wei_qiu_na的博客
07-16 741
在JS中： 1.元素.children 找到该元素的所有子元素 2.元素.childNodes 找到该元素的所有子节点 3. 元素.parentNode 找到父节点，也是父元素，因为只有元素才会有子节点 4.元素.parentElement 找到父元素，其实和parentNode是差不多的，只不多parentElement不是标准属性，是IE弄出来的属性，他们的区别...
jQuery-获取元素坐标(距离屏幕左侧上侧距离)
热门推荐
杨春建的博客
10-12 3万+
原文地址：https://shipengliang.com/html-css-javascript/jquery-%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E5%9D%90%E6%A0%87%E8%B7%9D%E7%A6%BB%E5%B1%8F%E5%B9%95%E5%B7%A6%E4%BE%A7%E4%B8%8A%E4%BE%A7%E8%B7%9D%E7%A6%B
jQuery元素查找方法
weixin_30340353的博客
05-21 241
$("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素，返回div元素数组 $(".myClass") 选择使用myClass类的css的所有元素 $("*") 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,...
jquery 查找指定元素方法 .children and .find
weixin_30292843的博客
09-11 358
查找子元素： .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈）。参数可选，添加参数表示通过选择器进行过滤，对元素进行筛选。 .find(selector)方法是返回匹配元素集合中每个元素的后代。参数是必选的，可以为选择器、jquery对象可元素来对元素进行筛选。 例子： $("#abc").children(".selecte...
jQuery 获取指定元素
yydcj的专栏
08-16 2660
1、利用标签名获取元素 $("标签名") 2、通过ID获取元素 $("#id_name") 3、通过 类名获取元素 $(".className") 4、一次性获取多个元素 $("元素名, 元素名, 元素名 ....") 5、通过指定层次关系获取元素 $("祖先    子孙") $("父  >
jQuery对象常用的查找元素的一些方法
qq_41770595的博客
08-26 1031
在jQuery对象中查找元素我们常常会用到一些的方法 以下以这个代码来简单阐述 Document item1 item2 item3 item44444 item4-1 item4-2 item5 ` #### 1 children()方法 当children()方法不传参时表示查找所有一级元素`： ![children()不传参
jQuery判断数组中是否包含某个元素
Mr.ZD的专栏
03-01 4313
[http://blog.csdn.net/majian_1987/article/details/8586766)] var arr = [ “xml”, “html”, “css”, “js” ]; $.inArray(“js”, arr); //返回 3, 如果不包含在数组中,则返回 -1;...
剑指offer-例题 数组中出现次数超过一半的数字
qq_39622795的博客
10-03 78
题目描述 数组中有一个数字出现的次数超过数组长度的一半，请找出这个数字。例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}。由于数字2在数组中出现了5次，超过数组长度的一半，因此输出2。如果不存在则输出0。 （一）哈希表法： 时间效率：O(n) 空间效率：O(n) public class Solution { public int MoreThanHalfNum_Solution(int [] array) { if(arr...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

儒雅的烤地瓜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值