JQUERY小技巧

時間 2019-11-20

標籤 jquery 技巧欄目 JQuery 简体版

原文原文鏈接

使用任何的元字符做爲名稱的文本部分，它必須被兩個反斜槓轉義：\\javascript

<span id="foo[bar]"></span>
$("#foo\\[bar\\]");

jquery標籤使用css

$("*")匹配全部元素,多用於結合上下文來搜索。

$("form input")在給定的祖先元素下匹配全部的後代元素

$("form > input")在給定的父元素下匹配全部的子元素

$("label + input")匹配全部跟在 label 後面的 input 元素

$("form ~ input")找到全部與表單同輩的 input 元素

$('li:first'); 獲取匹配的第一個元素，last最後一個元素

$("tr:even")匹配全部索引值爲偶數的元素，從 0 開始計數

$("tr:odd")匹配全部索引值爲奇數的元素，從 0 開始計數

$("tr:eq(1)") 匹配一個給定索引值的元素,0開始

$("tr:gt(0)") 匹配全部大於給定索引值的元素，$("tr:lt(2)")小於

<h1>Header 1</h1>$(":header")匹配如 h1, h2, h3之類的標題元素

input:focus{ } 選擇得到焦點的輸入字段，並設置其樣式

$(":root")選擇該文檔的根元素，即<html>元素。

$("div:contains('John')") 查找全部包含 "John" 的 div 元素

$("td:empty")查找全部不包含子元素或者文本的空元素

$("div[id]") 查找全部含有 id 屬性的 div 元素

$("input[name='newsletter']") 查找全部 name 屬性是 newsletter 的 input 元素

$("input[name^='news']") 查找全部 name 以 'news' 開始的 input 元素

$("input[name$='letter']") 查找全部 name 以 'letter' 結尾的 input 元素

$("input[name*='man']") 查找全部 name 包含 'man' 的 input 元素

　$("#fOutSystemSign").find("option:selected").value();查找下拉列表選中值html

$("input:not(:checked)") 查找全部未選中的 input 元素

　$("input:radio:checked").val();前端

$('input[@name="sex"][checked]').val();java

$('input[name="sex"]').filter(':checked').val();jquery

$("input[name='sex'][value=′1′]").attr("checked", true);設置選中web

$("input[name=sex]:eq(0)").attr("checked", ′true′);ajax

　$('input[name="fSex"]').each(function() {判斷是否被選中，並取valuechrome

if($(this).attr("checked")) {json

sex = $(this).val();

}

});

　$("tr[id^='tr_']").css("display","");選中以..開頭的對象,<tr id="tr_prompt"></tr>

$.each($("input[name=^'classify_']:checked").not("input[name=^'classify_']:disabled"),function(i,o){
　　var idVal = $(o).attr("id");
　　var nameVal = $(o).attr("name");
　　 var classIfyName = $(o).val();
　　var selectIdVal = nameVal.replace(/classify/, "studyType");
　　if(idVal=='yxzcbxk_48'){
　　　　studyIDStr+=","+$("#hiddenCode").val();
　　　　chooseHour += 48;
　　}else{
　　　　var sth = $("#"+selectIdVal).val();
　　　　var arr = sth.split("@");
　　　　if(sth==''){
　　　　　　$.jBox.alert("專業"+classIfyName+"，沒有選擇學習類型",'提示',{top: '45%', closed:function(){}});
　　　　　　flag = false;
　　　　　　return false;
　　　　}else{
　　　　　　studyIDStr +=","+arr[0];
　　　　　　chooseHour +=parseInt(arr[1],10);
　　　　　　choosedHour += parseInt(arr[1],10);
　　　　}
　　}
});

注意在不一樣位置調用同一方法傳參的格式

<input onclick=」search(‘1’,’query’)」 />
$(function(){search(1,query);})
Html=」<select id=’’ onclick=’see(\」my\」)’></select>」;//使用轉義字符

url傳參中文亂碼（在傳參頁面處理）

function goSearchFullName(){
    var fullName = $("#fullName").val();//機構名稱註冊輸入文本
    fullName = encodeURIComponent(fullName);
    //跳轉到已註冊機構列表顯示頁面,當前窗口：_self、_search，新窗口：_blank
　　 window.open("http://jxjymember.cdeledu.com/cdel_jxjy_member/groupInfo/view.do?op=goSearchFullName&fullName=" + fullName, "_self");
} }

滾動顯示

//使用html標籤
<MARQUEE contenteditable="true" hspace="0" vspace="0" scrollAmount=3 direction=up onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;"
onmouseover="this.stop();" onmouseout="this.start();">
　　滾動內容
</MARQUEE>

//動畫效果
<div id='payScrollObj' >
　　<ul><li>111</li><li>222</li><li>333</li></ul>
</div>

function payScroll(){
    $("#payScrollObj ul").animate({"margin-top":"0px"},function(){
    　　$("#payScrollObj ul li:eq(0)").appendTo($("#payScrollObj ul"));
    　　$("#payScrollObj ul").css({"margin-top":0});
    });
}

//js實現：示例在文件夾中

判斷瀏覽器，生成二維碼

<script type="text/javascript" src="js/jquery.qrcode.js'/>"></script>
<script type="text/javascript" src="js/qrcode.js'/>"></script>

<div style="top: 275px; left: 600px;font-size: 15px;"> 
　　<div id="qrcode" ></div>
</div>

<script>
    $(document).ready(function(){
       var userID="${userInfo.ID}";//用戶ID
       var studyID="${userInfoBatchinfo.studyID}";//學習類型ID
       var selectStudyTypeID="${selectStudyType.id}";
       var outerSystemSign = "guangdongjlcyry";
       var certDate = utf16to8("${certDate}");//發證日期

       //判斷瀏覽器類型
       var ua = navigator.userAgent;
       ua = ua.toLowerCase();
       var match = /(webkit)[ \/]([\w.]+)/.exec(ua) || /(opera)(?:.*version)?[ \/]([\w.]+)/.exec(ua)|| /(msie) ([\w.]+)/.exec(ua) 
　　　　　　　　　　  ||!/compatible/.test(ua) && /(mozilla)(?:.*?rv:([\w.]+))?/.exec(ua)|| [];
       //生成二維碼
       if(match[1]=="webkit"){//safari or chrome
           $('#qrcode').qrcode({width:90,height:90,
　　　　　　　　correctLevel:0,foreground:"#3380cc",       
　　　　　　　　text:"http://jxjymember.cdeledu.com/cdel_jxjy_member/selectStudyType/view.do?userID="+userID
                  +"&studyID="+studyID
                  +"&selectStudyTypeID="+selectStudyTypeID
                  +"&outerSystemSign="+outerSystemSign
                  +"&certDate="+certDate
                  +"&op=codeInfomation"});
       }else{    
　　　　　　$('#qrcode').qrcode({width:90,height:90,
　　　　　　　　correctLevel:0,foreground:"#3380cc",render:"table",
           　 text:"http://jxjymember.cdeledu.com/cdel_jxjy_member/selectStudyType/view.do?userID="+userID
           　　　　+"&studyID="+studyID
           　　　　+"&selectStudyTypeID="+selectStudyTypeID
           　　　　+"&outerSystemSign="+outerSystemSign
           　　　　+"&certDate="+certDate
           　　　　+"&op=codeInfomation"});
        }
    });

    //把字符串轉換成UTF-8
    function utf16to8(str) {  
        var out, i, len, c;  
        out = "";  
        len = str.length;  
        for(i = 0; i < len; i++) {  
        　　c = str.charCodeAt(i);   
        　　if ((c >= 0x0001) && (c <= 0x007F)) {  
            　　out += str.charAt(i);  
        　　} else if (c > 0x07FF) {  
            　　out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));  
            　　out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));  
            　　out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
        　　} else {  
            　　out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));  
            　　out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
        　　}  
        }  
        return out;  
    } 
</script>

獲取鼠標位置顯示div

$('#failLogin').hover(function(){
　　$("#loginText").css("display","block")
                  .css("top",(event.clientY+25)+"px")
                  .css("left",(event.clientX-30)+"px")
                  .css("position","absolute");
});

保留小數後2位

// 強制保留2位小數，不足補全   
function toDecimal2(x) {    
　　var f = parseFloat(x);    
　　if (isNaN(f)) {    return false;    }    
　　var f = Math.round(x*100)/100;    
　　var s = f.toString();    
　　var rs = s.indexOf('.');    
　　if (rs < 0) {    rs = s.length;    s += '.';    }    
　　while (s.length <= rs + 2) {    s += '0';    }    
　　return s;    
}    

// toFixed()
<script>
　　var num=22.127456;
　　alert( num.toFixed(2));
　　alert(parseFloat(50).toFixed(2);); //50.00
</script>

// substring
function get(){
    var s = 22.127456 + "";
    var str = s.substring(0,s.indexOf(".") + 3);
    alert(str);
}

