簡體   English   中英

JavaScript變量等於jQuery選擇器創建打開和關閉標簽。 為什么?

[英]JavaScript variable equals jQuery selector creates open and closing tags. Why?

請友好一點。 我的第一個問題在這里。 我正在學習JavaScript和jQuery。 Google幫不上什么忙,因為我不知道如何提出正確的問題。 請需要人工干預。 我試圖找出這段簡單的代碼是怎么回事:

var myVar = $("<p>");

這將創建一個開始和結束<p>標記,我不明白為什么。

接下來,我將該段添加到現有元素#myDiv 例如:

$("myDiv").html(myVar); 結果如下:

<div id="myDiv"><p></p></div>

繼續...

$("myDiv").html(myVar.text("A string for the paragraph"));

結果是:

<div id="myDiv"><p>A string for the paragraph</p></div>

為什么第一個片段創建一個開始和結束<p>標簽? 這個叫什么?

在純JavaScript中,這只是一個更簡潔的方法:

var myVar = document.createElement("p");

像這樣去jQuery:

var myVar = $("<p></p>");

而且由於它是jQuery,並且變得越來越簡潔,因此最終成為:

var myVar = $("<p>");

這是在學習過程中要問的正確問題,對您有好處! 話雖這么說,一個SO職位將無法完全回答它,至少以我認為您要的方式,但我(我們)會給您我所能提供的。

首先,JavaScript與HTML交互的方式是通過文檔對象模型(DOM)。 這就好比服用整個HTML文檔並切斷它成各個元件,標簽,屬性,等等,然后構建該文檔的表示在“普通” JavaScript作為一種(非常大的) Object 分配給此Object的變量名稱是document 這個特殊的對象具有各種神奇的屬性和方法(函數),可用於讀取和更新DOM的任何部分(最終將其轉換為您在瀏覽器中看到的HTML)。

到目前為止,我所描述的內容與jQuery無關,並且所有這些操作都可以通過普通的JavaScript完成(例如,傑克·巴什福德的答案)。 但是,由於瀏覽器和其他Web技術多年來的發展方式,在“普通” JavaScript中執行任何此類操作時,存在許多“陷阱”(或曾經存在)。 從歷史上講,jQuery是一個極其重要的工具,因為它提供了一種“標准”的方式來編寫非常直接的代碼來完成所有此類DOM讀取或操作,並且jQuery庫將確保避免所有“陷阱”。

那么,jQuery是什么(在代碼中)? 嗯,對此可能有很多技術上的答案,而一個重要的技術上的答案是它是一個對象,因為在JavaScript中, (幾乎)所有東西都是一個對象 但是,讓我們專注於手頭的問題以及您提供的代碼:

$("<p>");

在這里,美元符號是jQuery(或指向jQuery對象的變量)。 下面括號表明了jQuery對象被稱為函數。 就像在代碼中說的那樣,“使用以下字符串執行jQuery: '<p>' 退后一步,完整的陳述

var myVar = $("<p>");

說“這個變量'myVar'現在指向使用'<p>'執行jQuery的任何結果都會給我們帶來的結果。”

用jQuery編寫的“神奇”之處在於,語法幾乎總是感覺相同(並給人以直觀的感覺)。

  1. 抓取jQuery對象。 這通常是變量$ ,但是jQuery也可以使用。

  2. 調用函數( $() )。 在某些情況下,例如ajax請求,您不需要這樣做,但這是一個單獨的主題和用例。

  3. 為它提供任何類型的選擇器$('#myDiv') ),這是一種根據特定HTML元素的屬性和在文檔中位置來引用特定HTML元素的方式(此處,我們根據其id查找特定元素) 。

  4. 處理結果( $('#myDiv').html(...etc)

在這一點上,我將指出jQuery文檔應該很方便,因此您知道任何特定函數調用的結果,但是在幾乎所有情況下,該函數都會返回另一個jQuery對象 ,該對象保存對任何內容的引用您在該函數調用期間選擇或操作的元素。

在后一個示例中,我們將收到對#myDiv元素的引用,然后在其上調用另一個函數( .html() ),該函數將讀取或更新該html元素的內容。

對於您特別詢問的那一行,jQuery將解釋用於“選擇” p標記的語法,而不是查找文檔中的所有“ p”元素(該語法為$("p") ),而是創建一個新的'p'元素並將其作為指向該新創建元素的jQuery對象存儲在內存中。 在此處閱讀有關該語法及其可能性的更多信息。

好吧,我希望這會有所幫助。 我當然喜歡它,甚至在我自己的過程中學到了一些東西。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM