jQuery 选择器

2021-07-28 22:32:33 阅读：135 来源： 互联网

标签：jQuery 匹配元素 child input 选择器 first

根据标签的属性id,class的值或者是标签的名字查找文档元素的功能称之为选择器。
选择器是jquery的根基，在jquery中，对事件的处理，遍历DOM,ajax操作等都依赖于选择器，熟练使用选择器，不仅能简化代码，而且可以达到事半功倍的效果。

jQuery选择器可简单分为基本选择器、层次选择器、过滤选择器、表单选择器。

为什么要使用选择器

通过Javascript改变html中元素效果之前首先要找到元素,采用jQuery选择器寻找元素简单快捷.

原生javascript代码:document.getElementById(‘myId’);

jQuery代码:$(‘#myId’)

遇到有循环的情况，优势更加明显：

例如：改变页面中所有的p标签的背景颜色为红色.

原生里面的做法：

jQuery里面的做法：

选择器分类

选择器的设计思想源于CSS，jQuery的选择器借鉴了CSS选择符号的语法规范.

不同的选择符号作用于不同的html元素.

jQuery借鉴了css选择器的用法。以下截图是jQuery全部的选择器：

基本选择器

根据标签名字,css类名或者id的名字查找符合条件的元素.

1.#id 
	id选择器  
2.Element
	元素选择器
3..class  
	class选择器
4.* 
	通配符选择器
5.selector1, selector2, selectorN 
	联合选择器,多个选择器使用,隔开

以上三种为最常见的选择器，其中ID选择器是效率最高的，在可能的情况下应该尽量使用它。

层级选择器

ancestor descendant(派生选择器)
在给定的祖先元素(ancestor)下匹配所有的后代元素(descendant).返回所有的后代元素.
parent > child 
在给定的父元素(parent)下匹配所有直接子元素(child),返回所有的直接子元素.
prev + next   
匹配紧接在 所有prev 元素后的 next(下一个) 元素,返回紧接的下一个元素.

prev ~ siblings 等同于nextAll()

匹配 prev 元素之后的所有 siblings 元素.返回之后的所有兄弟节点

过滤选择器

根据给定的条件查找符合该条件的元素.

语法:

:first
	用法: $(”tr:first”) ; 单个元素的组成的集合
	匹配找到的第一个元素
:last
	匹配找到的最后一个元素
:not(selector)    
	去除所有与给定选择器匹配的元素，not后面括号里面是一个选择的节点
:even
	匹配所有索引值为偶数的元素，从 0 开始计数
:odd
	匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index)
	匹配一个给定索引值的元素，从 0 开始计数 
:gt(index)
	匹配所有大于给定索引值的元素，从 0 开始计数
:lt(index)
	匹配所有小于给定索引值的元素，从 0 开始计数
:header
	匹配如 h1, h2, h3之类的标题元素

内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本上.

语法:

:contains(text)
	用法: $(”div:contains(’John’)”)
	匹配包含给定文本的元素
:empty
	用法: $(”td:empty”) 
	匹配所有不包含子元素或者文本的空元素
:has(selector)
	用法: $(”div:has(p)”).addClass(”test”) 
	匹配含有选择器所匹配的元素的元素
:parent
	用法: $(”td:parent”) 
	匹配含有子元素或者文本的元素  （空白的文本也算是有子元素）

可见性过滤选择器

查找隐藏或者显示的标签元素

:hidden

用法: $(”input:hidden”)

说明: 匹配所有的不可见元素

:visible

用法: $(”input:visible”)

匹配所有的可见元素

属性过滤选择器


<style type="text/css">
  /*高亮显示*/
  .highlight{   
   background-color: gray
  }
 </style>

 代码如下:

<body>
   <div>
      <p>Hello</p>
   </div>
   <div id="test">ID为test的DIV</div>
   <input type="checkbox" id="s1" name="football" value="足球" />足球
   <input type="checkbox" name="volleyball" value="排球" />排球
   <input type="checkbox" id="s3" name="basketball" value="篮球" />篮球
   <input type="checkbox" id="s4" name="other" value="其他" />其他
  </body>

