JQuery选择器

JQuery选择器

JQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

 

一、基本选择器

（1）$(“#test”)选取id为test的元素

（2）$(“.test”)选取所有class为test的元素

（3）$(“p”)选取所有的<p>元素

（4）$(“*”)选取所有的元素

（5）$(“div,span,p.myclass”)选取所有<div>,<span>和拥有class为myclass的<p>标签的一组元素

 

二、层次选择器

（1）$(“div span”)选取<div>里的所有的<span>元素

（2）$(“div>span”)选取<div>元素下元素名为<span>的子元素

（3）$(“.one+div”)选取class为one的下一个<div>同辈元素

（4）$(“#two~div”)选取id为two的元素后面的所有<div>同辈元素

 

三、过滤选择器

1、基本过滤选择器

（1）$(“div:first”)选取所有<div>元素中第一个<div>元素

（2）$(“div:last”)选取所有<div>元素中最后一个<div>元素

（3）$(“input:not(.myclass)”)选取class不是myclass的<input>元素

（4）$(“input:even”)选取索引是偶数的<input>元素，索引从0开始

（5）$(“input:odd”)选取索引是奇数的<input>元素

（6）$(“input:eq(1)”)选取索引等于1的<input>元素

（7）$(“input:gt(1)”)选取索引大于1的<input>元素

（8）$(“input:lt(1)”)选取索引小于1的<input>元素

（9）$(“:header”)选取网页中所有的<h1>、<h2>、<h3>....

（10）$(“div:aninated”)选取正在执行动画的<div>元素

（11）$(“:focus”)选取当前获取焦点的元素

 

2、内容过滤选择器

（1）$(“div:contains(‘我’)”)选取含有文本“我”的<div>元素

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

（3）$(“div:has(p)”)选取含有<p>元素的<div>元素

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

 

3、可见性过滤选择器

（1）$(“:hidden”)选取所有不可见的元素。包括<input type=”hidden”/>,<div style=”display:none;”>和<div style=”visibility:hidden;”>等元素。如果只想选取<input>元素，可以使用$(“input:hidden”)

（2）$(“div:visible”)选取所有可见的<div>元素

 

4、属性过滤选择器

（1）$(“div[id]”)选取拥有属性id的<div>元素

（2）$(“div[title=test]”)选取属性title为“test”的<div>元素

（3）$(“div[title!=test]”)选取属性title不等于“test”的<div>元素（没有属性title的<div>元素也会被选取）

（4）$(“div[title^=test]”)选取属性title以“test”开始的<div>元素

（5）$(“div[title$=test]”)选取属性title以“test”结束的<div>元素

（6）$(“div[title*=test]”)选取属性title含有“test”的<div>元素

（7）$(‘div[title|=”en”]’)选取属性title等于en或以en为前缀（该字符串后跟一个连字符‘-’）的元素

（8）$(‘div[title~=”uk”]’)选取属性title用空格分隔的值中包含字符uk的元素

（9）$(“div[id][title$=’test’]”)选取拥有属性id，并且属性title以“test”结束的<div>元素

 

5、子元素过滤选择器

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

（2）:first只返回单个元素，而:first-child选择符将为每个父元素匹配第1个子元素。例如

$(“ul li:first-child”);将取每个<ul>中第1个<li>的元素

（3）同样，:last只返回单个元素，而:last-child选择符将为每个父元素匹配最后一个子元素。例如，$(“ul li:last-child”);选择每个<ul>中的最后一个<li>元素

（4）$(“ul li:only-child”)在<ul>中选取是唯一子元素的<li>元素

 

6、表单对象属性过滤选择器

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

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

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

（4）$(“select option:selected”);选取所有被选中的选项元素

 

四、表单选择器

（1）$(“:input”)选取所有<input>、<textarea>、<select>和<button>元素

（2）$(“:text”)选取所有的单行文本框

（3）$(“:password”)选取所有的密码框

（4）$(“:radio”)选取所有的单选框

（5）$(“:checkbox”)选取所有的复选框

（6）$(“:submit”)选取所有的提交按钮

（7）$(“:image”)选取所有的图像按钮

（8）$(“:reset”)选取所有的重置按钮

（9）$(“:button”)选取所有的按钮

（10）$(“:file”)选取所有的上传域

（11）$(“:hidden”)选取所有不可见元素