jQuery对象和DOM对象

lmy_林夕

于 2017-12-13 15:52:03 发布

阅读量309

点赞数

分类专栏： jQuery 文章标签： jquery 对象

本文链接：https://blog.csdn.net/weixin_39550799/article/details/78792814

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery对象与DOM对象的区别：
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]
　　这些都是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

　　<inputname="testThis" type="text"οnchange="textThis(this)" />

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

　　该this为dom对象

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

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

先是DOM对象转换为jQuery对象：

首先需要引入jQuery函数库
1. <script src="../../../AJAX-JavaScript-JQuery/jquery-1.8/jquery-1.8.0.min.js"></script>

[html]
1. <body>

2. <input type="text" name="username" id="username" value="张三" />

3. <script>
4. //获取DOM对象
5. var username=document.getElementById("username");
6. alert(username.value);
7.
8. //转换为jquery对象转换后就可以使用jQuery中的方法了
9. var $username=$(username);
10. alert("^^^"+$username.val());
11. </script>
12.
13. </body>

接着jQuery对象转换成DOM对象
l两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);
[html] view plain copy
1. <body>
2. <input type="text" name="username" id="username" value="小王老师" />
3. <script>
4. //获取jQuery对象
5. var $username=$("#username");
6. alert($username.val());
7.
8. //转换成DOM对象
9. //(1) jQuery对象是一个数组对象，可以通过[index]的方法，来得到相应的DOM对象
10. var username=$username[0];
11. alert(username.value);
12.
13. //jQuery本身提供，通过.get(index)方法，得到相应的DOM对象
14. //转化为DOM对象
15. var username1 = $username.get(0);
16. alert(username1.value);
17. </script>
18. </body>