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 ...
随机推荐
- python—命名空间、作用域查找顺序、闭包
名称空间 name space,如下图: x = 1, 1存放在内存中,1 会有一个内存地址,x 则 存放在 name space 里,并同时记录了 1的内存地址, 即 名称空间是存放了变量x与1绑定 ...
- eclipse 插件relo使用
1. eclipse插件安装 在线安装地址:http://relo.csail.mit.edu/update 本地配置,文件下载:http://download.csdn.net/download/s ...
- python中的反斜杠问题
python本身使用 \ 来转义一些特殊字符,比如在字符串中加入引号的时候 s = 'i\'m superman' print(s) # i'm superman 为了防止和字符串本身的引号冲突,使用 ...
- iOS MapKit地图
地图框架:#import <MapKit/MapKit.h> 基本属性和方法: 属性: 地图类视图:MKMapView 地图类型:MKMapType mapType 地图旋转:rotate ...
- 第34-3题:LeetCode437. Path Sum III
题目 二叉树不超过1000个节点,且节点数值范围是 [-1000000,1000000] 的整数. 示例: root = [10,5,-3,3,2,null,11,3,-2,null,1], sum ...
- php-语言参考-基本语法3.1
一,PHP代码的开始和结束标记 1,<?php 和 ?> //重点 2,<script language="php"> 和 </script> ...
- day1_作业2(三级菜单)
#!/usr/local/bin/python3 # -*- coding:utf-8 -*- province={'江苏省':['南京市','苏州市','无锡市'],'浙江省':['杭州市','温州 ...
- Python基础-字符串的使用
基础知识 字符串解释:字符串是不可变的,所有元素赋值和切片赋值操作都是非法的,属于序列一种(字符串.元组.列表). 一.格式化字符串 (1).format()方法==str.format() 作用:将 ...
- 第二章习题 C++
1.编写一个程序,显示您的姓名和地址. #include<iostream> using namespace std; int main() { ]; cout << &quo ...
- Poweroj:来自学长的善意:ZQ的杀龙之旅(状压BFS)
传送门:https://www.oj.swust.edu.cn/problem/show/2794 来自学长的善意:ZQ的杀龙之旅 Time Limit: 15000 MS Memory Limit: ...