jQuery中的事件

基礎事件

滑鼠事件： click( )：單擊滑鼠時 mouseover( )：滑鼠指標移過時 mouseout( )：滑鼠指標移出時 mouseenter( )：滑鼠指標進入時 mouseleave( )：滑鼠指標離開時

鍵盤事件： keydown( )：按下鍵盤時 keyup( )：釋放按鍵時 keypress( )：產生可列印的字元時

window事件 表單事件 瀏覽器事件：

$(selector).resize( )：調整視窗大小時，完成頁面特效

繫結事件與移除事件：

 unbind([type],[fn]) 

複合事件

滑鼠游標懸停 hover(enter,leave)： hover()方法相當於mouseover與mouseout事件的組合 滑鼠連續點選

jQuery中的DOM操作

樣式操作

追加樣式：$(selector).addClass(class);
	或   $(selector).addClass(class1 class2 … classN);
移除樣式：$(selector).removeClass("class") ;
	或   $(selector).removeClass("class1 class2 … classN ") ;
設定樣式：css(name,value) ;
	或 css({name:value, name:value,name:value…}) ;
獲取樣式：css(name)
切換樣式：$(selector).toggleClass(class) ;
判斷樣式：$(selector). hasClass(class);
 

內容及Value值操作

HTML程式碼操作
      $("div.left").html()：元素中的html程式碼
 	  $("div.left").html("<div class='content'>…</div>")：設定 
標籤內容操作
      $("div.left").text()：獲取元素中的文字內容
      $("div.left").text("<div class='content'>…</div>")：設定
屬性值操作
     $(this).val()：獲取元素的value屬性值
    $(this).val(value)：設定
 

節點操作

查詢節點
建立節點: var $newNode2=$("<li title='last'>北京申辦冬奧</li>");
插入節點 
元素內部插入子節點
      $(A).append(B)表示將B追加到A中
      $(A).appendTo(B)表示把A追加到B中
      $(A). prepend (B)表示將B前置插入到A中
      $(A). prependTo (B)表示將A前置插入到B
元素外部插入同輩節點
    $(A).after (B)表示將B插入到A之後
   $(A).after (B)表示將B插入到A之後
    $(A). before (B)表示將B插入至A之前
    $(A). insertBefore (B)表示將A插入到B之前
刪除節點
   remove()：刪除整個節點
   empty()：清空節點內容
   detach()：刪除整個節點，保留元素的繫結事件、附加
替換節點
    $(".gameList li:eq(2)").replaceWith($newNode1);
    $($newNode1).replaceAll(".gameList li:eq(2)");
    兩者的關係類似於append()和appendTo()
複製節點
    $(selector).clone([includeEvents]) ;
    引數ture或flase, true複製事件處理，flase時反之

節點屬性操作

獲取元素屬性:$(selector).attr([name]) ;
設定元素屬性:
    $(selector).attr({[name1:value1]…[nameN:valueN]}) ;
刪除元素屬性
    $(selector).removeAttr(name) ;

節點遍歷

 遍歷子元素
         $(selector).children([expr])
         var $section =$("section").children(); 
         獲取<section>的子元素，但不包含子元素的子元素
遍歷同輩元素
      用於獲取緊鄰匹配元素之後的元素
         $("li:eq(1)").next().addClass("orange");
      用於獲取緊鄰匹配元素之前的元素
         $("li:eq(1)").prev().addClass("orange");
      用於獲取位於匹配元素前面和後面的所有同輩元素
         $("li:eq(1)").siblings().addClass("orange");
遍歷前輩元素
      parent()：獲取元素的父級元素
      parents()：元素元素的祖先元素
         $("li:eq(1)").parent().addClass("orange");
         $("li:eq(1)").parents().addClass("orange");
其他遍歷方法
    each( ) ：規定為每個匹配元素規定執行的函式
    $(selector).each(function(index,element)) ;
    $("img").click(function(){
       $("li").each(function(){
           var str=$(this).text()+"<br>";
           $("section").append(str);
       })
   });
end( )：結束當前鏈條中的最近的篩選操作，
並將匹配元素集還原為之前的狀態

CSS-DOM操作