1. 程式人生 > >jQuery中的事件與DOM操作

jQuery中的事件與DOM操作

jQuery中的事件

基礎事件

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

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

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

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

繫結事件與移除事件:

 unbind([type],[fn]) 

複合事件

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

toggle(fn1,fn2,…,fnN) toggleClass(className) toggle( )和toggleClass( )總結 toggle( fn1,fn2…)實現單擊事件的切換,無須額外繫結click事件 toggle( )實現事件觸發物件在顯示和隱藏狀態之間切換 toggleClass( )實現事件觸發物件在載入某個樣式和移除某個 樣式之間切換

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操作

在這裡插入圖片描述