jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。我们使用jQuery的同时也能混合JavaScript原生代码一起使用。在很多场景中，我们需要jQuery与DOM能够相互的转换，它们都是可以操作的DOM元素，jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。
如何把jQuery对象转成DOM对象
利用数组下标的方式读取到jQuery中的DOM对象
1、我们项目中本来有的id，通过jquery获取到后需要转化成dom对象

2、用jQuery找到所有的div元素（3个），因为jQuery对象也是一个数组结构，可以通过数组下标索引找到第一个div元素

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="http://code.jquery.com/jquery-1.11.3.js"></script>

</head>

<body>

    <div>元素一</div>

    <div>元素二</div>

    <div>元素三</div>

    <script type="text/javascript">

        var $div = $('div'); //jQuery对象

        var div = $div[0]; // 转化成dom对象

        div.style.color = 'red'; //操作dom对象的属性

    </script>

</body>

</html>
通过jQuery自带的get()方法
<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="http://code.jquery.com/jquery-1.11.3.js"></script>

</head>

<body>

    <div>元素一</div>

    <div>元素二</div>

    <div>元素三</div>

    <script type="text/javascript">

        var $div = $('div'); //jQuery对象

        var div = $div.get(0); // 转化成dom对象

        div.style.color = 'red'; //操作dom对象的属性

    </script>

</body>

</html>

jquery对象转成dom对象的更多相关文章

  1. jQuery对象转成DOM对象：

    jQuery对象转成DOM对象: 两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index); (1)jQuery对象是一个数据对象,可以通过[index]的方法,来得 ...

  2. jQuery 对象转成 DOM 对象

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  3. 锋利的jQuery（1）——DOM对象与jQuery对象的转换

    1.认识jQuery DOM对象:即文档对象模型 jQuery对象:通过jQuery包装DOM对象后产生的对象.这是jQuery对象所特有的,在jQuery对象中无法使用DOM对象的任何方法,同时DO ...

  4. jQuery对象和普通DOM对象的区别

    1.DOM对象DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的对象.这些对象的行为和属性以及这些对象之间的关系.根据W3C DOM规范,DOM是HTML与XML的应用编程接 ...

  5. 深刻了解jQuery对象和普通DOM对象的区别

    深刻了解jQuery对象和普通DOM对象的区别.互相转化见Q1 Q1,js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样 ...

  6. JQ对象和原生DOM对象

    相同点:两者本质上都是DOM元素. 不同点:JQ对象是在原生DOM对象上进行了一次封装,使开发人员使用起来更简洁.高效. 两者之间用法也完全不同,很说初学者经常混淆. 其实区分两者并不难, 1.语法不 ...

  7. jquery不能是使用普通的for循环 因为普通的for循环通过下表获取对象 如果通过下表获取对象的话 会转成dom对象

    jquery不能是使用普通的for循环 因为普通的for循环通过下表获取对象 如果通过下表获取对象的话 会转成dom对象

  8. dom变成jquery对象 先获取dom对象 然后通过$()转换成jquery对象

    dom变成jquery对象   先获取dom对象 然后通过$()转换成jquery对象

  9. 如何将JQUERY对象转成Javascript对象

    问: <div id="test"></div> $("#test") //由Javascript对象转为Jquery对象: 但是如何转 ...

随机推荐

  1. [Golang] Gin框架学习笔记

    0x0 Gin简介 1.Gin 是什么? Gin 是一个用 Go (Golang) 编写的 HTTP web 框架. 它是一个类似于 martini 但拥有更好性能的 API 框架, 由于 httpr ...

  2. Content-Type四种常见取值

    一.application/x-www-form-urlencoded 最常见 POST 提交数据的方式.浏览器的原生 form 表单,如果不设置 enctype 属性,那么最终就会以 applica ...

  3. 快速读取TXT几百万行数据， 然后插入到数据，SqlBulkCopy功能的确是有效率

    public static void Main(string[] args) { string strPath = "F:\\Download\\600.txt"; int lin ...

  4. WIFI-Direct(Wifi直连)、AirPlay、DLAN、Miracast功能介绍

    不知道大家对无线同屏技术有多少了解,当这种技术普及的时候,我想我们的工作与生活又会方便很多吧!下面是目前三种主流同屏技术的介绍: 目前这种将终端信号经由WiFi传输到电视.电视盒的技术有三种:DLNA ...

  5. understanding backpropagation

    几个有助于加深对反向传播算法直观理解的网页,包括普通前向神经网络,卷积神经网络以及利用BP对一般性函数求导 A Visual Explanation of the Back Propagation A ...

  6. zookeeper实现的分布式锁

    在分布式系统中,多个jvm对共享资源进行操作时候,要加上锁,这就是分布式锁 利用zookeeper的临时节点的特性,可以实现分布式锁 public class ZookeeperDistrbuteLo ...

  7. JDK动态代理为什么必须针对接口

    查看jdk的动态代理源码发现: 动态代理实际上是程序在运行中,根据被代理的接口来动态生成代理类的class文件,并加载class文件运行的过程,通过反编译被生成的$Proxy0.class文件发现: ...

  8. Word 频繁无响应

    可以参考以下方法,这是我的解决办法,不保证对你也有用. 步骤一: 在「开始 > 运行」中输入「winword /a」进入无加载项 Word: 依次进入「Word 选项 > 高级 > ...

  9. Visual Studio Code (vscode) 配置 C / C++ 环境

    Visual Studio Code (vscode) 配置 C / C++ 环境 昨天突发奇想,想使用vscode配置C++环境,因为不想下载 Dev OR codeblock,然后借助了很多网上教 ...

  10. CSS3弹性盒布局方式

    一.CSS3弹性盒子 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的 ...