Jquery选择器分类：基本选择器，层次选择器，过滤选择器，表单选择器。

Posted 2020-10-09

 

基本选择器

 

说明：通过元素id、class和标签名等来查找DOM元素

1.id选择器：$("#test");//选取id为test的元素

2.类选择器：$(".test");//选取所有class为test的元素,其他：$(‘div.mini‘)

3.标签选择器:$("div");//选取所有的<div>元素

4.群组选择器:$("p,div,.test");//选取所有<P>,<div>和拥有class为test的一组元素

5.通配选择器:$("*"); // 通配选择器，匹配页面中所有元素

 

层次选择器

 

说明：通过DOM元素之间的层次关系获取特定元素，如后代元素、子元素、相邻元素、兄弟元素

 

1.$(“div span”);//选取<div>里所有的<span>元素

2.$(“div>span”);//选取<div>下元素名为<span>的子元素

3.$(‘.one+div‘);//选取class为one的下一个<div>元素（相邻元素）

4.$(‘#two~div‘) ;//选取id为two的元素后面所有<div>兄弟元素

注意：

$(‘prev+next‘)选择器与next()方法的等价关系

$(‘.one+div‘) 等价于 $(“.one”).next(“div”)

$(‘prev~siblings‘)选择器与nextAll()方法的等价关系

$(‘.one~div‘) 等价于 $(“.one”).nextAll(“div”)

 

表单选择器

 

1.表单对象属性过滤选择器

 

1.1:$(“#form1:enabled”) ;//选取id为”form1”的表单内的所有可用元素

1.2:$(“#form1:disabled”) ;//选取id为”form1”的表单内的所有不可用元素

1.3:$(“input:checked”);//选取所有被选中的<input>元素

1.4:$(“select:selected”);//选取所有被选中的选项元素

 

 

2.表单对象属性过滤示例

 

2.1：$(“:input”);// 选取所有<input>、<textarea>、<select>和<button>元素

2.2:$(“:text”);//选取所有的单行文本

2.3:$(“: password”);//选取所有的密码框

2.4:$(“:radio”);//选取所有的单选框

2.5:$(“:checkbox”);//选取所有的多选框

2.6:$(“:submit”);//选取所有的提交按钮

2.7:$(“:image”);//选取所有的图像按钮

2.8:$(“:reset”);//选取所有的重置按钮

2.9:$(“:button”);//选取所有按钮

2.10:$(:file);//选取所有的上传域

2.11:$(“:hidden”);//选取所有不可见元素

 

 

过滤选择器

 

说明：主要是通过特定的过滤选择器规则来筛选出所需的DOM元素,选择器都以一个冒号（:）开头

1.基本过滤选择器：

 

1.1：$(“div:first”);//选取所有<div>元素中第一个<div>元素

1.2:   $(“div:last”);//选取所有<div>元素中最后一个<div>元素

1.3:  $(“input:not(.myClass)”);// 选取class为不是myClass的<input>元素

1.4:  $(“input:even”);//选取索引是偶数的<input>元素

1.5:  $(“input:odd”);//选取索引是奇数的<input>元素

1.6:  $(“input:eq(1)”;//选取索引为1的<input>元素

1.7:  $(“input:gt(1)”);//选取索引大于1的<input>元素（注：大于1，而不包括1）

1.8:  $(“input:lt(1)”);//选取索引小于1的<input>元素（注：小于1，而不包括1）

1.9:  $(“:header”);//选取网页中所有的<h1>，<h2>，<h3>……

1.10:  $(“div:animated”); //选取正在执行动画的<div>元素

 

2. 内容过滤选择器:

 

2.1:$(“div:contains(‘我‘)”);//选取含有文本“我”的<div>元素

2.2:$(“div:empty”);//选取不包含子元素（包括文本元素）的<div>空元素

2.3:$(“div:has(p)”);// 选取含有<p>元素的<div>元素

2.4:$(“div:parent”);// 选取拥有子元素（包括文本元素）的<div>元素

 

 

3.可见性过滤选择器:

 

3.1:$(“:hidden”);//选取所有不可见的元素。

包括<input type=”hidden”>，<div style=”disply:none;>和<div style=”visibility:hidden;”>等元素。如果只想选取<input>元素，可以使用$(“input:hidden”)

3.2:$(“div:visible”);//选取所有可见的<div>元素

 

4.属性过滤选择器

 

4.1：$(“div[id]”);//选取拥有属性id的元素

4.2:$(“div[title=test]”);//选取属性title为”test”的<div>元素

4.3:$(“div[title!=test]”);//选取属性title不等于”test”的<div>元素（注意：没有属性的title的<div>元素也会被选取）

4.4:$(“div[title^=test]”);//选取属性title以”test”开始的<div>元素

4.5:$(“div[title$=test]”);//选取属性title以”test”结束的<div>元素

4.6:$(“div[title*=test]”);//选取属性title含有”test”的<div>元素

4.7:$(“div[id][title$=‘tets‘]”);//选取拥有属性id，并且属性title以”test”结束的<div>元素

 

5.子元素过滤选择器

 

5.1---:eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的index是从1开始的，而:eq(index)是从0算起

5.2---:first只返回单个元素，而:first-child选择符将为每个父元素匹配第一个子元素

5.3---:last只返回单个元素，而:last-child选择符将为每个父元素匹配最后一个子元素