jQuery选择器
Posted skye_gu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery选择器相关的知识，希望对你有一定的参考价值。
引入css:<link rel="stylesheet" href="url" type="text/css">
引入js:<script src="url"></script>
基本：
标签=>$(\'tagname\');id=>$(\'#idname\');class=>$(\'.classname\');综合=>$(\'#id,.class,tag\')
层叠选择器：
$(\'form input\'):选择所有form元素中的input元素,包括非直接子节点(儿子,孙子...)
$(\'#main > * \'):选择id=main下的所有子元素，直接子节点(只能儿子辈，不能孙子辈)
$(\'label+input\'):同级，input在label下方，并且input要紧挨着label
$(\'#prev~div\'): 同级，只要input在label下边就可以
基本过滤选择器：
$(\'tr:first\'):选择所有tr元素的第一个
$(\'tr:last\'):选择所有tr元素的最后一个
$(\'input:not(:checked)+span\'):过滤掉:checked选择器的所有input元素
$(\'tr:even\'):选择所有tr元素的第0,2,4...个元素[数组序号]
$(\'tr:odd\'):选择所有tr元素的第1,3,5...个元素
$(\'td:eq(2)\'):选择所有td元素中index为2的呢个td元素[gt,lt]
$(\':header\'):匹配如h1,h2,h3之类的标题元素
$(\'div:animated\'):匹配所有正在执行动画效果的元素
内容过滤选择器：
$("div:contains(\'John\')"):选择所有div中含John文本的元素
$("td:empty"):选择所有为空(也不包括文本节点)的td元素数组
$("div:has(p)"):选择所有含有p标签的div元素
$("td:parent"):匹配含有子元素或者文本的元素
可视化过滤选择器：
$("div:hidden"):匹配所有不可见元素(display:none OR type:hidden)的元素[visible]
属性过滤选择器：
$("div[id]"):根据id选择div元素
$("input[name=\'skye\']"):根据name选择input元素[!=不等于,^=以xxx开头,$=以xxx结尾,*=属性包含]
$("input[id][name$=\'skye\']"):多属性联合选择
子元素过滤选择器：
$("ul li:nth-child(2)"):$("ul li:nth-child(odd)"),$("ul li:nth-child(3n+1)")
$("div span:first-child"):如果span是div中第一个子元素，将会被匹配[last-child]
$("div button:only-child"):如果button是div中唯一的子元素，将会被匹配
$("div button:only-of-type"):button可以不是div中唯一的子元素，但却是div中唯一button子元素，也将会被匹配
表单元素选择器：
$(":input"):选择所有的表单输入元素，包括input,textarea,select,button
$(":password"):选择所有password input元素，同理选择input中的text,radio,checkbox,submit,image,reset,button,file,hidden
表单元素过滤选择器：
$(":enabled"):选择所有可操作的表单元素[:disabled,:checked]
$("select option:selected"):选择所有select子元素中被selected的元素
使用范例：
1：each遍历通过选择器获得的dom对象
$(\'img\').each(function(index,domEle){
//this=domEle
domEle.src="./media/images/"+index+".jpg";//DOM对象
$(domEle).attr(\'width\',"120px");//jQuery对象
//跳出循环
if($(this).is("#stop")){
$(\'span\').text(\'stop at id=\'+domEle.id);
return false;//相当于普通循环中的break;return true相当于普通循环中continue
}
});
newPoint:
1. $(\'div #idname\') VS $(\'div#idname\')：有空格表示父子关系，没有空格表示并且关系
2. prop() VS attr()：prop可以准确获得系统属性[获取自定义属性时为undefined]，attr可以准确获得自定义属性[获取未定义的系统属性如checked时为undefined]
3. $(\'li:eq(index)\') VS $(\'li:nth-child(index)\')：eq下标从0开始，且只能匹配一个元素(如页面有多个ul，eq不能分别为每个ul匹配元素)；nth-child()下标从1开始，含有多组ul时可以分组匹配页面多个li
参考书：JQuery中文手册
参考博文：http://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html
（个人学习笔记随时更新，内容如有问题，敬请斧正）
以上是关于jQuery选择器的主要内容，如果未能解决你的问题，请参考以下文章