jquery最大的好處是將js對html頁面的操作（讀寫）進行了封裝，隔離了瀏覽器的差異性，并簡化了操作，和提供了強大的功能。

在web頁面中，所有的js操作都是圍繞操作dom對象來的。而jquery對象就是對dom對象的封裝。整個jquery代碼的主要工作就是獲取相應的jquery對象，然后調用對象的各種方法進行操作。也就是獲取jquery對象是編寫代碼的核心和基礎。

?? 通過jquery提供的方式，可以有很多種獲取jquery對象的方法，下面會介紹一些常用的方式。

?? 在jquery中，是通過各式各樣的選擇器來獲取jquery對象的。

?? 選擇器是一個字符串，傳給$函數，返回jquery對象。

需要特別注意的, 一個jquery對象不是說就對應一個dom對象（html元素），而是包含1個或多個dom對象（即html元素）。

?

1、通過html元素的id值 獲取對象

var obj = $("#userid");

alert(obj.length);? //正常是1，因為id在html元素中必須是唯一的。即使不唯一，也只會返回包含一個元素的數組，是第一個滿足id條件的元素.

alert(obj.selector); //顯示的內容為 #userid

alert(obj.html());? //html()方法返回對應元素包含的html內容

?

2、通過html元素的標簽 獲取對象

如 $("body") 獲取到body元素。獨立采用這種方式的場景很少，因為一個html頁面中標簽是大量重復的。

比如$("div") 會獲取到頁面上所有標簽為div的元素。

還有一種特殊的方式 $("*") 獲取頁面所有的元素。這個可能對一些工具有用，比如統計頁面的一些數據。

?

3、通過css樣式值獲取jquery對象

在html頁面中，每個元素的id是唯一的，而且一個元素只有1個id值。

但對于元素的樣式則不一樣，一個元素可以有多個樣式值（如class="btn btn-default"，這里有兩個樣式），不同的元素可以設置相同的樣式值。

而且往往大部分場景是這樣的，因為樣式的設置就是可以用來共享，讓不同的元素有同樣風格的展示。

? var obj = $(".btn");?

? alert(obj.length);? //顯示的數目是配置了樣式為btn的元素個數
??alert(obj.selector); //顯示 .btn
??alert(obj.html());? //因為obj中有多個元素，這里調用html()方法返回的是第一個元素包含的html內容
??obj.each(function(index,data){ //each方法用于遍歷obj中的元素
????? alert(index+"="+data.innerHTML); //index是序號，從0開始；data是對應的元素，這里需要注意的是，這里的data不是jquery對象，而是dom對象
??});

?

4、組合選擇

設置多個選擇器，將每個選擇器匹配到的元素合并在一起返回。注意，是合并的關系。不要和層次選擇器混淆了。

如：

<div>
?<p id="pid"></p>
?<span class="cspan"></span>
?<div></div>
</div>

js代碼

? var obj = $("#pid,.cspan");?? //將id為pid 和 樣式為 cspan的的元素都返回
??alert(obj.length); //2

這種場景應用不多，完全可以分多次獲取元素，合并在一起主要有時簡化代碼編寫，比如對這些返回額元素執行一些共性的操作。

?

5、jquery對象和dom對象的互相轉換

將dom對象傳給$方法返回的就是jquery對象

? var obj = document.getElementById("userid");? //通過原生的dom方法獲取 dom對象
??alert(obj.innerHTML);? //顯示dom對象包含的html內容
??var jobj = $(obj);? //將dom對象轉換為jquery對象

? alert(jobj.length); //顯示1，因為只包含了1個dom對象
??alert(jobj.html());? //調用jquery的方法，顯示其包含的dom對象包含的html內容

直接通過下標引用就可以獲取到jquery對象中包含的dom對象，如：

? var obj = $("#userid");
??var domObj = obj[0];?//因為這里的obj是通過id獲取的，只包含一個dom元素，所以下標取0
??alert(domObj.innerHTML); //獲取dom元素的內容

如果對于包含多個dom對象的jquery對象，要想獲取其中所有元素，可以通過下標獲取，也可以通過前面介紹的each方法來遍歷。

?

6、獲取jquery對象中的某個jquery對象

通過選擇器獲取到的jquery對象可能包含多個dom對象。

這時我們可以通過? jqueryObj[序號]? 或 jqueryObj.get(序號)? 這兩種方式獲取到的是 dom對象。

要直接獲取到jquery對象，需要用 jqueryObj.eq(序號) 這種方式。 或者通過 $(dom對象)將dom對象轉成jquery對象。

?

7、小結

?? 上面介紹了獲取jquery對象最簡單和基本的幾種方式。下面的文章中會介紹更多的方法。

?

轉載于:https://www.cnblogs.com/51kata/p/5101819.html

總結

以上是生活随笔為你收集整理的Jquery学习笔记：获取jquery对象的基本方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。