當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文


JQuery jQuery()用法及代碼示例


根據傳遞的參數返回在 DOM 中找到的或通過傳遞 HTML 字符串創建的匹配元素的集合。

用法一

jQuery( selector [, context ] ) => jQuery

說明:接受一個包含 CSS 選擇器的字符串,然後用於匹配一組元素。

  • 添加的版本:1.0jQuery( selector [, context ] )

    • selector
      類型:Selector
      包含選擇器表達式的字符串
    • context
      類型:ElementjQuerySelector
      用作上下文的 DOM 元素、文檔、jQuery 或選擇器
  • 添加的版本:1.0jQuery( element )

    • element
      類型:Element
      要包裝在 jQuery 對象中的 DOM 元素。
  • 添加的版本:1.0jQuery( elementArray )

    • elementArray
      類型:Array
      包含一組要包裝在 jQuery 對象中的 DOM 元素的數組。
  • 添加的版本:1.0jQuery( object )

    • object
      類型:PlainObject
      包裝在 jQuery 對象中的普通對象。
  • 添加的版本:1.0jQuery( selection )

    • selection
      類型:jQuery
      要克隆的現有 jQuery 對象。
  • 添加的版本:1.4jQuery()

    • 此簽名不接受任何參數。

在上麵列出的第一個公式中,jQuery()——也可以寫成$()——在 DOM 中搜索與提供的選擇器匹配的任何元素,並創建一個引用這些元素的新 jQuery 對象:

$( "div.foo" );

如果沒有元素匹配提供的選擇器,則新的 jQuery 對象是"empty";也就是說,它不包含任何元素,並且 .length 屬性為 0。

選擇器上下文

默認情況下,選擇器從文檔根目錄開始在 DOM 中執行搜索。但是,可以使用$() 函數的可選第二個參數為搜索提供替代上下文。例如,要在事件處理程序中進行搜索,可以像這樣限製搜索:

$( "div.foo" ).click(function() {
  $( "span", this ).addClass( "bar" );
});

當對跨度選擇器的搜索限製在 this 的上下文中時,隻有單擊元素內的跨度才會獲得附加類。

在內部,選擇器上下文是使用 .find() 方法實現的,因此 $( "span", this ) 等效於 $( this ).find( "span" )

使用 DOM 元素

這個函數的第二和第三個公式使用一個或多個已經以其他方式選擇的 DOM 元素創建一個 jQuery 對象。一個 jQuery 對象是按照它們在數組中出現的順序從數組元素創建的;與大多數其他多元素 jQuery 操作不同,元素不是按 DOM 順序排序的。元素將按原樣從數組中複製,如果它們已經是 jQuery 集合,則不會被解包。

請注意,盡管您可以通過這種方式將文本節點和注釋節點傳遞到 jQuery 集合中,但大多數操作不支持它們。少數這樣做的人會在他們的 API 文檔頁麵上有明確的說明。

single-DOM-element 構造的一個常見用途是在已通過關鍵字 this 傳遞給回調函數的元素上調用 jQuery 方法:

$( "div.foo" ).click(function() {
  $( this ).slideUp();
});

此示例導致元素在單擊時通過滑動動畫隱藏。因為處理程序將 this 關鍵字中的單擊項目作為裸 DOM 元素接收,所以在將 jQuery 方法應用到它之前,必須將該元素傳遞給 $() 函數。

從 Ajax 調用返回的 XML 數據可以傳遞給 $() 函數,因此可以使用 .find() 和其他 DOM 遍曆方法檢索 XML 結構的各個元素。

$.post( "url.xml", function( data ) {
  var $child = $( data ).find( "child" );
});

克隆 jQuery 對象

當 jQuery 對象被傳遞給 $() 函數時,會創建該對象的克隆。這個新的 jQuery 對象引用了與初始對象相同的 DOM 元素。

返回一個空集

使用no arguments 調用jQuery() 方法會返回一個空的jQuery 集(.length 屬性為0)。同樣,如果傳遞 nullundefined、空數組 ([]) 或空字符串 ("") 的參數,則該集合不包含任何元素。

使用普通對象

