jQuery选择器的优势:
1、使用$("#ID")代替document.getElementById(),使用$("tagName")代替document.getElementsByTagName()函数
2、支持CSS1到CSS3选择器
3、完善的处理机制,即,使用jQuery获取不存在的元素也不会报错
为了方便学习,我们将jQuery的选择器和CSS的选择器进行对比学习。
一、基本选择器
jQuery与CSS选择器做对比
左边CSS,右边jQuery.
1.标签选择器
td{font-size:14px;} $("td")
2.ID选择器
#note{font-size:14px;} $("#note")
3.类选择器
.note{font-size:14px;} $(".note")
4.群组选择器
td,p,div.a{font-size:14px;} $("td,p,div.a")
5.通配选择符
*{font-size:14px;} $("*") //选取所有元素
二、层次选择器
jQuery与CSS选择器做对比
左边CSS,右边jQuery.
1.后代选择器
#div span{font-size:14px;} $("#div span") //选取<div>里的
所有
的<span>元素,
包括子元素、孙元素、曾孙元素等等。
2.子元素选择器
div > span{font-size:14px;} $("div > span") //选取<div>元素
下
元素名是<span>的子元素,
不包括孙元素、曾孙元素等等。
3.相邻兄弟选择器
.one + div{font-size:14px;} $(".one + div") //选取与class为one
同辈的后面第一个
<div>元素
或 $(".one").next("div") //next()方法
4.~ 选择器
#two~div{font-size:14px;} $("#two~div") //选取与id为two
同辈的后面所有
<div>元素
或 $("#two").nextAll("div") //nextAll()方法
5.siblings():
$("#two~div")只能选择"#two"元素
后面同辈的所有
<div>元素,
而$("#two").siblings("div")方法能选择
与"#two"同辈的所有<div>
元素,无论前后
三、过滤选择器
类似于CSS的伪类
1、基本过滤选择器
(1):first
$("div:first") //选取所有<div>元素中第一个<div>元素
(2):last
$("div:last") //选取所有<div>元素中最后一个<div>元素
(3):not(selector)
$("input:not(.myclass)") //选取class不是myclass的<input>元素
(4):even
$("input:even") //选取索引是偶数的<input>元素,索引从0开始
(5):odd
$("input:odd") //选取索引是奇数的<input>元素,索引从0开始
(6):eq(index)
$("input:eq(1)") //选取索引等于1的<input>元素
(7):gt(index)
$("input:gt(1)") //选取索引大于1的<input>元素
(8):lt(index)
$("input:lt(1)") //选取索引小于1的<input>元素
(9):header
$(":header") //选取网页中所有的<h1>,<h2>,<h3>····
(10):animated
$("div:animated") //选取正在执行动画的<div>元素
$(":animated").css("background","#000"); //改变正在执行动画的元素的背景色
2、内容过滤选择器:通过 (过滤)子元素和文本内容 来获取相应元素
(1):contains(text)
$("div:contains('我')") //选取含有文本“我”的<div>元素
(2):empty
$("div:empty") //选取不包含子元素(包含文本元素)的<div>
空元素
(3):parent
$("div:parent") //选取拥有子元素(包含文本元素)的<div>元素
(4):has(selector)
$("div:has(p)") //选取含有<p>元素的<div>元素
3、可见性过滤选择器:通过
(过滤)可见和不可见 来获取相应元素
(1):hidden
$(":hidden")选取所有不可见元素.包括<input type="hidden"/>,<div style="display:none;">和 <div style="visibility:hidden;">等元素。
如果只是想选取<input>元素,可以使用$("input:hidden")
(2):visible
$(":visible") //选取所有可见元素
$("div:visible") //选取所有可见的<div>元素
4、属性过滤选择器:通过 (过滤)元素属性 来获取相应元素
[attribute]
$("div[id]") //选取拥有id属性的元素
[attribute=value]
$("div[title=test]") //选取title属性为"test"的<div>元素
[attribute!=value]
$("div[title!=test]") //选取title属性不等于"test"的<div>元素
[attribute^=value]
$("div[title^=test]") //选取title属性以"test"开始的<div>元素
[attribute$=value]
$("div[title$=test]") //选取title属性以"test"结束的<div>元素
[attribute*=value]
$("div[title*=test]") //选取title属性含"test"的<div>元素
[selector1][selector2][selectorN]
$("div[id][title$='test']") //选取拥有id属性 和 有以"test"结束的title属性 的<div>元素
5、子元素过滤选择器
选择器 | 描述 | 返回 | 示例 |
:nth-child(index/even /odd/equatioin) | 选取每个父元素下第index个子元素或奇偶元素, index从1开始 | 集合元素 | 将为每一个父元素匹配子元素 |
:first-child | 选取每个父元素的第一个子元素 | 集合元素 | 将为每一个父元素匹配子元素 |
:last-child | 选取每个父元素的最后一个子元素 | 集合元素 | 将为每一个父元素匹配子元素 |
:only-child | 若某个元素是其父元素唯一的子元素,则被匹配 | 集合元素 | $("ul li:only-child")在<ul>中选取是唯一 子元素的<li>元素 |
6、表单对象属性过滤选择器
:enabled
$("#form1 :enabled"); //选取id为"form1"的表单内的所有可用元素
:disabled
$("#form2 :disabled"); //选取id为"form2"的表单内的所有不可用元素
:checked
$("input:checked"); //选取所有被选中的<input>元素
:selectd
$("select:selected") //选取所有被选中的选项元素