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. spring boot 2X中@Scheduled实现定时任务及多线程配置

    使用@Scheduled 可以很容易实现定时任务 spring boot的版本 2.1.6.RELEASE package com.abc.demo.common; import org.slf4j. ...

  2. 【idea】设置背景颜色

    File->Settings->Editor->Color Scheme->General->Text->Default text->Background

  3. C#多线程那点事——信号量(Semaphore)

    信号量说简单点就是为了线程同步,或者说是为了限制线程能运行的数量. 那它又是怎么限制线程的数量的哩?是因为它内部有个计数器,比如你想限制最多5个线程运行,那么这个计数器的值就会被设置成5,如果一个线程 ...

  4. 页码0~N ，其中0，1....9都出现了几次

    /* 这道题目可以暴力解答:对1~n的每个数进行从低位到高位分析 一旦这个数字num出现,a[num]++即可 第二种方法: 由0,1,...9组成的所有n位数,从n个0到n个9共10^n个数,0,1 ...

  5. MariaDB 10.3 序列

    在MariaDB .3版本中sequence是特殊的表,和表使用相同的namespace,因此表和序列的名字不能相同. MariaDB [wuhan]> select version(); +- ...

  6. CF723D 【Lakes in Berland】

    题目链接 题解 CF723D [Lakes in Berland] 首先将边界的水用bfs处理掉 再将中间的每一个湖泊处理出来,存入一个结构体内,结构体里记录湖泊大小和开始点 将湖泊排序从小往大填满, ...

  7. Linux基础(05)socket编程

    Linux的核心思想之一 "一切皆文件" 内容 , socket在Linux内核的实现的代码及TCP和UDP的实现 网络编程常用头文件: https://blog.csdn.net ...

  8. 上传docker镜像到阿里云镜像源

    阿里云docker镜像配置 阿里云用户名可以使用淘宝系的,或者新注册都行. a. 配置阿里云的镜像加速器:加速器 然后在线上创建`镜像仓库`,需要设置`命名空间`和`仓库名称`,然后接着操作下面的步骤 ...

  9. Error creating bean with name 'XXX' defined in file

    这个错误是我在之前操作时,错将另一个dubbo服务器也加载到了该dubbo服务器上(pom.xml),所以出现了Error creating bean with name 'XXX' defined ...

  10. kali之nmap

    nmap简介 Nmap,也就是Network Mapper,最早是Linux下的网络扫描和嗅探工具包.可以扫描主机.端口.并且识别端口所对应的协议,以及猜测操作系统 Ping扫描(-sP参数) TCP ...