// 正則
<script type="text/javascript">
　　onload = function(){
    　　var a = "23.456322";
    　　var aNew;
    　　var re = /([0-9]+\.[0-9]{2})[0-9]*/;
    　　aNew = a.replace(re,"$1");
    　　alert(aNew);
}
</script>

// (…*100)/100
<script>
　　var num=22.127456;
　　alert( Math.round(num*100)/100);
</script>

去掉拼接後的最後一個‘，’

payBillIDStr += $(this).val()+',';
payBillIDStr=payBillIDStr.substr(0,payBillIDStr.lastIndexOf(","));

防止重複提交

$("#addSubmit").on("click", function () {
　　$(this).attr("disabled","disabled");
　　//防止重複提交
　　var checkSubmitFlag =layer.msg('正在保存，請稍等...', {
　　　　icon: 16,
　　　　shade: 0.4,
　　　　time:false //取消自動關閉
　　});
　　var options = {
　　　　url: _ctx + "/pro/proproduct/add.do",
　　　　type: "post",
　　　　resetForm: true,// 提交後重置表單
　　　　dataType: 'json',
　　　　data:{
　　　　　　minidaysnum : $("#minidaysnum").val()
　　　　},
　　　　beforeSubmit: function (formData, jqForm, options) {
　　　　　　//重置驗證
　　　　　　jqForm.data("bootstrapValidator").resetForm();
　　　　　　// 手動觸發驗證
　　　　　　var bootstrapValidator = jqForm.data('bootstrapValidator');
　　　　　　bootstrapValidator.validate();
　　　　　　if (!bootstrapValidator.isValid()) {
　　　　　　　　return false;
　　　　　　} 
　　　　　　formData.push({name:"templateid",value: $("#templateid").val()})
　　　　},
　　　　success: function (data, statusText) {
　　　　　　if (data != undefined) {
　　　　　　　　if (data.success) {
　　　　　　　　　　layer.close(checkSubmitFlag);//手動關閉
　　　　　　　　　　layer.msg('添加成功!', {icon: 1});
　　　　　　　　　　$(this).removeAttr("disabled");
　　　　　　　　　　loadUrl('/admin/system/proproductlist')
　　　　　　　　} else {
　　　　　　　　　　layer.msg(data.msg, {icon: 2});
　　　　　　　　}
　　　　　　}
　　　　}
　　};
　　$("#form").ajaxSubmit(options);
});

獲取驗證碼，顯示倒計時

function update_p(num,t) {
　　if(num == t) {
　　　　$("#getCode").text("從新發送");
　　　　$("#getCode").attr("disabled",false);
　　}else {
　　　　printnr = t-num;
　　　　// $("#getCode").css("font-size","12px");
　　　　$("#getCode").text(printnr +"秒從新發送");
　　}
}
function showtime(t) {
　　　　var phone = $("#phone").val();
　　　　$.ajax({
　　　　　　type: "post",
　　　　　　url: _ctx + "/app/interface/sendCode",
　　　　　　async: false,
　　　　　　cache: false,
　　　　　　data: {telephone: phone},
　　　　　　dataType: "json",
　　　　　　success: function (data) {
　　　　　　　　if (data != undefined) {
　　　　　　　　　　if (data.success) {
　　　　　　　　　　　　$("#getCode").attr("disabled", true);//獲取驗證碼按鈕不可編輯
　　　　　　　　　　　　for (i = 1; i <= t; i++) {
　　　　　　　　　　　　　　window.setTimeout("update_p(" + i + "," + t + ")", i * 1000);
　　　　　　　　　　　　}
　　　　　　　　　　　　popTxt("發送成功");
　　　　　　　　　　} else {
　　　　　　　　　　　　popTxt("發送失敗，請稍後再試");
　　　　　　　　　　}
　　　　　　　　}
　　　　　　},
　　　　　　error: function (e) {}
　　　　});
}

遍歷後臺數組參數

後臺：
List list = selectStudyTypeFacade.getStudyTypeList(selectStudyType);
JSONArray json = JSONArray.fromObject(list);
request.setAttribute("json ", json.toString());
前端：
$(document).ready(function(){
     var json = "${json}";
     for(var i=0,l=json.length;i<l;i++){
        for(var key in json[i]){    
            if(key=="studyID"){
            　　alert(key+':'+json[i][key]);
            }
            if(key=="studyName"){
            　　alert(key+':'+json[i][key]);
            }
        }
     }
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。