﻿<?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-枫中畅游-随笔分类-javascript</title><link>http://www.blogjava.net/javalinjx/category/51944.html</link><description>关注技术，热爱生活</description><language>zh-cn</language><lastBuildDate>Mon, 11 Jun 2012 14:42:12 GMT</lastBuildDate><pubDate>Mon, 11 Jun 2012 14:42:12 GMT</pubDate><ttl>60</ttl><item><title>jQuery选择器的分类</title><link>http://www.blogjava.net/javalinjx/archive/2012/06/11/380540.html</link><dc:creator>javalinjx</dc:creator><author>javalinjx</author><pubDate>Mon, 11 Jun 2012 14:39:00 GMT</pubDate><guid>http://www.blogjava.net/javalinjx/archive/2012/06/11/380540.html</guid><wfw:comment>http://www.blogjava.net/javalinjx/comments/380540.html</wfw:comment><comments>http://www.blogjava.net/javalinjx/archive/2012/06/11/380540.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/javalinjx/comments/commentRss/380540.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/javalinjx/services/trackbacks/380540.html</trackback:ping><description><![CDATA[<div><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; "><br />1、基本选择器<br />2、层次选择器<br />3、过滤选择器<br />4、表单选择器</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; ">1、基本选择器</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; ">#id : 根据给定的id匹配一个元素，返回单个匹配的元素：<br />eg：$(#t)选取id为t的元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; "><br />.class:根据给定的类名匹配元素,返回集合元素，<br />eg：$(".t")选取所有class为t的元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; "><br />elements：根据给定的元素名匹配元素，返回集合元素<br />eg：$("p")选取所有的&lt;p&gt;元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; "><br />*：匹配所有的元素,返回集合元素<br />eg：$("*")选取所有的元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; ">&nbsp;</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; ">选择器匹配：将每一个选择器匹配到的元素合并后一起返回<br />eg:$("div,span,p.myClass")选取所有&lt;div&gt;,&lt;span&gt;和拥有class为myClass的&lt;p&gt;标签的一组元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; ">&nbsp;</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; "><br />2、层次选择器<br />$("ancestor descendant"):选取ancestor元素里的所有descendent(后代)元素<br />eg：$("div span")选取&lt;div&gt;里的所有的&lt;span&gt;元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; ">$("parent&gt;child"):选取parent元素下的child(子元素)，与$("ancestor descendant")的区别，$("ancestor descendant")选择的是后代元素<br />eg:$("div&gt;span")选取&lt;div&gt;元素下元素名是&lt;span&gt;的子元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; ">$(''prev+next") :选取紧跟在prev元素后的next元素<br />eg:$(".one+div")选取class为one的下一个&lt;div&gt;元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; ">$('prev~siblings'): 选取prev元素之后的所有siblings元素<br />eg:$("#two~div")选取id为two的元素后面的所有&lt;div&gt;兄弟元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; ">&nbsp;</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; "><br />3、过滤选择器<br />（1）基本过滤<br />：first：选取第一个元素<br />eg<br />$("div:first")选取所有&lt;div&gt;元素中的第一个&lt;div&gt;元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; "><br />last:&nbsp; 选取最后一个元素<br />eg：<br />$("div:last")选取所有&lt;div&gt;元素中最后一个&lt;dib&gt;元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; "><br />:&nbsp; not(selector)去除所有与给定选择器匹配的元素<br />eg：<br />$("input:not(.myClass)")选取class不是myClass的&lt;input&gt;元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; "><br />：even选取索引是偶数的所有元素，索引从0开始<br />eg<br />$("input:even")选取索引是偶数的&lt;input&gt;元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; "><br />：odd选取索引时奇数的所有元素，索引从0开始<br />eg<br />$("input:even")选取索引是奇数的&lt;input&gt;元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; "><br />：eq(index) 选取索引等于index的元素（index从0开始）<br />eg<br />$("input:eq(1)")选取索引等于1的&lt;input&gt;元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; "><br />:gt(index)选取索引大于index的元素（index从0开始）<br />eg<br />$("input:gt(1)")选取索引大于1的&lt;input&gt;元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; "><br />:lt(index)选取索引小于index的元素（index从0开始）<br />eg<br />$("input:lt(1)")选取索引小于1的&lt;input&gt;元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; "><br />:header 选取所有的标题元素<br />eg<br />$(":header")选取网页中所有的&lt;h1&gt;&lt;h2&gt;&lt;h3&gt;......</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; "><br />内容过滤<br />：contains(text)选取含有文本内容为&#8220;text&#8221;的元素<br />eg<br />$("div:contains('刘')")选取含有文本&#8220;刘&#8221;元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; ">:empty 选取不包含子元素或者文本的空元素<br />eg<br />$("div:empty")选取不包含子元素或文本元素的&lt;div&gt;空元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; ">：has(selector)选取含有选择器所匹配的元素的元素<br />eg<br />$("div:has(p)")选取含有&lt;p&gt;元素的&lt;div&gt;元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; ">：parent 选取含有子元素或文本的元素<br />eg<br />$("div:parent")选取包含子元素或文本元素的&lt;div&gt;元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; ">&nbsp;</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; "><br />可见性过滤<br />：hidden 选取所有不可见的元素<br />eg<br />$(":hidden")选取所有不见的元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; ">：visible选取所有可见的元素<br />eg<br />$("div：visible")选取所有可见的&lt;div&gt;元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; ">&nbsp;</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; "><br />属性过滤<br />[attribute]选取拥有此属性的元素<br />eg<br />$("div[id]")选取拥有属性id的元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; "><br />[attribute=value]选取属性的值为value元素<br />eg<br />$("div[title=test]")选取属性title为test的&lt;div&gt;元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; "><br />[attribute!=value]选取属性的值不等于value元素<br />eg<br />$("div[title！=test]")选取属性title不是test的&lt;div&gt;元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; "><br />[attribute^=value]选取属性的值以value开始的元素<br />eg<br />$("div[title^=test]")选取属性title以test开始的&lt;div&gt;元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; "><br />[attribute$=value]选取属性的值以value结束的元素<br />eg<br />$("div[title$=test]")选取属性title以test结束的&lt;div&gt;元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; "><br />[attribute*=value]选取属性的值含有value的元素<br />eg<br />$("div[title*=test]")选取属性title含有test的&lt;div&gt;元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; "><br />[selector]用属性选择器合成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围<br />eg<br />$("div[id][title*=test]")选取拥有属性id，并且属性title以test结束的&lt;div&gt;元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; ">&nbsp;</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; ">子元素过滤<br />：nth-child(index/even/odd/equation)选取每个父元素下的第index个子元素或者奇偶元素（index从1算起）<br />eg<br />:eg(index)只匹配一个元素，而：nth-child将为每一个父元素匹配子元素，并且：nth-child（index）的index是从1开始的，而：eq（index）是从0算起的</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; "><br />：first-child选取每个父元素的第一个子元素<br />eg<br />：first只返回单个元素，而：first-child选择符将为每个父元素匹配第一个子元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; "><br />：last-child选取每个父元素的最后一个子元素<br />eg<br />：last只返回单个元素，而：last-child选择符将为每个父元素匹配最后一个子元素</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25px; text-align: left; background-color: #ffffff; "><br />：only-child如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配<br />eg<br />$("ul li:only-child")在&lt;ul&gt;中选取是唯一子元素的&lt;li&gt;元素</p></div><img src ="http://www.blogjava.net/javalinjx/aggbug/380540.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/javalinjx/" target="_blank">javalinjx</a> 2012-06-11 22:39 <a href="http://www.blogjava.net/javalinjx/archive/2012/06/11/380540.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>