JQuery选择器

JQuery选择器

 

$的选择器部分:凡是运用$,其返回值是一个object$选择器主要用于选择标签.基本用法是同css的选择器.可是,很让人兴奋的是,他支持常见的浏览器,而css中不少选择器是IE6所不支持的.1.基本选择器(3种):$("标签名"),如$("p")是选取了全部的p标签节点$("#id名"),如$("#test")是选取了id为test的标签节点$(".class名"),如$(".test")是选取了全部class为test的标签节点上面的$("标签名")和$(".class名")返回的都是全部知足的节点,至于进一步筛选能够添加一些函数,如eq,gt,lt等等.2.组选择器:下面仍是现作一个约定:把"标签名或#id名或.class名"记做mix,则mix表示一个标签名,或一个#id或一个.class.$("mix,mix,mix,..."),如:$("div,#test1,p,.test2,#test3") 3.后代选择器:$("mix mix"),固然能够是多个嵌套,但后代选择器能够是深层子代,因此$("mix mix mix ...")这种写法做用不大.例子:$("div .test"):在div标签内的全部具备test的class的后代元素(就是被div嵌套的class属性为test的标签)能够见DEMO。4.子选择器:$("mix>mix"),这个放在后代选择器后面是为了和它作对比.子选择器只能选择第一代子代.不处理深层嵌套.例子:$("div>.test")<div><p class="test"></p></div>对这里的p段落标签有效.但对<div><p><p class="test"></p></p></div>对这里的p段落标签无效,这里要用$("div .test)5.临近选择器:$("mix+mix"),选取下一个兄弟节点.如:$("div +#test"),id为test的的节点必须是div的下一个兄弟节点.<div></div><p id="test"></p>在$("div + #test")中能取到p段落节点<div></div><p></p><p id="test"></p>则不能取到6.属性选择器:把属性选择器不放在css选择器里面是由于jQuery中写法是不同的.至于css中写法能够参考我以前写的一篇css的选择器一文.jQuery中是和xPath相似的写法:$("mix[@attr]"):选取全部该mix且具备attr属性的节点$("mix[@attr=a_value"]):选取全部该mix且具备attr属性并知足属性值为a_value的节点$("mix[@attr^=a_value_head"]):attr属性的属性值是以a_value_head开头的$("mix[@attr$=a_value_end"]):attr属性的属性值是以a_value_end结尾的$("mix[@attr*=a_value"]):attr属性的属性值中包含a_value7.进一步选择器:这个名称是我本身起的,其实选择器组合都有进一步的意思,你明白后面所介绍的知识便可.具备限定子节点选择器:$("mix1[mix2]"):返回包含mix2的mix1节点.如:$("div[a]"):包含a标签的div.这个和$("div a")不相同.后者表示div中的a标签,返回的是a标签对象,前者返回的是div标签对象冒号限定结点选择器:$("mix:condition"):mix标签,而且知足限定条件.E:root:类型为E,而且是文档的根元素E:nth-child(n):是其父元素的第n个类型为E的子元素 ,基数从1开始E:first-child:是其父元素的第1个类型为E的子元素E:last-child:是其父元素的最后一个类型为E的子元素E:only-child:且是其父元素的惟一一个类型为E的子元素E:empty:没有子元素（包括text节点）的类型为E的元素E:enabledE:disabled:类型为E,容许或被禁止的用户界面元素E:checked:类型为E,处于选中状态的用户界面元素（例如单选按钮或复选框）E:visible:选择全部可见元素(display值为block或visible,visibility值为visible元素,不包括hide域)E:hidden:选择全部隐藏元素(非Hide域,且display值为block或visible,visibility值为visible的元素)E:not(s):类型为E,不匹配选择器sE:eq(n),E:gt(n),E:lt(n):元素限定E:first:至关于E:eq(0)E:last:最后一个匹配的元素E:even:从匹配的元素集中取序数为偶数的元素E:odd:从匹配的元素集中取序数为奇数的元素E:parent:选择包含子元素（包含text节点）的全部元素E:contains('test'):选择全部含有指定文本的元素表单选择器:E:input:选择表单元素(input,select,textarea,button)E:text:选择全部文本域(type="text")E:password:选择全部密码域(type="password")E:radio:选择全部单选按钮(type="radio")E:checkbox:选择全部复选框(type="checkbox")E:submit:选择全部提交按钮(type="submit")E:p_w_picpath:选择全部图像域 (type="p_w_picpath")E:reset:选择全部清除域(type="reset")E:button:选择全部按钮(type="button")固然包括E:hidden8.xPath路径查询:先介绍下xPath的语法:/:选取根节点//:选取文档中全部符合条件的节点,无论该节点位于何处.:选取当前节点..:选取单前节点的父节点@:选取属性,这个在以前说过了(属性选择器)nodename:选取节点下的全部节点jQuery中的应用:根节点是不多用到的,经常使用的以下面的例子:$("div/p")至关于$("div>p")$("div//p")至关于$("div p")$("//div/../p"):全部div节点的父节点下的p标签还有相对路径的写法以及支持的Axis选择器,还不是会应用,不介绍了...已经一大堆了$的其余用法:$(html节点):根据提供的原始HTML标记字符串,动态建立由jQuery对象包装的DOM元素.如:$("<div><p>Hello</p></div>").appendTo("#body");//把<div><p>Hello</p></div>添加到body元素中$(document):网页文档对象$(document.body):网页body对象,和$("body")是同样的$(函数):DOM载入后就执行该函数.因此$(document).ready()能够写作$()$(选择器部分,选择器来源):这个举例说明$("input:radio",document.forms[0]):在文档的第一个表单中,搜索全部单选按钮$("div",xml.responseXML):查询指定XML文档中的全部div元素选择器来源能够是:做为上下文的DOM元素,文档或jQuery对象还有两个:$.extend(prop)和$.noConflict()是和插件以及和其余库兼容的使用,之后再写jQuery的core部分还有:eq(数字):将匹配的元素集合缩减为一个元素。这个元素在匹配元素集合中的位置变为0,而集合长度变成1gt(数字):将匹配的元素集合缩减为给定位置以后的全部元素lt(数字):将匹配的元素集合缩减为给定位置以前的全部元素上面三个的例子:$("div:eq(1)")//第2个div$("div:gt(2)")//第3个div以及以后的div$("div:lt(2)")//第2个div以及以前的div,即第1个div和第2个divlength或size():当前匹配的元素数量each():以每个匹配的元素做为上下文来执行一个函数。这意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不一样的元素(每次都是一个不一样的匹配元素).并且,在每次执行函数时,都会给函数传递一个表示做为执行环境的元素在匹配的元素集合中所处位置的数字值做为参数.$("img").each(function(i){ this.src = "test" + i + ".jpg"; });//迭代图像,并设置它们的src属性get():若是没有参数,返回全部,是一个对象数组;若是带参数,必须是数字,基数从0开始.例子:$("div").get():返回一个div对象数组$("div").get(1):返回第二个div对象index(需求的元素节点对象):返回数字.用个例子说明:$("div").index($(".test"))[1] //表示从全部div节点中查找class属性为test的节点.而且找的是第二个节点(基数从0开始).返回值是该节点在div节点中的位置(基数也是从0开始).