首页 > 代码库 > 前端学习——选择结果为JQuery对象还是DOM对象?

前端学习——选择结果为JQuery对象还是DOM对象?

2024-07-09 15:10:49   225人阅读

0.前言
    在学习和使用javascript过程中经常使用JQuery的选择器，但是在获取到选择结果之后经常“犯迷糊”，需要一个DOM对象时或者一个JQuery对象，这样的尴尬经常遇到。为了让自己不再迷糊通过博文总结经验教训，希望自己在总结过程中缓慢提高。
    【相关博文】
    【前端学习——如何修改<a href=http://www.mamicode.com/"#">url name 使用javascript和JQuery】
    【示例页面】——test-ul.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head> 
<!-- <script src=http://www.mamicode.com/"jquery.js"></script> -->>

1.选择所有的li
    【使用jquery】
var $obj = $("li");
console.log($obj);
    【使用javascript】
var obj = document.getElementsByTagName("li");
console.log(obj);
     【主要区别】
    此时$obj为Jquery对象集合，而obj为DOM对象集合。

2.Jquery对象变为DOM对象——[]方法
var obj = $("li")[0];
console.log(obj);                    // <li>Raspberry</li>
console.log(obj.innerHTML);     // Raspberry
    【说明】
    此处obj为DOM对象，可以使用属性innerHTML。如果使用Jquery的html方法那么浏览器将会发出错误警告。

3.Jquery对象变为DOM对象——get方法
var obj = $("li").get(1);
console.log(obj);                    // <li>Arduino</li>
console.log(obj.innerHTML);     // Arduino
    【说明】
    []方式和Jquery的get方法效果相同。

4.使用javascript达到相同效果
var obj = document.getElementsByTagName("li")[2];
console.log(obj);                    // <li>Intel Galileo</li>
console.log(obj.innerHTML);     // Intel Galileo

5.选择子元素时仍为Jquery对象——eq方法
var $obj = $("li").eq(0);
console.log($obj);
console.log($obj.html());           // Raspberry
    【说明】
    使用eq方法获得Jquery对象，那么获得此对象的HTML内容需要使用Jquery的html()方法，而不是javascript的innerHTML属性。

6.使用Jquery遍历所有子节点
$("li").each(function(index,item){
    console.log(item);                  // item为DOM对象
    console.log(item.innerHTML);   // 依次输出 Raspberry Arduino Intel Galileo
});
    【说明】
    each遍历的item为DOM对象而不是Jquery对象。

7.遍历时再变为Jquery对象
$("li").each(function(index,item){
    $item = $(item);                    // 再次变为Jquery对象
    // console.log($item);              
    console.log($item.html());       // 依次输出 Raspberry Arduino Intel Galileo
});
    【说明】
     $item = $(item)再一次变化出JQuery对象，$(item)此时和$(<li>Raspberry<li>)等价，意为选择一个DOM对象并变为JQuery对象。  

8.使用Javascript遍历所有子节点
var objs = document.getElementsByTagName("li");
for(var i=0; i<objs.length; i++) {
    console.log(objs[i]);
    console.log(objs[i].innerHTML);    // 依次输出 Raspberry Arduino Intel Galileo
}

9.总结
    【1】使用Jquery选择器之后可以使用[]和get获得子DOM，也就是说[]和get具有把Jquery对象转换为DOM对象的功能。
    【2】eq方法获得的对象仍为JQuery对象
    【3】each方法遍历时的item为DOM对象
    【4】JQuery对象使用JQuery方法，DOM对象使用DOM方法。


联系
我们