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