锋利的JQuery（一些选择器源码）

例子一

li.level1
  a
  ul.level2
    li 
    li
    li
li.level1
  a
  ul.level2
    li 
    li
    li
li.level1
  a
  ul.level2
    li 
    li
    li

1. 点击 .level1 > a，显示当前点击的并赋予样式，隐藏其他。

$(".level1 > a").click(function() {
    $(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
    return false;
});

2. 第二种方式

$(".level1>a").click(function(e) {
   //is是用来判断是否是参数选择器指定的格式
    var $ul = $(this).next();
    if ($ul.is(":visible")) {
        $ul.hide(600);
    } else {
        //$ul.show(600).parent().siblings().children("ul").hide(600);
        $ul.show(600).parent().siblings().children("ul").get(0).style.display = "none";
        $ul.show(600).parent().siblings().children("ul").get(1).style.display = "none"

    }

    //以下是阻止事件默认行为的两种方式，二选一就可以
    return false;
    e.preventDefault();
});

例子二

<input type="checkbox" disabled="disabled" />
or 
<input type="checkbox" />

/*
在一个id为table的表格的tbody中，如果每行最后一列中的checkbox没有被禁用，
则把这行的背景设为红色
*/
$("#table>tbody>tr:has(td:has(:checkbox:enabled))").css("background", "red");

--------------------------锋利的JQuery（源码）----------------------------

基本过滤选择器

//选择第一个div元素.
$('#btn1').click(function(){
  $('div:first').css("background","#bfa");
})
//选择最后一个div元素.
$('#btn2').click(function(){
  $('div:last').css("background","#bfa");
})
//选择class不为one的 所有div元素.
$('#btn3').click(function(){
  $('div:not(.one)').css("background","#bfa");
})
//选择 索引值为偶数 的div元素。
$('#btn4').click(function(){
  $('div:even').css("background","#bfa");
})
//选择 索引值为奇数 的div元素。
$('#btn5').click(function(){
  $('div:odd').css("background","#bfa");
})
//选择 索引等于 3 的元素
$('#btn6').click(function(){
  $('div:eq(3)').css("background","#bfa");
})
//选择 索引大于 3 的元素
$('#btn7').click(function(){
  $('div:gt(3)').css("background","#bfa");
})
//选择 索引小于 3 的元素
$('#btn8').click(function(){
  $('div:lt(3)').css("background","#bfa");
})
//选择 所有的标题元素.比如h1, h2, h3等等...
$('#btn9').click(function(){
  $(':header').css("background","#bfa");
})
//选择 当前正在执行动画的所有元素.
$('#btn10').click(function(){
  $(':animated').css("background","#bfa");
});
//选择 当前获取焦点的所有元素.
$('#btn11').click(function(){
  $(':focus').css("background","#bfa");
});

内容过滤选择器

//选取含有文本"di"的div元素.
$('#btn1').click(function(){
  $('div:contains(di)').css("background","#bbffaa");
})
//选取不包含子元素(或者文本元素)的div空元素.
$('#btn2').click(function(){
  $('div:empty').css("background","#bbffaa");
})
//选取含有class为mini元素 的div元素.
$('#btn3').click(function(){
  $("div:has('.mini')").css("background","#bbffaa");
})
//选取含有子元素(或者文本元素)的div元素.
$('#btn4').click(function(){
  $('div:parent').css("background","#bbffaa");
})

属性选择器

//选取含有文本"di"的div元素.
$('#btn1').click(function(){
  $('div:contains(di)').css("background","#bbffaa");
})
//选取不包含子元素(或者文本元素)的div空元素.
$('#btn2').click(function(){
  $('div:empty').css("background","#bbffaa");
})
//选取含有class为mini元素 的div元素.
$('#btn3').click(function(){
  $("div:has('.mini')").css("background","#bbffaa");
})
//选取含有子元素(或者文本元素)的div元素.
$('#btn4').click(function(){
  $('div:parent').css("background","#bbffaa");
})

表单对象属性选择器

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
  //重置表单元素
  $(":reset").click(function(){
      setTimeout(function() {
        countChecked();
        $("select").change();
      },0);
  });

  
  //对表单内 可用input 赋值操作.
  $('#btn1').click(function(){
      $("#form1 input:enabled").val("这里变化了！");  
      return false;
  })
  //对表单内 不可用input 赋值操作.
  $('#btn2').click(function(){
      $("#form1 input:disabled").val("这里变化了！");
      return false;
  })
  //使用:checked选择器，来操作多选框.
  $(":checkbox").click(countChecked);

  function countChecked() {
      var n = $("input:checked").length;
      $("div").eq(0).html("<strong>有"+n+" 个被选中!</strong>");
  }

  countChecked();//进入页面就调用.

 //使用:selected选择器，来操作下拉列表.
  $("select").change(function () {
          var str = "";
          $("select :selected").each(function () {
                str += $(this).text() + ",";
          });
          $("div").eq(1).html("<strong>你选中的是："+str+"</strong>");
  }).trigger('change');
    // trigger('change') 在这里的意思是：
    // select加载后，马上执行onchange.
    // 也可以用.change()代替.
});
//]]>

</script>

<body>
  <h3> 表单对象属性过滤选择器.</h3>
   <form id="form1" action="#">
    <button type="reset">重置所有表单元素</button>
    <br /><br />
  <button id="btn1">对表单内 可用input 赋值操作.</button>
  <button id="btn2">对表单内 不可用input 赋值操作.</button>
  
  <br /><br />
  
    <!-- 测试的元素 -->
    
     可用元素：<input name="add" value="可用文本框"/>  <br/>
     不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
     可用元素： <input name="che" value="可用文本框" /><br/>
     不可用元素：<input name="name" disabled="disabled"  value="不可用文本框"/><br/>
     <br/>
     多选框：<br/>
     <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
     <input type="checkbox" name="newsletter" value="test2" />test2
     <input type="checkbox" name="newsletter" value="test3" />test3
     <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
     <input type="checkbox" name="newsletter" value="test5" />test5
     <div></div>

     <br/><br/>
     下拉列表1：<br/>
    <select name="test" multiple="multiple" style="height:100px">
        <option>浙江</option>
        <option selected="selected">湖南</option>
        <option>北京</option>
        <option selected="selected">天津</option>
        <option>广州</option>
        <option>湖北</option>
    </select>
    
     <br/><br/>
     下拉列表2：<br/>
     <select name="test2" >
    <option>浙江</option>
    <option>湖南</option>
    <option selected="selected">北京</option>
    <option>天津</option>
    <option>广州</option>
    <option>湖北</option>
    </select>
    <br/><br/>

     <div></div>
  </form>
</body>