jQuery中包裹后的DOM对象实际上是一个数组,要获得纯粹的DOM对象可以有两种方式:

1、使用数组索引方式访问,例如:

var dom = $(dom)[0];

如: $("#id")[0]

2、使用函数get()访问,例如:

var dom = $(dom).get(0);

get()函数中的参数为索引号。

什么是jQuery对象?

就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。

比如:

$("#test").html() 意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法

这段代码等同于用DOM实现代码:

document.getElementById("id").innerHTML;

jQuery对象转成DOM对象:

两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index);

1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。

var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象

var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

DOM对象转成jQuery对象:

对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象)

如:

var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象

jQuery对象与dom对象的转换

则为jquery对象,可以使用jquery的方法。

由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。

$("#msg")[0],   $("div").eq(1)[0],   $("div").get()[1],   $("td")[5]

这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。
以下几种写法都是正确的:

$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

jQuery 获取DOM节点的两种方式的更多相关文章

  1. 获取DOM节点的几种方式

    DOM 是一个树形结构,操作一个DOM节点,实际上就是这几个操作:更新.删除.添加.遍历 在操作DOM节点之前,需要通过各种方式先拿到这个DOM节点,常用的方法有: 一.通过元素类型的方法来操作: d ...

  2. JavaWeb后台从input表单获取文本值的两种方式

    JavaWeb后台从input表单获取文本值的两种方式 #### index.html <!DOCTYPE html> <html lang="en"> & ...

  3. SparkStreaming获取kafka数据的两种方式:Receiver与Direct

    简介: Spark-Streaming获取kafka数据的两种方式-Receiver与Direct的方式,可以简单理解成: Receiver方式是通过zookeeper来连接kafka队列, Dire ...

  4. strus2中获取表单数据 两种方式 属性驱动 和模型驱动

    strus2中获取表单数据 两种方式 属性驱动 和模型驱动 属性驱动 /** * 当前请求的action在栈顶,ss是栈顶的元素,所以可以利用setValue方法赋值 * 如果一个属性在对象栈,在页面 ...

  5. jQuery中开发插件的两种方式

    jQuery中开发插件的两种方式(附Demo) 做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数 ...

  6. 使用web.xml方式加载Spring时,获取Spring context的两种方式

    使用web.xml方式加载Spring时,获取Spring context的两种方式: 1.servlet方式加载时: [web.xml] <servlet> <servlet-na ...

  7. 【C#表达式树 六】表达式树中创建节点的两种方式

    创建表达式树节点的两种方式1.用expression的静态方法MakeBinary|MakeUnary(ExpressionType,参数)的方式创建表达式树节点: BinaryExpression ...

  8. Express全系列教程之(四):获取Post参数的两种方式

    一.关于POST请求 post方法作为http请求很重要的一部分,几乎所有的网站都有用到它,与get不同,post请求更像是在服务器上做修改操作,它一般用于数据资源的更新.相比于get请求,post所 ...

  9. drupal7 覆写node-type.tpl.php获取字段值的两种方式

    字段的机读名称为:field_publication_date <!-- 下面两种方式都可以获取node字段的值--> 出版时间: <?php print date('Y-m-d', ...

随机推荐

  1. Corosync 配置描述

    NAME corosync.conf - corosync executive configuration file SYNOPSIS /etc/corosync/corosync.conf DESC ...

  2. php split 和 explode 的区别

    php split 和 explode 的区别 split (PHP   3,   PHP   4   ) split   --   用正则表达式将字符串分割到数组中 说明 array   split ...

  3. HDU 6357.Hills And Valleys-字符串非严格递增子序列(LIS最长非下降子序列)+动态规划(区间翻转l,r找最长非递减子序列),好题哇 (2018 Multi-University Training Contest 5 1008)

    6357. Hills And Valleys 自己感觉这是个好题,应该是经典题目,所以半路选手补了这道字符串的动态规划题目. 题意就是给你一个串,翻转任意区间一次,求最长的非下降子序列. 一看题面写 ...

  4. HDU 3342 拓扑排序模板

    Legal or Not Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...

  5. HDU1009:FatMouse' Trade(初探贪心,wait)

    FatMouse prepared M pounds of cat food, ready to trade with the cats guarding the warehouse containi ...

  6. 微信小程序开发教程(二)创建第一个微信小程序

    在安装完“微信Web开发者工具”之后,通过开发者的微信扫码进入后,如图. 点击“添加项目”,填入之前获得的AppID(无AppID可忽略),输入项目名称“Hello WXapplet”,选定本地文件夹 ...

  7. [Contest20171028]火神的鱼

    火神最爱的就是吃鱼了,所以某一天他来到了一个池塘边捕鱼.池塘可以看成一个二维的平面,而他的渔网可以看成一个与坐标轴平行的矩形.池塘里的鱼不停地在水中游动,可以看成一些点.有的时候会有鱼游进渔网,有的时 ...

  8. 【递归】先修课 计算概论(A) / 函数递归练习(3)2:分解因数

    #include<cstdio> using namespace std; bool is_prime(int x) { ;i*i<=x;i++) ) return false; r ...

  9. 【DFS序】【莫队算法】【权值分块】bzoj1803 Spoj1487 Query on a tree III

    基本等同这个,只是询问的东西不大一样而已. http://www.cnblogs.com/autsky-jadek/p/4159897.html #include<cstdio> #inc ...

  10. Scala零基础教学【102-111】Akka 实战-深入解析

    第102讲:通过案例解析Akka中的Actor运行机制以及Actor的生命周期 Actor是构建akka程序的核心基石,akka中actor提供了构建可伸缩的,容错的,分布式的应用程序的基本抽象, a ...