jquery的核心函數(shù):1、jQuery(),主要用于獲取HTML DOM元素并將其封裝為jQuery對(duì)象;2、“jQuery.noConflict()”,用于讓渡變量“$”的jQuery控制權(quán)。
本教程操作環(huán)境:windows7系統(tǒng)、jquery1.10.2版本、Dell G3電腦。
jQuery 核心函數(shù)
函數(shù) | 描述 |
---|---|
jQuery() | 接受一個(gè)字符串,其中包含了用于匹配元素集合的 CSS 選擇器。 |
jQuery.noConflict() | 運(yùn)行這個(gè)函數(shù)將變量 $ 的控制權(quán)讓渡給第一個(gè)實(shí)現(xiàn)它的那個(gè)庫(kù)。 |
函數(shù)說(shuō)明
jQuery():
jQuery()函數(shù)是jQuery庫(kù)的最核心函數(shù),jQuery的一切都是基于此函數(shù)的。該函數(shù)主要用于獲取HTML DOM元素并將其封裝為jQuery對(duì)象,以便于使用jQuery對(duì)象提供的其他屬性和方法對(duì)DOM元素進(jìn)行操作。
jQuery()函數(shù)的功能非常強(qiáng)大,它可以將各種類(lèi)型的參數(shù)智能地封裝為jQuery對(duì)象。
語(yǔ)法
- jQuery( selector, [ context ])
將選擇器字符串selector所對(duì)應(yīng)的HTML DOM元素封裝為jQuery對(duì)象。可選參數(shù)context用于指定查找DOM元素的范圍。 - jQuery( [ obj ])
將指定對(duì)象obj封裝為jQuery對(duì)象。這個(gè)對(duì)象可以是一個(gè)DOM元素(Element),也可以是一個(gè)DOM元素?cái)?shù)組,也可以是一個(gè)jQuery對(duì)象(對(duì)其進(jìn)行克隆),或者其他對(duì)象。你也可以省略該參數(shù),從而返回一個(gè)空的jQuery對(duì)象。
jQuery 1.4 新增省略參數(shù)obj的用法:不傳入任何參數(shù),將返回空的jQuery對(duì)象
- jQuery( html, [ ownerDocument ])
根據(jù)HTML標(biāo)簽字符串html動(dòng)態(tài)地創(chuàng)建臨時(shí)DOM元素,并將其封裝為jQuery對(duì)象。可選參數(shù)ownerDocument用于指定臨時(shí)DOM元素在哪個(gè)文檔中創(chuàng)建(如果存在多個(gè)文檔的話,例如框架頁(yè)面)。
jQuery 1.0 新增該用法。
- jQuery(html, properties )
根據(jù)HTML標(biāo)簽字符串html和包含其附加屬性、事件以及方法的properties對(duì)象,動(dòng)態(tài)地創(chuàng)建臨時(shí)DOM元素,并將其封裝為jQuery對(duì)象。
jQuery 1.4 新增該用法。
- jQuery( callback )
在當(dāng)前文檔載入完成后,執(zhí)行指定的函數(shù)callback。該用法是ready()函數(shù)如下用法的簡(jiǎn)寫(xiě):jQuery(document).ready(callback)。
jQuery 1.0 新增該用法。
參數(shù)
屬性 | 說(shuō)明 |
---|---|
selector | String類(lèi)型 指定的選擇器字符串,用于查找對(duì)應(yīng)的DOM元素。 |
context | 可選/Object類(lèi)型 指定選擇器字符串的查找范圍,可以是DOM元素、DOM元素?cái)?shù)組、文檔、jQuery對(duì)象。如果省略該參數(shù),默認(rèn)為當(dāng)前文檔。 |
obj | 可選/Object類(lèi)型 指定的對(duì)象,用于封裝為jQuery對(duì)象。可以是DOM元素、DOM元素?cái)?shù)組、文檔、jQuery對(duì)象等。 |
html | Object類(lèi)型 指定的HTML標(biāo)簽字符串,例如"<p/>"、"<p></p>"、"<p id='tagId'></p>" (標(biāo)簽中也可以嵌套標(biāo)簽,只要符合html語(yǔ)法即可)。 |
ownerDocument | Document類(lèi)型 指定DOM元素在哪個(gè)文檔上進(jìn)行臨時(shí)創(chuàng)建,默認(rèn)為當(dāng)前文檔。 |
properties | Object類(lèi)型 指定的對(duì)象,用于指定DOM元素的屬性、事件和方法。例如:{name:”username”, “click”:function(){}} |
callback | Function類(lèi)型 指定的函數(shù),用于在DOM文檔加載完成后立即執(zhí)行。 |
返回值
jQuery()函數(shù)的返回值是jQuery類(lèi)型,返回一個(gè)jQuery對(duì)象。
示例&說(shuō)明:
- jQuery( selector, [ context ])示例代碼:
// 選擇當(dāng)前文檔中所有的p標(biāo)簽DOM元素 $("p"); // 選擇id屬性為username的DOM元素 $("#username"); // 選擇所有包含test樣式的DOM元素,(例如:class="test") $(".test"); // 選擇所有p標(biāo)簽中帶test樣式的DOM元素 $("p .test");
- jQuery( [ obj ] 示例代碼:
var dom = document.getElementById("username"); // 將DOM元素封裝為jQuery對(duì)象 $(dom); var doms = document.getElementsByName("book_id"); // 將DOM元素?cái)?shù)組封裝為jQuery對(duì)象 $(doms); // 將body元素封裝為jQuery對(duì)象 $(document.body);
- jQuery( html, [ ownerDocument ])示例代碼:
// 創(chuàng)建一個(gè)空的span標(biāo)簽的臨時(shí)DOM元素,并將其封裝為jQuery對(duì)象 // 以下三種方式的效果一致 $('<span/>'); $('<span></span>'); $('<span>'); // 但不推薦使用這種方式 // 創(chuàng)建一個(gè)p標(biāo)簽,內(nèi)部包含帶有test樣式的span標(biāo)簽 $('<p><span class="test"></span></p>'); // 創(chuàng)建一個(gè)表格 var html = '<table>'; html += '<tr>'; html += '<td>單元格1</td>'; html += '<td>單元格2</td>'; html += '</tr>'; html += '<tr>'; html += '<td>單元格3</td>'; html += '<td>單元格1</td>'; html += '</tr>'; html += '</table>'; $(html);
- jQuery(html, properties )示例代碼:
// 創(chuàng)建一個(gè)臨時(shí)的鏈接jQuery對(duì)象 var tempLink = $('<a/>', { id: 'goback', title: 'CodePlayer', html: 'CodePlayer', // 表示鏈接的錨文本,也就是innerHTML的值 href: 'http://www.365mini.com/', click: function(){ // 統(tǒng)計(jì)點(diǎn)擊次數(shù) } }); // 追加到body標(biāo)簽內(nèi)容的末尾 tempLink.appendTo("body"); $('<input/>', { type: 'checkbox', val: 'def', // 表示表單元素的value屬性值或textarea的輸入內(nèi)容 click: function(){ alert("點(diǎn)擊了復(fù)選框"); } }).appendTo("body");
- jQuery( callback )示例代碼:
$(function(){ // 本文檔頁(yè)面載入完成后自動(dòng)執(zhí)行 alert("文檔加載完畢!"); }); // 這相當(dāng)于ready()函數(shù)如下用法的簡(jiǎn)寫(xiě) $(document).ready(function(){ // 本文檔頁(yè)面載入完成后自動(dòng)執(zhí)行 alert("文檔加載完畢!"); });
jQuery.noConflict()
noConflict() 方法讓渡變量 $ 的 jQuery 控制權(quán)。
該方法釋放 jQuery 對(duì) $ 變量的控制。
該方法也可用于為 jQuery 變量規(guī)定新的自定義名稱(chēng)。
提示:在其他 JavaScript 庫(kù)為其函數(shù)使用 $ 時(shí),該方法很有用。
語(yǔ)法:jQuery.noConflict(removeAll)
-
removeAll 布爾值。指示是否允許徹底將 jQuery 變量還原。
相關(guān)視頻教程推薦:jQuery教程(視頻)