jquery學習筆記

       今天不忙，想起看看jquery了，不是研究源碼啦，就是系統的看一下它的使用說明，做了簡單的筆記。 一、DOM操作 1、刪除節點     element.remove();//將元素從頁面中刪除，刪除成功則返回刪除的對象；支援選擇性刪除     element.remove("li[title!=JQuery]");//參數為刪除的過濾條件 2、複製節點     element.clone(true);//true表示複製節點的同時也複製綁定在節點上的事件，複製的新元素也具有了節時間點事件 3、節點替換     elemA.replaceWith(elemB);//用elemB替換掉所有的elemA     elemB.replaceAll(elemA);//用elemB替換掉所有的elemA（使用順序與replaceWith相反）     註：替換前給元素繫結的事件將隨著原來元素的消失而一起消失，需要重新綁定事件到替換後的元素。 4、包裹節點    elemA.wrap(elemB);//將每個匹配的elemA包裹在elemB裡面，每個匹配的元素將獨立包裹    elems.wrapAll(elemA);//將所有的匹配的元素包裹在一個元素(elemA)裡面    elemA.wrapInner(tag);//將每個匹配元素(elemA)的子內容（包括文本節點）用其他結構化的標記（tag）包裹起來，elemA將是tag的父元素5、遍曆DOM節點     children、prev、next、siblings、nextAll、prevAll、find、parent、parents（多個祖先元素）、closest     說一下closest：      它用來取得最近的匹配元素。首先檢查當前元素是否匹配，如果匹配則直接返回元素本身。如果不匹配則向上尋找父元素，逐級向上直到找到匹配選取器的元素。如果什麼都沒找到則返回一個空的JQuery對象。比如，給點擊的目標元素的最近的li元素添加顏色，可以使用如下代碼：$(document).bind("click", function (e) {      $(e.target).closest("li").css("color","red");  })6、offset（）：擷取元素在當前視窗的相對位移，返回的對象包含兩個值：top、left，它只對可見元素有效     position（）：擷取元素相對於父元素的位移，返回的對象也包含top、left     scrollTop（）、 scrollLeft（）：分別擷取元素的捲軸距離頂端和左端的距離，另外可以為這兩個方法指定一個參數，控制元素的捲軸滾動到指定的位置。（scrollLeft（300）：滾動到距離左端300px的地方）7、使用val（）選中select、checkbox、radio      val()方法不僅能設定元素的值，同時也能擷取元素的值。另外，val()方法還有另外一個用處，就是它能使select（下拉式清單方塊）、checkbox（多選框）和radio（單選框）相應的選項被選中，在表單操作中會經常用到。    在JQuery中，val()方法是從最後一個選項往前讀取，如果選項的value或者text中任意一項符合就會被選中。例如：[javascript]  <option value="選擇2號">選擇1號</option>  <option value="選擇1號">選擇2號</option>   無論使用val("選擇1號")還是val("選擇2號")，都會選中後面一個<option value="選擇1號">選擇2號</option>。如果要兩個都選中的話，給select加上multiple屬性，然後 elem.val(["選擇1號","選擇2號"])，這樣兩個就都會被選中了。注意只有設定了multiple="multiple" 屬性才可以選中多個，也可以用attr("selected",true)來實現：$("#single option:eq(1)").attr("selected",true); //設定屬性selected二、事件 載入事件：ready和load的區別：ready只需要DOM結構載入完成，與之相關聯的一些檔案或者是圖片不需要完全載入好，load的需要等到所有檔案都載入完成。事件綁定，四種方式：elem.click(function(){});elem.bind("click",function(){});elem.on("click",function(){});elem.one("click",function(){});//用於綁定執行後馬上就要解除綁定的事件，執行一次後就不會再執行瞭解除綁定：elem.unbind("click",func);//第二個參數不寫，則解除綁定的所有click事件，否則只解除綁定在click事件上的func處理過程。 事件類比： 在JQuery中，可以使用trigger(type[,data])方法完成類比操作，type是事件處理類型，data是事件處理函數需要的參數，可以省略。 例如可以使用下面的代碼來觸發id為btn的按鈕的click事件。[javascript]  $('#btn').trigger("click");   這樣，當頁面載入完畢後，就會立刻輸出想要的效果， 也可以直接簡寫click()，來達到同樣的效果： $('#btn').click();。這個有點類似於mootools的fireEvent的作用。trigger支援自訂事件。trigger不僅會執行類比的事件還會執行瀏覽器的預設事件，若只想執行類比事件不想執行瀏覽器的預設事件，則可以使用triggerHandler()，使用方法和trigger一樣。   事件冒泡：從裡層向外層冒泡。[html]     <div id="content">      外層div元素        <span>內層span元素</span>        外層div元素    </div>  對上述元素繫結事件：[javascript] $(function(){      // 為span元素繫結click事件      $('span').bind("click",function(){          var txt = $('#msg').html() + "<p>內層span元素被點擊.<p/>";          $('#msg').html(txt);      });      // 為div元素繫結click事件      $('#content').bind("click",function(){          var txt = $('#msg').html() + "<p>外層div元素被點擊.<p/>";          $('#msg').html(txt);      });      // 為body元素繫結click事件      $("body").bind("click",function(){          var txt = $('#msg').html() + "<p>body元素被點擊.<p/>";          $('#msg').html(txt);      });  })  點擊span會同時觸發span、#content、body上的點擊事件，點擊#content會同時觸發#content、body上的click事件。有些時候利用事件冒泡可以大大提高指令碼的效能，但是有些情況下會產生意料之外的效果，比如本例，這時候需要阻止事件冒泡，用event.stopPropagation()來阻止事件冒泡。另外有些元素具有一些預設事件，連結的跳轉、表單的提交等，某些情況下需要阻止預設事件，如表單校正出錯的時候，就不希望表單提交了，用event.preventDefault()來阻止預設事件。阻止事件冒泡和預設事件還有一種比較簡單的實現方式：return false；當需要同時阻止預設事件和冒泡的時候可以採用這種比較簡單的方式。據我的經驗，有些事件是不能用return false來阻止的，暫時想不起來了。但是大多時候它還是很有用的。事件捕獲和事件冒泡的過程相反，用的比較少，沒什麼可寫的。事件對象的屬性和方法：event.type：擷取事件類型event.target：擷取觸發事件的元素 event.pageX/event.pageY：擷取到游標相對於頁面的座標event.which： 在按一下滑鼠事件中擷取到滑鼠的左、中、右鍵，1、2、3分別表示左中右；在鍵盤事件中擷取鍵盤的按鍵。 event.metaKey： 鍵盤事件中擷取 ctrl 按鍵   event.originalEvent： 指向原始的事件對象 event.relatedTarget：在標準DOM中，mouseover和mouseout所發生的元素可以通過 event.target方法來訪問，相關元素是通過event.relatedTarget方法來訪問的。 event.relatedTarget在mouseover中相當於IE瀏覽器的event.fromElement方法，在 mouseout中相當於IE瀏覽器的event.toElement方法，jQuery對其進行了封裝，使之能相容各種瀏覽器。event.preventDefault（）：阻止預設事件event.stopPropagation（）：阻止事件冒泡