目前,jQuery 封裝的純 JavaScript 對象支持的唯一操作是:.data().prop().on().off().trigger().triggerHandler()。在普通對象上使用 .data()(或任何需要 .data() 的方法)將在對象上產生一個名為 jQuery{randomNumber} 的新屬性(例如 jQuery123456789)。

// Define a plain object
var foo = { foo: "bar", hello: "world" };
 
// Pass it to the jQuery function
var $foo = $( foo );
 
// Test accessing property values
var test1 = $foo.prop( "foo" ); // bar
 
// Test setting property values
$foo.prop( "foo", "foobar" );
var test2 = $foo.prop( "foo" ); // foobar
 
// Test using .data() as summarized above
$foo.data( "keyName", "someValue" );
console.log( $foo ); // will now contain a jQuery{randomNumber} property
 
// Test binding an event name and triggering
$foo.on( "eventName", function () {
  console.log( "eventName was called" );
});
 
$foo.trigger( "eventName" ); // Logs "eventName was called"

如果使用.trigger( "eventName" ),它將在對象上搜索"eventName" 屬性,並在執行任何附加的jQuery 處理程序後嘗試執行它。它不檢查屬性是否為函數。為避免此行為,應改為使用.triggerHandler( "eventName" )

$foo.triggerHandler( "eventName" ); // Also logs "eventName was called"

例子:

查找作為 div 元素的子元素的所有 p 元素,並對它們應用邊框。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>one</p>
<div><p>two</p></div>
<p>three</p>
 
<script>
$( "div > p" ).css( "border", "1px solid gray" );
</script>
 
</body>
</html>

演示:

在文檔的第一個表單中查找類型為 radio 的所有輸入。

$( "input:radio", document.forms[ 0 ] );

從 Ajax 響應中查找 XML 文檔中的所有 div 元素。

$( "div", xml.responseXML );

將頁麵的背景顏色設置為黑色。

$( document.body ).css( "background", "black" );

隱藏表單中的所有輸入元素。

$( myForm.elements ).hide();

用法二

jQuery( html [, ownerDocument ] ) => jQuery

說明:從提供的原始 HTML 字符串動態創建 DOM 元素。

  • 添加的版本:1.0jQuery( html [, ownerDocument ] )

    • html
      類型:htmlString
      動態創建的 HTML 字符串。請注意,這會解析 HTML,notXML。
    • ownerDocument
      類型:Document
      將在其中創建新元素的文檔。
  • 添加的版本:1.4jQuery( html, attributes )

    • html
      類型:htmlString
      定義單個獨立 HTML 元素的字符串(例如 <div/> 或 <div></div>)。
    • attributes
      類型:PlainObject
      在新創建的元素上調用的屬性、事件和方法的對象。

創建新元素

如果一個字符串作為參數傳遞給 $() ,jQuery 會檢查該字符串是否看起來像 HTML(即,它以 <tag ... > 開頭)。如果不是,則字符串被解釋為選擇器表達式,如上所述。但是如果字符串看起來是一個 HTML 片段,jQuery 會嘗試按照 HTML 的說明創建新的 DOM 元素。然後創建並返回一個引用這些元素的 jQuery 對象。你可以在這個對象上執行任何常用的 jQuery 方法:

$( "<p id='test'>My <em>new</em> text</p>" ).appendTo( "body" );

要將字符串顯式解析為 HTML,請使用 $.parseHTML() 方法。

默認情況下,使用與加載 jQuery 庫的文檔相匹配的 .ownerDocument 創建元素。應使用該文檔創建注入到不同文檔中的元素,例如 $("<p>hello iframe</p>", $("#myiframe").prop("contentWindow").document)

如果 HTML 比沒有屬性的單個標記更複雜,如上例所示,則元素的實際創建由瀏覽器的 .innerHTML 機製處理。在大多數情況下,jQuery 會創建一個新的 <div> 元素並將元素的 innerHTML 屬性設置為傳入的 HTML 片段。當參數具有單個標記(帶有可選的結束標記或 quick-closing)時 — $( "<img />" )$( "<img>" )$( "<a></a>" )$( "<a>" ) — jQuery 使用原生 JavaScript .createElement() 函數創建元素。

