jquery的核心函數有哪些-前端問答-PHP中文網

首頁

web前端

前端問答

jquery的核心函數有哪些

青灯夜游

Nov 15, 2021 pm 04:24 PM

jquery

jquery的核心函數：1、jQuery()，主要用於取得HTML DOM元素並將其封裝為jQuery物件；2、“jQuery.noConflict()”，用於讓渡變數“$”的jQuery控制權。

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 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对象
// 以下三种方式的效果一致
$(&#39;<span/>&#39;);
$(&#39;<span></span>&#39;);
$(&#39;<span>&#39;); // 但不推荐使用这种方式

// 创建一个p标签，内部包含带有test样式的span标签
$(&#39;<p><span class="test"></span></p>&#39;);

// 创建一个表格
var html = &#39;<table>&#39;;
html += &#39;<tr>&#39;;
html += &#39;<td>单元格1</td>&#39;;
html += &#39;<td>单元格2</td>&#39;;
html += &#39;</tr>&#39;;
html += &#39;<tr>&#39;;
html += &#39;<td>单元格3</td>&#39;;
html += &#39;<td>单元格1</td>&#39;;
html += &#39;</tr>&#39;;
html += &#39;</table>&#39;;
$(html);

jQuery(html, properties )範例程式碼:

// 创建一个临时的链接jQuery对象
var tempLink = $(&#39;<a/>&#39;, {
    id: &#39;goback&#39;,
    title: &#39;CodePlayer&#39;,
    html: &#39;CodePlayer&#39;, // 表示链接的锚文本，也就是innerHTML的值
    href: &#39;http://www.365mini.com/&#39;,
    click: function(){
        // 统计点击次数       
    }
});
// 追加到body标签内容的末尾
tempLink.appendTo("body");


$(&#39;<input/>&#39;, {
    type: &#39;checkbox&#39;,
    val: &#39;def&#39;, // 表示表单元素的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)