首页 > 代码库 > jQuery选择器
jQuery选择器
最近刚学jQuery,里面的选择器感觉很牛,一下是个人的一些简单的总结。
首先,要使用jQuery首先要引用jQuery包,和bootstrap框架是一样的,唯一需要注意的是要把引用的包放在自己写的JS前面。。
jQuery里面有很多牛B的功能,首先就是其中的选择器:
jQuery里面的选择器的写法其实和CSS中的写法是一样的,不过就是在前面加上$,比如,id选择器为$("#id"),class选择器为$(".class"),当然这些只是基础的选择器,还有就是根据元素的位置来确定,<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
如果选择第一个:$(‘li:first‘);
选择最后一个:$(‘‘li:last);
选择匹配为偶数的元素:$(‘li:even‘);
选择匹配为奇数的元素:$(‘li:odd‘);
选择第i+1个元素:$(‘li:eq(i)‘);
选择所有大于给定索引值的元素:$(‘li:gt(i)‘);
选择所有小于给定索引值的元素:$(‘li:lt(i)‘);
选择匹配如h1,h2,h3之类的标题元素:$(‘:header‘);
选择包含有“string”的元素:$(‘div/button/span/:contains(‘string‘)‘);
选择匹配所有不包含元素或者文本的空元素:$(‘li/td..:empty‘);
选择匹配含有选择器所匹配的元素的元素:$("div:has(p)");
选择匹配含有子元素或者文本的元素:$("td/tr..:parent");
<input type="checkbox" name="newsletter" value="http://www.mamicode.com/Hot Fuzz" />
<input type="checkbox" name="newsletter" value="http://www.mamicode.com/Cold Fusion" />
<input type="checkbox" name="accept" value="http://www.mamicode.com/Evil Plans" />
选择匹配给定的属性是某个特定值的元素:$("input[name=‘newsletter‘]").attr("checked,true");
结果:[ <input type="checkbox" name="newsletter" value="http://www.mamicode.com/Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="http://www.mamicode.com/Cold Fusion" checked="true" /> ]
选择匹配其父元素下的第N个子元素:$("ul li:nth-child(N)");
选择匹配第一个子元素:$("ul li:first-child");
选择匹配某个有父元素的并且该父元素有唯一的子元素:$("ul li:only-child");
当然还有很多选择器没有列出来,这些只是比较常用的。
jQuery选择器