首页 > 代码库 > jQuery选择器
jQuery选择器
由于jQuery返回的是一个类数组，所以判断jQuery是否为空的方法应该为
if ( $("xxx").length > 0 )
{
...
}
1.简单选择器
1>选择指定ID的元素,使用 # + Id 的字符串表示
JavaScript: document.getElementById(ID)
jQuery: $("#ID")
在效率上jQuery要比JavaScript慢，所以,可以通过将JavaScript的原生方法传递给$的方式进行混用
例：
<批量操作一例：>
通过ID来获取Dom对象并存入数组
var arr = [];
var $ = document.getElementById;//临时把JavaScript的原生方法传递给$
for (var i = 0;i < 1000; i++)
{
var item = $("#span" + i);
arr.push(item);
}
$ = jQuery;//恢复$的默认值
jQuery转义操作
选择器中有特殊字符，需要转义。原因：jQuery使用正则表达式进行字符串匹配
如：. : [ ]
转义方法为使用 \\
则：\\. \\: \\[ \\]
2>选择指定类型的元素
JavaScript: document.getElementByTagName(Tag)
jQuery: $("Tag")
在效率上依然慢于JavaScript,可采用混用的方式解决。
3>选择指定"类"的元素,使用 . + 类名 的字符串表示
JavaScript中没有类选择的方法，但可以扩展(在Dom3版本中已有此方法)
document.getElementByClassName = function(className) {
var el = [];
_el = document.getElementByTagName(‘*‘);//获取所有元素
for (var i = 0 ;i < _el.length; i++)
{
if (_el[i].className == className )
el[el.length] = _el[i];
}
return el;
}
jQuery: $(".className")
如: $(".red") 与 document.getElementByClassName("red")功能相同
4>选择所有元素及优化,使用 *
$("body *) 表示选择body下的所有元素
例：
$( function()
{
var all = document.getElementByTagName("*");
$(all).css("color","red");
}
与
$("body *).css("color","red"); 结果相同,效率也相同
5>多选,使用 , 分隔不同的选择器表达式
$("h2,#wrap,span.red,[title=‘text‘].css("color","red");
2.关系选择器.文档节点之间的包含与并列关系
1>层级选择器
<1>$("ancestor descendant") 在给定的"ancestor"选择器下匹配所有的"descendant"选择器
<2>$("parent > child") 在给定的"父"选择器下匹配所有的"child"选择器
<3>$("prev + Next") 匹配所有紧跟在"prev"选择器后的所有"Next"选择器
<4>$("prev ~ Siblings") 匹配"prev"选择器这后的所有"siblings"的选择器
示例：
$("div").css("border","solid 1px red"); //文档中所有的div
$("div>div").css(....); //文档中所有的div的子div,若div(第二个表达式)没有子div，则跳过
$("div div").css(....); //文档中所有的div下的div，即使div(第二个表达式)没有子div。
$("div div div").css(....); //文档中第三层的div,这个div必须能向上有两层。
$("div + p").css(....); //文档中紧跟在div后面的p
$("div:eq(1) ~ p").css(....); //文档如div同级相邻的p
2>子元素选择器
<1>:nth-child 匹配父元素下的第N个子(或奇偶)元素。索引从１开始
<2>:first-child 匹配第一个子元素。:first只匹配一个元素;:first-child为每个父元素匹配一个子元素
<3>:last-child 匹配最后一个元素。:last与:last-child区别同上。
<4>:only-child 若某元素是父元素的唯一元素，则会被匹配。否则不会被匹配
示例：
:nth-child(even); 匹配偶数位元素
:nth-child(odd); 匹配奇数位元素
:nth-child(2); 匹配第2个元素
:nth-child(3n); 匹配第3个元素及后面间隔3的所有元素
:nth-child(3n+1); 匹配第1个元素及后面间隔3的所有元素
:nth-child(3n+2); 匹配第2个元素及后面间隔3的所有元素
$("ul li:first-child").css(...);
$("ul li:last-child").css(...);
$("ul li:nth-child(1)").css(...);
$("ul li:nth-child(2n)").css(...);
3.过滤选择器
1>定位过滤器
<1>:first 匹配找到的第一个元素，只一个。
<2>:last 匹配找到的最后一个元素，只一个。
<3>:not 取反，如：:not(div a)
<4>:even 匹配索引值为偶数的元素。从0开始
<5>:odd 奇数
<6>:eq 匹配一个给定索引值的元素，从0开始。如：$("tr:eq(1)") 匹配第二行表格
<7>:gt 匹配所有大于给定的索引值的元素，从0开始。$("tr:gt(1)") 匹配第三行及以后行
<8>:lt 小于
<9>:header 匹配如 h1, h2 ,h3 之类的标题元素
<10>:animated 匹配所有正在执行动画效果的元素
2>内容过滤器。根据匹配元素所包含的子元素或文本内容进行过滤。
<1>:contains 匹配包含给一文本的元素,如：$("div:contains(‘图片‘)")
<2>:empty 匹配不含子元素或空文本的元素。
<3>:has 匹配含有指定选择器元素的上xxx级元素。如：$("div:has(p)"); 匹配含有选择器p的div元素
<4>:parent 匹配有子元素或非空文本内容的元素
示例：
$("li:empty").text("空内容");//匹配空的li元素，并将其值设为"空内容"。
$("div ul:parent").css(....);//匹配div下有子元素或非空文本的ul ??
$("h2:contains(‘标题‘)").css(....);//匹配含有"标题"的h2元素
$("p:has(span)").css(....);//匹配含有span元素的p元素
3>可见过滤器。根据元素的可见或隐藏进行匹配。通过判断CSS属性的offsetWidth或offsetHeight，只要不为0则visible为真。
<1>:hidden 匹配所有不可见元素,或type为hidden的元素
<2>:visible 匹配所有可见元素
示例：
$("p:odd").hide();//隐藏奇数位的p元素。
$("p:hidden").show();//将奇数位的p元素显示出来
4.属性选择器。把元素的属性及其值作为过滤条件。使用 [ ]作为定界符。
1>[attribute] 匹配指定属性的元素。如：$("div[id]");匹配具有id属性的div
2>[attribute=value] 匹配指定属性及属性值的元素。 $("div[name=‘text‘]"); 若value中含有"]"，那需要使用引号以避免冲突
3>[attribute=!value] 匹配属性值不为(或含有)value的元素。与 :not([attribute=value])功能相同。若匹配含有某属性，但值不为value的元素，则[att]:not([att=value])。
4>[attribute^=value] 匹配属性值以value开始的元素。如：$("input[name^=‘text‘]");匹配name以text开始的input
5>[attribute$=value] .................结束.......
6>[attribute*=value] ..........包含value.........如：$("input[name*=‘test‘]");匹配name中含有text的input
7>[selecctor1][selecctor2][selecctorN] 复合属性选择器，匹配满足多个条件的元素。如：$("input[name*=‘text‘][id]");匹配name含有text，且具有id属性的input
5.表单选择器
1>简单表单域选择器
<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 匹配所有的不可见元素，或type为hidden的元素。
示例：
<form id="testForm" action="" method="get">
<input name="" type="text" value="http://www.mamicode.com/文本框"><br/>
<input name="" type="password" value="http://www.mamicode.com/密码框"><br/>
<input name="" type="file" value="http://www.mamicode.com/文件">
</form>
$("#testForm :text").val("这里是修改的内容"); //修改表单Id为testForm的文本框的内容为"这里是修改的内容"
$("#testForm :file).val("f:\tmp\122.txt"); //修改表单Id为testForm的文件浏览框的文件名为"f:\tmp\122.txt"
2>表单属性选择器
<1>:enabled 匹配所有可用元素
<2>:disabled ........不......
<3>:checked 匹配所有选中的元素(复选框，单选框，但不包含sselect中的option)
<4>:selected 匹配所有选中的option元素
示例：
<form id="test">
<input type="text" disabled="disabled" value="http://www.mamicode.com/文本框"><br/>
<input type="checkbox" checked="checked" value="http://www.mamicode.com/复选框"><br/>
<select name="">
<option value="http://www.mamicode.com/1">1</option>
<option value="http://www.mamicode.com/2">2</option>
<option value="http://www.mamicode.com/3" selected="selected">3</option>
</select>
</form>
$("#test :disabled").val("不可用"); //修改文本内容
$("#test :checked").removeAttr("checked"); //去掉选中
$("#test :selected").removeAttr("selected"); //去掉第三项选中
3>表单取值与赋值使用 val()，否则无法正确读取值。
var psw = encodeURIComponent($("#IdPsw").val());
jQuery选择器