jQuery笔记

最新推荐文章于 2025-05-17 16:00:22 发布

Simon188

最新推荐文章于 2025-05-17 16:00:22 发布

阅读量419

点赞数

分类专栏： jQuery学习

jQuery学习专栏收录该内容

20 篇文章

订阅专栏

1.被下面标签包裹的内容如果被点击，就会触发这个showfiexd()函数:
<div class="ZT_container" onclick="showfiexd();">
2.jQuery常用使用技巧:
<1>$(".name").css('display','block')控制某个class属性为"name"的标签的样式;
<2>window.location.href="../loan/index.shtml"控制当前页的跳转;
<3>IE浏览器版本的控制
if($.browser.msie && $.browser.version == '6.0'){
  alert("手机注册暂不支持IE6浏览器，请升级到IE8及以上版本");
  window.location.href="../loan/index.shtml";
}
<4> //控制点击以及blur触发函数
$("#huancode1").click(function(){
  getFcmmValidCode('phoneValidateImg', 'phoneValidCodeId',imgUrl);
});
$("#reltelInpt").blur(function(event) {
  check_reltelInpt();
  //validate_phoneNo();
});
<5>     //控制键盘按键按下触发的函数，$(".qiangruo").eq(1)表示选择第二个class属性为"qiangruo"
//元素
$("#pwd").keydown(function(event) {
  var pwd=$(this).val();//选取当前的元素
  if (pwd.length>3){
   $(".qiangruo").eq(1).addClass('qiangruolan');
  }else{
   $(".qiangruo").eq(1).removeClass('qiangruolan');
  }
  if (pwd.length>6){
   $(".qiangruo").eq(2).addClass('qianghong');
  }else{
   $(".qiangruo").eq(2).removeClass('qianghong');
  }
});
<6> Ajax的方式之一:
$.getJSON(url2, function(res){
  if (res.resultCode == 'Y') {
   $('#ecus').val(res.evercookie);
  }
});
  $.ajax({
   type : 'get',
   url : checkImgCodeUrl,
   dataType : 'json',
   async: false,
   success : function(data) {
    if(data.status == 'fail') {
     $("#phoneValidCodeHave").val("false");
     showErrMsg("phoneValidCode",data.msg);
     var imgUrl=pinganoneUrl+'/pinganone/pa/paic/common/urlvcode.do';
     getFcmmValidCode('phoneValidateImg', 'phoneValidCodeId',imgUrl);
    }else{
     $("#phoneValidCodeHave").val("true");
     $("#phoneValidCode").siblings('.pa_error').hide();
     $("#phoneValidCode").siblings('.pa_success_error').hide();
    }
   }
  });

<7>同时校验非空以及输入是否正确的判断(并注意下有关正则表达式的使用："字符串.match(/^正则表达式$/)"或"/^正则表达式$/.test(字符串)"):
//图片验证码验证
function validate_code(){
var code=$("#phoneValidCode").val();
$("#phoneValidCode").siblings('.pa_error').hide();
$("#phoneValidCode").siblings('.pa_success_error').hide();
if (code==null||code==""){
  showErrMsg("phoneValidCode","请输入图片验证码");
  return false;
}else if (!code.match(/^[0-9a-zA-Z]{4}$/)){
  showErrMsg("phoneValidCode","图片验证码错误");
  return false;
}else{
  return true;
}
}

