美文网首页我爱编程
JQuery对象和DOM对象的区别

JQuery对象和DOM对象的区别

作者: 开车去环游世界 | 来源:发表于2016-12-15 15:06 被阅读220次

一直以来对于通过jQuery方式获取的对象使不能直接使用JavaScript的一些方法的,开始的时候不理解,现在此案知道,原来jQuery 获得的对象并不和我们平时使用getElementById获得的对象是一样的对象。所以一些新手就很迷惑,为什么${”#Element”}不能直接 innerHTML,这就是原因所在,解决方式请看下文。

jQuery对象与dom对象的转换

只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。

如:

$(document.getElementById("msg"))

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

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

$("#serverTab")[0]   dom对象
$("#serverTab")       jquery对象
dom对象与jquery对象

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

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

jQuery查找对象是按照标准的dom层级关系来查找的

如table中无论你是否有tbody,在查找子对象的时候都要按照table-->tbody-->tr的层级关系来查找

关于this

<input name="testThis" type="text" onchange="textThis(this)" />

function textThis(obj) {
    //在引用自己用的this是dom对象
    alert($(obj).val());
}

该this为dom对象

innerHTML和outerHTML

innerHTML设置或获取对象起始和结束标签内的HTML
outerHTML设置或获取对象及其内容的HTML形式

相关文章

  • jQuery对象和DOM对象

    jQuery对象和DOM对象的区别 DOM对象 jQuery对象 区别 jQuery对象不能使用DOM对象的成员,...

  • 2019-02-01

    jquery的DOM操作 DOM对象和Jquery对象 区别:检测DOMObject:if(object .nod...

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

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

  • jQuery知识总结

    1. jQuery对象和DOM对象区别: DOM对象: 包括Document对象(整个文档)、Element对象(...

  • jQuery的DOM操作1

    如何筛选jQuery对象 1,DOM对象和jQuery对象的区别 DOM对象(DOM元素)是浏览器的网页页面中渲染...

  • jquery对象与dom对象

    jquery对象与dom对象 二者有何区别? jquery对象比如$("#test").html() dom对象常...

  • jQueryDom的操作(1)

    第一章 如何筛选jQuery对象 操作jQuery对象,如何创建HTML DOM对象和jQuery对象 区别 检...

  • js对象和jquery对象

    初学jQuery,会对jQuery对象和DOM对象心存很大的疑惑,因此有必要明白他们之间的区别和联系。DOM对象是...

  • jQuery对象和DOM对象的区别

    jQuery对象和DOM对象的区别 1.它们的不同 DOM对象就是我们用JavaScript获得的对象,jQuer...

  • JQuery

    3. jquery 对象和 DOM 原生对象有什么区别?如何转化? 区别:dom元素: 通过原生js获取的dom节...

网友评论

    本文标题:JQuery对象和DOM对象的区别

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