1、 複選框的全選、全不選、反選、
      //全選
      $("#CheckedAll").click(function(){
           $('[name=items]:checkbox').attr('checked', true);
    });
   //全不選
      $("#CheckedNo").click(function(){
      $('[type=checkbox]:checkbox').attr('checked', false);
   });
   //反選
      $("#CheckedRev").click(function(){
     $('[name=items]:checkbox').each(function(){
    //此處用JQ寫法頗顯囉嗦。體現不出JQ飄逸的感覺。
    //$(this).attr("checked", !$(this).attr("checked"));
        //直接使用JS原生程式碼簡單實用
    this.checked=!this.checked;
     });
 2、下拉框左右變換
 $('#add').click(function() {
  //獲取選中的選項刪除並追加給對方
   $('#select1 option:selected').appendTo('#select2');
  });
 //全部移到左邊
  $('#remove_all').click(function() {
   $('#select2 option').appendTo('#select1');
  });
  //雙擊選項
  $('#select1').dblclick(function(){
 //繫結雙擊事件
   //獲取全部的選項,刪除並追加給對方
   $("option:selected",this).appendTo('#select2');
 //追加給對方
  });
 3、表格行變色
  $(function(){
   $("tr:odd").addClass("odd");
  /* 奇數行新增樣式*/
   $("tr:even").addClass("even");
 /* 偶數行新增樣式*/
  })
 4、DOM解析
       var $para = $("p");   // 獲取<p>節點
    var $li = $("ul li:eq(1)");   // 獲取第二個<li>元素節點
       如果要給新增屬性則必須是以$開頭的物件輸出則不要$
    var p_txt = $para.attr("title"); // 輸出<p>元素節點屬性title
    var ul_txt =  $li.attr("title"); // 獲取<ul>裡的第二個<li>元素節點的屬性title
    var li_txt =  $li.text();    // 輸出第二個<li>元素節點的text
41、建立Dom節點
 var $li_1 = $("<li></li>");    //  建立第一個<li>元素
      var $li_2 = $("<li></li>");    //  建立第二個<li>元素
   var $parent = $("ul");  // 獲取<ul>節點。<li>的父節點
   $parent.append($li_1);     // 新增到<ul>節點中使之能在網頁中顯示
   $parent.append($li_2);     // 可以採取鏈式寫法$parent.append($li_1).append($li_2);
 4.2、刪除節點
 $("ul li:eq(1)").remove(); // 獲取第二個<li>元素節點後將它從網頁中刪除。
 4.3刪除指定節點 $("ul li").remove("li[title!=菠蘿]");  //把<li>元素中屬性title不等於"菠蘿"的<li>元素刪除
 4.4清空節點內容 $("ul li:eq(1)").empty(); // 找到第二個<li>元素節點後清空此元素裡的內容
 4.5克隆節點 $("ul li").click(function(){
       $(this).clone().appendTo("ul"); // 複製當前點選的節點並將它追加到<ul>元素
   })
   4.6替換節點
 $("p").replaceWith("<strong>你最不喜歡的水果是?</strong>");
 4.7包裹節點
 $("strong").wrap("<b></b>");//用<b>元素把<strong>元素包裹起來
 4.8屬性操作
   //設定<p>元素的屬性'title'
       $("input:eq(0)").click(function(){
    $("p").attr("title","選擇你最喜歡的水果.");
    });
 4.9樣式操作
   //獲取樣式
       $("input:eq(0)").click(function(){
    alert( $("p").attr("class") );
   });
       //設定樣式
    $("input:eq(1)").click(function(){
    $("p").attr("class","high");
    });
       //追加樣式
    $("input:eq(2)").click(function(){
    $("p").addClass("another");
    });
        //刪除全部樣式
    $("input:eq(3)").click(function(){
    $("p").removeClass();
    });
       //刪除指定樣式

    $("input:eq(4)").click(function(){

$("p").removeClass("high");
    });
       //重複切換樣式
    $("input:eq(5)").click(function(){
    $("p").toggleClass("another");
    });
   5、遍歷節點
 var $p1 = $("p").next();
   alert( $p1.html() );  //  緊鄰<p>元素後的同輩元素
   var $ul = $("ul").prev();
   alert( $ul.html() );  //  緊鄰<ul>元素前的同輩元素
   var $p2 = $("p").siblings();
   alert( $p2.html() );  //  緊鄰<p>元素的唯一同輩元素
 6、Bind事件
 $(document).bind("click", function (e) {
   $(e.target).closest("li").css("color","red");
 })
  <div id="panel">
  <h5 class="head">什麼是jQuery?</h5>
  <div class="content">
   jQuery是繼Prototype之後又一個優秀的JavaScript庫它是一個由 John Resig 創建於2006年1月的開源專案。jQuery憑藉簡潔的語法和跨平臺的相容性極大地簡化了JavaScript開發人員遍歷HTML文件、操作DOM、處理事件、執行動畫和開發Ajax。它獨特而又優雅的程式碼風格改變了JavaScript程式設計師的設計思路和編寫程式的方式。  </div>
 </div>
 第一種:$("#panel h5.head").bind("mouseover",function(){
      $(this).next().show();
  });
    $("#panel h5.head").bind("mouseout",function(){
       $(this).next().hide();
  })
 第二種:$("#panel h5.head").hover(function(){
      $(this).next().show();
  },function(){
      $(this).next().hide();
     })
 第三種:$("#panel h5.head").toggle(function(){
    $(this).next().show();
  },function(){
    $(this).next().hide();
  })

7、動畫
 $("#panel").click(function(){
     $(this).animate({left: "500px"}, 3000);
  })
 8、層次選擇器
    //選擇 body內的所有div元素.
       $('#btn1').click(function(){
     $('body div').css("background","#bbffaa");
    })
    //在body內的選擇 元素名是div 的子元素.
   $('#btn2').click(function(){
     $('body > div').css("background","#bbffaa");
    })
    //選擇 所有class為one 的下一個div元素.
    $('#btn3').click(function(){
     $('.one + div').css("background","#bbffaa");
    })
    //選擇 id為two的元素後面的所有div兄弟元素.
    $('#btn4').click(function(){
      $('#two ~ div').css("background","#bbffaa");
 9、表單選擇器
 var $alltext = $("#form1 :text");
     var $allpassword= $("#form1 :password");
     var $allradio= $("#form1 :radio");
     var $allcheckbox= $("#form1 :checkbox");
   var $allsubmit= $("#form1 :submit");
  var $allimage= $("#form1 :image");
  var $allreset= $("#form1 :reset");
  var $allbutton= $("#form1 :button"); // <input type=button />  和 <button ></button>都可以匹配
  var $allfile= $("#form1 :file");
     var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
    var $allselect = $("#form1 select");
    var $alltextarea = $("#form1 textarea");
       var $AllInputs = $("#form1 :input");
  var $inputs = $("#form1 input");