美文网首页我爱编程
jQuery对象和DOM对象的相互转换

jQuery对象和DOM对象的相互转换

作者: 小m_up | 来源:发表于2017-06-12 18:40 被阅读29次

之前虽然好多地方用到了jQuery,但是并没有系统的学过,所以近期想认真的学一下。

首先简单说一下DOM对象和jQuery对象:

DOM对象

DOM对象其实就是DOM树中的元素节点,比如说使用getElementById获取的元素节点就是一个DOM对象:

 var domObj = document.getElementById("id");

jQuery对象

jQuery对象就是通过包装DOM对象后产生的对象

 var domObj = $("#id");

但是他两是完全不同的,举个栗子吧,下面是一个输入框,给它一个id

 <input type="text" id="input" value="heihei"/>

那么我分别用DOMjQuery获取它:

var jqObj = $("#input");
var domObj = document.getElementById("input");
console.log(jqObj);
console.log(domObj);

很显然,他两完全不同,那么接下来就来看看怎么让他两相互转换呢

jQuery对象转换为DOM对象

  • [index]
    jQuery对象是一个类似数组的对象,所以可以使用[index]的方法得到相应的DOM对象,代码如下:
var jqObj = $("#input");     //jQuery对象
var domObj = jqObj[0];      //DOM对象
  • get(index)
    这种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象,代码如下:
var jqObj = $("#input");     // jQuery对象
var domObj = jqObj.get(0);     //DOM对象

DOM对象转换为jQuery对象

对于一个DOM对象,只需要用$()DOM对象包装起来,就可以获得一个jQuery对象,代码如下:

 var domObj = document.getElementById("input");  //DOM对象
var jqObj = $(domObj);  // jQuery对象

相关文章

  • jquery对象和DOM对象的相互转换详解

    jquery对象和DOM对象的相互转换 在讨论jquery对象和DOM对象的相互转换之前,先约定好定义变量的风格如...

  • jQuery查漏补缺之选择器

    jQuery对象和DOM对象相互转化 1.DOM转换为jQuery对象 $obj = $(domob...

  • Dom原生对象和jQuery对象互相转换

    Dom原生对象和jQuery对象的联系、区别、相互转换: 联系: 1、jQuery对象:通过jQuery包装DOM...

  • 初读<锋利的jQuery> $===jQuery

    入口函数 方法 jQuery对象和DOM对象相互转换 1.jQuery对象转DOM对象 jQuery提供两种方法将...

  • 锋利的jQuery总结

    jQuery对象和DOM对象的相互转换 DOM(Document Object Model,文档对象模型),每一份...

  • 锋利的jquery笔记

    Jquery 对象转换成 DOM 对象的二中方法 DOM 元素转换成 Jquery 对象的方法 Jquery 对象...

  • jQuery

    jQuery绑定事件的方法书写至少两种 jQuery对象和Dom对象相互转换 1. $(document).rea...

  • Jquery对象与Dom对象的转换

    jquery对象与dom对象的转换 jquery对象只可以使用jquery的方法,dom对象只可以使用dom对象的...

  • 基础知识

    1、DOM和jQuery对象相互转换的方法 var obox=document.getElementById('b...

  • jQuery对象和DOM对象互换

    对于jQuery的初学者来说,经常分辨不清DOM对象和jQuery对象,本文简单说明两者的区别和两种对象相互转换的...

网友评论

    本文标题:jQuery对象和DOM对象的相互转换

    本文链接:https://www.haomeiwen.com/subject/xhtrqxtx.html