在傳遞複雜的 HTML 時,某些瀏覽器可能無法生成完全複製所提供的 HTML 源的 DOM。如前所述,jQuery 使用瀏覽器的.innerHTML 屬性來解析傳遞的 HTML 並將其插入到當前文檔中。在此過程中,某些瀏覽器會過濾掉某些元素,例如 <html><title><head> 元素。因此,插入的元素可能不代表傳遞的原始字符串。

但是,過濾不僅限於這些標簽。例如,版本 8 之前的 Internet Explorer 還將鏈接上的所有 href 屬性轉換為絕對 URL,並且版本 9 之前的 Internet Explorer 在不添加單獨的 compatibility layer 的情況下將無法正確處理 HTML5 元素。

為確保cross-platform 兼容性,代碼段必須格式正確。可以包含其他元素的標簽應與結束標簽配對:

$( "<a href='https://jquery.com'></a>" );

不能包含元素的標簽可能是quick-closed,也可能不是:

$( "<img>" );
$( "<input>" );

將 HTML 傳遞給 jQuery() 時,請注意文本節點不被視為 DOM 元素。除了少數方法(例如 .content() )外,它們通常被忽略或刪除。例如:

var el = $( "<br>2<br>3" ); // returns [<br>, "2", <br>]
el = $( "<br>2<br>3 >" ); // returns [<br>, "2", <br>, "3 &gt;"]

這種行為是預期的。從 jQuery 1.9.0 開始(除非使用jQuery 遷移插件),jQuery()要求 HTML 字符串以<(即文本節點不能出現在 HTML 字符串的前麵)。

從 jQuery 1.4 開始,第二個參數jQuery()可以接受一個普通對象,該對象由可以傳遞給.attr()方法。

重要的:如果傳遞了第二個參數,則第一個參數中的 HTML 字符串必須表示一個沒有屬性的簡單元素。從 jQuery 1.4 開始, 任何事件類型可以傳入,可以調用以下jQuery方法:.val(),.css(),.html(),.text(),.data(),.width(),.height(), 或者.offset().

從 jQuery 1.8 開始,任何jQuery實例方法(一個方法jQuery.fn) 可以用作傳遞給第二個參數的對象的屬性:

$( "<div></div>", {
  "class": "my-div",
  on: {
    touchstart: function( event ) {
      // Do something
    }
  }
}).appendTo( "body" );

名稱"class" 必須在對象中引用,因為它是 JavaScript 保留字,並且不能使用 "className",因為它指的是 DOM 屬性,而不是屬性。

雖然第二個參數很方便,但它的靈活性可能會導致意想不到的後果(例如,$( "<input>", {size: "4"} ) 調用 .size() 方法而不是設置 size 屬性)。因此,前麵的代碼塊可以寫成:

$( "<div></div>" )
  .addClass( "my-div" )
  .on({
    touchstart: function( event ) {
      // Do something
    }
  })
    .appendTo( "body" );

例子:

動態創建一個 div 元素(及其所有內容)並將其附加到 body 元素。在內部,會創建一個元素並將其 innerHTML 屬性設置為給定的標記。

$( "<div><p>Hello</p></div>" ).appendTo( "body" )

創建一些 DOM 元素。

$( "<div/>", {
  "class": "test",
  text: "Click me!",
  click: function() {
    $( this ).toggleClass( "test" );
  }
})
  .appendTo( "body" );

用法三

jQuery( callback ) => jQuery

說明:綁定一個在 DOM 完成加載時要執行的函數。

  • 添加的版本:1.0jQuery( callback )

    • callback
      類型:Function ()
      當 DOM 準備好時執行的函數。

此函數的行為就像 $( document ).ready() 一樣,因為它應該用於包裝頁麵上依賴於準備好的 DOM 的其他 $() 操作。雖然從技術上講,這個函數是可鏈接的,但鏈接它並沒有太多用處。

例子:

當 DOM 準備好使用時執行該函數。

$(function() {
  // Document is ready
});

使用 $(document).ready() 的快捷方式和使用 $別名編寫故障安全 jQuery 代碼的參數,而不依賴於全局別名。

jQuery(function( $ ) {
  // Your code using failsafe $ alias here...
});

相關用法


注:本文由純淨天空篩選整理自jquery.com大神的英文原創作品 jQuery()。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。