温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jQuery对象与DOM对象的示例分析

发布时间:2021-06-16 14:05:07 来源:亿速云 阅读:145 作者:小新 栏目:编程语言

小编给大家分享一下jQuery对象与DOM对象的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

  1. DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象就是DOM对象。

  2. jQuery对象:jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。

  3. jQuery对象其实就是DOM对象的包装集(包装了DOM对象的集合(伪数组))

  4. DOM对象与jQuery对象的方法不能混用。

  • js对象对象不能调用jq对象的方法

  • jq对象与js对象的联系(jq对象其实就是js对象的一个集合,伪数组,里面存放了一大堆的js对象)(宏观上)

  • jquery对象能不能调用DOM对象的方法

  • DOM无法调用jQuery对象的方法:为什么:因为是两个不同对象三门峡妇科医院http://www.smxrlyy.com/

  • DOM对象调用jQuery对象的方法。需要把DOM对象转换成jQuery对象。

转换

  • DOM对象转换成jQuery对象:【联想记忆:花钱$】

var $obj = $(domObj);// $(document).ready(function(){});就是典型的DOM对象转jQuery对象
  • jQuery对象转换成DOM对象:

var $li = $(“li”);//第一种方法(推荐使用)$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对象(js对象):使用js的方式获取到的元素就是js对象(DOM对象)//var cloth = document.getElementById("cloth");//cloth.style.backgroundColor = "pink";//2. 什么是jq对象:使用jq的方式获取到的元素就是jq对象//var $li = $("li");//console.log($li);//$li.text("我改了内容");
    //3. jq对象与js对象的区别//js对象对象不能调用jq对象的方法//var cloth = document.getElementById("cloth");//cloth.text("呵呵");//4. jq对象与js对象的联系(jq对象其实就是js对象的一个集合,伪数组,里面存放了一大堆的js对象)(宏观上)
    
    //jquery对象能不能调用DOM对象的方法//var $li = $("li");//$li[0].setAttribute("name","hehe");//DOM无法调用jQuery对象的方法:为什么:因为是两个不同对象//DOM对象调用jQuery对象的方法。需要把DOM对象转换成jQuery对象。var cloth = document.getElementById("cloth");//DOM对象就变成jQuery对象//$(cloth).text("呵呵");//jQuery对象怎么转换成DOM对象(取出来)var $li = $("li");$li[1].style.backgroundColor = "red";$li.get(2).style.backgroundColor = "yellow";
    
    
    
    //1. 什么是DOM对象:用js的方式获取到的对象时DOM对象//2. jQuery对象:用jq的方式获取到的对象时jq对象//3. 区别与联系//4. 区别:js对象与jq对象的方法不能混着用//5. 联系:  // DOM--> jQuery  $()  // jQuery--》 DOM  $li[0]  $li.get(0)
  });
 
  </script></body></html>

jQuery里面放了Dom对象,把jQuery比作一个伪数组,就是没有数组的方法,但是有自己的方法(jQuery的方法)

以上是“jQuery对象与DOM对象的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI