jQuery对象与DOM(JS)对象_jquery对象是使用jquery提供的操作dom的方法返回的对象-程序员宅基地

技术标签: JavaScript  jQuery对象与DOM(JS)对象的区别  

jQuery对象与DOM(JS)对象

(1)DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象就是DOM对象。
(2)jQuery对象:jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
(3)jQuery对象其实就是DOM对象的包装集(包装了DOM对象的集合(伪数组))
(4)DOM对象与jQuery对象的方法不能混用。
(5)js对象对象不能调用jq对象的方法
(6)jq对象与js对象的联系(jq对象其实就是js对象的一个集合,伪数组,里面存放了一大堆的js对象)(宏观上)

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

DOM无法调用jQuery对象的方法:为什么:因为是两个不同对象
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的方法)

总结

什么是DOM对象:用js的方式获取到的对象时DOM对象
jQuery对象:用jq的方式获取到的对象时jq对象
区别与联系
区别:js对象与jq对象的方法不能混着用
联系:
DOM–> jQuery $()
jQuery–> DOM $li[0] 或 $li.get(0)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44870681/article/details/102812950

智能推荐

ffmpeg 编码 apng 解决内存泄露问题_ffmpeg_g memory leak-程序员宅基地

文章浏览阅读1.8k次。ffmpeg 编码 apng 解决内存泄露问题1.通过之前写的文章可以很容易进行apng的编码,但是通过使用memcheck内存检测,发现编码多张png图片造成了严重的内存泄露问题chenglong@chenglong-virtual-machine:~/work/ffmpeg$ valgrind --tool=memcheck --leak-check=full --show-r_ffmpeg_g memory leak

VMware ESXi 硬盘RDM直通_vmkfstools -r-程序员宅基地

文章浏览阅读3.2w次。VMware ESXi 硬盘RDM直通有时候很尴尬需要把整个物理硬盘都给虚拟机使用,就好比NAS系统,好在ESXi提供了RDM直通功能,可以按照以下办法实现打开vSphere Client,在服务器&gt;配置&gt;存储器页面中找到要创建RDM链接的物理设备,并记下IDSSH连接到ESXi,使用 vmkfstools -r /vmfs/devices/disks/ /&lt;路径&g..._vmkfstools -r

输入账号密码使用命令行git clone代码_git clone 用户名密码明文-程序员宅基地

文章浏览阅读3.7k次。git clone https://account:password@url_git clone 用户名密码明文

Echarts图表的动态数据显示_echarts 4.4动态显示数据-程序员宅基地

文章浏览阅读2.4k次。ECharts图表的动态显示 饼图_echarts 4.4动态显示数据

JVM预热-程序员宅基地

文章浏览阅读7.4k次,点赞2次,收藏9次。背景讲JVM的预热,就离不开JVM的类加载, JVM的三个类加载器:Bootstrap、ExtClassLoader、AppClassLoader什么是JVM预热JVM预热 : JVM Warm Up一旦类加载完成,所有重要的类(在进程启动时使用)都会被推送到JVM缓存(本机代码)中,这使得它们在运行时可以更快地访问。其他类是根据每个请求加载的。对Java Web应用程序的第一个请求通..._jvm预热

expected_conditions的16种方法_expected_conditions使用-程序员宅基地

文章浏览阅读1.4k次,点赞2次,收藏6次。1.title_is:判断当前页面的title是否完全等于预期字符串,返回布尔值2.title_contains:判断当前页面的title是否包含预期字符串,返回布尔值3.presence_of_element_located:判断某个元素是否被加到dom树下,不代表该元素一定可见4.visibility_of_element_located:判断某个元素是否可见,可见代表元素非隐藏,并且元..._expected_conditions使用

随便推点

Linux学习笔记(一):基本命令_python输入其他字符终止-程序员宅基地

文章浏览阅读89次。linux基本操作命令1:xrandr -s 分辨率 修改linux系统分辨率2:pwd 打印当前目录3:ls 查看当前目录所包含的文件 -a 显示所有文件(包含隐藏文件)4:cd 进入某目录 , … 表示上级目录 , . 表示当前目录 , / 表示根目录5:cp 旧文件 新文件 复制文件操作 -a 复制该文件夹下的所有文件6:mv a b 当ab都存在时,将a目录复制到b目录..._python输入其他字符终止

L1-030 一帮一 (15分) “一帮一学习小组”是中小学中常见的学习组织方式,老师把学习成绩靠前的学生跟学习成绩靠后的学生排在一组。本题就请你编写程序帮助老师自动完成这个分配工作,即在得到全班学生_“一帮一学习小组”是中小学中常见的学习组织方式,老师把学习成绩靠前的学生跟学-程序员宅基地

文章浏览阅读1w次,点赞10次,收藏12次。L1-030 一帮一 (15分)“一帮一学习小组”是中小学中常见的学习组织方式,老师把学习成绩靠前的学生跟学习成绩靠后的学生排在一组。本题就请你编写程序帮助老师自动完成这个分配工作,即在得到全班学生的排名后,在当前尚未分组的学生中,将名次最靠前的学生与名次最靠后的异性学生分为一组。输入格式:输入第一行给出正偶数N(≤50),即全班学生的人数。此后N行,按照名次从高到低的顺序给出每个学生的性别(0代表女生,1代表男生)和姓名(不超过8个英文字母的非空字符串),其间以1个空格分隔。这里保证本班男女比例是1_“一帮一学习小组”是中小学中常见的学习组织方式,老师把学习成绩靠前的学生跟学

javascript中event详解-程序员宅基地

文章浏览阅读279次。event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。event对象只在事件发生的过程中才有效。event的某些属性只对特定的事件有意义。比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。例子下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转。code&l..._javascript中 event等于undefined

android aop实现_aop 实现 activity统一处理 android-程序员宅基地

文章浏览阅读853次,点赞3次,收藏2次。最近寒休假期中,这二十七八天的,寻思着也不能浪费光阴啊,正好把以前写小玩意给捣鼓捣鼓。主要用到aspectj和apt,详细就不开展了,网上资料还是很多,推荐下面的博客https://www.jianshu.com/p/dca3e2c8608a?from=timeline Android AOP就是通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技..._aop 实现 activity统一处理 android

清华大学计算机学院褥震,基于中间语言的 JNI内存泄漏检查-程序员宅基地

文章浏览阅读150次。摘要:The Java native interface(JNI)enables Java code running in a Java virtual machine(JVM) to be called by native code, but the difference of security features between languages makes it a security wea..._褥震

UVALIVE 3644 X-Plosives-程序员宅基地

文章浏览阅读83次。并查集#include<iostream>#include<cstdio>using namespace std;#define MAXN 100005int p[MAXN],N;int Find(int x) {return x == p[x] ? x : p[x] = Find(p[x]);}int main(){ ...

推荐文章

热门文章

相关标签