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. 几个 h5页面效果和 自动 app 生成网站 微页

    用MAKA.易企秀.兔展就够了,MAKA和兔展用户体验好些,易企秀广告有点丑,不过模板多一些. 至于交互类工具,iH5.Mugeda.Epub360这三个里面选一个就行. -------------- ...

  2. Git 拉取Gitee仓库报错:“fatal: unable to access ''": Failed to connect to 127.0.0.1 port 1080: Connection refused”

    1.报错信息: 2.本地查看是否Git使用了代理 git config --global http.proxy 3.取消代理 git config --global --unset http.prox ...

  3. Software Testing Techniques LAB 02: Selenium

    1. Installing 1. Install firefox 38.5.1 2. Install SeleniumIDE    After installing, I set the view o ...

  4. Java容器之HashMap源码分析

    在java的容器框架中,hashMap是最常用的容器之一,下面我们就来深入了解下它的数据结构和实现原理 先看下HashMap的继承结构图 下面针对各个实现类的特点进行下说明:1)HashMap: 它是 ...

  5. C#操作GridView控件

    GridView控件是一个visualStudio自带的数据控件,它可以非常快速的将数据以表格方式显示在web页面上.下面就是一个利用GridView控件进行数据绑定的小例子,内容如下: 数据来源自一 ...

  6. Python3.x urlib包

    在Python3.x中,我们可以使用urlib这个组件抓取网页,urllib是一个URL处理包,这个包中集合了一些处理URL的模块,如下: 1.urllib.request模块是用来打开和读取URLs ...

  7. ajax实现跨域请求

    因为现在一直用的mvc,所以就以mvc来说说ajax跨域提交. 首先说说跨域,简单说就是不同域名访问,比如在aaa.com访问bbb.com. 就拿招聘网站来说,分为两种用户,求职者和企业,求职者端是 ...

  8. Oracle 检查表的数据变动

    本知识点仅适用于Oracle 9i以上的版本. 查看表的数据变动情况请使用SQL语句:select * from user_tab_modifications; user_tab_modificati ...

  9. webpack笔记一 起步

    webpack笔记一 起步 安装 对于大多数项目,我们建议本地安装(--save-dev).这可以在引入突破式变更(breaking change)版本时,更容易分别升级项目. 起步 初始化项目 mk ...

  10. Python 及其基础语法

    重新开始玩 Python,打算就是学完实验楼的"Python3 简明教程",然后就可以玩点小项目,先前学了点 Python2 就不管它啦. 以上. 认识 Python Python ...