`

jquery选择器

阅读更多
jquery选择器总结
1.基本选择器
* 任何元素
E 类型为E的元素 例:$(‘div’) 选取所有<div>元素。
E F 在类型E后面的类型为F的元素 F为E的子、孙、重孙等标记 例:$(‘fieldset a’) 选择在<fieldset>元素内出现的所有<a>元素。\\后代选择器//
E,F,G \\组选择器//
E > F 为E元素子元素的F元素,F为E的子标记不包括孙标记等 例:$(‘li>p’) 选取在<li>标记中直接出现的所有<p>元素。\\子选择器//
E + F 选择F标记,F标记紧接着前面的E标记.\\临近选择器//
$("mix+mix"),选取下一个兄弟节点.如:$("div +#test"),id为test的的节点必须是div的下一个兄弟节点.
<div></div><p id="test"></p>在$("div + #test")中能取到p段落节点
<div></div><p></p><p id="test"></p>则不能取到
E ~ F 选择F标记,F标记前有一个E标记 例:$(‘div~p’) 选取位为<div>标记之后出现的所有<p>元素。
E.C $(‘div.someClass’) 选取<div>元素中出现class="someClass"属性的所有元素。
.C  $(‘.someClass’) 选取出现class="someClass"属性的所有元素。
E#I id为Id的E元素(至多匹配一个元素)
E[A]     $(‘img[alt]’) 选取具有alt属性的所有<img>元素。
E[A=V]   选取具有A属性,而且属性的值为V的所有E元素。
E[A^=V]  $(‘a[href^=.pdf]’) 选取具有href属性,而且属性的值以.pdf开头的所有<a>元素。
E[A$=V]  $(‘a[href$=.pdf]’) 选取具有href属性,而且属性的值以.pdf结尾的所有<a>元素。
E[A*=V]  $(‘button[id*=test]’) 选取所有的按钮,但按钮的id属性要包含"test"。
E:has(F) $(‘p:has(b)’) 选取<p>元素内包含有<b>的所有元素。
2.位置选择器
E:root 类型为E,并且是文档的根元素
$('p:first') 选取页面中第一个出现的<p>元素。相当于E:eq(0)
E:last:最后一个匹配的元素
$('img[src$=.png]:first') 选取页面中第一个出现src属性值以.png结尾的<img>元素。
$('button.small:last') 选取页面中最后一个出现class="small"的按钮元素。
$('li:first-child') 选取页面中所有<li>列表的第一项元素。
E:last-child:是其父元素的最后一个类型为E的子元素
$('a:only-child') 选取页面中所有<a>元素,但这些元素只能位于一个父级元素内。比如<li><a href="url">An url</a></li>,此时<li>内的<a>是匹配的。
E:empty:没有子元素(包括text节点)的类型为E的元素
$(‘li:nth-child(2)’) 选取父级元素中第二个<li>元素。<li>也要位于一个父级元素内。从一开始计数
比如<ul>
<li>1</li>
<li>2</li>
</ul>
此时<li>2</li>是匹配的。
$('tr:nth-child(odd)') 选取表格中所有为奇数的行元素。偶数行为:even
$(‘li:nth-child(3n)’) 在父级元素中有很多个<li>元素,但只选取隔3次出现的<li>元素。比如
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
其中<li>3</li>,<li>6</li>匹配。
$('li:nth-child(3n+5)') 带有偏移量的选取。在父级元素中只选取从第5个<li>元素开始每隔3次出现的<li>元素。比如
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
其中<li>5</li>,<li>8</li>匹配。
$(‘.someClass:eq(1)’) 选取页面中class="someClass"的第二个元素。jQuery以0为基准,因此(1)表示相当于第2个。
$(‘.someClass:gt(1)’) 选取页面中所有class="someClass"的元素,除了开头两个。
$(‘.someClass:lt(4)’) 只选取页面中所有class="someClass"元素中最先的4个元素。
3.过滤选择器(含表单选择器):
:annimated 所有处于动画中的元素
:button 所有按钮包括 input[type=button] input[type=submit] input[type=reset] and button
:containts(foo) all包含文本(foo)的元素
:enabled
:disabled:禁止的用户界面元素
:file input[type=file]
:header 标题元素 <h1>~<h6>
:hidden:选择所有隐藏元素(非Hide域,且display值为block或visible,visibility值为visible的元素)
:checked:处于选中状态的用户界面元素(例如单选按钮或复选框)
:visible:选择所有可见元素(display值为block或visible,visibility值为visible元素,不包括hide域)
:not(s):不匹配选择器s
:even:从匹配的元素集中取序数为偶数的元素
:odd:从匹配的元素集中取序数为奇数的元素
:parent:选择包含子元素(包含text节点)的所有元素,空元素被排除
:selected 下拉菜单中的选中项
:input:选择表单元素(input,select,textarea,button) 注意包含了很多
:text:选择所有文本域 input[type=text]
:password:选择所有密码域input[type=password]
:radio:选择所有单选按钮input[type=radio]
:checkbox:选择所有复选框 即input[type=checkbox]
:submit:选择所有提交按钮input[type=submit] and  button[type=submit]
:image:选择所有图像域 input[type=image]
:reset:选择所有清除域input[type=reset] button[type=reset]
要注意:过滤选择器写法$(":input:not(:checkbox):not(:radio)").addClass("sds");

jQuery 遍历函数
jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。

函数 描述
.add() 将元素添加到匹配元素的集合中。
.andSelf() 把堆栈中之前的元素集添加到当前集合中。
.children() 获得匹配元素集合中每个元素的所有子元素。
.closest() 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。
.contents() 获得匹配元素集合中每个元素的子元素,包括文本和注释节点。
.each() 对 jQuery 对象进行迭代,为每个匹配元素执行函数。
.end() 结束当前链中最近的一次筛选操作,并将匹配元素集合返回到前一次的状态。
.eq() 将匹配元素集合缩减为位于指定索引的新元素。
.filter() 将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。
.find() 获得当前匹配元素集合中每个元素的后代,由选择器进行筛选。
.first() 将匹配元素集合缩减为集合中的第一个元素。
.has() 将匹配元素集合缩减为包含特定元素的后代的集合。
.is() 根据选择器检查当前的匹配元素集合,如果存在至少一个匹配元素,则返回 true。
.last() 将匹配元素集合缩减为集合中的最后一个元素。
.map() 把当前匹配集合中的每个元素传递给一个函数,产生包含返回值的新的 jQuery 对象。
.next() 获得匹配元素集合中每个元素紧邻的同辈元素。
.nextAll() 获得匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选)。
.nextUntil() 获得每个元素之后所有的同辈元素,直到遇到匹配选择器的元素为止。
.not() 从匹配元素集合中删除元素。
.offsetParent() 获得用于定位的第一个父元素。
.parent() 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选)。
.parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素,直到遇到匹配选择器的元素为止。
.prev() 获得匹配元素集合中每个元素紧邻的前一个同辈元素,由选择器筛选(可选)。
.prevAll() 获得匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选)。
.prevUntil() 获得每个元素之前所有的同辈元素,直到遇到匹配选择器的元素为止。
.siblings() 获得匹配元素集合中所有元素的同辈元素,由选择器筛选(可选)。
.slice() 将匹配元素集合缩减为指定范围的子集。




分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics