﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-风萧萧兮~~易水寒~~~-文章分类-前端</title><link>http://www.blogjava.net/xjacker/category/46167.html</link><description>互联网大杂烩</description><language>zh-cn</language><lastBuildDate>Wed, 20 Oct 2010 21:11:23 GMT</lastBuildDate><pubDate>Wed, 20 Oct 2010 21:11:23 GMT</pubDate><ttl>60</ttl><item><title>JQuery的强大筛选器</title><link>http://www.blogjava.net/xjacker/articles/335717.html</link><dc:creator>风萧萧兮</dc:creator><author>风萧萧兮</author><pubDate>Wed, 20 Oct 2010 11:10:00 GMT</pubDate><guid>http://www.blogjava.net/xjacker/articles/335717.html</guid><wfw:comment>http://www.blogjava.net/xjacker/comments/335717.html</wfw:comment><comments>http://www.blogjava.net/xjacker/articles/335717.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/xjacker/comments/commentRss/335717.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/xjacker/services/trackbacks/335717.html</trackback:ping><description><![CDATA[<div id="blog_text" class="cnt"><font size="3">在Web应用程序中，大部分的客
户端操作都是基于对象的操作，要操作对象就必须先获取对象，jQuery(v1.3.2)提供了强大的选择器让我们获取对
象。在这边，我人为地将jQuery选择器分为两大部分：选择对象和筛选条件。选择对象表示要获取什么对象，筛选条件是对获取的对象进行筛选，最终留下符
合某些特征的对象。<br />
<br />
<strong>1.选择对象</strong><br />
<br />
<span style="color: brown;">1).基本</span><br />
<br />
&#183;<span style="color: green;">#id</span> </font>
<font size="3">根据给定的ID匹配一个元素。例如：$("#id")<br />
&#183;<span style="color: green;">element</span> 根据给定的元素名匹配所有元素。例如：$("div")<br />
&#183;<span style="color: green;">.class</span> 根据给定的类匹配元素。例如：$(".style1");<br />
&#183;<span style="color: green;">*</span> 匹配所有元素。例如：$("*")<br />
&#183;<span style="color: green;">selector1,selector2,selectorN</span> 将每一个选择器匹配到的元素合并后一起返回。例如：$("#id,div,.style1")<br />
<br />
<span style="color: brown;">2).表单</span><br />
<br />
&#183;<span style="color: green;">:button</span> 匹配所有按钮。例如：$(":button")<br />
&#183;<span style="color: green;">:checkbox</span> 匹配所有复选框。例如：$(":checkbox")<br />
&#183;<span style="color: green;">:file</span> 匹配所有文件域。例如：$(":file")<br />
&#183;<span style="color: green;">:hidden</span> 匹配所有不可见元素，或者type为hidden的元素。例如：$("input:hidden")<br />
&#183;<span style="color: green;">:image</span> 匹配所有图像域。例如：$(":image")<br />
&#183;<span style="color: green;">:input</span> 匹配所有 input, textarea, select 和 button 元素。例如：$(":input")<br />
&#183;<span style="color: green;">:password</span> 匹配所有密码框。例如：$(":password")<br />
&#183;<span style="color: green;">:radio</span> 匹配所有单选按钮。例如：$(":radio")<br />
&#183;<span style="color: green;">:reset</span> 匹配所有重置按钮。例如：$(":reset")<br />
&#183;<span style="color: green;">:submit</span> 匹配所有提交按钮。例如：$(":submit")<br />
&#183;<span style="color: green;">:text</span> 匹配所有的单行文本框。例如：$(":text")<br />
&#183;<span style="color: green;">:header</span> 匹配如 h1, h2, h3之类的标题元素。例如：$(":header").css("background", "#EEE");<br />
<br />
<strong>2.筛选条件</strong><br />
<br />
<span style="color: brown;">1).属性筛选</span><br />
<br />
&#183;<span style="color: green;">[attribute*=value]</span> 匹配给定的属性是以包含某些值的元素。例如：$("input[name*='man'")<br />
&#183;<span style="color: green;">[attribute!=value]</span> 匹配所有含有指定的属性，但属性不等于特定值的元素。例如：$(input[name!='man');<br />
&#183;<span style="color: green;">[attribute$=value]</span> 匹配给定的属性是以某些值结尾的元素。例如：$("input[name$='man']")<br />
&#183;<span style="color: green;">[attribute=value]</span> 匹配给定的属性是某个特定值的元素。例如：$("input[name='man']");<br />
&#183;<span style="color: green;">[attribute]</span> 匹配包含给定属性的元素。例如：$("div[id]")<br />
&#183;<span style="color: green;">[attribute^=value]</span> 匹配给定的属性是以某些值开始的元素。例如：$("input[name^='man']")<br />
&#183;<span style="color: green;">[selector1][selector2][selectorN]</span> 同时满足多个条件。例如：$("input[id][name$='man']")<br />
&#183;<span style="color: green;">:hidden</span> 匹配所有的不可见元素。例如：$("tr:hidden")<br />
&#183;<span style="color: green;">:visible</span> 匹配所有的可见元素。例如：$("tr:visible")<br />
&#183;<span style="color: green;">:checked</span> 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)。例如：$("input:checked")<br />
&#183;<span style="color: green;">:disabled</span> 匹配所有不可用元素。例如：$("input:disabled")<br />
&#183;<span style="color: green;">:enabled</span> 匹配所有可用元素。例如：$("input:enabled")<br />
&#183;<span style="color: green;">:selected</span> 匹配所有选中的option元素。例如：$("select option:selected")<br />
<br />
<span style="color: brown;">2).内容筛选</span><br />
<br />
&#183;<span style="color: green;">:contains(text)</span> 匹配包含给定文本的元素。例如：$("div:contains('John')")<br />
&#183;<span style="color: green;">:empty</span> 匹配所有不包含子元素或者文本的空元素。例如：$("td:empty")<br />
&#183;<span style="color: green;">:has(selector)</span> 匹配含有选择器所匹配的元素的元素。例如：$("div:has(p)");<br />
&#183;<span style="color: green;">:parent</span> 匹配含有子元素或者文本的元素。例如：$("td:parent")<br />
<br />
<span style="color: brown;">3).层级筛选</span><br />
<br />
&#183;<span style="color: green;">ancestor descendant</span> 在给定的祖先元素下匹配所有的后代元素。例如：$("form input")<br />
&#183;<span style="color: green;">parent &gt; child</span> 在给定的父元素下匹配所有的子元素。例如：$("form &gt; input")<br />
&#183;<span style="color: green;">prev + next</span> 匹配所有紧接在 prev 元素后的 next 元素。例如：$("label + input")<br />
&#183;<span style="color: green;">prev ~ siblings</span> 匹配 prev 元素之后的所有 siblings 元素。例如：$("form ~ input")<br />
&#183;<span style="color: green;">:first-child</span> 匹配第一个子元素。例如：$("ul li:first-child")<br />
&#183;<span style="color: green;">:last-child</span> 匹配最后一个子元素。例如：$("ul li:last-child")<br />
&#183;<span style="color: green;">:nth-child(index/even/odd/equation)</span> 匹配其父元素下的第N个子或奇偶元素。例如：$("ul li:nth-child(2)")<br />
&#183;<span style="color: green;">:only-child</span> 如果某个元素是父元素中唯一的子元素，那将会被匹配。例如：$("ul li:only-child")<br />
<br />
<span style="color: brown;">4).方法筛选</span><br />
<br />
&#183;<span style="color: green;">:animated</span> 匹配所有正在执行动画效果的元素。例如：$("div:animated");<br />
&#183;<span style="color: green;">:eq(index)</span> 匹配一个给定索引值的元素。例如：$("tr:eq(1)")<br />
&#183;<span style="color: green;">:even</span> 匹配所有索引值为偶数的元素，从 0 开始计数。例如：$("tr:even")<br />
&#183;<span style="color: green;">:first</span> 匹配找到的第一个元素。例如：$("tr:first")<br />
&#183;<span style="color: green;">:gt(index)</span> 匹配所有大于给定索引值的元素，从 0 开始计数。例如：$("tr:gt(0)")<br />
&#183;<span style="color: green;">:last</span> 匹配找到的最后一个元素。例如：$("tr:last")<br />
&#183;<span style="color: green;">:lt(index)</span> 匹配所有小于给定索引值的元素。例如：$("tr:lt(2)")<br />
&#183;<span style="color: green;">:not(selector)</span> 去除所有与给定选择器匹配的元素。例如：$("input:not(:checked)")<br />
&#183;<span style="color: green;">:odd</span> 匹配所有索引值为奇数的元素，从 0 开始计数。例如：$("tr:odd")<br />
<br />
<br />
</font><font size="3">转自：</font>http://hi.baidu.com/%BA%EB%D3%EE%D8%BC/blog/item/1ec289664995c22fab184cab.html<br />
</div>
<img src ="http://www.blogjava.net/xjacker/aggbug/335717.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/xjacker/" target="_blank">风萧萧兮</a> 2010-10-20 19:10 <a href="http://www.blogjava.net/xjacker/articles/335717.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>