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. java基础 数组 Set Map 集合综合应用 生成带0的随机字符串 "00000001" 水果商品号问题

    package com.swift.test01; /*有四种水果(苹果,香蕉,西瓜,橘子) 1.给每种水果设定一个商品号,商品号是8个0-9的随机数,商品号码不能重复, 最小值 "0000 ...

  2. call()和apply()

    每个函数都包含apply和call方法. 相同点:都接收两个参数,一个是在其中运行函数的作用域,另一个是参数: 不同点:call方法和apply的不同之处在于接收参数的方式不同: apply方法第二个 ...

  3. 灵光一现的trick

    感觉平时会丢掉好多挺好的trick…… 图论 1.图G,固定S,T.可以将任意一条边加上权值$k(k>0)$,求最大化加权后最短路. 2.图G,固定S,T.可以将任意一条边乘以权值$k(k> ...

  4. Linux添加swap分区

    swap分区的作用为当系统的物理内存不够用的时候,就需要将物理内存中的一部分空间释放出来,以供当前运行的程序使用,那些被释放的空间可能来自一些很长时间没有什么操作的程序,这些被释放的空间被临时保存到S ...

  5. 关于Ubuntu 16.04 pip安装Docker-Compose

    $ sudo apt-get update 安装pip: $ sudo apt-get install python-pip 卸载旧版本docker-compose: $ sudo pip unins ...

  6. ssm整合-图片上传功能(转)

    本文介绍 ssm (Spring+SpringMVC+Mybatis)实现上传功能. 以一个添加用户的案例介绍(主要是将上传文件). 一.需求介绍 我们要实现添加用户的时候上传图片(其实任何文件都可以 ...

  7. MySQL(mariadb)主从复制模式与复制过滤

    在前一篇文章<mysql多实例与复制应用>中只对mysql的复制做了简单的介绍,本篇内容专门介绍一下mysql的复制. MySQL复制 mysql复制是指将主数据库的DDL和DML操作通过 ...

  8. python实现简单关联规则Apriori算法

    from itertools import combinations from copy import deepcopy # 导入数据,并剔除支持度计数小于min_support的1项集 def lo ...

  9. python json.dumps raise TypeError(repr(o) + " is not JSON serializable") TypeError: 0 is not JSON serializable

    出错如题. 这个问题有可能是因为python的json.dumps没法识别dump内容里的某些数据类型导致的.我的问题是因为dict中含有numpy.int64,numpy.float等类型导致的,需 ...

  10. HDU 6274 二分+预处理(CCPC K题

    #include"bits/stdc++.h" #define db double #define ll long long #define vec vector<ll> ...