Dom和jQuery的反选和全选比较
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);