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对象的更多相关文章

  1. 锋利的jQuery(1)——DOM对象与jQuery对象的转换

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

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

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

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

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

  4. 通示jQuery实例方法,未DOM对象添加多个方法

    <script type="text/javascript"> /* * 通示jQuery实例方法,未DOM对象添加多个方法 * 用按钮做多个事件的调用 */ (fun ...

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

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

  6. jQuery 对象 与 原生 DOM 对象 相互转换

    区别 jQuery 选择器得到的 jQuery对象 和 原生JS 中的document.getElementById() document.querySelector取得的 DOM对象 是两种不同类型 ...

  7. jQuery对象转成DOM对象:

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

  8. jQuery入门二(DOM对象与jQuery对象互相转换)

    - DOM对象与jQuery对象互相转换 第一篇说过,DOM对象不能调用jQuery对象的属性和方法,同样jQuery对象也不能调用DOM对象的属性和方法.但是在实际开发中,可能两者间需要互相调用对方 ...

  9. jquery对象转成dom对象

     jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能.我们使用jQuery的同时也能混合Java ...

随机推荐

  1. 太阳地球月亮运行动画(使用@keyframes)

    闲来无事的demo <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  2. 【ACM之行】◇第一站◇ 2018HDU多校赛总结

    ◇第一站◇ 2018HDU多校赛 十场多校赛下来,也算是给一个初中生开了眼界……看着清华一次次AK(默默立下flag),看着自己被同校的高中生完虐,一个蒟蒻只能给dalao们垫脚

  3. 描述linux目录结构以及目录结构命名规定

    FHS全称(Filesystem Hierarchy Standard),中文意思是目录层次标准,是linux的目录规范标准. 详情点击查看 FHS定义了两层规范: 第一层:“/”目录下的各个目录应该 ...

  4. asciinema使用

    asciinema让您轻松记录终端会话,并在终端和网页浏览器中重播它们. 安装最新版本: sapt-get install asciinema 记录你的第一个终端视频: asciinema rec f ...

  5. Python面向对象--高级(二)

    ## 使用__slots__限制类的属性 - 之前说到,可以通过在类外部实例或者类名任意定义实例属性或者类属性或者方法 class Person(object): pass Person.name = ...

  6. PHP开发搭建环境二:开发工具PhpStorm安装、激活以及配置

    关于php的开发工具很多,目前市面上最好用最强大的莫过于PhpStorm这款开发神器了,但是鉴于很多开发者朋友在网站上下载的PhpStorm开发工具不能用,或者使用起来很不方便,笔者把最好用的下载地址 ...

  7. 22.1 高级函数【JavaScript高级程序设计第三版】

    函数是JavaScript 中最有趣的部分之一.它们本质上是十分简单和过程化的,但也可以是非常复杂和动态的.一些额外的功能可以通过使用闭包来实现.此外,由于所有的函数都是对象,所以使用函数指针非常简单 ...

  8. 【PHP项目】【Smarty】Smarty截取字符串方法truncate

    smarty truncate 截取字符串  //在sql中truncate是删除表格(truncate是只删除内容,delete彻底删除)从字符串开始处截取某长度的字符,默认的长度为80指定第二个参 ...

  9. javascript 运行机制 事件循环 浏览器缓存 (慕课网 前段跳槽面试必备 4-1,4-2,4-3)

    4-1 渲染机制:-1-,什么是DOCTYPE及其作用?DTD(document type definition,文档类型定义)是一系列的语法规则,用来定义XML或(X)HTML的文件类型,浏览器会使 ...

  10. Python分布式爬虫抓取知乎用户信息并进行数据分析

    在以前的文章中,我写过一篇使用selenium来模拟登录知乎的文章,然后在很长一段时间里都没有然后了... 不过在最近,我突然觉得,既然已经模拟登录到了知乎了,为什么不继续玩玩呢?所以就创了一个项目, ...