溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jQuery對(duì)象與DOM對(duì)象的示例分析

發(fā)布時(shí)間：2021-06-16 14:05:07 來源：億速云 閱讀：162 作者：小新 欄目：編程語(yǔ)言

小編給大家分享一下jQuery對(duì)象與DOM對(duì)象的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

  1. DOM對(duì)象：使用JavaScript中的方法獲取頁(yè)面中的元素返回的對(duì)象就是DOM對(duì)象。

  2. jQuery對(duì)象：jquery對(duì)象就是使用jquery的方法獲取頁(yè)面中的元素返回的對(duì)象就是jQuery對(duì)象。

  3. jQuery對(duì)象其實(shí)就是DOM對(duì)象的包裝集（包裝了DOM對(duì)象的集合（偽數(shù)組））

  4. DOM對(duì)象與jQuery對(duì)象的方法不能混用。

  • js對(duì)象對(duì)象不能調(diào)用jq對(duì)象的方法

  • jq對(duì)象與js對(duì)象的聯(lián)系（jq對(duì)象其實(shí)就是js對(duì)象的一個(gè)集合，偽數(shù)組，里面存放了一大堆的js對(duì)象）（宏觀上）

  • jquery對(duì)象能不能調(diào)用DOM對(duì)象的方法

  • DOM無法調(diào)用jQuery對(duì)象的方法：為什么：因?yàn)槭莾蓚€(gè)不同對(duì)象三門峽婦科醫(yī)院http://www.smxrlyy.com/

  • DOM對(duì)象調(diào)用jQuery對(duì)象的方法。需要把DOM對(duì)象轉(zhuǎn)換成jQuery對(duì)象。

轉(zhuǎn)換

  • DOM對(duì)象轉(zhuǎn)換成jQuery對(duì)象：【聯(lián)想記憶：花錢$】

var $obj = $(domObj);// $(document).ready(function(){});就是典型的DOM對(duì)象轉(zhuǎn)jQuery對(duì)象

  • jQuery對(duì)象轉(zhuǎn)換成DOM對(duì)象：

var $li = $(“l(fā)i”);//第一種方法（推薦使用）$li[0]//第二種方法$li.get(0)

案例：

<!DOCTYPE html><html lang="zh-CN"><head>
  <meta charset="UTF-8">
  <title>Title</title>
  </head><body><ul>
  <li id="cloth">衣服</li>
  <li>褲子</li>
  <li>褲衩子</li>
  <li>襪子</li></ul><script src="jquery-1.12.4.js"></script><script>
  
  $(function () {//1. 什么是DOM對(duì)象(js對(duì)象):使用js的方式獲取到的元素就是js對(duì)象（DOM對(duì)象）//var cloth = document.getElementById("cloth");//cloth.style.backgroundColor = "pink";//2. 什么是jq對(duì)象：使用jq的方式獲取到的元素就是jq對(duì)象//var $li = $("li");//console.log($li);//$li.text("我改了內(nèi)容");
    //3. jq對(duì)象與js對(duì)象的區(qū)別//js對(duì)象對(duì)象不能調(diào)用jq對(duì)象的方法//var cloth = document.getElementById("cloth");//cloth.text("呵呵");//4. jq對(duì)象與js對(duì)象的聯(lián)系（jq對(duì)象其實(shí)就是js對(duì)象的一個(gè)集合，偽數(shù)組，里面存放了一大堆的js對(duì)象）（宏觀上）
    
    //jquery對(duì)象能不能調(diào)用DOM對(duì)象的方法//var $li = $("li");//$li[0].setAttribute("name","hehe");//DOM無法調(diào)用jQuery對(duì)象的方法：為什么：因?yàn)槭莾蓚€(gè)不同對(duì)象//DOM對(duì)象調(diào)用jQuery對(duì)象的方法。需要把DOM對(duì)象轉(zhuǎn)換成jQuery對(duì)象。var cloth = document.getElementById("cloth");//DOM對(duì)象就變成jQuery對(duì)象//$(cloth).text("呵呵");//jQuery對(duì)象怎么轉(zhuǎn)換成DOM對(duì)象（取出來）var $li = $("li");$li[1].style.backgroundColor = "red";$li.get(2).style.backgroundColor = "yellow";
    
    
    
    //1. 什么是DOM對(duì)象：用js的方式獲取到的對(duì)象時(shí)DOM對(duì)象//2. jQuery對(duì)象：用jq的方式獲取到的對(duì)象時(shí)jq對(duì)象//3. 區(qū)別與聯(lián)系//4. 區(qū)別:js對(duì)象與jq對(duì)象的方法不能混著用//5. 聯(lián)系：  // DOM--> jQuery  $()  // jQuery--》 DOM  $li[0]  $li.get(0)
  });
 
  </script></body></html>

jQuery里面放了Dom對(duì)象，把jQuery比作一個(gè)偽數(shù)組，就是沒有數(shù)組的方法，但是有自己的方法（jQuery的方法）

以上是“jQuery對(duì)象與DOM對(duì)象的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手