前端学习——选择结果为JQuery对象还是DOM对象?
- - CSDN博客Web前端推荐文章0.前言
在学习和使用javascript过程中经常使用JQuery的选择器，但是在获取到选择结果之后经常“犯迷糊”，需要一个DOM对象时或者一个JQuery对象，这样的尴尬经常遇到. 为了让自己不再迷糊通过博文总结经验教训，希望自己在总结过程中缓慢提高. 【 前端学习——如何修改url name 使用javascript和JQuery】.
前端学习——选择结果为JQuery对象还是DOM对象?
标签：
前端
学习
选择
| 发表时间：2014-06-26 06: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 查看评论
相关 [前端 学习 选择] 推荐：
前端技术学习路线图
- - 菜鸟教程以下 Web 开发人员学习路线图是来自 Github developer-roadmap 项目，目前已经有繁体版翻译 developer-roadmap-chinese. 主要有三个方向，分别为前端开发、后端开发和运维. 可以看到，作为 Web 开发者，不管从事什么职位，下面这些技能点是必须掌握的：.
[译] 如何选择正确的机器学习算法？
- - IT瘾-dev机器学习既是一门科学，也是一种艺术. 纵观各类机器学习算法，并没有一种普适的解决方案或方法. 事实上，有几个因素会影响你对机器学习算法的选择. 有些问题是非常特别的，需要用一种特定的解决方法. 例如，如果你对推荐系统有所了解，你会发现它是一类很常用的机器学习算法，用来解决一类非常特殊的问题. 而其它的一些问题则非常开放，可能需要一种试错方法（例如：强化学习）.
机器学习-特征选择(降维) 线性判别式分析(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操作性能优化等方面做了详尽讲解，同时还给出了很多代码实例，适合初学者学习.
带你五步学会Vue SSR - 前端学习 - SegmentFault 思否
- -SSR大家肯定都不陌生，通过服务端渲染，可以优化SEO抓取，提升首页加载速度等，我在学习SSR的时候，看过很多文章，有些对我有很大的启发作用，有些就只是照搬官网文档. 通过几天的学习，我对SSR有了一些了解，也从头开始完整的配置出了SSR的开发环境，所以想通过这篇文章，总结一些经验，同时希望能够对学习SSR的朋友起到一点帮助.
转载 选择
- bravusliu - caowumao的博客CSS4 选择器
- iVane - 幸福收藏夹CSS3 还没完全用上，CSS4 已经提上日程. 官方发布了 update to the working Selectors Level 4 spec，对选择器做了一些升级. 前端最大的优点就是技术更新快，可以经常学到新东西；最大的缺点也是技术更新快，要跟上潮流还真不是那么简单. 不过，这次更新有像“父选择器”这样让人兴奋的内容，让我们先睹为快，了解一下吧：.
JQuery 选择器
- - CSDN博客Web前端推荐文章}
点击我
. 像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥，因为它并没有将网页内容和行为分离，所以才有JQuery选择器的学习.点击我
. //给class为demo的元素添加行为.