jQuery笔记

最新推荐文章于 2024-01-20 21:49:50 发布
最新推荐文章于 2024-01-20 21:49:50 发布
阅读量386 收藏
点赞数
分类专栏： jQuery学习

1.被下面标签包裹的内容如果被点击，就会触发这个showfiexd()函数:
<div class="ZT_container"  οnclick="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>动态控制错误显示样式:

function showErrMsg(id,msg){
 if(msg!=null && msg!=""){
  var showId="#"+id;
  var errlen=msg.length;
  if(errlen>20){
   $(showId).siblings('.pa_error').css('line-height', '16px');
  }else{
   $(showId).siblings('.pa_error').css('line-height', '28px');
  }
  $(showId).siblings('.pa_error').show().html(msg);
 }
}

<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>去掉重复的单词

<html>
<body>

<script type="text/javascript">
var ss = "Is is the cost of of gasoline going up up?.\n";
var re = /\b([a-z]+) \1\b/gim;   
var rv = ss.replace(re,"$1");    
alert(rv);
</script>

</body>
</html>

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

<!DOCTYPE html>
<html>
<body>

<script>
var str = 'hello beijing';
var reg = /i/;//不带"^"和"$"，只会匹配字符串的一部分
var reg1 = /^hello beijing$/;//带有"^"和"$"，则是当字符串完全匹配正则表达式的时候
if(reg.test(str)){
     alert("123");
}

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 οnclick="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实现下面的跳转

Simon188
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery笔记
01-24
jquery笔记，多年前端开发积累。
JQuery笔记
01-09
JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记
ajax执行先后顺序
wuyongde0922的专栏
12-19 7598
funciton A(){ $.ajax({ url: "index.html",//异步请求路径 async：false,//默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 success: function(){//回调函数 }}); B(); } 写代
jquery 笔记
weixin_69820837的博客
11-30 822
(function () { /*使用dom对象获取id是myDiv的标签 获取标签体:dom对象.innerHTML 设置标签体:dom对象.innerHTML = 新的标签体;//jQuery对象不能使用dom对象的属性和方法 //2.jQuery对象-->dom对象：脱马甲，取出jQuery数组中的dom对象 var d1 = $myDivEle[0];获取A元素的同级B元素: $("A").siblings("B")获取所有的兄弟。获得属性名 以值 結尾 元素： $("A[属性名$=值]")
jQuery 笔记
奥特蛋的博客
06-17 2295
jQuery 文章目录jQuery@[toc]第一章 初识jQuery一、jQuery简介1.什么是jQuery？2.常见的javascript库二、jQuery的特性jQuery能做以下事情：三、jQuery介绍1.jQuery的使用方式1.下载后引入2.编写简单的 HelloWorl3.jQuery函数1）选择器（字符串）2）DOM对象（即Node实例）3）HTML文本字符串2）DOM对象（即Node实例）3）HTML文本字符串4）一个匿名函数4.jQuery对象四、jQuery选择器1.基本选择器：
jQuery学习笔记
深思纵似丁香结，一展芭蕉寸凡心。
01-20 1016
jQuery学习笔记 JQuery入门-笔记部分 jQuery概述 jQuery是js库 库：相当于java的工具类，库是存放东西的，jQuery是存放js代码的地方，放的是用js代码写的函数 jquery是为了简化js的操作 jquery的安装 <script src="js/jquery-3.4.1.js" type="text/javascript"></script> 需要（在前面）引入jquery的核心js文件，不然会报错（$未定义）! jquery核心 $ 符号在j
jquery笔记回顾
weixin_39708283的博客
03-13 113
jquery 1.jquery概念 js框架封装的原生的js代码 2.jquery版本区别及使用 jquery-xxx.js 有排版 体积大 jquery-xxx.min.js 无排版 体积小 3.jquery与原生js对象进行互转 jquery对象转js对象 加$(原生js对象) js对象转jquery对象 原生js对象[索引] 原生js对象.get(索引) 4....
Jquery笔记
XUN__MLF的博客
01-19 288
JQuery对象与DOM对象的区别 JQuery对象和DOM的属性方法不互通 基本选择器 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document&lt......
jquery 笔记 事件
10-28
写js已经有很久了，但是对js的详细了解还是很肤浅的，这几天在看jquery，在其中有一些新的发现和体会，记录下来
基于STM32控制遥控车的蓝牙应用程序
06-27
基于STM32控制遥控车的蓝牙应用程序
Memcached 1.2.4 版本源码包
06-27
粤嵌gec6818开发板项目Memcached是一款高效分布式内存缓存解决方案，专为加速动态应用程序和减轻数据库压力而设计。它诞生于Danga Interactive，旨在增强LiveJournal.com的性能。面对该网站每秒数千次的动态页面请求和超过七百万的用户群，Memcached成功实现了数据库负载的显著减少，优化了资源利用，并确保了更快的数据访问速度。。内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。
软件项目开发全过程文档资料.zip
06-27
软件项目开发全过程文档资料.zip
Java基础上机题-分类整理版.doc
06-27
Java基础上机题-分类整理版
Java-JDBC学习教程-由浅入深.doc
最新发布
06-27
Java-JDBC学习教程-由浅入深
《Java基础入门》-课后习题.doc
06-27
《Java基础入门》-课后习题.doc

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值