各項技巧總結:css/js/正則等(Editplus版)
阿新 • • 發佈：2018-12-25
#TITLE=[jQuery或javasript]使用總結 #INFO 總結jQuery及javascript使用技巧 #SORT=n #T=checkbox-預設值 $("input[name='sex']").get(0).checked=true; //預設男 #T=json-將json物件轉換成js字串物件 var memberList = {"jfId":jfIdValue,"position":positionValue,"realName":realNameValue }; JSON.stringify(memberList); #T=json-將字串裝換成json物件 var memberList = "{\"jfId\":\"123\",\"position\":\"123\",\"realName\":\"123\" }"; var json = $.parseJSON(memberList); alert(json.jfId); #T=json-構建json物件並作為ajax引數 var memberList = []; memberList.push({"jfId":jfIdValue,"position":positionValue,"realName":realNameValue }); if( memberList != null ){ $.ajax({ type: "POST", url: "<c:url value='/buMembers/save'/>", data:{ "memberList":JSON.stringify(memberList)}, success: function(){ alert( "ok" ); } }); } #T=element-獲取父物件 $( obj ).parent(); //$("div:parent"); #T=Array-去除字串陣列中重複的元素 /** * 去除字串陣列中重複的元素 * @param array 陣列 & @param isShowRepeatElement treu|false 是否返回重複元素 */ function unique(array,isShowRepeatElement){ var array1=new Array();//臨時陣列，用於比較 var repeatArray= new Array();//重複元素 $(array).each(function(i){ if( $.inArray(array[i],array1) == -1){//-1:不存在該陣列中，否則返回位置 array1.push(array[i]); }else{ repeatArray.push(array[i]); } }); if( isShowRepeatElement ) { array1 = repeatArray ; } return array1; } #T=trim() /** * 去除空格 */ String.prototype.trim = function() { return this.replace(/\s/g, ""); } #T=IE各個版本的獲取 function getIE_version(){ var browser=navigator.appName var b_version=navigator.appVersion var version=b_version.split(";"); var trim_Version=version[1].replace(/[ ]/g,""); if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE6.0") { alert("IE 6.0"); } else if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE7.0") { alert("IE 7.0"); window.location.href="http://xxxx.com"; } else if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE8.0") { alert("IE 8.0"); } else if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE9.0") { alert("IE 9.0"); } } #T=替換所有 function test(){ var aaa = "11112342fae{1}askdfka{1}"; alert( aaa.replace(/{\d}/g,"天天") ) ; } #T=用一個表字段替換另一個表字段 UPDATE tableA SET a1 = a2; UPDATE tableA SET a1 = (select a1 from tableB); #T=CSS控制文字...顯示 white-space:nowrap;overflow:hidden;text-overflow:ellipsis; #T=CSS兩行展現 display: inline-block;height: 60px;line-height: 30px;overflow: hidden;width: 287px; #T=CSS三角形 *{ margin:0; padding:0; } .arrow{ position:relative; margin:100px; } .arrow_down{ position:absolute; display:block; border:20px solid #fff; border-color:#fff #2b6bac; border-width:20px 20px 0px 20px; bottom:0px; } .arrow_up{ position:absolute; display:block; border:20px solid #fff; border-color:#fff #e0e0e0; border-width:0px 20px 20px 20px; bottom:0px; } hr{height:50px;} <span class='arrow'> <em class='arrow_down'></em></span> <hr> <span class='arrow'> <em class='arrow_up'></em></span> #T=js-UTC2Date var UTCDateString = "Sat Jun 27 14:36:00 CST 2015"; var date = new Date( Date.parse(UTCDateString) ); alert(date.getFullYear() + "-" + (date.getMonth() +1) ); #T=js-日期比較 function compareDate(oldDate,newDate){ if( oldDate == "" ) return -1; if( newDate == "" ) return -1; var date1=new Date(oldDate.replace(/-/g, "/")); var date2=new Date(newDate.replace(/-/g, "/")); if( date2 < date1){ return 0; }else{ return 1; } } new Date( Date.parse(datas[2]) ); #T=其他未整理 獲取一組radio被選中項的值 var item = $('input[@name=items][@checked]').val(); 獲取select被選中項的文字 var item = $("select[@name=items] option[@selected]").text(); select下拉框的第二個元素為當前選中值 $('#select_id')[0].selectedIndex = 1; radio單選組的第二個元素為當前選中值 $('input[@name=items]').get(1).checked = true; 獲取值： 文字框，文字區域：$("#txt").attr("value")； 多選框checkbox：$("#checkbox_id").attr("value")； 單選組radio： $("input[@type=radio][@checked]").val(); 下拉框select： $('#sel').val(); 控制表單元素： 文字框，文字區域：$("#txt").attr("value",'');//清空內容 $("#txt").attr("value",'11');//填充內容 多選框checkbox： $("#chk1").attr("checked",'');//不打勾 $("#chk2").attr("checked",true);//打勾 if($("#chk1").attr('checked')==undefined) //判斷是否已經打勾 單選組radio： $("input[@type=radio]").attr("checked",'2');//設定value=2的專案為當前選中項 下拉框select： $("#sel").attr("value",'-sel3');//設定value=-sel3的專案為當前選中項 $("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//新增下拉框的option $("#sel").empty()；//清空下拉框 整數或者小數：^[0-9]+\.{0,1}[0-9]{0,2}$ 只能輸入數字："^[0-9]*$"。 只能輸入n位的數字："^\d{n}$"。 只能輸入至少n位的數字："^\d{n,}$"。 只能輸入m~n位的數字：。"^\d{m,n}$" 只能輸入零和非零開頭的數字："^(0|[1-9][0-9]*)$"。 只能輸入有兩位小數的正實數："^[0-9]+(.[0-9]{2})?$"。 只能輸入有1~3位小數的正實數："^[0-9]+(.[0-9]{1,3})?$"。 只能輸入非零的正整數："^\+?[1-9][0-9]*$"。 只能輸入非零的負整數："^\-[1-9][]0-9"*$。 只能輸入長度為3的字元："^.{3}$"。 只能輸入由26個英文字母組成的字串："^[A-Za-z]+$"。 只能輸入由26個大寫英文字母組成的字串："^[A-Z]+$"。 只能輸入由26個小寫英文字母組成的字串："^[a-z]+$"。 只能輸入由數字和26個英文字母組成的字串："^[A-Za-z0-9]+$"。 只能輸入由數字、26個英文字母或者下劃線組成的字串："^\w+$"。 驗證使用者密碼："^[a-zA-Z]\w{5,17}$"正確格式為：以字母開頭，長度在6~18之間，只能包含字元、數字和下劃線。 驗證是否含有^%&',;=?$\"等字元："[^%&',;=?$\x22]+"。 只能輸入漢字："^[\u4e00-\u9fa5]{0,}$" 驗證Email地址："^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"。 驗證InternetURL："^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$"。 驗證電話號碼："^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$"正確格式為："XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX"。 驗證身份證號（15位或18位數字）："^\d{15}|\d{18}$"。 驗證一年的12個月："^(0?[1-9]|1[0-2])$"正確格式為："01"～"09"和"1"～"12"。 驗證一個月的31天："^((0?[1-9])|((1|2)[0-9])|30|31)$"正確格式為；"01"～"09"和"1"～"31"。 匹配中文字元的正則表示式： [\u4e00-\u9fa5] 匹配雙位元組字元(包括漢字在內)：[^\x00-\xff] 應用：計算字串的長度（一個雙位元組字元長度計2，ASCII字元計1） String.prototype.len=function(){return this.replace(/[^\x00-\xff]/g,"aa").length;} 匹配空行的正則表示式：\n[\s| ]*\r 匹配html標籤的正則表示式：<(.*)>(.*)<\/(.*)>|<(.*)\/> 匹配首尾空格的正則表示式：(^\s*)|(\s*$) 應用：javascript中沒有像vbscript那樣的trim函式，我們就可以利用這個表示式來實現，如下： String.prototype.trim = function() { return this.replace(/(^\s*)|(\s*$)/g, ""); } 利用正則表示式分解和轉換IP地址： 下面是利用正則表示式匹配IP地址，並將IP地址轉換成對應數值的Javascript程式： function IP2V(ip) { re=/(\d+)\.(\d+)\.(\d+)\.(\d+)/g //匹配IP地址的正則表示式 if(re.test(ip)) { return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1 } else { throw new Error("Not a valid IP address!") } } 不過上面的程式如果不用正則表示式，而直接用split函式來分解可能更簡單，程式如下： var ip="10.100.20.168" ip=ip.split(".") alert("IP值是："+(ip[0]*255*255*255+ip[1]*255*255+ip[2]*255+ip[3]*1)) 匹配Email地址的正則表示式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* 匹配網址URL的正則表示式：http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)? 利用正則表示式限制網頁表單裡的文字框輸入內容： 用正則表示式限制只能輸入中文：onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))" 用正則表示式限制只能輸入全形字元： onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))" 用正則表示式限制只能輸入數字：onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" 用正則表示式限制只能輸入數字和英文：onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" 匹配中文字元的正則表示式： [\u4e00-\u9fa5] 評註：匹配中文還真是個頭疼的事，有了這個表示式就好辦了 匹配雙位元組字元(包括漢字在內)：[^\x00-\xff] 評註：可以用來計算字串的長度（一個雙位元組字元長度計2，ASCII字元計1） 匹配空白行的正則表示式：\n\s*\r 評註：可以用來刪除空白行 匹配HTML標記的正則表示式：<(\S*?)[^>]*>.*?|<.*? /> 評註：網上流傳的版本太糟糕，上面這個也僅僅能匹配部分，對於複雜的巢狀標記依舊無能為力 匹配首尾空白字元的正則表示式：^\s*|\s*$ 評註：可以用來刪除行首行尾的空白字元(包括空格、製表符、換頁符等等)，非常有用的表示式 匹配Email地址的正則表示式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* 評註：表單驗證時很實用 匹配網址URL的正則表示式：[a-zA-z]+://[^\s]* 評註：網上流傳的版本功能很有限，上面這個基本可以滿足需求 匹配帳號是否合法(字母開頭，允許5-16位元組，允許字母數字下劃線)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$ 評註：表單驗證時很實用 匹配國內電話號碼：\d{3}-\d{8}|\d{4}-\d{7} 評註：匹配形式如 0511-4405222 或 021-87888822 匹配騰訊QQ號：[1-9][0-9]{4,} 評註：騰訊QQ號從10000開始 匹配中國郵政編碼：[1-9]\d{5}(?!\d) 評註：中國郵政編碼為6位數字 匹配身份證：\d{15}|\d{18} 評註：中國的身份證為15位或18位 匹配ip地址：\d+\.\d+\.\d+\.\d+ 評註：提取ip地址時有用 匹配特定數字： ^[1-9]\d*$ //匹配正整數 ^-[1-9]\d*$ //匹配負整數 ^-?[1-9]\d*$ //匹配整數 ^[1-9]\d*|0$ //匹配非負整數（正整數 + 0） ^-[1-9]\d*|0$ //匹配非正整數（負整數 + 0） ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ //匹配正浮點數 ^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ //匹配負浮點數 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$ //匹配浮點數 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$ //匹配非負浮點數（正浮點數 + 0） ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$ //匹配非正浮點數（負浮點數 + 0） 評註：處理大量資料時有用，具體應用時注意修正 匹配特定字串： ^[A-Za-z]+$ //匹配由26個英文字母組成的字串 ^[A-Z]+$ //匹配由26個英文字母的大寫組成的字串 ^[a-z]+$ //匹配由26個英文字母的小寫組成的字串 ^[A-Za-z0-9]+$ //匹配由數字和26個英文字母組成的字串 ^\w+$ //匹配由數字、26個英文字母或者下劃線組成的字串 評註：最基本也是最常用的一些表示式 整理出來的一些常用的正則表示式所屬分類: JScript (三) Email : /^\w+([-+.]\w+)*@\w+([-.]\\w+)*\.\w+([-.]\w+)*$/ isEmail1 : /^\w+([\.\-]\w+)*\@\w+([\.\-]\w+)*\.\w+$/; isEmail2 : /^.*@[^_]*$/; Phone : /^((\(\d{3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}$/ Mobile : /^((\(\d{3}\))|(\d{3}\-))?13\d{9}$/ Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/ IdCard : /^\d{15}(\d{2}[A-Za-z0-9])?$/ Currency : /^\d+(\.\d+)?$/ Number : /^\d+$/ Code : /^[1-9]\d{5}$/ QQ : /^[1-9]\d{4,8}$/ Integer : /^[-\+]?\d+$/ Double : /^[-\+]?\d+(\.\d+)?$/ English : /^[A-Za-z]+$/ Chinese : /^[\u0391-\uFFE5]+$/ UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\[email protected]#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/ PassWord :^[\\w]{6,12}$ ZipCode : ^[\\d]{6} /^(\+\d+ )?(\(\d+\) )?[\d ]+$/; //這個是國際通用的電話號碼判斷 /^(1[0-2]\d|\d{1,2})$/; //這個是年齡的判斷 /^\d+\.\d{2}$/; //這個是判斷輸入的是否為貨幣值 <!-- IP地址有效性驗證函式--> <script language=javascript runat=server> ip_ip = '(25[0-5]|2[0-4]\\d|1\\d\\d|\\d\\d|\\d)'; ip_ipdot = ip + '\\.'; isIPaddress = new RegExp('^'+ip_ipdot+ip_ipdot+ipdot+ip_ip+'$'); </script> 應用：計算字串的長度（一個雙位元組字元長度計2，ASCII字元計1） String.prototype.len=function(){return this.replace([^\x00-\xff]/g,"aa").length;} 應用：javascript中沒有像vbscript那樣的trim函式，我們就可以利用這個表示式來實現，如下： String.prototype.trim = function() { return this.replace(/(^\s*)|(\s*$)/g, ""); } 匹配空行的正則表示式：\n[\s| ]*\r 匹配HTML標記的正則表示式：/<(.*)>.*<\/\1>|<(.*) \/>/ 匹配首尾空格的正則表示式：(^\s*)|(\s*$) 匹配Email地址的正則表示式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* 匹配網址URL的正則表示式：http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)? ^\d+$ //匹配非負整數（正整數 + 0） ^[0-9]*[1-9][0-9]*$ //匹配正整數 ^((-\d+)|(0+))$ //匹配非正整數（負整數 + 0） ^-[0-9]*[1-9][0-9]*$ //匹配負整數 ^-?\d+$ //匹配整數 ^\d+(\.\d+)?$ //匹配非負浮點數（正浮點數 + 0） ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$ //匹配正浮點數 ^((-\d+(\.\d+)?)|(0+(\.0+)?))$ //匹配非正浮點數（負浮點數 + 0） ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$ //匹配負浮點數 ^(-?\d+)(\.\d+)?$