jQuery經常使用案例總結
模態對話框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 <style> 7 .field{ 8 z-index: 1; 9 } 10 .cover{ 11 display: none; 12 z-index: 2; 13 position: fixed; 14 top:0; 15 right:0; 16 bottom: 0; 17 left:0; 18 background-color: #b6b0ad; 19 opacity: 0.8; 20 } 21 .input{ 22 display: none; 23 z-index: 3; 24 width: 300px; 25 height:200px; 26 background-color: #fff; 27 border-radius: 20px; 28 position: fixed; 29 top:50%; 30 left:50%; 31 margin-left: -150px; 32 margin-top: -100px; 33 -webkit-box-shadow: 0 0 10px #0CC; 34 } 35 </style> 36 </head> 37 <body> 38 <div> 39 <fieldset id="1" class="field"> 40 <legend>用戶信息</legend> 41 <p id="username">用戶名：</p> 42 <p id="usergender">性別：</p> 43 </fieldset> 44 <button type="button" onclick="show()">輸入用戶信息</button> 45 </div> 46 <div id="2" class="cover"> 47 48 </div> 49 <div id="3" class="input"> 50 <!--<form>--> 51 <div style="text-align: center;"> 52 姓名：<input id = "name" type="text" /> 53 </div> 54 <br /> 55 <div style="text-align: center;"> 56 性別：<input type="radio" name="gender" value="男" checked />男 57 <input type="radio" name="gender" value="女"/>女 58 59 </div> 60 <br /> 61 <div style="text-align: center;"> 62 <input type="button" onclick="submit()" value="提交" /> 63 </div> 64 <!--</form>--> 65 </div> 66 67 68 <script> 69 function show() { 70 var cover = document.getElementById("2"); 71 cover.style.display = "block"; 72 var input = document.getElementById("3"); 73 input.style.display = "block"; 74 } 75 function submit() { 76 77 var cover = document.getElementById("2"); 78 cover.style.display = "none"; 79 var input = document.getElementById("3"); 80 input.style.display = "none"; 81 82 var name = document.getElementById("name"); 83 var text = name.value; 84 var p1 = document.getElementById("username"); 85 p1.innerHTML="用戶姓名："+text; 86 87 var mbtype = document.getElementsByName("gender"); 88 var gender; 89 for(var i=0;i<mbtype.length;i++){ 90 if (mbtype.item(i).checked) { 91 gender = mbtype.item(i).getAttribute("value"); 92 break; 93 } 94 } 95 var p2 = document.getElementById("usergender"); 96 p2.innerHTML="用戶姓名："+gender; 97 } 98 99 </script> 100 </body> 101 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模態對話框</title> 6 <style> 7 .hide{ 8 display: none !important; 9 /*!important;優先級最高*/ 10 } 11 .shade{ 12 position: fixed; 13 top:0; 14 bottom: 0; 15 left: 0; 16 right: 0; 17 /*background-color: black;*/ 18 /*opacity: 0.6;透明度*/ 19 background-color: rgba(0,0,0,.6); 20 z-index: 1000; 21 } 22 .modal { 23 height: 200px; 24 width: 400px; 25 background-color: white; 26 position: fixed; 27 top: 50%; 28 left: 50%; 29 margin-left: -200px; 30 margin-top: -100px; 31 z-index: 1001; 32 } 33 </style> 34 </head> 35 <body> 36 <div style="height: 2000px;background-color: #dddddd;"> 37 <input type="button" value="發送" onclick="ShowModel();"/> 38 </div> 39 <div id="shade" class="shade hide"></div> 40 <div id="modal" class="modal hide"> 41 <a href="javascript:void(0);" onclick="HideModal();">取消</a> 42 <!--href若是等於JavaScript:void(0)的話什麼都不會操做--> 43 </div> 44 <script type="text/javascript"> 45 function ShowModel() { 46 var t1 = document.getElementById('shade'); 47 var t2 = document.getElementById('modal'); 48 t1.classList.remove('hide'); 49 t2.classList.remove('hide'); 50 } 51 function HideModal() { 52 var t1 = document.getElementById('shade'); 53 var t2 = document.getElementById('modal'); 54 t1.classList.add('hide'); 55 t2.classList.add('hide'); 56 } 57 window.onkeydown = function (event) { 58 // console.log(event); 59 if(event.keyCode == 27){ 60 // 若是鍵盤按下ESC一樣退出 61 HideModal(); 62 } 63 } 64 </script> 65 </body> 66 </html>
自定義圖標小尖角
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用插件</title> 6 <!--<link rel="stylesheet" href="plugins/Font-Awesome-master/css/font-awesome.css"/>--> 7 <style> 8 .icon{ 9 display: inline-block; 10 border-top:20px solid red; 11 border-right: 20px solid green; 12 border-bottom: 20px solid transparent; 13 border-left:20px solid transparent ; 14 } 15 </style> 16 </head> 17 <body> 18 <!--<i class="fa fa-bug" aria-hidden="true"></i>--> 19 <div class="icon"></div> 20 <a href="Dy15/plugins/Font-Awesome-master/css/font-awesome.css"> 21 </body> 22 </html>
登陸相關
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .icon-name{ 8 background-image: url("../img/i_name.jpg"); 9 height: 16px; 10 width: 16px; 11 display: inline-block; 12 } 13 .icon-pwd{ 14 background-image: url("../img/i_pwd.jpg"); 15 display: inline-block; 16 } 17 </style> 18 </head> 19 <body> 20 <div style="width: 200px;position: relative"> 21 <input style="width: 180px;padding-right:20px "/> 22 <span class="icon-name" style="position: absolute;top: 2px;right: 0"></span> 23 </div> 24 25 </body> 26 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>登陸</title> 6 </head> 7 <body> 8 <form action="http://www.baidu.com"> 9 <input type="text" id="username"/> 10 <input type="submit" value="提交" onclick="return SubmitForm();"/> 11 </form> 12 <script> 13 function SubmitForm() { 14 var user = document.getElementById('username'); 15 if(user.value.length > 0){ 16 // 能夠提交 17 return true; 18 }else{ 19 // 不可提交，提示錯誤 20 alert('用戶名輸入不能爲空！'); 21 return false; 22 } 23 } 24 </script> 25 </body> 26 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>登陸</title> 6 </head> 7 <body> 8 <!--onfocus 獲取鼠標焦點--> 9 <!--onblur 失去鼠標焦點--> 10 <input id="i1" type="text" value="請輸入用戶名:" onfocus="Focus();" onblur="Blur();"/><br> 11 <input id="i2" type="text" value="請輸入密碼:"/> 12 <script type="text/javascript"> 13 function Focus() { 14 // console.log('Focus'); 15 // 獲取標籤，清空內容 16 var tag = document.getElementById('i1'); 17 if(tag.value == "請輸入用戶名:"){ 18 tag.value = ""; 19 } 20 } 21 function Blur() { 22 // console.log('blur'); 23 var tag = document.getElementById('i1'); 24 var val = tag.value; 25 if(val.trim().length == 0){ 26 tag.value = "請輸入用戶名:" 27 } 28 } 29 30 </script> 31 </body> 32 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .item{ 8 width: 250px; 9 height: 60px; 10 position: relative; 11 } 12 .item input{ 13 width: 200px; 14 } 15 .item span{ 16 position: absolute; 17 top: 20px; 18 left: 0px; 19 font-size: 8px; 20 background-color: indianred; 21 color: white; 22 display: inline-block; 23 width: 200px; 24 } 25 </style> 26 </head> 27 <body> 28 29 <div> 30 <form id="form1"> 31 <div class="item"> 32 <input class="c1" type="text" name="username" label="用戶名" require="true" min-len="6"/> 33 </div> 34 <div class="item"> 35 <input class="c1" type="password" name="pwd" label="密碼"/> 36 </div> 37 <div class="item"> 38 <input class="c1" type="text" name="phone" label="手機" require="true" phone="true"/> 39 </div> 40 <input type="submit" value="提交" /> 41 </form> 42 43 </div> 44 45 <script src="jquery-1.12.4.js"></script> 46 <script src="commons.js"></script> 47 <script> 48 $(function(){ 49 $.valid('#form1'); 50 }); 51 52 53 </script> 54 </body> 55 </html>
1 /** 2 * Created by alex on 2016/8/28. 3 */ 4 (function(jq){ 5 6 function ErrorMessage(inp,message){ 7 var tag = document.createElement('span'); 8 tag.innerText = message; 9 inp.after(tag); 10 } 11 12 jq.extend({ 13 valid:function(form){ 14 // #form1 $('#form1') 15 jq(form).find(':submit').click(function(){ 16 17 jq(form).find('.item span').remove(); 18 19 var flag = true; 20 jq(form).find(':text,:password').each(function(){ 21 22 var require = $(this).attr('require'); 23 if(require){ 24 var val = $(this).val(); 25 26 if(val.length<=0){ 27 var label = $(this).attr('label'); 28 ErrorMessage($(this),label + "不能爲空"); 29 flag = false; 30 return false; 31 } 32 33 var minLen = $(this).attr('min-len'); 34 if(minLen){ 35 var minLenInt = parseInt(minLen); 36 if(val.length<minLenInt){ 37 var label = $(this).attr('label'); 38 ErrorMessage($(this),label + "長度最小爲"+ minLen); 39 flag = false; 40 return false; 41 } 42 //json.stringify() 43 //JSON.parse() 44 } 45 46 var phone = $(this).attr('phone'); 47 if(phone){ 48 // 用戶輸入內容是不是手機格式 49 var phoneReg = /^1[3|5|8]\d{9}$/; 50 if(!phoneReg.test(val)){ 51 var label = $(this).attr('label'); 52 ErrorMessage($(this),label + "格式錯誤"); 53 flag = false; 54 return false; 55 } 56 } 57 58 // 一、html自定義標籤屬性 59 // 增長驗證規則+錯誤提示 60 61 } 62 // 每個元素執行次匿名函數 63 // this 64 //console.log(this,$(this)); 65 /* 66 var val = $(this).val(); 67 if(val.length<=0){ 68 var label = $(this).attr('label'); 69 var tag = document.createElement('span'); 70 tag.innerText = label + "不能爲空"; 71 $(this).after(tag); 72 flag = false; 73 return false; 74 } 75 */ 76 }); 77 78 return flag; 79 }); 80 } 81 }); 82 })(jQuery);
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>初級表單驗證</title> 6 <style> 7 .item{ 8 width: 250px; 9 height: 60px; 10 position: relative; 11 } 12 .item input{ 13 width: 200px; 14 } 15 .item span{ 16 position: absolute; 17 top: 20px; 18 left: 0px; 19 font-size: 8px; 20 background-color: indianred; 21 color: white; 22 display: inline-block; 23 width: 200px; 24 } 25 </style> 26 </head> 27 <body> 28 <div> 29 <form> 30 <div class="item"> 31 <input class="c1" type="text" name="username" label="用戶名"/> 32 <!--<span>用戶名不能爲空</span>--> 33 </div> 34 <div class="item"> 35 <input class="c1" type="password" name="pwd" label="密碼"/> 36 <!--<span>密碼不能爲空</span>--> 37 </div> 38 <input type="submit" value="提交" onclick="return CheckValid();" /> 39 </form> 40 </div> 41 42 <script src="jquery-1.12.4.js"></script> 43 <script> 44 function CheckValid() { 45 //找到form標籤下的全部須要驗證的標籤 46 //$('from.c1') 47 //$('from input[type="text"],input[type="password"]') 48 //循環全部須要驗證的標籤，獲取內容 49 $('form .item span').remove(); 50 //錯誤信息清空 51 52 var flag = true; 53 54 $('form .c1').each(function () { 55 //each循環元素執行一次匿名函數 56 //this 57 //console.log(this,$(this)) 58 var val = $(this).val(); 59 if(val.length<=0){ 60 var label = $(this).attr('label'); //獲取自定義屬性 61 var tag = document.createElement('span'); 62 tag.innerText = label + "不能爲空"; 63 $(this).after(tag); //在當前標籤後加入新的span標籤 64 flag = false; 65 } 66 }); 67 return flag; 68 } 69 </script> 70 </body> 71 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>初級表單驗證</title> 6 <style> 7 .item{ 8 width: 250px; 9 height: 60px; 10 position: relative; 11 } 12 .item input{ 13 width: 200px; 14 } 15 .item span{ 16 position: absolute; 17 top: 20px; 18 left: 0px; 19 font-size: 8px; 20 background-color: indianred; 21 color: white; 22 display: inline-block; 23 width: 200px; 24 } 25 </style> 26 </head> 27 <body> 28 <div> 29 <form> 30 <div class="item"> 31 <input class="c1" type="text" name="username" label="用戶名"/> 32 </div> 33 <div class="item"> 34 <input class="c1" type="password" name="pwd" label="密碼"/> 35 </div> 36 <input type="submit" value="提交" /> 37 </form> 38 </div> 39 40 <script src="jquery-1.12.4.js"></script> 41 <script> 42 $(function () { 43 //當夜幕框架加載完後，自動執行 44 BindCheckVaild(); 45 }); 46 47 function BindCheckVaild() { 48 $('form :submit').click(function () { 49 //屬性選擇器 50 $('form .item span').remove(); 51 //錯誤信息清空 52 53 var flag = true; 54 //只要點擊submmit按鈕，執行此處內容，找到form標籤下的全部須要驗證的標籤 55 56 $('form .c1').each(function () { 57 //each循環元素執行一次匿名函數 58 //this 59 //console.log(this,$(this)) 60 var val = $(this).val(); 61 if(val.length<=0){ 62 var label = $(this).attr('label'); //獲取自定義屬性 63 var tag = document.createElement('span'); 64 tag.innerText = label + "不能爲空"; 65 $(this).after(tag); //在當前標籤後加入新的span標籤 66 flag = false; 67 return false; 68 } 69 }); 70 return flag; 71 }); 72 } 73 </script> 74 </body> 75 </html>
後臺管理滾動條
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 margin: 0; 9 } 10 .pg-header{ 11 height:48px; 12 background-color: #012a62; 13 } 14 .pg-body .body-menu{ 15 position: absolute; 16 top: 48px; 17 left: 0; 18 bottom: 0; 19 width: 200px; 20 background-color: #e67e4a; 21 } 22 .pg-body .body-content{ 23 position: absolute; 24 top: 48px; 25 left: 220px; 26 right: 0; 27 bottom: 0; 28 background-color: green; 29 overflow: auto; 30 /*<overflow添加滾動條>*/ 31 } 32 </style> 33 </head> 34 <body> 35 <div class="pg-header"></div> 36 <div class="pg-body"> 37 <div class="body-menu"></div> 38 <div class="body-content"> 39 sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> 40 sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> 41 sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> 42 sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> 43 sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> 44 sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> 45 sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> 46 sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> 47 sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> 48 49 </div> 50 </div> 51 </body> 52 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 margin: 0; 9 } 10 .pg-header{ 11 height:48px; 12 background-color: #012a62; 13 } 14 .pg-body .body-menu{ 15 position: absolute; 16 top: 48px; 17 left: 0; 18 bottom: 0; 19 width: 200px; 20 /*bottom: 0;*/ 21 background-color: #e67e4a; 22 } 23 .pg-body .body-content{ 24 position: absolute; 25 top: 48px; 26 left: 220px; 27 right: 0; 28 background-color: green; 29 } 30 </style> 31 </head> 32 <body> 33 <div class="pg-header"></div> 34 <div class="pg-body"> 35 <div class="body-menu"></div> 36 <div class="body-content"> 37 sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> 38 sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> 39 sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> 40 sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> 41 sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> 42 sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> 43 sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> 44 sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> 45 sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/> 46 47 </div> 48 </div> 49 </body> 50 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>返回頂部</title> 6 <style> 7 .back{ 8 position: fixed; 9 right: 20px; 10 bottom: 20px; 11 color: green; 12 } 13 .hide{ 14 display: none; 15 } 16 </style> 17 </head> 18 <body onscroll="BodyScroll();"> 19 <!--onscroll獲取每次鼠標滾動操做--> 20 <div style="height: 2000px;background-color: #dddddd;"></div> 21 <div id="back" class="back hide" onclick="BackTop();">返回頂部</div> 22 <script> 23 function BackTop() { 24 document.body.scrollTop = 0; 25 } 26 function BodyScroll() { 27 var s = document.body.scrollTop; 28 // 獲取滾輪距離頂部的大小 29 var t = document.getElementById('back'); 30 if(s >= 300){ 31 t.classList.remove('hide'); 32 }else{ 33 t.classList.add('hide'); 34 } 35 } 36 </script> 37 </body> 38 </html>
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 .menu{ 11 width: 200px; 12 height: 600px; 13 border: 1px solid #dddddd; 14 overflow: auto; 15 } 16 .menu .item .title{ 17 height: 40px; 18 line-height: 40px; 19 background-color: #2459a2; 20 color: white; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="menu"> 26 <div class="item"> 27 <div class="title" onclick="ShowMenu(this);">菜單一</div> 28 <div class="body"> 29 <p>內容一</p> 30 <p>內容一</p> 31 <p>內容一</p> 32 <p>內容一</p> 33 <p>內容一</p> 34 </div> 35 36 </div> 37 <div class="item"> 38 39 <div class="title" onclick="ShowMenu(this);">菜單二</div> 40 <div class="body hide"> 41 <p>內容二</p> 42 <p>內容二</p> 43 <p>內容二</p> 44 <p>內容二</p> 45 <p>內容二</p> 46 <p>內容二</p> 47 </div> 48 </div> 49 <div class="item"> 50 <div class="title" onclick="ShowMenu(this);">菜單三</div> 51 <div class="body hide"> 52 <p>內容三</p> 53 <p>內容三</p> 54 <p>內容三</p> 55 <p>內容三</p> 56 <p>內容三</p> 57 <p>內容三</p> 58 </div> 59 60 </div> 61 </div> 62 <script src="jquery-1.12.4.js"></script> 63 <script> 64 function ShowMenu(ths) { 65 // console.log(ths); //Dom中的標籤對象 66 // $(ths) //Dom標籤對象轉換成jQuery標籤對象 67 // $(ths)[0] //jQuery標籤對象轉換成Dom標籤對象 68 $(ths).next().removeClass('hide'); 69 $(ths).parent().siblings().find('.body').addClass('hide'); 70 } 71 </script> 72 </body> 73 </html>
Form表單
一、編寫HTML代碼javascript
index.html
顯示效果：php
二、功能實現css
導入jQueryhtml
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <!--導入自定義的jQuery腳本--> <script type="text/javascript" src="js/Form_menu.js"></script>
注意：自定義的jQuery是否能夠放在原生的jQuery上面呢？不能夠：我們本身寫的jQuery調用的也是原生的jQuery，若是原生的jQuery沒有加載，我們自定義的也是不能夠用的。前端
編寫CSS代碼java
首先咱們要給，右上角的「進入編輯模式」添加一個事件，咱們能夠經過這個事件給「進入編輯模式」新增一個屬性，或者樣式，經過這個屬性和樣式，來判斷是否進入了編輯模式，在上一篇我本身寫的是使用的屬性，此次咱們來使用樣式來判斷。python
在css文件裏新增兩個樣式：jquery
/*定義編輯按鈕的樣式*/
.edit-mode{
background-color: #b3b3b3;
padding: 8px;
text-decoration: none;
color: white;
}
/*定義點擊編輯按鈕後的樣式*/
.editing{
background-color: #f0ad4e;
}
增長自定義的js文件實現各個功能web
1 /** 2 * Created by luo_t on 3/1/2016. 3 */ 4 5 STATUS = [ 6 {'id': 1, 'text': "在線"}, 7 {'id': 2, 'text': "下線"} 8 ]; 9 10 BUSINESS = [ 11 {'id': 1, 'text': "車上會"}, 12 {'id': 2, 'text': "二手車"}, 13 {'id': 3, 'text': "大保健"} 14 ]; 15 16 17 $(function(){ 18 // checkbox默認事件優先，而後執行自定義的事件 19 $('#tb1').find(':checkbox').click(function(){ 20 var tr = $(this).parent().parent(); 21 if($("#edit_mode").hasClass('editing')){ 22 if($(this).prop('checked')){ 23 // 當前行進入編輯狀態 24 RowIntoEditMode(tr); 25 }else{ 26 // 當前行退出編輯狀態 27 RowOutEditMode(tr); 28 } 29 } 30 }); 31 }); 32 33 34 35 36 //退出編輯模式，函數（被下面掉用） 37 function RowOutEditMode(tr){ 38 tr.children().each(function(){ //tr下面的自標籤 39 var td = $(this); 40 if(td.attr('edit') == 'true'){ //若是在編輯狀態 41 var inp = td.children(':first');//獲取td裏面的第一個元素 42 var input_value = inp.val();//取出裏面的值 43 td.text(input_value);//並複製給td標籤 44 } 45 }); 46 } 47 48 //進入編輯模式，函數（被下面掉用） 49 function RowIntoEditMode(tr){ 50 tr.children().each(function(){ //獲取tr下面的全部td，循環 51 var td = $(this); 52 if(td.attr('edit') == 'true'){ //判斷是否爲可編輯狀態 53 if(td.attr('edit-type') == "select"){ //判斷是否爲input的select標籤 54 var all_values = window[td.attr('global-key')]; //獲取全局變量判斷獲取當前的項目類型， 55 var select_val = td.attr('select-val'); //獲取當前類型的下的值 56 select_val = parseInt(select_val); //把字符串轉換爲數字 57 var options = "";//定義一個空值，把標籤循環加上。 58 $.each(all_values, function(index, value){ //循環這個項目類型 59 if(select_val == value.id){ //判斷，當前選中的值和項目類型的ID的值是否相等，若是相等使用這個值 60 options += "<option selected='selected'>" + value.text + "</option>"; 61 }else{//沒有，使用默認的項目類型 62 options += "<option>" + value.text + "</option>"; 63 } 64 }); 65 //當input標籤，類型爲select的標籤發生改變時執行 66 var temp = "<select onchange='MultiChange(this);'>" + options + "</select>"; 67 td.html(temp); 68 }else{ //若是不是select類型的那麼 69 var text = td.text(); //獲取td裏的val值 70 var temp = "<input type='text' value='" + text+ "' />"; //把值賦給input標籤的value 71 td.html(temp); 72 } 73 } 74 }) 75 } 76 77 78 79 80 globalCtrlKeyPress = false; 81 // 若是按下鍵盤的任意鍵，執行 function 82 window.onkeydown = function(event){ 83 console.log(event.keyCode); 84 //若是按下ctrl鍵 85 if(event && event.keyCode == 17){ 86 //設置globalCtrlKeyPress爲true 87 window.globalCtrlKeyPress = true; 88 }else{ 89 //按下其餘的鍵盤爲false 90 window.globalCtrlKeyPress = false; 91 } 92 }; 93 94 //若是任意鍵放開執行function 95 window.onkeyup = function (event) { //這裏須要傳入evnent 96 //若是ctrl鍵up 97 if(event && event.keyCode == 17 ){ 98 //設置globalCtrlKeyPress爲false 99 window.globalCtrlKeyPress = false; 100 } 101 }; 102 103 //提高逼格多行修改 104 function MultiChange(ths){ 105 // 檢測是否按下ctr鍵 106 if(window.globalCtrlKeyPress == true){ 107 // 獲取當前td所在的tr中的索引位置 108 var index = $(ths).parent().index(); 109 //獲取當前td內的值 110 var value = $(ths).val(); 111 //找到當前td下的全部的選中的(tr)標籤，並循環 112 $(ths).parent().parent().nextAll().find("td input[type='checkbox']:checked").each(function(){ 113 //找到當前選中標籤（:checked）的上面獲取的index索引值的的td標籤，的子標籤的值。 114 $(this).parent().parent().children().eq(index).children().val(value); 115 }); 116 117 } 118 } 119 120 121 122 123 //進入編輯模式 按鈕觸發功能 124 function EditMode(ths, tb){ //ths & tb 就是在html頁面中咱們傳入的參數：onclick="EditMode(this, '#tb1');" 125 // ths =this, 126 var isEditing = $(ths).hasClass('editing'); //判斷是否有這個editing的樣式 127 if(isEditing){ //若是有說明當前是編輯狀態，那麼點擊的時候應該退出編輯狀態 128 // 退出編輯模式 129 $(ths).text('進入編輯模式'); //修改他的內容，提高逼格用的。 130 $(ths).removeClass('editing'); //移除這個editing樣式 131 $(tb).children().each(function(){ //獲取這個form表單下的全部tr，並循環 132 var tr = $(this); //當前的tr 133 if(tr.find(':checkbox').prop('checked')){ //找到當選中的行 134 // 當前行，推出編輯狀態 135 RowOutEditMode(tr); //這裏咱們把代碼進行了縮寫，能夠理解爲python中調用函數的意思，我傳入參數執行函數 136 } 137 138 }); 139 }else{ 140 // 進入編輯模式 141 $(ths).text('退出編輯模式'); //修改他的內容，提高逼格用的。 142 $(ths).addClass('editing'); //添加這個這個editing樣式 143 $(tb).children().each(function(){ //找到每一個一個form表單下面的tr循環 144 // $(this) 表示循環過程當中,每個tr，每一行數據 145 var tr = $(this); 146 var isChecked = $(this).find(':checkbox').prop('checked'); //獲取當前tr下的checkbox的checked屬性，用來判斷是否爲選中狀態 147 if(isChecked==true){//若是爲選中狀態 148 // 當前行進入編輯狀態 149 RowIntoEditMode(tr);//咱們能夠把重複的代碼進行簡化，相似於python中的函數！ 150 } 151 }); 152 } 153 } 154 155 //設置全選功能 156 function CheckAll(mode, tb){ 157 // 一、選中checkbox 158 // 二、若是已經進入編輯模式，讓選中行進入編輯狀態 159 // tb = #tb1 160 //$(tb) = $('#tb1') 161 $(tb).children().each(function(){//找到tb下面的全部tr，循環 162 // $(this) 表示循環過程當中,每個tr，每一行數據 163 var tr = $(this); 164 var isChecked = $(this).find(':checkbox').prop('checked');//找到全部選中的tr標籤 165 if(isChecked==true){//若是選中什麼都不作 166 }else{//若是沒有選中 167 $(this).find(':checkbox').prop('checked',true);//若是沒有選中首先把他設置爲選中狀態 168 // 若是已經進入編輯模式，讓選中行進入編輯狀態 169 var isEditMode = $(mode).hasClass('editing'); 170 if(isEditMode){ 171 // 當前行進入編輯狀態 172 RowIntoEditMode(tr); 173 } 174 } 175 }); 176 } 177 178 //設置反選功能 179 function CheckReverse(mode, tb){ 180 // 是否進入了編輯模式 181 if($(mode).hasClass('editing')){//若是進入編輯模式 182 $(tb).children().each(function(){//循環全部的tr 183 // 遍歷全部tr 184 var tr = $(this); 185 var check_box = tr.children().first().find(':checkbox');//找到全部的input的checkbox標籤 186 if(check_box.prop('checked')){ //判斷若是選中 187 check_box.prop('checked',false);//給他取消 188 RowOutEditMode(tr);//並退出編輯模式 189 }else{//若是沒有選中 190 check_box.prop('checked',true);//給他選中 191 RowIntoEditMode(tr);//並進入編輯模式 192 } 193 }); 194 }else{//若是沒有進入編輯模式 195 $(tb).children().each(function(){ //找到全部的tr並循環 196 var tr = $(this); 197 var check_box = tr.children().first().find(':checkbox');//周到全部的checkbox標籤 198 if(check_box.prop('checked')){ //判斷是否選中 199 check_box.prop('checked',false);//若是選中，給他設置爲爲選中 200 }else{ 201 check_box.prop('checked',true);//若是沒有選中，給他設置爲選中 202 } 203 }); 204 } 205 } 206 207 //設置取消功能 208 function CheckCancel(mode, tb){ 209 // 一、取消選中checkbox 210 // 二、若是已經進入編輯模式，行退出編輯狀態 211 $(tb).children().each(function(){ //渠道全部的tr標籤，並循環 212 var tr = $(this); 213 if(tr.find(':checkbox').prop('checked')){//找到全部選中的checked標籤 214 // 移除選中 215 tr.find(':checkbox').prop('checked', false); 216 //獲取是否爲編輯狀態 217 var isEditing = $(mode).hasClass('editing'); 218 if(isEditing == true){ //若是爲編輯狀態 219 // 當前行，推出編輯狀態 220 RowOutEditMode(tr); 221 } 222 } 223 }); 224 }
文檔處理
看下面的圖片效果：編程
問：我想在點擊加的時候在下面新增一個搜索條件框體，點擊減號的時候刪除當前這個框體怎麼實現？
一、文檔操做基礎
看下面的例子：
在後面追加內容（能夠是文本，能夠是標籤類型）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shuaige</title>
</head>
<body>
<div id="i1">
</div>
<div id="i2" style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">>
</div>
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script>
$('#i1').append('<a>Hello Test Append</a>');//對這個id#i1的標籤內尾部增長一條數據
$('#i1').append('<div>Test Continue</div>');//對這個id#i1的標籤內尾部增長一條數據
$('#i1').prepend('<div>Prepend on the chiled tables</div>');//對這個id爲i1的自標籤內頂部增長一條數據
$('#i1').appendTo('#i2'); //想讓某一個標籤添加到某一個和標籤，能夠用到appendTo，把i1放到i2裏面了
$('#i1').before('<h1>append content same level up</h1>');//放在找到的'#i1'同級標籤上面增長
$('#i1').after('<h2>append content same level down</h2>');//放在知道的'#i1'統計標籤下面增長
</script>
</body>
</html>
二、分析
上面的例子，按照行分割一步一步的寫，看效果。那麼返回來看上上面開始說的
我想在點擊加的時候在下面新增一個搜索條件框體，點擊減號的時候刪除當前這個框體怎麼實現？
我要增長，怎麼實現呢。clone （克隆-複製）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shuaige</title>
</head>
<body>
<div id="search_conditions">
<div class="condition">
<a onclick="AddCondition(this,'#search_conditions')">+</a>
<input/>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script>
//添加新增內容
function AddCondition(ths,condition){
//copy condition div
//在吧copy的div追加到id="search_condition"的標籤內下面
var cp = $(ths).parent().clone();
console.log(cp);
//修改裏面的內容,和屬性
cp.children(':first').text('-').attr('onclick',"RemoveCondition(this,'#search_conditions')");
cp.appendTo('#search_conditions');
}
//新增完後的標籤內新增的內容
function RemoveCondition(ths,condition){
$(ths).parent().remove();
}
</script>
</body>
</html>
效果圖以下（樣式能夠後續加上）：
jQuery擴展
一、什麼是jQuery的擴展
首先要了解下，python中給我們提供和不少現成的模塊，可是他的模塊夠用嗎？不夠用那怎麼辦？導入第三方的模塊，使用現成的模塊操做快捷 方便！
http://www.php100.com/manual/jquery/，中有一個叫作「插件機制」：
jQuery.fn.extend(object)
jQuery.extend(object)
二、jQuery.extend(object)
html代碼以下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shuaige</title>
</head>
<body>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<!--這裏必須優先導入jQuery原生的js，在導入擴展的jQuery-->
<script type="text/javascript" src="extends.js"></script>
<script>
console.log($.luotianshuai())
</script>
</body>
</html>
jQuery代碼以下：
//擴展使用自執行函數來寫,逼格比較高點
(function (arg) {
arg.extend({
'luotianshuai':function (){
return 123;
},
'login':function(){} //他的代碼是以字典形式存儲的擴展jQuery
})
})(jQuery);//jQuery爲傳進去的函數他的方程式:(function (arg) {})();第一個括號爲函數,第二個括號內存儲參數
三、jQuery.fn.extend(object)
jQuery.fn.extend(object) 這個方法和jQuery.extend(object)的區別就是，jQuery.fn.extend(object)能夠傳入搜索參數
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
結果：
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();
四、form表單驗證（下面的兩個例子基本上功能就夠用了）
看下面的jQuery代碼和html代碼
form_authentication_extend
login_form_html
register_form_html
還有兩個比較不錯的擴展鏈接：
-- parsleyjs
http://parsleyjs.org/
-- jQuery Validate
http://jqueryvalidation.org/
若是是簡單功能本身寫就好了，畢竟連接裏的東西，比較多簡單功能我們本身實現便可。
使用插件
頁面頂部的瀏覽 窗口點擊切換圖片，以下圖
鏈接地址：http://bxslider.com/
1.一、首先要說的仍是目錄結構
1.二、下載插件
1.三、應用插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shuaige</title>
<!--引入第三方的css-->
<link href="extend_plugin-in/jquery.bxslider/jquery.bxslider.css" rel="stylesheet">
</head>
<body>
<!--按照要求的格式書寫-->
<ul class="bxslider">
<li><img src="images/image_1.jpg" /></li>
<li><img src="images/image_2.jpg" /></li>
<li><img src="images/image_3.jpg" /></li>
</ul>
<!--導入js文件-->
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<!--而後在導入插件內的js文件-->
<script type="text/javascript" src="extend_plugin-in/jquery.bxslider/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function(){ //當整個頁面加載完成執行的函數
$('.bxslider').bxSlider();
});
</script>
</body>
</html>
1.4根據本身的需求修改他的樣式和圖片
BootStrap框架
一、BootStrap介紹
說BootStrap其實他是一個類庫，定了一些js方法和css
網頁編程：http://v3.bootcss.com/getting-started/ （從起步開始一步一步學）
Bootstrap 是一個用於構建響應式網站的前端框架。不管你想構建應用 程序、博客仍是 CMS 網站,Bootstrap 都完美適用,只要你想獲得, 它都能行。
Bootstrap 把 HTML、CSS 和 JavaScript 組合起來,爲構建 穩定的網站提供了基礎設施,也能提升開發效率。
基於默認的網格系 統,佈局變成了小菜一碟,按鈕、導航和表格也都活脫脫地賞心悅目。 十幾個 JavaScript 插件更爲咱們賦予網站交互能力提供了強大保障。
響應式佈局：根據用戶設備的不一樣，進行相應的佈局！（根據瀏覽器的寬度設置）
Bootstrap 是 Mark Otto 和 Jacob Thornton 共同開發的一個開源框架。 最初發布 Bootstrap 的時候,他們兩位都在 Twitter 工做。當時,他 們面臨着爲公司內部提供一套標準化的前端開發工具的需求。在發佈 Bootstrap 的那篇博客中,Mark Otto 這樣介紹他們的新項目:
Twitter誕生初期,爲了完成前端開發任務,工程師們幾乎嘗試 了本身熟悉的全部庫。應用之間的不一致性致使它們難以擴 展和維護。Bootstrap最初就是這個問題的一個解決方案,並且 在Twitter內部第一次Hackweek上獲得了承認。Hackweek結束 後,咱們手頭上的項目已經至關穩定,能夠在公司內部部署使 用了。
--Mark Otto
https://dev.twitter.com
Bootstrap 是 2011 年 8 月發佈的,發佈以後就迅速走紅。並且,它也 從最初 CSS 驅動的項目,發展到內置了不少 JavaScript 插件和圖標, 而且涵蓋了表單和按鈕元素。Bootstrap 自己支持響應式 Web 設計, 並且擁有一個很是穩健的 12 列、940 像素寬的網格佈局系統。值得一 提的是,Bootstrap 網站(http://getbootstrap.com)上還提供了一個構 建工具,讓你根據本身的需求選擇 CSS 和 JavaScript 功能。全部這一 切讓前端 Web 開發有了前瞻性的設計和開發基礎,開發效率倍增。上 手使用 Bootstrap 很是簡單,跟在網站中整合 CSS 和 JavaScript 沒有 什麼區別。
二、文件結構
bootstrap2
├── css
│ ├── bootstrap-responsive.css //不使用響應式佈局
│ ├── bootstrap-responsive.min.css //不使用響應式佈局
│ ├── bootstrap.css
│ └── bootstrap.min.css
├── img
│ ├── glyphicons-halflings-white.png //大圖經過「扣洞移動照片」的方式來顯示圖標
│ └── glyphicons-halflings.png //大圖經過「扣洞移動照片」的方式來顯示圖標
└── js
├── bootstrap.js
└── bootstrap.min.js
bootstrap3
├── css
│ ├── bootstrap-theme.css //主題類型，生產上通常用不到
│ ├── bootstrap-theme.css.map //主題類型，生產上通常用不到
│ ├── bootstrap-theme.min.css //主題類型，生產上通常用不到
│ ├── bootstrap.css
│ ├── bootstrap.css.map //作映射的，能夠理解爲 shuaige = 「luotianshuai」 那麼掉shuaige的時候就至關於掉luotianshuai
│ └── bootstrap.min.css
├── fonts //包含了字體圖標文件，他也是作的對應。下面的文件包含了不一樣系統下的字體圖標
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ └── glyphicons-halflings-regular.woff2
└── js
├── bootstrap.js
├── bootstrap.min.js
"""
eot、svg、ttf、woff、woff2
@font-face語句是css中的一個功能模塊，用於實現網頁字體多樣性的模塊(設計者可隨意指定字體，不須要考慮瀏覽者電腦上是否安裝)。
而因爲網頁中使用的字體類型，也是各瀏覽器對字體類型有不一樣的支持規格。 字體格式類型主要有幾個大分類：TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。
eot EOT– Embedded Open Type
EOT是嵌入式字體，是微軟開發的技術。容許OpenType字體用@font-face嵌入到網頁並下載至瀏覽器渲染，存儲在臨時安裝文件夾下。
SVG Scalable Vector Graphics
SVG是由W3C制定的開放標準的圖形格式。SVG字體就是使用SVG技術來呈現字體，還有一種gzip壓縮格式的SVG字體。
ttf TrueType
Windows和Mac系統最經常使用的字體格式，其最大的特色就是它是由一種數學模式來進行定義的基於輪廓技術的字體，這使得它們比基於矢量的字體更容易處理，保證了屏幕與打印輸出的一致性。同時，這類字體和矢量字體同樣能夠隨意縮放、旋轉而沒必要擔憂會出現鋸齒。
woff WOFF–WebOpen Font Format
WOFF（Web開發字體格式）是一種專門爲了Web而設計的字體格式標準，其實是對於TrueType/OpenType等字體格式的封裝，每一個字體文件中含有字體以及針對字體的元數據（Metadata），字體文件被壓縮，以便於網絡傳輸。
"""
三、HTML樣板（根據本身需求修改）
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!--指定告訴ID用高版本的解析--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ --> <title>Shuaige</title> <!-- Bootstrap --> <link href="extend_plugin-in_bootstrap/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>你好，世界！</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery-1.8.2.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="extend_plugin-in_bootstrap/js/bootstrap.min.js"></script> </body> </html> 複製代碼 複製代碼 """ <meta charset="utf-8"> 編碼 <meta http-equiv="X-UA-Compatible" content="IE=edge"> Bootstrap 不支持 IE 古老的兼容模式。爲了讓 IE 瀏覽器運行最高級別的可用模式渲染顯示內容 <meta name="viewport" content="width=device-width, initial-scale=1"> 爲了確保適當的繪製和觸屏縮放，須要在 <head> 之中添加 viewport 元數據標籤。 在移動設備瀏覽器上，經過爲視口（viewport）設置 meta 屬性爲 user-scalable=no 能夠禁用其縮放（zooming）功能。這樣禁用縮放功能後，用戶只能滾動屏幕，就能讓你的網站看上去更像原生應用的感受。 注意，這種方式咱們並不推薦全部網站使用，仍是要看你本身的狀況而定！ <meta name="renderer" content="webkit"> 國內瀏覽器廠商通常都支持兼容模式（即 IE 內核）和高速模式（即 webkit 內核），不幸的是，全部國產瀏覽器都是默認使用兼容模式，這就形成因爲低版本 IE （IE8 及如下）內核讓基於 Bootstrap 構建的網站展示效果很糟糕的狀況。 幸運的是，國內瀏覽器廠商逐漸意識到了這一點，某些廠商已經開始有所做爲了,目前只有360瀏覽器支持此 <meta> 標籤。但願更多國內瀏覽器儘快採起行動、儘快進入高速時代！ """
相關文章
- 1. jquery經常使用總結
- 2. jquery 經常使用寫法總結
- 3. jquery select 經常使用操做總結
- 4. 前端之jQuery經常使用總結
- 5. JQuery經常使用事件總結
- 6. jquery經常使用方法總結
- 7. jQuery經常使用方法總結【二】
- 8. jQuery經常使用方法總結【三】
- 9. jQuery經常使用方法總結【一】
- 10. jQuery 經常使用方法總結
- 更多相關文章...
- • jQuery Mobile 實例 - jQuery Mobile 教程
- • SQLite 常用函數 - SQLite教程
- • 常用的分佈式事務解決方案
- • Composer 安裝與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 跳槽面試的幾個實用小技巧，不妨看看！
- 2. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 3. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 4. 如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 5. Mac OS非兼容Windows軟件運行解決方案——「以VMware & Microsoft Access爲例「
- 6. 封裝 pyinstaller -F -i b.ico excel.py
- 7. 數據庫作業三ER圖待完善
- 8. nvm安裝使用低版本node.js(非命令安裝)
- 9. 如何快速轉換圖片格式
- 10. 將表格內容分條轉換爲若干文檔
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. jquery經常使用總結
- 2. jquery 經常使用寫法總結
- 3. jquery select 經常使用操做總結
- 4. 前端之jQuery經常使用總結
- 5. JQuery經常使用事件總結
- 6. jquery經常使用方法總結
- 7. jQuery經常使用方法總結【二】
- 8. jQuery經常使用方法總結【三】
- 9. jQuery經常使用方法總結【一】
- 10. jQuery 經常使用方法總結