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

  1. jQuery对象和dom对象的辨析和相互转化

    jquery对象和dom对象总是让人感觉很难分清,其实只要做到1对两者概念有明确认识2找出不同点 A DOM 1概念 DOM对象(Document Object Model,文档对象模型)可以把htm ...

  2. jQuery对象和DOM对象的相互转化实现代码

    jQuery对象和DOM对象相互转化 jQuery对象和DOM对象 jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的,其可以使用jQuery里的方法 ...

  3. jQuery对象和dom对象之间的相互转化

    var domObj = document.getElementById("demo"); var $Obj = $("#demo"); DOM转jQuery: ...

  4. 区别jquery对象和dom对象及转换方法

    一.jquery对象 由$() 获取,例如 var div = $("#id"); 这个div是jquery对象,它里面没有dom对象自带的方法.常见的dom对象自带的方法, 例如 ...

  5. 判断一个对象是jQuery对象还是DOM对象

    今天调试一段代码的时候,看到其中一个变量,想知道它到底是jquery对象还是dom对象. 虽然直接console出这个对象,看它的内部可以判断出来.但是我想有没有什么更方便的方法呢. 后来我想到了一个 ...

  6. jQuery对象和DOM对象的区别

    jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...

  7. jQuery对象与dom对象相互转换

    核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S('#id' ...

  8. JQuery对象与DOM对象的区别与转换

      1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj ...

  9. 什么是jquery $ jQuery对象和DOM对象 和一些选择器

    1什么是jQuery: jQuery就是将一些方法封装在一个js文件中.就是个js库 我们学习这些方法. 2为什么要学习jQuery: 原生js有以下问题: 1.兼容性问题2.代码重复3.DOM提供的 ...

随机推荐

  1. 使用NodeJs搭建的小型web应用

    原文英文链接:http://www.nodebeginner.org 中文翻译链接:http://www.nodebeginner.org/index-zh-cn.html 学习链接:一本全面的Nod ...

  2. 一张图看懂 JS 原型链

    JS 原型链,画了张图,终于理清楚各种关系有木有 写在最后: __proto__是每个对象都有的一个属性,而prototype是函数才会有的属性!!! function Person() { } 是函 ...

  3. centos下安装ipython(minglnghang命令行)

    下载文件 wget https://bootstrap.pypa.io/get-pip.py --no-check-certificate 执行安装 python get-pip.py 这就安装好了 ...

  4. 在Windows下为PHP5.6安装redis扩展和memcached扩展

    一.php安装redis扩展   1.使用phpinfo()函数查看PHP的版本信息,这会决定扩展文件版本       2.根据PHP版本号,编译器版本号和CPU架构, 选择php_redis-2.2 ...

  5. oracle的乐观锁和悲观锁

    一.问题引出 1. 假设当当网上用户下单买了本书,这时数据库中有条订单号为001的订单,其中有个status字段是’有效’,表示该订单是有效的: 2. 后台管理人员查询到这条001的订单,并且看到状态 ...

  6. Python学习---IO模型1227

    1.1. 事件驱动 事件驱动属于一种编程的范式,一种编程的风格,它擅长于处理一些未知的事件,通过绑定一个事件,外界触发后激活这个事情,达到执行某些操作的目的.比如浏览器的onclick()事件 1.2 ...

  7. php图片处理类

    代码 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-- ...

  8. Spring boot整合Swagger

    本文github位置:https://github.com/WillVi/springboot-swagger2-demo 环境准备 JDK版本:1.8 Spring boot版本:1.5.16 Sw ...

  9. Skype for Business 安装组件RewriteModule失败

    最近QQ网友提到部署Skype for Business,安装组件时提示安装必备组件失败:RewriteModule,如下图,安装文件名是rewrite_2.0_rtw_x64.msi,尝试手动安装也 ...

  10. Linux性能测试工具

    Linux性能测试工具 在测试中,我们不仅需要查看系统日志信息,而且还要使用大量的性能监测工具来关注某些地方,如内存.CPU等.在Linux系统中,所有的运行参数保存在虚拟目录/proc中,换句话说, ...