jQuery 选择器

2021/7/28 23:11:01

编程Tag： 选择器 jQuery 元素 input 匹配 first child

本文主要是介绍jQuery 选择器，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

根据标签的属性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) 也可以这样去理解。