今天不忙,想起看看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]
<p id="content">
外層p元素
<span>內層span元素</span>
外層p元素
</p>
對上述元素綁定事件:
[javascript]
$(function(){
// 為span元素綁定click事件
$('span').bind("click",function(){
var txt = $('#msg').html() + "<p>內層span元素被點擊.<p/>";
$('#msg').html(txt);
});
// 為p元素綁定click事件
$('#content').bind("click",function(){
var txt = $('#msg').html() + "<p>外層p元素被點擊.<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():阻止事件冒泡