首页 > 代码库 > 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选择器