jquery和DOM比较
- - JavaScript - Web前端 - ITeye博客1、window.onload和$(document).ready()的区别. 必须等整个网页中所有的内容加载完毕后(包括图片)才能执行. 网页中所有DOM结构绘制完毕后就执行,可能DOM元素并没有加载完. 2、jquery对象和DOM对象的区别. Juery对象是包装DOM后的产生的对象,DOM是原生对象，是一个基本的文档结构.
Dom和jQuery的反选和全选比较
标签：
dom
jquery
| 发表时间：2012-03-02 00:16 | 作者：hanxiaoshuang321123
出处：http://blog.csdn.net
Dom和jQuery的反选和全选比较
1．思路
全选的思路是：当点击某个复选框或按钮的时候，可能会触发的有两种可能，可以是全选或者是全不选，所以要做一下判定，然后根据是全选或者是全不选来设定属性值。
反选的思路是：当点击某个复选框或按钮是，把没有选中的选中，选中的让它处于不选的状态。
2．举例
以以下的html为例：
<body>
<div align="center">
你爱好的运动是：<br/>
<input type="checkbox" id= "all"/>全选/全不选<br/>
<input type="checkbox" id="fanSel" value="反选"/>
<div id=" favs">
<input type="checkbox"/>足球
<input type="checkbox"/>篮球
<input type="checkbox"/>羽毛球
<input type="checkbox"/>乒乓球
</div>
<div>
</div>
</div>
</body>
（1）首先来看一下用dom知识来实现的全选和反选：
1. 获取dom元素的值来实现全选和全不选
2. window.onload = function(){
3.
4. var qxNode = document.getElementById("all");
5. var fxNode = document.getElementById("fanSel ");
6.
7. var inputNodes = get("favs ").getElementsByTagName("input");
8. //全选的功能
9. qxNode.onclick = function(){
10. if ( this.checked) {
11. for ( var i = 0; i < inputNodes.length; i++) {
12. inputNodes[i].checked = "checked";
13. }
14. }
15. else {
16. for ( var i = 0; i < inputNodes.length; i++) {
17. inputNodes[i].checked = null;
18. }
19. }
20. }
21.
22. //反选的功能
23. fxNode.onclick = function(){
24. for ( var i = 0; i < inputNodes.length; i++) {
25. if (inputNodes[i].checked) {
26. inputNodes[i].checked = null;
27. }
28. else {
29. inputNodes[i].checked = "checked";
30. }
31. }
32. }
33. }
（2）用jQuery来实现全选和反选的功能：
$(document).ready( function(){
//全选和全不选
$("#all").click( function(){
if( this.checked){
$("#favs>input").attr("checked","checked");
} else{
$("#favs>input").attr("checked",null);
}
});
//反选
$("#fanSel").click( function(){
var $ipt = $("#favs>input");
$ipt.each( function(index,iptDom){
if(iptDom.checked){
iptDom.checked = null;
} else{
iptDom.checked = "checked";
}
});
});
});
3．总结
从以上的代码中我们可以看出用jQuery写的代码要比用dom写要简单的多，值得注意的是jQuery中的属性和方法在dom中不可以用，dom中的元素和方法在jQuery中也不可用。
1．在dom中的设置 全选和全不选的为：
inputNodes[i].checked = "checked";
在jQuery中的设置全选和全不选的为：
$("#favs>input").attr("checked","checked");
可以看出用jQuery是相当的省力
2．反选的时候如果是dom要通过for循环遍历，而在jQuery中也是遍历，不过方法是封装好的，用each就可以获得到该元素的index和dom值，在这里我们说一下这两个值的使用，index相当于是for循环中的i，dom是在用到each方法的时候把jQuery对象转化为了dom对象。所以我们会看到以上的两个在反选的时候使用的方法是一样的。Each中的dom值是根据index的不同而改变的，在用each的时候用第二个参数较多，如果用index来进行反选的话为：
$ipt.each(function(index,iptDom){
if($ipt[index].checked){
$(this).attr("checked",null);
}else{
$(this).attr("checked","checked");
}
});
这个代码用的是index来判断的，但是明显的看出方法不如上一个简洁。最看不惯的是iptDom本来就是dom对象，$ipt[index]也就是把jQuery转换为了dom对象，还是方法没有理解的原因，这是我第一次写的时候摸索的过成写下的。感觉代码挺幼稚的！
在each中也可以使用 jQuery对象的方法，要用到dom和jQuery的转化，如果把dom对象转换为jQuery对象，只需在dom对象前加一个 $ 符号就可以，如果是把jQuery对象转换为dom对象，在jQuery对象后加get(index)或为[index]
举例为：
var $cr = $("#cr");
var cr = $cr[0]
var $cr = $("#cr");
var cr = $cr.get(0);
作者：hanxiaoshuang321123 发表于2012-3-2 0:16:06 原文链接
阅读：13 评论：0 查看评论
相关 [dom jquery] 推荐：
jQuery基础之jQuery的DOM操作
- - CSDN博客推荐文章 为了能全面地讲解DOM操作，首先需要构建一个网页. 因为每一张网页都能用DOM表示出来，而每一份DOM都可以看作一棵DOM树. 苹果 . 橘子 .
你最喜欢的水果是?
.Dom和jQuery的反选和全选比较
- - CSDN博客推荐文章Dom和jQuery的反选和全选比较. 全选的思路是：当点击某个复选框或按钮的时候，可能会触发的有两种可能，可以是全选或者是全不选，所以要做一下判定，然后根据是全选或者是全不选来设定属性值. 反选的思路是：当点击某个复选框或按钮是，把没有选中的选中，选中的让它处于不选的状态. 你爱好的运动是：
.
.
jQuery对象和DOM对象之间的转换实现
- - 码农网本文主要向大家介绍了jQuery对象和DOM对象之间互相转换的方法，其实转换过程十分简单，一起来看看吧. 在讨论jQuery对象和DOM对象的相互交换之前，先约定好定义变量的风格. 如果获取的对象是jQuery对象，那么在变量前加上$，例如：. var $variable = jQuery对象;. 如果获取的是DOM对象，则定义如下：.
前端学习——选择结果为JQuery对象还是DOM对象?
- - CSDN博客Web前端推荐文章0.前言
在学习和使用javascript过程中经常使用JQuery的选择器，但是在获取到选择结果之后经常“犯迷糊”，需要一个DOM对象时或者一个JQuery对象，这样的尴尬经常遇到. 为了让自己不再迷糊通过博文总结经验教训，希望自己在总结过程中缓慢提高. 【 前端学习——如何修改url name 使用javascript和JQuery】.
jQuery参考实例 1.2 在DOM加载完毕，页面元素完全加载之前运行jQuery/JavaScript代码
- - CSDN博客推荐文章本文翻译自jQuery Cookbook (O’Reilly 2009) 1.2 Executing jQuery/JavaScript Code After the DOM Has Loaded but Before Complete Page Load. 主流的JavaScript应用程序一般只在DOM完全加载后才运行JS代码.
DOM详解
- - CSDN博客推荐文章 1.XML解析方式分为两种：dom和sax. (1)dom：(Document Object Model, 即文档对象模型) 是 W3C 组织推荐的处理 XML 的一种方式. (2) sax：(Simple API for XML) 不是官方标准，但它是 XML 社区事实上的标准，几乎所有的 XML 解析器都支持它.
javaScript DOM使用
- - CSDN博客互联网推荐文章通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素. 1 修改HTML元素内容. document.write(Date()); //在输入流中直接写
document.getElementById(id).innerHTML=new HTML. //改变已经有的元素内容
document.getElementById("image").src="landscape.jpg";.
DOM优化
- - JavaScript - Web前端 - ITeye博客1，Javascript语音与DOM操作就像孤岛. 他们之间的通行是要借助船的，而使用船是有很大成本的. 所以，要先做完一个再做另一个，最好不要交替进行. 如：添加1000个li时，先用一个字符串拼接好，最后一次追加到父节点，而不是向父节点追加1000次，一次追加一个. 如：添加1000个li时，先放到fragment，再添加到UL中.
Android DOM解析XML
- - CSDN博客移动开发推荐文章if(personChilds.item(y).getNodeType()==Node.ELEMENT_NODE){//判断当前节点是否是元素类型节点. 作者：jaycee110905 发表于2013-2-7 21:04:29 原文链接. 阅读：78 评论：0 查看评论.