JQuery--学习总结
知识点一：操作复选框（全选，反选，取消）
HTML代码：
<body> <input type="button" onclick="CheckAll();" value="全选" /> <input type="button" onclick="CheckReverse();" value="反选" /> <input type="button" onclick="CheckCancel();" value="取消" /> <table border="1" cellpadding="0" cellspacing="0" width="500" height="100"> <thead></thead> <tbody id="tb1"> <tr> <td><input type="checkbox" /></td> <td>ASP.Net MVC</td> <td>ASP.Net MVC</td> <td>ASP.Net MVC</td> </tr> <tr> <td><input type="checkbox" /></td> <td>ASP.Net MVC</td> <td>ASP.Net MVC</td> <td>ASP.Net MVC</td> </tr> <tr> <td><input type="checkbox" /></td> <td>ASP.Net MVC</td> <td>ASP.Net MVC</td> <td>ASP.Net MVC</td> </tr> </tbody> </table> </body>
JavaScript代码：
<script src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript"> //全选 function CheckAll() { $(":checkbox").prop("checked", true); } //取消 function CheckCancel() { $(":checkbox").prop("checked", false); } //反选 function CheckReverse() { //循环遍历每一个复选框 $(":checkbox").each(function() { //判断.如果选中就取消,反之选中 if ($(this).prop("checked")) { $(this).prop("checked", false); } else { $(this).prop("checked", true); } }) } </script>
知识点二：each和map方法的使用（定义一个空数组，获取到所有复选框的值，通过each和map方法遍历，最后弹出）
HTML代码：
<body> <input type="checkbox" value="0" /> <input type="checkbox" value="1" /> <input type="checkbox" value="2" /> <input type="checkbox" value="3" /> <input type="checkbox" value="4" /> </body>
JavaScript代码：
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//each方法
function testEach() {
var arr = [];
$(":checkbox").each(function(index) {
arr.push(this.value);
})
var str = arr.join(",");
}
//map方法
function testMap() {
var str = $(":checkbox").map(function() {
return this.value;
}).get().join();
alert(str);
}
</script>
知识点三：复选框的操作（选择操作，把类型为Checkbox，同时可用的元素设置为“已选择”）
HTML代码：
<body>
<input type="checkbox" id="ckb_1" />
<input type="checkbox" id="ckb_2" disabled="true"/>
<input type="checkbox" id="ckb_3" />
<input type="checkbox" id="ckb_4" />
<input type="button" id="btn"/>
</body>
JavaScript代码：
<script src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#btn").click(function(){ //方法一 $("input[type='checkbox'][disabled!='disabled']").prop("checked",true); //方法二 $("input:checkbox[disabled!='disabled']").prop("checked",true); //方法三 $(":checkbox:enabled").prop("checked",true); //方法四 $("input[type='checkbox']").each(function(){ if($(this).attr("disabled")!="disabled"){ $(this).prop("checked",true); } }) }) }) </script>
总结一下：在判断属性时应该判断是“disabled”还是“enable”，而不是false或True，而设置属性都可以用！
知识点四：查找子元素的两种方法（find和children）
<body> <ul id="par"> <li> list1 <ul> <li> list1-1 </li> <li> list1-2 </li> </ul> </li> <li> list2 <ul> <li> list2-1 </li> <li> list2-2 </li> </ul> </li> <li> list3 <ul> <li> list3-1 </li> <li> list3-2 </li> </ul> </li> </ul> </body>
jQuery代码：
<script> $(document).ready(function () { //fand方法是找到当前元素下所有元素 //children是查找到当前元素下的一级子元素 //比如一个ul里有三个li，用children只能找到这三个li，而用find可以查找到Li里其它元素 //children和find的区别：children只会查找直接子集，而find会跨越层级查找，一直找到没有为止 let lengthChildren = $("#par").children("li").length; let lengthFind = $("#par").find("li").length; console.log(lengthChildren);//3 console.log(lengthFind);//9 }); </script>
知识点五：用户编辑数据，给对应的复选框选中
//数据编辑，设置对应的复选框选中 function bandCheckbox() { //获取所有CheckBox let checkboxList = $('input[name="projectType"]'); //获取用户数据 比如：1,2,3 let projectType = $('#mainprojecttype').val(); let arr = new Array(); arr = projectType.split(','); $.each(arr, function (index, value) { $.each(checkboxList, function (i, j) { if ($(j).val() == value) { $(j).prop('checked', true); } }) }) }
