前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery对象与DOM对象的区别(重点)

jQuery对象与DOM对象的区别(重点)

作者头像
兮动人
发布2021-06-11 11:25:52
6120
发布2021-06-11 11:25:52
举报
文章被收录于专栏:兮动人的博客
  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对象的方法:为什么:因为是两个不同对象
  • DOM对象调用jQuery对象的方法。需要把DOM对象转换成jQuery对象。

转换

  • DOM对象转换成jQuery对象:【联想记忆:花钱$】
代码语言:javascript
复制
var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象
  • jQuery对象转换成DOM对象:
代码语言:javascript
复制
var $li = $(“li”);
//第一种方法(推荐使用)
$li[0]
//第二种方法
$li.get(0)

案例:

代码语言:javascript
复制
<!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的方法)

总结

  1. 什么是DOM对象:用js的方式获取到的对象时DOM对象
  2. jQuery对象:用jq的方式获取到的对象时jq对象
  3. 区别与联系
  4. 区别:js对象与jq对象的方法不能混着用
  5. 联系: DOM–> jQuery
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/10/25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 转换
  • 总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档