jQuery对象转化为DOM对象
jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。我们使用jQuery的同时也能混合JavaScript原生代码一起使用。在很多场景中,我们需要jQuery和DOM能够相互的转换,它们都是可以操作的DOM元素,jQuery是一个类数组对象,而DOM对象就是一个单独的DOM元素。
如何把jQuery对象转化为DOM对象?
1.利用数组下标的方式读取到jQuery中的DOM对象
HTML代码
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
JavaScript代码
var $div = $('div');//jQuery对象
var div=$div[0];//转化成DOM对象
div.style.color='red';//操作DOM对象的属性
用jQuery找到所有的div元素(3个),因为jQuery对象也是一个数组结构,可以通过数组下标索引找到第一个div元素,通过返回的div对象,调用它的style属性修改第一个div元素的颜色。这里需要注意的一点是,数组的索引是从0开始的,所以第一个元素下标是0。
2.通过jQuery自带的get()方法
jQuery对象自身提供一个get()方法允许我们直接访问jQuery对象中相关的DOM节点,get方法中提供一个元素的索引:
var $div=$('div');//jQuery对象
var div=$div.get(0);//通过get方法,转化成DOM对象
div.style.color='red';//操作DOM对象的属性
其实我们翻开源码看看就知道,get方法就是利用第一种方式处理的,只是包装成一个get让开发者更直接方便的使用。
jQuery对象转化为DOM对象的更多相关文章
- 锋利的jQuery(1)——DOM对象与jQuery对象的转换
1.认识jQuery DOM对象:即文档对象模型 jQuery对象:通过jQuery包装DOM对象后产生的对象.这是jQuery对象所特有的,在jQuery对象中无法使用DOM对象的任何方法,同时DO ...
- jQuery对象和普通DOM对象的区别
1.DOM对象DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的对象.这些对象的行为和属性以及这些对象之间的关系.根据W3C DOM规范,DOM是HTML与XML的应用编程接 ...
- 深刻了解jQuery对象和普通DOM对象的区别
深刻了解jQuery对象和普通DOM对象的区别.互相转化见Q1 Q1,js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样 ...
- 通示jQuery实例方法,未DOM对象添加多个方法
<script type="text/javascript"> /* * 通示jQuery实例方法,未DOM对象添加多个方法 * 用按钮做多个事件的调用 */ (fun ...
- dom变成jquery对象 先获取dom对象 然后通过$()转换成jquery对象
dom变成jquery对象 先获取dom对象 然后通过$()转换成jquery对象
- jQuery 对象 与 原生 DOM 对象 相互转换
区别 jQuery 选择器得到的 jQuery对象 和 原生JS 中的document.getElementById() document.querySelector取得的 DOM对象 是两种不同类型 ...
- jQuery对象转成DOM对象:
jQuery对象转成DOM对象: 两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index); (1)jQuery对象是一个数据对象,可以通过[index]的方法,来得 ...
- jQuery入门二(DOM对象与jQuery对象互相转换)
- DOM对象与jQuery对象互相转换 第一篇说过,DOM对象不能调用jQuery对象的属性和方法,同样jQuery对象也不能调用DOM对象的属性和方法.但是在实际开发中,可能两者间需要互相调用对方 ...
- jquery对象转成dom对象
jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能.我们使用jQuery的同时也能混合Java ...
随机推荐
- rectified units
from: http://en.wikipedia.org/wiki/Rectifier_(neural_networks) In the context of artificial neural n ...
- caffe的损失函数
损失函数,一般由两项组成,一项是loss term,另外一项是regularization term. J=L+R 先说损失项loss,再说regularization项. 1. 分对得分1,分错得分 ...
- js图片库 案例
事件处理函数:事件处理函数的作用是,在特定事件发生时调用特定的JavaScript代码.本例中想要在用户点击某个链接的时候触发一个动作,所以需要使用onclick事件处理函数. 添加事件处理函数的语法 ...
- 在xampp修改密码
1.选择 服务器--账号--修改密码 2.在密码 一栏输入新密码 3.刷新页面会得到如下页面 此时,该页面提醒我们检查配置文件中的主机.用户名和密码 4.打开配置文件 路径为 xampp -> ...
- 牛客小白月赛2 D 虚虚实实 【欧拉图】【连通图】
链接:https://www.nowcoder.com/acm/contest/86/D来源:牛客网 题目描述 震为雷,临危不乱,亨通畅达:巽为风,柔顺伸展,厚载万物. 震卦:洊雷,震,君子以恐惧修省 ...
- Gulp工具
Gulp是一个基于node开发的构建工具. gulp本身是不进行任何构建任务,是通过gulp的一些列插件完成: gulp-less 编译LESS文件: gulp-autoprefix 添加css私 ...
- Python__学习路上的坑之--引用,浅拷贝,深拷贝
copy : 相当于只是拷贝表面一层,如果里面还有深层次的引用,那么也是直接拷贝引用的地址,而且如果拷贝对象是不可变类型比如元组,那么也是直接拷贝引用. deepcopy: 无论是拷贝可变类型还是不可 ...
- JavaSE 第二次学习随笔(String的坑 + ==)
String 类是一个final类, 其内部是使用的 private final char value[]; 来存储内容, 其既可以当作一个基本类型来使用也可以当作一个类来使用;final 类(Str ...
- proteus中蜂鸣器不响的原因
本文参考自https://blog.csdn.net/gin_love/article/details/51168369 此网站.在用proteus仿真报警电路时,发现蜂鸣器不响.后在网上找了 ...
- 中国剩余定理算法详解 + POJ 1006 Biorhythms 生理周期
转载请注明出处:http://exp-blog.com/2018/06/24/pid-1054/ #include <iostream> #include <cstdio> u ...