JQUERY小技巧

使用任何的元字符作为名称的文本部分, 它必须被两个反斜杠转义:\

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

 jquery标签使用

$("*")匹配所有元素,多用于结合上下文来搜索。

$("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();查找下拉列表选中值

$("input:not(:checked)") 查找所有未选中的 input 元素

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

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

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

 

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

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

 

 $('input[name="fSex"]').each(function() {判断是否被选中,并取value

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

       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({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({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]);
            }
        }
     }
});

 

 

 

 

 

原文地址:https://www.cnblogs.com/whatarewords/p/10716686.html