jQuery - 所選DOM元素和新元素之間的差異

Question

我開始使用JavaScript和jQuery不僅僅是爲了做一些閃亮的效果，而且我對jQuery中的基本問題有疑問。我經常不知道我在做什麼真的在jQuery中使用。

例如，如果有以下標記：

<img class="image" src="picture.png" width="100" height="100" /> 

而在jQuery的做

var img = $('.image'); 

img則是不一樣的，當我做

var img = $('<img class="image" src="picture.png" width="100" height="100" />'); 

但例如，如果我想在圖像上創建一個新圖像並在其上運行一些jQuery功能，如.css()，我必須做的：

var img = $('<img class="image" src="picture.png" width="100" height="100" />'); 
img.appendTo('.myElement'); 
$('.image').css("border","none"); 

這是一種雙重措施？

我的問題：我在這裏兜着的東西有哪些不同的印記？第一個例子有什麼區別？我想了解在使用jQuery/JavaScript時，我正在使用的元素是什麼。

我的問題[更新]：我可能已經有點不清楚，我不想知道的例子實際上做些什麼，而我選擇/創建時，我調用這些函數（一個指向DOM元素，JavaScript中的一個字符串，表示HTML，但仍然需要添加到要顯示的DOM等）。

Answer 1

當傳遞選擇（例如$('.image')）至jQuery函數，但它只是：選擇。 jQuery對象將包含DOM中與該選擇器匹配的所有元素。

當您將HTML字符串傳遞給jQuery函數時，它會創建一個包含HTML代表的元素的jQuery對象。但是，它不會自動將它們添加到DOM，因此您無法選擇它們;你需要使用各種方法將它們加入到一個 - .append()，.appendTo()，.before()，.after()等

你的CSS操縱例子，但是，是有缺陷的，因爲你可以鏈jQuery的功能結合在一起。你可以是結合成一個單一的代碼行：

var img = $('<img class="image" src="picture.png" width="100" height="100" />') 
      .css("border","none") 
      .appendTo('.myElement'); 

如果這是你想要與元素做，那麼你甚至不需要將其保存到一個變量。但是，如果您稍後想再使用它，那麼這樣做可能會更快;完全取決於什麼你將會用它做什麼。

Answer 2

這將選擇所有的在你的頁面有class="image"的div，並保存以備日後操作的IMG變量：

var img = $('.image'); 

所以如果你以後做：

img.remove(); 

這段代碼從頁面中刪除所有先前選擇的元素。

雖然我敢肯定你的意思頁面（沒有的div）上選擇的所有圖像：

var img = $('img'); 

---

而

var img = $('<img class="image" src="picture.png" width="100" height="100" />'); 

創建只存在一個新元素在你的img變量中，而不是在網頁中，直到你決定將它追加到dom中。

您可以對兩種元素類型使用相同的操作，唯一不同的是後者元素尚未顯示在您的網頁中，它存在於dom的邊緣。

Answer 3

jquery函數完成太多不同的任務，IMO。

如果你通過jquery函數$()一些html，它會爲你創建一個包裝在jquery包裝器對象中的dom元素。

如果你傳遞給它一個選擇器，它將找到所有匹配選擇器的dom元素，並將它們返回給jquery包裝器中的包裝器。

在您的示例中，如果class="image"文檔中沒有任何其他內容存在，則您的變量img與$('.image')（將其插入文檔之後）完全相同。以$('.image')的身份訪問它只是回到插入元素的一種更爲迂迴的方式 - 基本上，您只需在剛剛插入的元素中搜索dom，而不是使用已在代碼中引用的元素。

Answer 4

爲了使事情變得簡單：

• $("<img>") - 創建新的元素，這是一樣的document.createElement("img")。
• $(".img") - 在DOM中選擇一個元素。

有趣的事實：

• $(function(){ /*blah.*/ }) - 運行時DOM完成加載。
• $()實際上可以做很多東西！
• $(".img", document.body) - 這是快於$(".img")，因爲它的作用範圍^{_{（或者無論你怎麼稱呼它）}}。

Answer 5

使用選擇器查找元素和使用HTML代碼創建元素之間的區別在於，一個元素已經存在於頁面中，而另一個元素是創建的並且與頁面分開存在。

你可以做的大多數事情到新創建的對象，而無需首先將其添加到頁面，例如設置CSS樣式：

var img = $('<img class="image" src="picture.png" width="100" height="100" />').css("border","none"); 
img.appendTo('.myElement'); 

有一些東西，你不能做一個元素，直到您已將其添加到頁面。例如，某些動畫不起作用，除非頁面中存在該元素。