day17--JQuery实例
1、表格选择框--全选，反选，取消
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="checkAll();"/> <input type="button" value="反选" onclick="reverseAll();"/> <input type="button" value="取消" onclick="cancleAll();"/> <table border="2"> <thead> <tr><th>选项</th><th>IP</th><th>端口</th></tr> </thead> <tbody id="i1"> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function checkAll(){ $("#i1 :checkbox").prop('checked', true); } function cancleAll(){ $('#i1 :checkbox').prop('checked',false); } function reverseAll(){ $('#i1 :checkbox').each(function(){ //this，代指当前循环的每一个元素 //k是循环的下标 //console.log($(this)); if(this.checked){this.checked=false} else{ this.checked=true }; }) } </script> </body> </html>
上面HTML代码中，this代指每次的循环，this.checked判断标签是否被选中，选中则为true；未选中则为false。$().prop()设置隐藏，显示，选中或未选中。prop("checked",true) prop("checked",false) prop("disable",none)设置隐藏。
下面通过JQuery来实现，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="checkAll();"/> <input type="button" value="反选" onclick="reverseAll();"/> <input type="button" value="取消" onclick="cancleAll();"/> <table border="2"> <thead> <tr><th>选项</th><th>IP</th><th>端口</th></tr> </thead> <tbody id="i1"> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function checkAll(){ $("#i1 :checkbox").prop('checked', true); } function cancleAll(){ $('#i1 :checkbox').prop('checked',false); } function reverseAll(){ $('#i1 :checkbox').each(function(){ //this，代指当前循环的每一个元素 //k是循环的下标 //console.log($(this)); //if(this.checked){this.checked=false} else{ //this.checked=true //}; if($(this).prop('checked')){ $(this).prop('checked',false); } else{ $(this).prop('checked',true); }; }) } </script> </body> </html>
$().prop("checked")，一个参数代表获取值，判断是选定，checked的话，返回true；否则返回false；$().prop("checked",true)代表设置值。
三元运算，即判断，var v = 条件(true)?false:true 如果条件为真(true)，则v=false；否则条件为假(false)，则v=true
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="checkAll();"/> <input type="button" value="反选" onclick="reverseAll();"/> <input type="button" value="取消" onclick="cancleAll();"/> <table border="2"> <thead> <tr><th>选项</th><th>IP</th><th>端口</th></tr> </thead> <tbody id="i1"> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function checkAll(){ $("#i1 :checkbox").prop('checked', true); } function cancleAll(){ $('#i1 :checkbox').prop('checked',false); } function reverseAll(){ $('#i1 :checkbox').each(function(){ //this，代指当前循环的每一个元素 //k是循环的下标 //console.log($(this)); //if(this.checked){this.checked=false} else{ //this.checked=true //}; // if($(this).prop('checked')){ // $(this).prop('checked',false); // } else{ // $(this).prop('checked',true); // }; //三元运算 //var v = 条件为真，真值，假值,如果为真，则设置为false；如果为假，则设置为真 var v = $(this).prop('checked')?false:true; $(this).prop('checked',v); }) } </script> </body> </html>
上面三元运算中，$().条件?false:true；false一定要写在前面，如果为真，则为false；如果为假，则为真；
实例二、下拉内容点击展开，关闭的操作，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ background-color:black; color:wheat; } .content{ min-height:50px; } .hide{ display:none; } </style> </head> <body> <div style="height:400px;width:200px;border:1px solid #dddddd"> <div class="item"> <div class="header">标题1</div> <div class="content">内容1</div> </div> <div class="item"> <div class="header">标题2</div> <div class="content hide">内容2</div> </div> <div class="item"> <div class="header">标题3</div> <div class="content hide">内容3</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> //click是给选定的标签绑定一个点击事件，所有选中的标签 $(".header").click(function(){ //获取当前点击的标签$(this) //点击的去掉hide,没有点击的加上hide,隐藏标签 //获取某个标签的下一个标签 //获取某个标签的父标签 //获取所有的兄弟标签 //this是DOM对象 //$().addClass('hide') 添加class属性，如果存在，则不会添加.内部自动加循环，每个自动循环添加 //$().removeClass("hide") 删除标签中的class属性值 //筛选器$().next()当前标签的下一个标签 //$(this).next().removeClass('hide'); $//(this).parent().siblings().find('.content').addClass('hide'); $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
//$(this).next().removeClass('hide').parent().siblings().children('.content').addClass('hide');等价与上面
//JQuery支持链式编程 //find()是查找标签下面的标签，等价与($("p span")==>$('p').find('span')等价与空格 }) </script> </body> </html>
$().find()是查找子标签满足条件的标签，
