在这里博主想回答一些以前留下来的问题,jq是js的增强版,就是js的附加类库,那为什么我们要学习jq不是直接学js就可以了吗?今天我回答一下这个问题,jq的功能其实跟js的功能其实都差不多,但是jq的代码非常的简洁,js的一推代码,可能jq就几行,我想作为写代码的人来说,你愿意选择那个,肯定是jq了;
回到本文的主题,我们先来看一下js的全选和全不选,所谓的全选和全不选说的就是,当你勾选一个复选框的时候,那么你所绑定的复选框全部被勾选,反之依然;那么我们来看看js的代码
<html>
<head>
<meta charset="UTF-8">
<title>js的全选和全不选</title>
<script>
function check(){
var tb = document.getElementById("checkAll");
if(tb.checked==true){
var len = document.getElementsByName("checkone");
for(var i=0;i<len.length;i++){
len[i].checked=true;
}
}else{
var len = document.getElementsByName("checkone");
for(var i=0;i<len.length;i++){
len[i].checked=false;
}
}
}
</script>
</head>
<body>
<table border="1" width="500" height="50" align="center" >
<thead>
<tr>
<td colspan="4">
<input type="button" value="添加" />
<input type="button" value="删除" />
</td>
</tr>
<tr>
<th><input type="checkbox" id="checkAll" onclick="check()"/></th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr >
<td><input type="checkbox" name="checkone" /></td>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr >
<td><input type="checkbox" name="checkone" /></td>
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr >
<td><input type="checkbox" name="checkone" /></td>
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr >
<td><input type="checkbox" name="checkone" /></td>
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr >
<td><input type="checkbox" name="checkone" /></td>
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr >
<td><input type="checkbox" name="checkone" /></td>
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>
jq的代码,案例都是同一个,
<html>
<head>
<meta charset="UTF-8">
<title>jq的全选和全不选</title>
<script src="js/jquery-1.8.3.js"></script>
<script>
$(function(){
$("#checkAll").click(function(){
$("tbody input").attr("checked",this.checked);
});
});
</script>
</head>
<body>
<table border="1" width="500" height="50" align="center" >
<thead>
<tr>
<td colspan="4">
<input type="button" value="添加" />
<input type="button" value="删除" />
</td>
</tr>
<tr>
<th><input type="checkbox" id="checkAll" /></th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr >
<td><input type="checkbox" name="checkone" /></td>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr >
<td><input type="checkbox" name="checkone" /></td>
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr >
<td><input type="checkbox" name="checkone" /></td>
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr >
<td><input type="checkbox" name="checkone" /></td>
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr >
<td><input type="checkbox" name="checkone" /></td>
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr >
<td><input type="checkbox" name="checkone" /></td>
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>
大家可以看出,jq比js的代码简洁太多了,我觉得企业为什么使用jq的原因就在这里,但是不知道是不是我见识太短或学的不深,所有只得出了这个结论,往大神评论!