<8>密码的验证参考:
//验证密码
function validate_pwd(){
var value=$("#pwd").val();
var reltelInpt=$("#reltelInpt").val();
$("#pwd").siblings('.pa_error').hide();
$("#pwd").siblings('.pa_success_error').hide();

    var regex1 = /^[a-zA-Z0-9]{6,16}$/;
    var regex2 = /^[a-zA-Z]{6,16}$/;
    var regex3 = /([0-9])\1{2}/;
    var regex4 = /(?:(?:0(?=1)|1(?=2)|2(?=3)|3(?=4)|4(?=5)|5(?=6)|6(?=7)|7(?=8)|8(?=9)){3}|(?:9(?=8)|8(?=7)|7(?=6)|6(?=5)|5(?=4)|4(?=3)|3(?=2)|2(?=1)|1(?=0)){3})\d/; // 123454321
    var regex5 = /^[0-9]{6,16}$/;
    var flag = false;
    if (value.length<6 ) {
    showErrMsg("pwd","密码不能少于6位，请您重新设置。");
  return false;
    }
    if (value.length>16 ) {
    showErrMsg("pwd","密码不能超过16位，请您重新设置。");
  return false;
    }
    if (!regex1.test(value)) {
    showErrMsg("pwd","密码不能含有特殊符号和空格，请您重新设置。");
  return false;
    }
    if (regex2.test(value)) {
    showErrMsg("pwd","请不要设置纯字母的密码，请您重新设置。");
  return false;
    }
    if (reltelInpt != '' && reltelInpt != null && value.toLowerCase()===reltelInpt.toLowerCase()) {
    showErrMsg("pwd","请不要将自己的手机号码作为密码，请您重新设置。");
  return false;
    }
    if (regex5.test(value)) {
        flag = true;
     }
    if (flag && regex3.test(value)) {
    showErrMsg("pwd","密码中同一数字不能出现连续3次及以上重复，请您重新设置。");
  return false;
    }
    if (flag && regex4.test(value)) {
    showErrMsg("pwd","密码中不能出现连续4位及以上数字升、降序排列，请您重新设置。");
  return false;
    }
    if (flag && !CountChar(value,2,3)) {
    showErrMsg("pwd","密码中不能出现2个数字连续3次及以上重复，请您重新设置。");
  return false;
    }
    if (flag && !CountChar(value,3,2)) {
    showErrMsg("pwd","密码中不能出现3个数字的连续2次及以上重复，请您重新设置。");
  return false;
    }
    if (flag && reltelInpt != '' && reltelInpt != null && (reltelInpt.substring(0,6) === value || reltelInpt.substring(5,11) === value || reltelInpt === value)) {
    showErrMsg("pwd","密码不能是电话号码前、后6位，请您重新设置。");
  return false;
    }
    return true;
}
<9>动态控制错误显示样式:

<10> Ajax的封装：
function getFcmmValidCode(imgId, codeId, url, appId) {
$.ajax( {
  url : url,
  type : "get",
  asysc : false,
  dataType : 'jsonp',
  jsonp : 'callback',
  data :{appId : appId},
  success : function(data) {
   $("#" + imgId).attr("src", data.img);
   $("#" + codeId).attr("name", "validCodeId");
   $("#" + codeId).attr("value", data.id);
  }
});
}

<11>
取页面中第二个class属性为inp的内容：
$('.inp:eq(1)').html()等价于$('.inp').eq(1).html();
取页面中第二个class属性为inp下面的第一个span标签下面的内容:
$('.inp:eq(1) >span:eq(0)').html()

<12>去掉重复的单词

</body>
</html>

<13>"^"和"$"的使用方法：

<!DOCTYPE html>
<html>
<body>

if(reg1.test(str)){
alert("345");
}
</script>

</body>
</html>

<14>$("#account_province_zz").find("li").each(function(index,element){执行操作})

这个是遍历li元素数组:
$.ajax({
    type:'post',
    url:'/user/mm.do',
    contentType: "application/x-www-form-urlencoded;charset=UTF-8",
    dataType : 'json',
    success:function(response){
     if(response.error!=null&&response.error=='1'){
      window.location.href = '/user/login.html';
     }else if(response.error!=null&&response.error=='2'){
      alert("您还没有完善基本信息，请完善！");
     }else if(response.errorCode!=null&&response.errorCode=='555'){
      alert("系统错误，请重试！");
     }else{
      if(response && response.accountAddrProvice){
       $("#account_province_zz").find("li").each(function(index,element){
        if($(element).find("span").attr("value")==response.accountAddrProvice){
         $(element).parents("#account_province_zz").find("#accountAddressProvince").attr

("select-val",response.accountAddrProvice).val($(element).find("span").text());
codeRecode=commonCity.getData

('/do/rsploan/basetable/base_city/'+response.accountAddrProvice, response.accountAddrCity, $("#accountAddressCity"));
commonCity.getData('/do/rsploan/basetable/base_county/'+codeRecode,

response.accountAddrArea, $("#accountAddressArea"));
        }
       });
      }
     }
    },

error:function(){

alert(error);

}

})

