首页 > 代码库 > 前端学习——选择结果为JQuery对象还是DOM对象?
前端学习——选择结果为JQuery对象还是DOM对象?
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方法。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。