Jquery學習筆記:獲取jquery對象的基本方法


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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM