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]);
            }
        }
     }
});
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程