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對象最簡單和基本的幾種方式。下面的文章中會介紹更多的方法。