核心(核心函數,對象訪問,多庫共存)
注:其中jQuery()可替換為快捷方式$(),如果$被其它對象占用,可使用jQuery.noConflict()函數取消快捷方式。
核心函數
$(expr,[context])/jQuery(expression,[context])
該函數可以通過css選擇器,Xpath或html代碼來匹配目標元素,所有的jQuery操作都以此為基礎
expression (String)用來查找的字符串,context(Element, jQuery)(可選)作為待查找的DOM元素集、文檔或 jQuery 對象。
例子
<p>one</p>
<div><p>two</p></div>
<p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代碼及功能:
function jq(){
alert($("div>p").html());
}
當點擊id為test的元素時,彈出對話框文字為two,即div標簽下p元素的內容
function jq(){
$("<div><p>Hello</p></div>").appendTo("body");
}
當點擊id為test的元素時,向body中添加“<div><p>Hello</p></div>”
context
在文檔的第一個表單中,查找所有的單選按鈕(即: type 值為 radio 的 input 元素)。 $("input:radio", document.forms[0]);
在一個由 AJAX 返回的 XML 文檔中,查找所有的 div 元素。$("div", xml.responseXML);
$(elem)
限制jQuery作用于一個特定的dom元素,這個函數也接受xml文檔和windows對象
elem:通過jQuery對象壓縮的DOM元素
例子
<p>one</p>
<div><p>two</p></div>
<p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代碼及功能:
function jq(){
alert($(document).find("div>p").html());
}
當點擊id為test的元素時,彈出對話框文字為two,即div標簽下p元素的內容
function jq(){
$(document.body).background("black");
}
運行:當點擊id為test的元素時,背景色變成黑色
$(elems)
限制jQuery作用于一組特定的DOM元素
elem:一組通過jQuery對象壓縮的DOM元素
例子
<form id="form1">
<input type="text" name="textfield">
<input type="submit" name="Submit" value="提交">
</form>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代碼及功能:
function jq(){
$(form1.elements).hide();
}
當點擊id為test的元素時,隱藏form1表單中的所有元素。
$(fn)/jQuery(callback)
$(document).ready()的簡寫,當文檔全部載入時執行函數。可以有多個$(fn)當文檔載入時,同時執行所有函數!
fn(Function):當文檔載入時執行的函數!
例子
$(function() {
alert($(document.body).html());
});
當文檔載入時背景變成黑色,相當于onLoad。
$(obj)
復制一個jQuery對象
obj (jQuery): 要復制的jQuery對象
例子
<p>one</p>
<div><p>two</p></div>
<p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代碼及功能:
function jq(){
var f = $("div");
alert($(f).find("p").html())
}
當點擊id為test的元素時,彈出對話框文字為two,即div標簽下p元素的內容。
$("<input>").attr("type", "checkbox");// 在IE中無效:微軟規定 <input>元素的type只能寫一次
$("<input type='checkbox'>");// 在IE中有效:
對象訪問
each(callback)
以每一個匹配的元素作為上下文來執行一個函數。每次執行傳遞進來的函數時,函數中的this關鍵字都指向一個不同的DOM元素(每次都是一個不同的匹配元素)。在每次執行函數時,都會給函數傳遞一個表示作為執行環境的元素在匹配的元素集合中所處位置的數字值作為參數(從零開始的整形)。返回 'false' 將停止循環(就像在普通的循環中使用'break')。返回 'true' 跳至下一個循環(就像在普通的循環中使用'continue')。
對于每個匹配的元素所要執行的函數
例子
<img/><img/>
jQuery代碼
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});
結果:<img src="test0.jpg" /><img src="test1.jpg" />
可以使用 $(this) 函數得到 jQuery對象。
jQuery 代碼:
$("img").each(function(){
$(this).toggleClass("example");
});
可以使用 'return' 來提前跳出 each() 循環。
<button>Change colors</button>
<span></span><div></div><div></div><div></div> <div></div><div id="stop">Stop here</div><div></div><div></div><div></div>
jQuery代碼
$("button").click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
return false;
}
});
});
eq(pos)
減少匹配對象到一個單獨得dom元素
pos (Number): 期望限制的索引,從0開始
例子
<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代碼及功能:
function jq(){
alert($("p").eq(1).html())
}
當點擊id為test的元素時,alert對話框顯示:So is this,即第二個<p>標簽的內容
get()/get(num)
獲取匹配元素,get(num)返回匹配元素中的某一個元素
get(Number): 期望限制的索引,從0開始
例子
<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代碼及功能:
function jq(){
alert($("p").get(1).innerHTML);
}
當點擊id為test的元素時,alert對話框顯示:So is this,即第二個<p>標簽的內容
注意get和eq的區別,eq返回的是jQuery對象,get返回的是所匹配的dom對象,所有取$("p").eq(1)對象的內容用jQuery方法html(),而取$("p").get(1)的內容用innerHTML
index(obj)
返回對象索引,如果找到了匹配的元素,從0開始返回;如果沒有找到匹配的元素,返回-1。
obj(Object)要查找的對象
例子
<div id="test1"></div>
<div id="test2"></div>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代碼及功能:
function jq(){
alert($("div").index(document.getElementById('test1')));
alert($("div").index(document.getElementById('test2')));
}
當點擊id為test的元素時,兩次彈出alert對話框分別顯示0,1
size()/Length
jQuery對象中元素的個數,與jQuery對象的'length' 屬性一致。
例子
<img src="test1.jpg"/>
<img src="test2.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代碼及功能:
function jq(){
alert($("img").length);
}
當點擊id為test的元素時,彈出alert對話框顯示2,表示找到兩個匹配對象
多庫共存
jQuery.noConflict()
運行這個函數將變量$的控制權讓渡給第一個實現它的那個庫。
這有助于確保jQuery不會與其他庫的$對象發生沖突。在運行這個函數后,就只能使用jQuery變量訪問jQuery對象。例如,在要用到$("div p")的地方,就必須換成jQuery("div p")。
示例
jQuery.noConflict();
jQuery("div p").hide();// 使用 jQuery
$("content").style.display = 'none'; // 使用其他庫的 $()
恢復使用別名$,然后創建并執行一個函數,在這個函數的作用域中仍然將$作為jQuery的別名來使用。在這個函數中,原來的$對象是無效的。這個函數對于大多數不依賴于其他庫的插件都十分有效。
jQuery.noConflict();
(function($) {
$(function() {
//使用 $ 作為 jQuery 別名的代碼
});
})(jQuery);
// 其他用 $ 作為別名的庫的代碼
創建一個新的別名用以在接下來的庫中使用jQuery對象。
var j = jQuery.noConflict();
j("div p").hide();// 基于 jQuery 的代碼
$("content").style.display = 'none'; // 基于其他庫的 $() 代碼
jQuery.noConflict(extreme)
將$和jQuery的控制權都交還給原來的庫。用之前請考慮清楚!
這是相對于簡單的 noConflict 方法更極端的版本,因為這將完全重新定義jQuery。這通常用于一種極端的情況,比如你想要將jQuery嵌入一個高度沖突的環境。注意:調用此方法后極有可能導致插件失效。
extreme (Boolean):傳入true來允許徹底將jQuery變量還原
完全將jQuery移到一個新的命名空間。
var dom = {};
dom.query = jQuery.noConflict(true);
結果:
dom.query("div p").hide();// 新 jQuery 的代碼
$("content").style.display = 'none';// 另一個庫 $() 的代碼
jQuery("div > p").hide(); // 另一個版本 jQuery 的代碼
--
學海無涯