jQuery对象与DOM对象的相互转化
jQuery是一个类数组对象,DOM对象就是一个单独的DOM元素,他们都是可以操作的DOM元素。
一、jQuery对象转化为DOM对象
有以下两种方法:
方法一:利用数组下标的方式读取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元素,通过返回的div对象调用它的style属性修改div元素的颜色。
方法二:通过jQuery自带的get()方法
jQuery对象自身提供一个.get()方法允许我们直接访问jQuery对象中相关的DOM节点,get方法中提供了一个元素的索引
var $div = $('div') //jQuery对象
var div = $div.get(0); //通过get方法,转化为DOM对象
div.style.color = 'red'; //操作DOM对象的属性
其实,jQuery源码中,get()方法就是利用数组下标的方式处理的,只不过jQuery把它包装程get方法更便于开发者使用。
二、DOM对象转化为jQuery对象
相比较jQuery对象转化为DOM对象,开发中更多的是把一个DOM对象加工成一个jQuery对象。$(参数)是一个对功能大方法,通过传递不同的参数而产生不同的作用,如果传递的参数是一个DOM对象,jQuery就可以把DOM对象包装转化为一个jQuery对象。
javascript代码:
var div = document.getElementsByTagName('div'); //DOM对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color','red');
通过getElementSByTagName()获取到所有的div节点的元素,结果是一个DOM合集对象,这个对象是一个数组合集,通过$(div)方法转化为jQuery对象,再调用jQuery对象中的first和css方法查找对应的元素并改变其颜色。
jQuery对象与DOM对象的相互转化的更多相关文章
- jQuery对象和dom对象的辨析和相互转化
jquery对象和dom对象总是让人感觉很难分清,其实只要做到1对两者概念有明确认识2找出不同点 A DOM 1概念 DOM对象(Document Object Model,文档对象模型)可以把htm ...
- jQuery对象和DOM对象的相互转化实现代码
jQuery对象和DOM对象相互转化 jQuery对象和DOM对象 jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的,其可以使用jQuery里的方法 ...
- jQuery对象和dom对象之间的相互转化
var domObj = document.getElementById("demo"); var $Obj = $("#demo"); DOM转jQuery: ...
- 区别jquery对象和dom对象及转换方法
一.jquery对象 由$() 获取,例如 var div = $("#id"); 这个div是jquery对象,它里面没有dom对象自带的方法.常见的dom对象自带的方法, 例如 ...
- 判断一个对象是jQuery对象还是DOM对象
今天调试一段代码的时候,看到其中一个变量,想知道它到底是jquery对象还是dom对象. 虽然直接console出这个对象,看它的内部可以判断出来.但是我想有没有什么更方便的方法呢. 后来我想到了一个 ...
- jQuery对象和DOM对象的区别
jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...
- jQuery对象与dom对象相互转换
核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S('#id' ...
- JQuery对象与DOM对象的区别与转换
1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj ...
- 什么是jquery $ jQuery对象和DOM对象 和一些选择器
1什么是jQuery: jQuery就是将一些方法封装在一个js文件中.就是个js库 我们学习这些方法. 2为什么要学习jQuery: 原生js有以下问题: 1.兼容性问题2.代码重复3.DOM提供的 ...
随机推荐
- docker pull提示x509错误的对应方法
在一台虚拟机上使用docker pull时出现了x509错误,相关原因与对应方法简单memo如下. 错误现象 在使用docker pull从dockerhub上下载镜像时提示如下错误 docker: ...
- openlayers研究(一) 初始化流程
下载2.13.1.解压缩.根据readme解释,openlayers.js是一个压缩库,.light是一个图像显示的简化库,mobile顾名思义应该是应对移动设备的库.build里面有py写的打包工具 ...
- jQuery 所有版本在线引用
jquery-3.1.1(最新) 官网jquery压缩版引用地址: <script src="https://code.jquery.com/jquery-3.1.1.min.js&q ...
- 你真的了解Fragment的生命周期吗?
Android Framwork开发人员中的传奇人物Dianne Hackborn在2010年将Fragment引入了Android,也就是在android3.0之后引入Fragment,他在提交信息 ...
- 关于jrebel碰到的一次问题记录
今天使用jrebel更新gitlab的代码之后,项目总是启动报错.报一个类找不到,但是这个类在整个目录下搜索不到,在target的class目录看了下也没有对应的目录.郁闷了好久,最后同事看了下,在整 ...
- npm使用过程中的一些错误解决办法及npm常用命令和技巧
node,npm在前端开发流程中提供了非常完善的自动化工具链,但是同样由于其复杂性导致有很多奇奇怪怪的问题.本文将记录使用过程中出现的一些问题及其解决方法备案. 国内由于gfw问题,导致很多国外的网站 ...
- SpringMVC与shiro集成及配置文件说明!
在项目中xml文件的配置是必不可少的,特别是SpringMVC框架.但是几乎所有项目的配置都是大同小异,很多人都是直接复制黏贴了事,不少人对其具体含义及用途都不甚全知.本片文章将正对项目中常用的框架S ...
- Windows Server 2012 AD域管理创建
前言 关于AD域管理及其权限划分概论: 1. AD域源于微软,适用于windows,为企业集中化管理和信息安全提供强力保障. 2. 提供域中文件夹共享,但同时又对不同用户有不用的权限. 3.通过对设备 ...
- Win10笔记本显卡驱动更新升级
对于游戏玩家来说,对显卡的关注度要高于电脑其它硬件,一般来说,显卡越好,游戏性能往往越强.不过要持续发挥显卡的最佳游戏性能,经常更新显卡驱动也是很有必要的.那么笔记本显卡驱动怎么更新?下面小编以自己的 ...
- DB_NAME DB_UNIQUE_NAME 和 SID 的理解
1. DB_NAME 表示数据库名称,DB_NAME 会保持在数据文件头.控制文件.REDO文件里,所以更改DB_NAME不能仅仅修改spfile ,还需要用nid 来进行更改,并且更改后还需要手工做 ...