1. [attribute]用法

定义：匹配包含给定属性的元素
代码如下:
//查找所有含有ID属性的div元素
$("div[id]").addClass("highlight"); 

2. [attribute=value]用法
定义：匹配给定的属性是某个特定值的元素
代码如下:
//name属性值为basketball的input元素选中 
$("input[name='basketball']").attr("checked",true);   

3. [attribute!=value]用法
定义：匹配给定的属性是不包含某个特定值的元素
代码如下:
//name属性值不为basketball的input元素选中 
$("input[name!='basketball']").attr("checked",true);   

//此选择器等价于:not([attr=value])要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])
$("input:not(input[name='basketball'])").attr("checked",true);

4. [attribute^=value]用法
定义：匹配给定的属性是以某些值开始的元素
代码如下:
 //查找所有 name 以 'foot' 开始的 input 元素
$("input[name^='foot']").attr("checked",true); 

5. [attribute$=value]用法
定义：匹配给定的属性是以某些值结尾的元素
代码如下:
//查找所有 name 以 'ball' 结尾的 input 元素
$("input[name$='ball']").attr("checked",true); 

6. [attribute*=value]用法
定义：匹配给定的属性是以包含某些值的元素
代码如下:
//查找所有 name 包含 'sket' 的 input 元素
$("input[name*='sket']").attr("checked",true);  

7. [selector1][selector2][selectorN]用法
定义：复合属性选择器，需要同时满足多个条件时使用
代码如下:
//找到所有含有 id属性，并且它的 name属性是以 ball结尾的
$("input[id][name$='ball']").attr("checked",true);

子元素过滤选择器

这里值得一提的是:nth-child()，这个选择器的详细功能如下

　 1、nth-child(even) 能选取每个父元素下的索引值是偶数的元素
　 2、nth-child(odd) 能选取每个父元素下的索引值是奇数的元素
　 3、nth-child(2) 能选取每个父元素下的索引值等于2的元素
　 4、nth-child(3n) 能选取每个父元素下的索引值等于3的倍数的元素，n从0开始
   5、nth-child(3n+1) 能选取每个父元素下的索引值等于 (3n+1) 的的元素，n从0开始 
   6、特别注意系数为负数的情况：nth-child(-3n+8).    选择的包括第8 、第5、第2 个子元素，当3=3的时候 ，-3*3+8=-1，就结束选择了。

css选择器中:first-child与:first-of-type的区别

:first-child是css2中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素。比如有段代码：
p:first-child  匹配到的是p元素,因为p元素是div的第一个子元素；
h1:first-child  匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是第一个；
span:first-child  匹配不到任何元素，因为在这里两个span元素都不是div的第一个子元素；
 
:first-of-type是css3中定义的选择器，这个跟:first-child有什么区别呢？还是看那段代码：
p:first-of-type  匹配到的是p元素,因为p是div的所有类型为p的子元素中的第一个；
h1:first-of-type  匹配到的是h1元素，因为h1是div的所有类型为h1的子元素中的第一个；
span:first-of-type  匹配到的是第三个子元素span。这里div有两个为span的子元素，匹配到的是它们中的第一个。
 
所以，通过以上两个例子可以得出结论：
:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-of-type  匹配的是某父元素下某个类型的子元素中的第一个，比如 p:first-of-type，就是指某个盒子下的所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。
同样类型的选择器 :last-child  和 :last-of-type、:nth-child(n)  和  :nth-of-type(n) 也可以这样去理解。

表单对象属性过滤选择器

根据表单对象的属性操作查找符合条件的表单元素对象.

表单选择器

标签：jQuery,匹配,元素,child,input,选择器,first
来源： https://blog.csdn.net/qq_36194388/article/details/119191033

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9