<15>
var $addestate = $(".liveInfo input[value='+添加']");
$addestate.live({click:function(){alert("弹一下");}}等价于$addestate.live("click",function(){alert("弹一下")});
<16>表示删除某个class为'tr_bo'节点:
$(this).parents(".tr_bo").remove();

<17>

$.ajax( {
  url : url,
  type : "get",
  asysc : false,
  dataType : 'jsonp',
  jsonp : 'callback',
  data :{appId : appId},
  success : function(data) {
   $("#" + imgId).attr("src", data.img);
   $("#" + codeId).attr("name", "validCodeId");
   $("#" + codeId).attr("value", data.id);
  }
});

它有一个参数async表示异步，值为true或false，true为默认值，为false的话，则没有异步操作，必须等待该ajax执行结束后才会继续执行他后面的操作，为true的话，则是异步操作，相当于开启了两个线程，一个是该ajax的线程，一个是该ajax后面的操作，这两个线程相互抢占性的执行操作！

<18>
reload 方法，该方法强迫浏览器刷新当前页面。
语法：location.reload([bForceGet])参数： bForceGet，可选参数，默认为 false，从客户端缓存里取当前页。 true, 则以GET 方式，从服务端取最新的页面, 相当于客户端

点击 F5("刷新")
onbeforeunload:这个事件貌似是离开页面前所要执行的事件；
<19>下面的这个是获取URL中的指定参数的参数值,“[^&]”代表的是非"&"符号，window.location.search获取URL中"?"后面的参数串(包含"?")
function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null){
        return unescape(r[2]);
    }else{
    return "";
    }
}

<20>浏览器cookie使用
<script>
//如下cookie数据
document.cookie="userid=828";
document.cookie="username=luck";
//获取cookie字符串
var strcookie = document.cookie;
(值类似为"userid=828;username=luck")
//将cookie分割
var arrcookie = strcookie .split(";");
var userid ,username;
//迭代获取相应值
for(var i = 0;i<arrcookie.length;i++){
var arr = arrcookie[i].split("=");
if("userid"=arr[0]){
userid = arr[1]
}
if("username"=arr[0]){
username= arr[1]
}
}
</script>

<21>

jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
面的例子把所有 p 元素的背景颜色更改为红色：
$("p").css("background-color","red");

<22>查一下:
<li><span onclick="document.querySelector('#ruleWrap').style.display='block';">活动规则

</span></li>

<23>
//获取URL参数
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}

//截取字符串
var url = window.location.href;
function getStr(url,str){
    var str1 = url.indexOf(str+"=");
    var len = str.length;
    var get_str = "";
    if (str1 != -1) {
  get_str = url.substring(str1);
     var str2 = get_str.indexOf("&");
     if (str2 != -1) {
     get_str = get_str.substring(len+1, str2);
     }else{
      get_str = get_str.substring(len+1);
    }
    }
    //return get_str;//不转码
    return unescape(get_str);//转码
//貌似页面间传递是要使用escape()加密，往后台传值的时候，要用unescape解密;

<24>
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$.extend({
   min: function(a, b){return a < b?a:b; },
   max: function(a, b){return a > b?a:b; }
});   //为jquery扩展了min,max两个方法使用扩展的方法（通过“$.方法名”调用）：
alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));
</script>
</head>
<body>

</body>
</html>
}

<25>
script脚本文件的引入顺序，影响函数加载，

被调用的函数的文件要放在前面加载；

<26>

window.location.href 和self.location的区别

答：

你从字面上就可以理解到 window 指的是当前窗口  而 self 指的是自己  在HTML 中 由于页面可以镶嵌页面 所以这2个就有了 区别  比如说  我有个页面A.HTML 里面嵌套了一个B.HTML 在A中使用 window.location 跳转 就把整个 页面跳转了  而在 A中镶嵌B页面的位置 使用了 self跳转  就只是把B界面跳转了  A页面其他地方没有变化  就拿  很简单的  百度搜索页面来比  你输入不同的搜索内容 变化的只是下面的内容  而搜索栏本身没有变化  就是self实现下面的跳转