jQuery使用小示例_jQuery
1、全选反选取消
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>选择</title> 6 </head> 7 <body> 8 <input type="button" value="全选" onclick="chooseAll()"> 9 <input type="button" value="反选" onclick="reveseAll()"> 10 <input type="button" value="取消" onclick="cancelAll()"> 11 12 <table id='i1' border="1"> 13 <thead> 14 <tr> 15 <th>选项</th> 16 <th>ip</th> 17 <th>端口</th> 18 </tr> 19 </thead> 20 <tbody > 21 <tr > 22 <td> 23 <input type="checkbox" > 24 </td> 25 <td>1</td> 26 <td>22</td> 27 </tr> 28 <tr> 29 <td> 30 <input type="checkbox" > 31 </td> 32 <td>1</td> 33 <td>22</td> 34 </tr> 35 <tr > 36 <td> 37 <input type="checkbox" > 38 </td> 39 <td>1</td> 40 <td>22</td> 41 </tr> 42 43 </table> 44 <script src="jquery-1.12.4.js"></script> 45 <script> 46 function chooseAll() { 47 $("#i1 input:checkbox").prop('checked',true) 48 } 49 function cancelAll() { 50 $("#i1 input:checkbox").prop('checked',false) 51 } 52 function reveseAll() { 53 $("#i1 input:checkbox").each( 54 function () { 55 // 第一种方法：dom 56 // if (this.checked){this.checked=false} 57 // else {this.checked=true} 58 59 // 第二种方法：jquery 60 // if($(this).prop('checked')){ 61 // $(this).prop('checked',false) 62 // }else{$(this).prop('checked',true)} 63 64 // 第三种方法：三元运算 65 // var v=条件?真值:假值 66 var v=$(this).prop('checked')?false:true; 67 $(this).prop('checked',v) 68 } 69 ) 70 } 71 </script> 72 </body> 73 </html>
2、左侧菜单
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>左侧菜单</title> 6 <style> 7 .header{ 8 background-color: gold; 9 10 } 11 .content{background-color: white 12 ;height: 50px} 13 .hide{ 14 display: none; 15 } 16 </style> 17 </head> 18 19 <body> 20 <div style="height: 500px;width: 200px;background-color: #dddddd"> 21 <div> 22 <div class="header">标题1</div> 23 <div class="content hide">内容1</div> 24 </div> 25 <div> 26 <div class="header">标题2</div> 27 <div class="content hide">内容2</div> 28 </div> 29 <div> 30 <div class="header">标题3</div> 31 <div class="content hide">内容3</div> 32 </div> 33 </div> 34 <script src="jquery-1.12.4.js"></script> 35 <script> 36 $('.header').click(function () { 37 $(this).next().removeClass("hide"); 38 $(this).parent().siblings().find(".content").addClass("hide"); 39 40 // 第二种写法:链式编程 41 // $(this).next().removeClass("hide")..parent().siblings().find(".content").addClass("hide"); 42 }) 43 </script> 44 </body> 45 </html>
3、模态对话框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模态对话框</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .mes{ 11 width:500px; 12 height: 400px; 13 background-color: green; 14 position: fixed; 15 z-index: 10; 16 left: 50%; 17 top:50%; 18 margin-top: -200px; 19 margin-left: -250px; 20 } 21 .cover{ 22 position: fixed; 23 left:0; 24 right: 0; 25 top:0; 26 bottom: 0; 27 opacity: 0.5; 28 z-index: 9; 29 background-color: aquamarine; 30 } 31 </style> 32 </head> 33 <body> 34 <div class="mes hide"> 35 <input type="text"> 36 <input type="text"> 37 <input type="button" value="取消"> 38 </div> 39 <div class="cover hide"></div> 40 <div class="edit"> 41 增加 42 </div> 43 <table border="1"> 44 <thead> 45 <tr> 46 <th>主机</th> 47 <th>端口</th> 48 <th>其他</th> 49 </tr> 50 </thead> 51 <tbody> 52 <tr> 53 <td>1.1.1.1</td> 54 <td>22</td> 55 <td> 56 <a class="edit showdata">编辑</a> 57 <a>删除</a> 58 </td> 59 </tr> 60 <tr> 61 <td>1.1.1.2</td> 62 <td>222</td> 63 <td> 64 <a class="edit showdata">编辑</a> 65 <a>删除</a> 66 </td> 67 </tr> 68 <tr> 69 <td>1.1.1.3</td> 70 <td>223</td> 71 <td> 72 <a class="edit showdata">编辑</a> 73 <a>删除</a> 74 </td> 75 </tr> 76 </tbody> 77 </table> 78 79 <script src="jquery-1.12.4.js"></script> 80 <script> 81 // $(".add").click(function (){ 82 // $(".mes,.cover").removeClass("hide"); 83 // var tds=$(this).parent().prevAll();}); 84 85 $(".edit").click(function (){ 86 $(".mes,.cover").removeClass("hide"); 87 88 89 90 }); 91 92 $('.showdata').click(function (){ 93 var tds=$(this).parent().prevAll(); 94 var port=$(tds[0]).text(); 95 console.log(port); 96 var host=$(tds[1]).text(); 97 console.log(host); 98 $($(".mes input[type='text']")[0]).val(host); 99 $($(".mes input[type='text']")[1]).val(port); 100 }); 101 102 $("input[type='button']").click(function (){ 103 $(".mes,.cover").addClass("hide") 104 $("input[type='text']").val("") 105 }); 106 107 </script> 108 </body> 109 110 </html>
5、tab菜单
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>tab菜单</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .menu{ 11 height: 40px; 12 line-height: 40px; 13 background-color: #dddddd; 14 } 15 .menu .menu-item{ 16 float: left; 17 border-right: 1px solid red; 18 padding: 0 5px; 19 } 20 .menu .active{ 21 background-color: red; 22 } 23 .content{ 24 background-color: aqua; 25 min-height: 200px; 26 27 } 28 </style> 29 </head> 30 <body> 31 <div style="width: 700px;margin: 0 auto"> 32 <div class="menu" > 33 <div class="menu-item active" a="1">菜单1</div> 34 <div class="menu-item" a="2">菜单2</div> 35 <div class="menu-item" a="3">菜单3</div> 36 </div> 37 <div class="content"> 38 <div class="conten-item " b="1">内容1</div> 39 <div class="conten-item hide" b="2">内容2</div> 40 <div class="conten-item hide" b="3">内容3</div> 41 </div> 42 </div> 43 <script src="jquery-1.12.4.js"></script> 44 <script> 45 $(".menu .menu-item").click(function () { 46 $(this).addClass('active').siblings().removeClass('active'); 47 var value=$(this).attr('a'); 48 console.log(value); 49 $(".content").children("[b="+value+"]").removeClass("hide").siblings().addClass('hide'); 50 }); 51 52 </script> 53 </body> 54 </html>
6、点赞显示
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>点赞</title> 6 <style> 7 .title{ 8 height: 50px; 9 /*background-color: royalblue;*/ 10 border-bottom: 1px solid #dddddd; 11 line-height: 50px; 12 13 14 } 15 .item{ 16 position: relative; 17 /*background-color: slategray;*/ 18 width: 35px; 19 20 } 21 </style> 22 </head> 23 <body> 24 <div class="title" > 25 <div class="item"> 26 <span>赞</span> 27 </div> 28 </div> 29 <div class="title" > 30 <div class="item"> 31 <span>赞</span> 32 </div> 33 </div> 34 <div class="title" > 35 <div class="item"> 36 <span>赞</span> 37 </div> 38 </div> 39 <script src="jquery-1.12.4.js"></script> 40 <script> 41 $(".title .item").click(function () { 42 var tag=document.createElement('span'); 43 $(tag).text('+1'); 44 var fontSize=15; 45 var top=0; 46 var right=0; 47 var opacity=1; 48 $(tag).css('color','green'); 49 $(tag).css('fontSize',fontSize+'px'); 50 $(tag).css('position','absolute'); 51 $(tag).css('top',top+'px'); 52 $(tag).css('right',right+'px'); 53 $(this).append(tag); 54 55 56 var obj=setInterval(function () { 57 top=top-10; 58 right=right-10; 59 opacity=opacity-0.1; 60 fontSize=fontSize+10; 61 62 $(tag).css('fontSize',fontSize+'px'); 63 $(tag).css('opacity',opacity); 64 $(tag).css('top',top+'px'); 65 $(tag).css('right',right+'px'); 66 if (opacity<0){ 67 clearInterval(obj); 68 $(tag).remove() 69 } 70 },100) 71 }) 72 </script> 73 </body> 74 </html>
7、简单表单验证（输入值才能提交）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单验证</title> 6 <style> 7 .error{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <form action="choice.html" method="post" id="i1"> 14 <div><input type="text" name="n1"></div> 15 <div><input type="password" name="n2"></div> 16 <div><input type="text" name="n3"></div> 17 <div><input type="text" name="n4"></div> 18 19 <input type="submit" value="提交"> 20 </form> 21 <script src="jquery-1.12.4.js"></script> 22 <script> 23 $("input[type='submit']").click(function () { 24 $(".error").remove(); 25 var res=true; 26 $("#i1").find("input[type='text'],input[type='password']").each(function () { 27 var v=$(this).val(); 28 if (v.length==0){ 29 30 tag=document.createElement("span"); 31 $(tag).addClass('error'); 32 $(tag).text("必填"); 33 $(this).after(tag); 34 res=false;}; 35 }); 36 return res 37 }) 38 </script> 39 </body> 40 </html>
8、类vi编辑框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>编辑框</title> 6 <style> 7 .choice{ 8 display: inline; 9 } 10 .edit{ 11 display: inline-block; 12 height: 30px; 13 width: 100px; 14 background-color: dimgrey; 15 color: white; 16 17 } 18 .editing{ 19 color: white; 20 background-color: orange; 21 } 22 .tb{ 23 /*border: 1px solid black;*/ 24 } 25 </style> 26 </head> 27 <body> 28 <div class="pg-header"> 29 <input class="choice" type="button" value="全选" > 30 <input class="choice" type="button" value="反选"> 31 <input class="choice" type="button" value="取消"> 32 <span class="edit"> 33 进入编辑模式 34 </span> 35 </div> 36 <div> 37 <table class="tb" border="1" > 38 <thead> 39 <tr> 40 <th>选择</th> 41 <th>主机名</th> 42 <th>端口</th> 43 <th>状态</th> 44 </tr> 45 </thead> 46 <tbody > 47 <tr> 48 <td name="choice"><input type="checkbox"></td> 49 <td name="host">v4</td> 50 <td name="port">v11</td> 51 <td name="status" choice="1"> 52 在线 53 </td> 54 </tr> 55 <tr> 56 <td name="choice"><input type="checkbox"></td> 57 <td name="host">v4</td> 58 <td name="port">v11</td> 59 <td name="status" choice="1"> 60 下线 61 </td> 62 </tr> 63 <tr> 64 <td name="choice"><input type="checkbox"></td> 65 <td name="host">v4</td> 66 <td name="port">v11</td> 67 <td name="status" choice="1"> 68 在线 69 </td> 70 </tr> 71 <tr> 72 <td name="choice"><input type="checkbox" ></td> 73 <td name="host">v4</td> 74 <td name="port">v11</td> 75 <td name="status" choice="1"> 76 在线 77 78 </td> 79 </tr> 80 </tbody> 81 </table> 82 </div> 83 <script src="jquery-1.12.4.js"></script> 84 <script> 85 // chooseall cancelall 86 $(".pg-header input[type='button']").click(function () { 87 88 if ($(this).val()=="全选"){$(".tb input[type='checkbox']").prop("checked",true)}else if ($(this).val()=="取消"){$(".tb input[type='checkbox']").prop("checked",false)}else{ 89 $(".tb input[type='checkbox']").each(function () { 90 if ($(this).prop("checked")){$(this).prop("checked",false)} else{$(this).prop("checked",true)} 91 }) 92 } 93 }) 94 // edit mode 95 $(".pg-header .edit").click(function () { 96 if ($(this).hasClass("editing")){ 97 $(this).removeClass("editing"); 98 // console.log('已关闭编辑模式'); 99 $(".tb input[type='text']").each(function () { 100 var content=$(this).val() 101 $(this).parent().text(content) 102 103 } 104 ) 105 $(".tb select").each(function () { 106 var selvalue=this.value; 107 // console.log(selvalue) 108 // console.log(selvalue) 109 var content=$(this).children("[value="+selvalue+"]").text() 110 var newchoice=$(this).find("option:selected").val() 111 // console.log(newchoice); 112 $(this).parent().attr('choice',newchoice); 113 $(this).parent().text(content); 114 115 }) 116 117 118 }else{ 119 $(this).addClass("editing"); 120 // console.log('已打开编辑模式'); 121 122 var tags=$(".tb input[type='checkbox']"); 123 tags.each(function () { 124 if($(this).prop('checked')){ 125 $(this).parent().siblings().each(function () { 126 var name = $(this).attr('name'); 127 var content = $(this).text(); 128 // console.log(content); 129 130 if (name == 'status') { 131 // console.log('status 开始转换'); 132 var option1=document.createElement('option'); 133 var option2=document.createElement('option'); 134 var newselect=document.createElement('select'); 135 option1.setAttribute('value','1'); 136 option2.setAttribute('value','2'); 137 option1.innerHTML='在线'; 138 option2.innerHTML='下线'; 139 newselect.setAttribute('name','状态'); 140 $(newselect).append(option1); 141 $(newselect).append(option2); 142 $(newselect).css('border','1px solid red'); 143 var choice=$(this).attr('choice') 144 // console.log(choice) 145 $(newselect).find('[value='+choice+']').attr('selected','selected'); 146 $(this).html(newselect) 147 148 } else { 149 // console.log('other') 150 var newtag = document.createElement('input'); 151 newtag.setAttribute('type', 'text') 152 newtag.setAttribute('value', content) 153 $(newtag).css('border','1px solid red') 154 $(this).html(newtag) 155 } 156 157 }) 158 } 159 }) 160 161 } 162 163 }) 164 165 </script> 166 </body> 167 </html>
