jQuery选择器总结(转+原创)

// JScript 文件

$(document).ready(function(){
    //找到所有的div并将其隐藏
    $("#gvVerify").find("div").hide().end();
    //点击事件,确定是否显示详细信息
    $("#gvVerify").find("table").click(function(){
        //alert("Hello World!");
        //$(this).next()找到它的下一个元素
        var tbdetail = $(this).next();
     if (tbdetail.is(":visible")){
   tbdetail.slideUp();
  }
  else {
   tbdetail.slideDown();
  }
 });
 
 
});

 

 

以下为转
我把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的父节点

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

http://www.lineks.cn/archives/52