码迷,mamicode.com
首页 > Web开发 > 详细

jquery 选择器

时间:2015-09-03 15:17:52      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:

1、#id

使用任何的元字符(如 !"#$%&‘()*+,./:;<=>?@[\]^`{|}~)作为名称的文本部分, 它必须被两个反斜杠转义:\\。   一般没人这么做吧。

2、$("div,span,p.myClass")

将每一个选择器匹配到的元素合并后一起返回。

3、$(‘form > input‘)

form的直接子元素input

4、$("label + input"):紧跟在label后面的input

5、$("form ~ input"):匹配form之后的所有input

6、$("input:not(:checked)"):查找未选中的input,查找未active的,应该也可以。

<input name="apple" />
<input name="flower"  class=‘active‘ checked="checked" />

$(‘input:not(.active)‘) success

$(‘input:not(:checked)‘) fail

7、$("tr:even"):第偶数个tr;odd为奇数

8、$("tr:eq(1)"):第二行的tr

9、$("tr:gt(0)"):匹配所有大于给定索引值的元素,大于第0行的元素

10、$(‘input:lang(en)‘):匹配lang=‘en‘或lang=‘en-us‘

11、:last, :lt(index), :header, :animated, :focus, :root(<html>), :contains(text), :

12、$(‘p:target‘)--对于http://example.com/#foo来说,会选择<p id=‘foo‘>

13、$(‘tr:empty‘):查找所有不包含子元素或文本的空元素

14、$(‘div:has(p)‘):匹配含有选择器所匹配的元素的元素

15、:parent:匹配含有子元素或者文本的元素, 和:empty相反

16、:hidden:匹配不可见元素,或type=‘hidden‘的元素

17、:visible:匹配可见元素

18、$(‘div[active]‘): div包含active的属性

19、[attr=value]; [attr!=value]; 

20、$("input[name^=‘news‘]"):name以news开头;$("input[name$=‘news‘]"):name以news结尾; $("input[name*=‘news‘]"):name包含news

21、[selector1][selector2][selectorN]:复合属性选择器

22、:first-child  与:first不同 与:first-of-type不同

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <span>span</span>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>
$(‘ul li:first‘)  满足ul li的第一个元素
[<li>?John?</li>?]
$(‘ul li:first-child‘)  每个ul的第一个元素为li的li元素
[<li>?John?</li>?, <li>?Glen?</li>?]
$(‘ul li:first-of-type‘)  每个ul的第一个li元素
[<li>?John?</li>?, <li>?Glen?</li>?, <li>?Glen?</li>?]

23、:last-child; :last-of-type;

24、:nth-child(n):第n个元素,从1开始。n:even, odd, 3n, 3n+1

   :eq(n):第n个元素,从0开始。

       :first=:nth-child(1)=:eq(0)

25、:nth-last-child; :nth-last-of-type(一有type,就跟first-of-type类似);

26、:nth-of-type(2):$("span:nth-of-type(2)"); span是子元素,选取这种情况的第二个span

27、:only-child:如果某个元素是父元素中唯一的子元素,那将会被匹配.这里的其他元素并不包含文本节点,如:<p><img/>图片</p>,用$(‘p img:only-child‘)是可以匹配.

28、:only-of-type:http://www.365mini.com/page/jquery-select-only-of-type-selector.htm

<div id="n1">
    <p id="n2">
        <span id="n3" class="abc">span2</span>
        <span id="n4">span3</span>
    </p>
    <div id="n5" class="abc">
        <label id="n6">label1</label>
        <span id="n7" class="abc">span2</span>
    </div>
</div>
$("span:only-of-type");
=>n7
$(‘.abc:only-of-type‘);
=>n5,n7

29、:input:匹配所有 input, textarea, select 和 button 元素

30、:text:匹配单行文本

31、:password; :radio; :checkbox; :submit; :image(type=‘image‘); :reset(type=‘reset‘); :button(type=‘‘button或<button>); :file(type=‘file‘); :enabled(不匹配disabled=‘disabled‘); :disabled; :checked; :selected;

 

jquery 选择器

标签:

原文地址:http://www.cnblogs.com/wang-jing/p/4780203.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!