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

标签: 前端 学习 选择 | 发表时间:2014-06-25 22:06 | 作者:xukai871105
出处:http://blog.csdn.net
0.前言
    在学习和使用javascript过程中经常使用JQuery的选择器,但是在获取到选择结果之后经常“犯迷糊”,需要一个DOM对象时或者一个JQuery对象,这样的尴尬经常遇到。为了让自己不再迷糊通过博文总结经验教训,希望自己在总结过程中缓慢提高。
    【相关博文】
    【示例页面】——test-ul.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head> 
<!-- <script src="jquery.js"></script> -->
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</head> 
<body> 
<ul>
<li>Raspberry</li> 
<li>Arduino</li> 
<li>Intel Galileo</li> 
</ul>
</body> 
</html>

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方法。
作者:xukai871105 发表于2014-6-25 22:06:21 原文链接
阅读:43 评论:0 查看评论

相关 [前端 学习 选择] 推荐:

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

- - CSDN博客Web前端推荐文章
0.前言     在学习和使用javascript过程中经常使用JQuery的选择器,但是在获取到选择结果之后经常“犯迷糊”,需要一个DOM对象时或者一个JQuery对象,这样的尴尬经常遇到. 为了让自己不再迷糊通过博文总结经验教训,希望自己在总结过程中缓慢提高.     【 前端学习——如何修改url name 使用javascript和JQuery】.

机器学习-特征选择(降维) 线性判别式分析(LDA)

- - 博客园_首页
  特征选择(亦即降维)是数据预处理中非常重要的一个步骤. 对于分类来说,特征选择可以从众多的特征中选择对分类最重要的那些特征,去除原数据中的噪音. 主成分分析(PCA)与线性判别式分析(LDA)是两种最常用的特征选择算法. 关于PCA的介绍,可以见我的 另一篇博文. 这里主要介绍线性判别式分析(LDA),主要基于Fisher Discriminant Analysis with Kernals[1]和Fisher Linear Discriminant Analysis[2]两篇文献.

个人整理的前端开发相关的学习网站

- - Starming星光社最新更新
今天有空就整理一些我学习前端开发技术时常看的一些网站,希望能够对刚接触前端开发的朋友们有所帮助. 很多人不知道怎么学前端开发,这里的站点只要你都看过一遍,想必也能成个合格的前端工程师了. W3.ORG是W3C的官方网站,做前端开发的朋友是一定要经常去看看的. 理由我不想多说了,W3.ORG里的官方WEB标准文档如果你都没有认真看过,就不要说你熟悉什么WEB标准.

前端技术系列课程(No.4) – 深入学习JavaScript语言

- - Taobao UED Team
本次系列培训最后一课为诗鸣为我们带来的“JavaScript语言”,针对JavaScript语言的运行机制和原理、浏览器引擎和JavaScript引擎之间的协作、阻塞、以及DOM操作性能优化等方面做了详尽讲解,同时还给出了很多代码实例,适合初学者学习.

转载 选择

- bravusliu - caowumao的博客

CSS4 选择器

- iVane - 幸福收藏夹
CSS3 还没完全用上,CSS4 已经提上日程. 官方发布了 update to the working Selectors Level 4 spec,对选择器做了一些升级. 前端最大的优点就是技术更新快,可以经常学到新东西;最大的缺点也是技术更新快,要跟上潮流还真不是那么简单. 不过,这次更新有像“父选择器”这样让人兴奋的内容,让我们先睹为快,了解一下吧:.

JQuery 选择器

- - CSDN博客Web前端推荐文章
}

点击我

.    像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥,因为它并没有将网页内容和行为分离,所以才有JQuery选择器的学习.

点击我

. //给class为demo的元素添加行为.

选择性闭嘴

- 蓓 - 土摩托日记
除了熟人之外,文青博客我追看的不多,总数不会超过10个,因为大多数这类博客的营养都欠奉. 一个是连岳,他的感情QA还是挺好看的,某些政论文字也还不错. 但这厮喜欢掺和科学的事儿,不止一次误导过读者. 就拿地震预报来说吧,他哪有资格评论. 看看这个报道,今天距离这则报道正好过去了两个月,可预报的地震仍然没有发生.

mysql选择索引

- - CSDN博客数据库推荐文章
1、尽量为用来搜索、分类或分组的数据列编制索引,不要为作为输出显示的数据列编制索引. 最适合有索引的数据列是那些在where子句中数据列,在联结子句中出现的数据列,或者是在Group by 、Order by子句中出现的数据列. select 后的数据列最好不要用索引. 2、综合考虑各数据列的维度.

jsoup select 选择器

- - 编程语言 - ITeye博客
采用CSS或类似jquery 选择器(selector)语法来处理HTML文档中的数据. 利用方法: Element.select(String selector)和 Elements.select(String selector). Jsoup的元素支持类似CSS或(jquery)的选择器语法的查找匹配的元素,可实现功能强大且鲁棒性好的查询.