[转载 js] jQuery选择器

   经典看到的,转载过来,需要的时候翻翻.

   =============================================================================

jQuery的选择器可谓异常强大,没有什么DOM里的任何数据能逃出它的掌心,这点是我非常喜欢的,
以前获取NODE要用getElementById,getElementsByTag,非常繁琐,用jQuery,很简单的代码就能实现
下面是对jQuery的选择器使用的总结,不妥之处,敬请斧正.

我把jQuery的选择器选择的方式分5类:

1.DOM方式

   $('#id1')
   //返回id为id1的TAG,类型:jQuery对象,以下省略
  
   $('#id1 p')
   $('#id1>p')
   //返回id为id1的TAG下所有的p

   能区别 $('#id1 #id2 #id3') 和 $('#id1,#id2,#id3') 的区别吗?

   $('#id1,#id2,#id3')
   //返回id为#id1下的#id2下的#id3的TAG

   $('#id1,#id2,#id3')
   //返回id为id1,id2,id3的TAG的群组

2.CSS方式
  
   $('.style')
   //返回样式为style的TAG

   $('div.style')
   //返回样式为style的div

   $('.style1,.style2,.style3')
   //返回样式为style1,style2,style3的群组

3.属性方式
  
   $('[attribute]')
   //返回所有拥有attribute属性的所有tag
  
   $('[attribute=value]')//返回属性attribute值为value的所有tag
   $('[attribute!=value]')//返回属性attribute值不为value的所有tag
   $('[attribute^=value]')//返回属性attribute值以value开头的所有tag
   $('[attribute$=value]')//返回属性attribute值以value结尾的所有tag
   $('[attribute*=value]')//返回属性attribute值包含value的所有tag

   还可有群组选择
   $('[attribute1=value1],[attribute2=value2],[attribute3=value3]')

4.表单'伪'类
  
   形似CSS里的伪类 a:hover 所以就叫表单'伪'类,一己之见

   $(':input') //返回所有的input、textarea、select、button
   $(':button')   //返回所有type为button的表单
   其他类似的还有:':text',':password',':radio',':checkbox',':reset',':submit',':file'  

   $(':disabled') //返回所有的禁用的表单,其实也可以通过属性方式选择
   其他类似的还有:':enabled',':checked',':selected'


5."伪伪类"过滤
严格说不应分一类,因为单用这不一定选不出所需的tag(表单类除外)
"伪伪类"过滤对基本方式选择起到了如虎添翼的作用

$("p:first")     //返回所选的第一个p

$("p:first-child")//和$("p:first")不同的是,这里是同级下的第一个p

$("p:last")    //返回所选的最后一个p
$("p:not(.ok)")   //返回样式不是ok的所有的p ,not()中的参数支持以上四种选择方式
$("#id1:parent") //返回id为id1的tag的父节点

"伪伪类"过滤的方式很多,就不一一列举

posted on 2008-08-06 10:00  真阿当  阅读(91)  评论(0编辑  收藏  举报