CDN知识点Java Community

jQuery笔记总结篇

2016-10-20  本文已影响6199人  程序员poetry

原文链接 http://blog.poetries.top/2016/10/20/review-jQuery

首先，来了解一下jQuery学习的整体思路

jQuery系统学习篇 Jquery笔记

第一节 jQuery初步认知

jQuery概述
<script type=“text/javascript” src=“”></script>
<script type=“text/javascript”>
   $(function(){
       alert(“jQuery 你好!”);
   });
</script>
window.onload $(document).ready()
执行时机 必须等网页中所有内容加载完后(图片)才执行 网页中的DOM结构绘制完后就执行,可能DOM元素相关的东西并没有加载完
编写个数 不能同时执行多个 能同时执行多个
简化写法 无 $(document).ready(function(){ //.. });<br /><br />推荐写法：$(function(){ });
初步了解JQuery 
<script type="text/javascript"></script>
写第一个JQUery案例
<script type=“text/javascript” src=“”></script>
<script type=“text/javascript”>
    $(function(){
        alert(“jQuery 你好!”);
    });
</script>

function　$(id){
        return document.getElementById(id);
    }

<div id="a" class="aa"></div>
<div id="b" class="aa"></div>
<div id="c" class="aa"></div>
alert(document.getElementById("id") == $("#aa"));//返回结果为false
alert(document.getElementById("id") == $("#aa").get(0));//返回true

$(传入的原生对象);
//原生对象转化成jQuery对象
var nav = document.getElementById("nav");
var $nav = $(nav);
alert($nav.get(0) == nav);//true
代理内存结构1 代理内存结构2

第二节 选择器

选择器 语法 描述
标签选择器 E{css规则} 以文档元素作为选择符
ID选择器 #ID{css规则} ID作为选择符
类选择器 E.className{css规则} class作为选择符
群组选择器 E1,E2,E3{css规则} 多个选择符应用同样的样式
后代选择器 E F{css规则} 元素E的任意后代元素F
过滤选择器
选择器 说明 返回
:first 匹配找到的第1个元素 单个元素
:last 匹配找到的最后一个元素 单个元素
:eq 匹配一个给定索引值的元素 单个元素
:even 匹配所有索引值为偶数的元素 集合元素
: odd 匹配所有索引值为奇数的元素 集合元素
:gt(index) 匹配所有大于给定索引值的元素 集合元素
:lt(index) 匹配所有小于给定索引值的元素 集合元素
:not 去除所有与给定选择器匹配的元素 集合元素
:animated 选取当前正在执行动画的所有元素 集合元素
focus 选取当前正在获取焦点的元素 集合元素
选择器 描述 返回
:contains(text) 选取含有文本内容为text的元素 集合元素
:empty 选取不包含子元素获取文本的空元素 集合元素
:has(selector) 选择含有选择器所匹配的元素的元素 集合元素
:parent 选取含有子元素或者文本的元素 集合元素
选择器 描述 返回
:hidden 选择所有不可见的元素 集合元素
:visible 选取所有可见的元素 集合元素
选择器 说明 返回
[attribute] 选取拥有此属性的元素 集合元素
[attribute=value] 选取属性值为value值的元素 集合元素
[attribue^=value] 选取属性的值以value开始的元素 集合元素
[attribue$=value] 选取属性的值以value结束的元素 集合元素
选择器 说明 返回
:nth-child(index/even/odd) 选取每个父元素下的第index个子元素或者奇偶元素（index从1算起） 集合元素
:first-child 选取每个元素的第一个子元素 集合元素
:last-child 选取每个元素的最后一个子元素 集合元素
选择器 说明 返回
:enabled 选取所有可用元素 集合元素
:disabled 选取所有不可用元素 集合元素
:checked 选取所有被选中的元素（单选框、复选框） 集合元素
:selected 选取所有被选中的元素（下拉列表） 集合元素
选择器 说明
:input 选取所有input textarea select button元素
:text 选取所有单行文本框
:password 选取所有密码框
:radio 选取所有单选框
:checkbox 选取所有多选框
:submit 选取所有的提交按钮
:image 选取所有的图像按钮
:reset 选取所有的重置按钮
:button 选取所有的按钮
:file 选取所有的上传域
:hidden 选取所有的不可见元素

第三节 选择器优化

第四节 代理对象属性和样式操作

第五节 jQuery中DOM操作

方法 说明
append() 向每个匹配元素内部追加内容
appendTo() 颠倒append()的操作
prepend() 向每个匹配元素的内容内部前置内容
prependTo() 颠倒prepend()的操作
after() 向每个匹配元素之后插入内容
insertAfter() 颠倒after()的操作
before() 在每个匹配元素之前插入内容
insertBefore() 颠倒before()的操作
CSS DOM操作
HTML & JavaScript 中的位置和尺寸

第六节 jQuery动画

回顾上节
一、创建节点
var div = document.createElement("div");
document.body.appendChild(div);

var div = document.createElement("div");
var txt = document.createTextNode("DOM");
div.appendChild(txt);
document.body.appendChild(div);

var $div = = $("<div>DOM</div>");
$(body).append($div);

var div = document.createElement("div");
var txt = document.createTextNode("DOM");
div.appendChild(txt);
document.body.appendChild(div);
div.setAttribute("title","盒子");

var $div = = $("<div title='盒子'>DOM</div>");
$(body).append($div);
二、插入内容
三、删除内容
四、克隆内容：创建指定节点副本
五、替换内容
本节新知识

显隐动画

滑动

渐变：通过改变不透明度

方法名 说明
hide()和show() 同时修改多个样式属性即高度和宽度和不透明度
fadeIn()和fadeOut() 只改变不透明度
slideUp()和slideDown() 只改变高度
fadeTo() 只改变不透明度
toggle() 用来代替show()和hide()方法，所以会同时修改多个属性即高度、宽度和不透明度
slideToggle() 用来代替slideUp和slideDown()方法，所以只能改变高度
fadeToggle() 用来代替fadeIn()和fadeOut方法，只能改变不透明度
animate() 属于自定义动画，以上各种动画方法都是调用了animate方法。此外，用animate方法还能自定义其他的样式属性，例如：left marginLeft ``scrollTop等

第七节 jQuery中的事件

分类 方法名称 说明
页面载入 ready(fn) 当DOM载入就绪可以绑定一个要执行的函数
事件绑定 blind(type,[data],fn) 为每个匹配元素的特定事件绑定一个事件处理函数
事件绑定 unblind() 解除绑定
事件绑定 on(events,[,selector[,]data],handler) 在选择元素上绑定一个或者多个事件处理函数
事件绑定 off() 移除on绑定的事件
事件绑定 delegate(selector,eventType,handler) 为所有选择匹配元素附加一个或多个事件处理函数
事件绑定 undelegate() 移除绑定
事件动态 live(type,fn) 对动态生成的元素进行事件绑定
事件动态 die(type,fn) 移除live()绑定的事件
交互事件 hover() 鼠标移入移出
交互事件 toggle(fn1,fn2,[fn3],[fn4]) 每单击后依次调用函数
交互事件 blur(fn) 触发每一个匹配元素的blur事件
交互事件 change() 触发每一个匹配元素的change事件
交互事件 click() 触发每一个匹配元素的click事件
交互事件 focus() 触发每一个匹配元素的focus事件
交互事件 submit() 触发每一个匹配元素的submit事件
键盘事件 keydown() 触发每一个匹配元素的keydown事件
键盘事件 keypress() 触发每一个匹配元素的keypress事件
键盘事件 keyup() 触发每一个匹配元素的keyup事件
鼠标事件 mousedown(fn) 绑定一个处理函数
鼠标事件 mouseenter(fn) 绑定一个处理函数
键盘事件 mouseleave(fn) 绑定一个处理函数
键盘事件 mouseout(fn) 绑定一个处理函数
键盘事件 mouseover(fn) 绑定一个处理函数
窗口操作 resize(fn) 绑定一个处理函数
窗口操作 scroll(fn) 绑定一个处理函数

第八节 jQuery与Ajax

创建一个Ajax请求
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4)
    {
        alert( xhr.responseText );
    }
};
HTTP状态码 
//ajax请求后台数据
var btn =  document.getElementsByTagName("input")[0];
btn.onclick = function(){
    
    ajax({//json格式
        type:"post",
        url:"post.php",
        data:"username=poetries&pwd=123456",
        asyn:true,
        success:function(data){
            document.write(data);
        }
    });
}
//封装ajax
function ajax(aJson){
    var ajx = null;
    var type = aJson.type || "get";
    var asyn = aJson.asyn || true;
    var url = aJson.url;        // url 接收 传输位置
    var success = aJson.success;// success 接收 传输完成后的回调函数
    var data = aJson.data || '';// data 接收需要附带传输的数据
    
    if(window.XMLHttpRequest){//兼容处理
        ajx = new XMLHttpRequest();//一般浏览器
    }else
    {
        ajx = new ActiveXObject("Microsoft.XMLHTTP");//IE6+
    }
    if (type == "get" && data)
    {
        url +="/?"+data+"&"+Math.random();
    }
    
    //初始化ajax请求
    ajx.open( type , url , asyn );
    //规定传输数据的格式
    ajx.setRequestHeader('content-type','application/x-www-form-urlencoded');
    //发送ajax请求（包括post数据的传输）
    type == "get" ?ajx.send():ajx.send(aJson.data);
    
    //处理请求
    ajx.onreadystatechange = function(aJson){
        
    if(ajx.readState == 4){
            
        if (ajx.status == 200 && ajx.status<300)//200是HTTP 请求成功的状态码
        {
            //请求成功处理数据
            success && success(ajx.responseText);
        }else{
            alert("请求出错"+ajx.status);
            
        }
    }
        
    };
jQuery中的Ajax [补充部分--来自锋利的jQuery]

jquery对Ajax操作进行了封装，在jquery中的$.ajax()方法属于最底层的方法，第2层是load()、$.get()、$.post();第3层是$.getScript()、$.getJSON()，第2层使用频率很高

load()方法
$("#testTest").load("test.html",function(responseText,textStatus,XMLHttpRequest){
    //respnoseText 请求返回的内容
    //textStatus 请求状态 ：sucess、error、notmodified、timeout
    //XMLHttpRequest 
})
参数名称 类型 说明
url String 请求HTML页面的URL地址
data(可选) Object 发送至服务器的key / value数据
callback(可选) Function 请求完成时的回调函数，无论是请求成功还是失败
$.get()和$.post()方法

load()方法通常用来从web服务器上获取静态的数据文件。在项目中需要传递一些参数给服务器中的页面，那么可以使用$.get()和$.post()或$.ajax()方法

参数 类型 说明
url String 请求HTML页的地址
data(可选) Object 发送至服务器的key/ value 数据会作为QueryString附加到请求URL中
callback(可选) Function 载入成功的回调函数（只有当Response的返回状态是success才调用该方法）
type(可选) String 服务器返回内容的格式，包括xml、html、script、json、text和_default
$.ajax()方法
参数 类型 说明
url String (默认为当前页地址)发送请求的地址
type String 请求方式（POST或GET）默认为GET
timeout Number 设置请求超时时间（毫秒）
dataType String 预期服务器返回的类型。可用的类型如下<br /><br /> xml:返回XML文档，可用jquery处理<br />html:返回纯文本的HTML信息，包含的script标签也会在插入DOM时执行<br />script：返回纯文本的javascript代码。不会自动缓存结果，除非设置cache参数。注意：在远程请求时，所有的POST请求都将转为GET请求<br />json:返回JSON数据<br />jsonp:JSONP格式，使用jsonp形式调用函数时，例如：myurl?call back=?,jquery将自动替换后一个？为正确的函数名，以执行回调函数<br />text:返回纯文本字符串
beforeSend Function 发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次Ajax请求。XMLHttpRequest对象是唯一的参数<br /> function(XMLHttpRequest){<br /> this;//调用本次Ajax请求时传递的options参数
}
complete Function 请求完成后的回调函数（请求成功或失败时都调用）<br /> 参数：XMLHttpRequest对象和一个描述成功请求类型的字符串<br />function(XMLHttpRequest,textStatus){
this;//调用本次Ajax请求时传递的options参数
}
success Function 请求成功后调用的回调函数，有两个参数<br />(1)由服务器返回，并根据dataTyppe参数进行处理后的数据<br />(2)描述状态的字符串<br />function(data,textStatus){
//data可能是xmlDoc、``jsonObj、html、text等
this;//调用本次Ajax请求时传递的options参数<br />}
error Function 请求失败时被调用的函数
global Boolean 默认为true。表示是否触发全局Ajax事件，设置为false将不会触发。AjaxStart或AjaxStop可用于控制各种Ajax事件

第九节 插件

;(function($){
    $.fn.plugin=function(options){
        var defaults = {
            //各种参数 各种属性
        }
        var options = $.extend(defaults,options);

        this.each(function(){
            //实现功能的代码
        });

        return this;
    }
})(jQuery);

自定义jQuery函数：

(function($){
    $.extend({
        test: function(){
            alert("hello plugin");
        }
    })
    })(jQuery);

自定义jQuery命令：

(function($){
    $.fn.extend({
        say : function(){
         alert("hello plugin");
    }
    })
})(jQuery);

(function($){
    $.fn.say = function(){
        alert("hello plugin");
    };
    
})(jQuery);

附录一 jQuery各个版本新增的一些常用的方法

方法 说明
.closest() 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素
die() 从元素中删除先前用live()方法绑定的所有的事件
live() 附加一个事件处理器到符合目前选择器的所有元素匹配
方法 说明
.first() 获取集合中第一个元素
last() 获取集合中最后一个元素
has(selector) 保留包含特定后代的元素，去掉那些不含有指定后代的元素
detach() 从DOM中去掉所有匹配的元素。detach()和remov()一样，除了detach()保存了所有jquery数据和被移走的元素相关联。当需要移走一个元素，不久又将该元素插入DOM时，这种方法很有用
delegate() 为所有选择器匹配的元素附加一个处理一个或多个事件
undelegate() 为所有选择器匹配的元素删除一个处理一个或多个事件
方法 说明
prop(proptyName) 获取在匹配元素集合中的第一个元素的属性值
removeProp(proptyName,value) 为匹配的元素删除设置的属性
:focus 选择当前获取焦点的元素

附录二 jQuery性能优化

附录三 常用的jQuery代码片段

$(document).ready(functuion(){
    $(document).bind("contextmenu",function(e){
        return false;
  });  
});

$(document).ready(function(){
    //例子1：href="http://"的链接将会在新窗口打开链接
    $('a[href=^="http://"]').attr("target","_blank");
    
  //例子2：rel="external"的超链接将会在新窗口打开链接
    $("a[rel$='external']").click(function(){
      this.target = "_blank";
    });
});
//use
<a href="http://baidu.com" rel="external">open</a>


$(document).reday(function(){
    //Firefox2 and above
    if( $.browser.mozilla && $.browser.version>="1.8"){
      //do something
  }

  // Safari
  if($.browser.safari){
     //do something
  }

  // Chrome
  if($.browser.chrome){
     //do something
  }

  // Opera
  if($.browser.opera){
     //do something
  }

})

  // IE6 and blow
  if($.browser.msie && $.browser.version<=6){
     //do something
  }

  // anything above IE6
  if($.browser.msie && $.browser.version > 6){
     //do something
  }



$(document).ready(function(){
    $("input.text1").val("Enter you search text here");
    textFill($('input.text1'));
});

function textFill(input){//input focus text function
    var originvalue = input.val();
    input.focus(funtion(){
        if($.trim(input.val())== originvalue){
            input.val(' ');
        }
  }).blur(function(){
      if($.trim(input.val()) == ' '){
          input.val(originalvalue);
      }
  })
}



$(document).ready(function(){
  $(document).mousemove(function(e){
      $("#XY").html("X:" + e.pageX+ "| Y" + e.pageY);
  });
});


$(document).ready(function(){
    if($("#id").length){
      // do some thing  
  }
})

$("div").click(function(){
    window.location  = $(this).find("a").attr("href");
})

//use

<div><a href="index.html">home</a></div>


$(document).ready(function(){
    jQuery.fn.center = function(){
        this.css("position","absolute");
        this.css("top",($(window).height() - this.lenght()) / 2 +$(window).scrollTop() + "px"); 
        this.css("left",($(window).height() - this.lenght()) / 2 +$(window).scrollLeft() + "px"); 
      return this;
  }
//use 

 $("#XY").center();
});


$(document).ready(function(){
    jQuery.fx.off = true;
});


$(document).ready(function(){
    $("#xy").mousedown(function(e){
        alert(e.which);//1 = 鼠标左键  2= 鼠标中间 3 = 鼠标右键
  });
});


$(document).ready(function(){
    $("input").keyup(function(e){
        if(e.which == "13"){
            alert("回车提交");
      }
  })
});


$("#load").ajaxStart(function(){
    showLoading();//显示loading
    disableButtons() //禁用按钮
})
 $("#load").ajaxComplete(function(){
    hideLoading();//隐藏loading
    enableButtons();//启用按钮
})

$("#someElement").find('option:selected');
$("#someElement option:selected");

var tog = false;
$("button").click(function(){
    $("input[type=checkbox]').attr("checked",!tog);
    tog = !tog;
});

$(document).ready(function(){
     $("a[href$='pdf']").addClass("pdf");
     $("a[href$='zip']").addClass("zip");
     $("a[href$='psd']").addClass("psd");
});


setTimeOut(function(){
        $("div").fadeIn(400);
  },3000);

//而在1.4之后的版本可以用delay()来实现
$("div").slideUp(300).delay(3000).fadeIn(400);


 //为table里面的td元素绑定click事件，不管td是一直存在还是动态创建的
 //jQuery 1.4.2之前使用这种方式
 $("table").each(function(){
    $("td",this).live("click",function(){
       $(this).toggleClass("hover"); 
    });
});

//jquery 1.4.2使用的方式

$("table").delegate("td","click",function(){
    $(this).toggleClass("hover");
});

//jQuery1.7.1使用的方式
$("table").on("click","td",function(){
    $(this).toggleClass("hover");
 })

(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
jQuery.preLoadImages("image1.gif", "/path/to/image2.png");

var scr = document.createElement('script');
scr.setAttribute('src', 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js');
document.body.appendChild(scr);
scr.onload = function(){
    $('div').attr('class', '').attr('id', '').css({
        'margin' : 0,
        'padding' : 0,
        'width': '100%',
        'clear':'both'
    });
};

$(window).bind("load", function() {
    // IMAGE RESIZE
    $('#product_cat_list img').each(function() {
        var maxWidth = 120;
        var maxHeight = 120;
        var ratio = 0;
        var width = $(this).width();
        var height = $(this).height();
        if(width > maxWidth){
            ratio = maxWidth / width;
            $(this).css("width", maxWidth);
            $(this).css("height", height * ratio);
            height = height * ratio;
        }
        var width = $(this).width();
        var height = $(this).height();
        if(height > maxHeight){
            ratio = maxHeight / height;
            $(this).css("height", maxHeight);
            $(this).css("width", width * ratio);
            width = width * ratio;
        }
    });
    //$("#contentpage img").show();
    // IMAGE RESIZE
});

// Back To Top
$(document).ready(function(){ 
  $('.top').click(function() {  
     $(document).scrollTo(0,500);  
  });
}); 
//Create a link defined with the class .top
<a href="#" class="top">Back To Top</a>

var accordion = {
     init: function(){
           var $container = $('#accordion');
           $container.find('li:not(:first) .details').hide();
           $container.find('li:first').addClass('active');
           $container.on('click','li a',function(e){
                  e.preventDefault();
                  var $this = $(this).parents('li');
                  if($this.hasClass('active')){
                         if($('.details').is(':visible')) {
                                $this.find('.details').slideUp();
                         } else {
                                $this.find('.details').slideDown();
                         }
                  } else {
                         $container.find('li.active .details').slideUp();
                         $container.find('li').removeClass('active');
                         $this.addClass('active');
                         $this.find('.details').slideDown();
                  }
           });
     }
};

$(function(){
$("select#ctlJob").change(function(){
$.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '
' + j[i].optionDisplay + '
';
}
$("select#ctlPerson").html(options);
})
})
})

// Safe Snippet
$("img").error(function () {
    $(this).unbind("error").attr("src", "missing_image.gif");
});
// Persistent Snipper
$("img").error(function () {
    $(this).attr("src", "missing_image.gif");
});

$(document).ready(function() {
  $('form').submit(function() {
    if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
      jQuery.data(this, "disabledOnSubmit", { submited: true });
      $('input[type=submit], input[type=button]', this).each(function() {
        $(this).attr("disabled", "disabled");
      });
      return true;
    }
    else
    {
      return false;
    }
  });
});

//change event on password1 field to prompt new input
$('#password1').change(function() {
        //dynamically create new input and insert after password1
        $("#password1").append("");
});

var loading = false;
$(window).scroll(function(){
    if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
        if(loading == false){
            loading = true;
            $('#loadingbar').css("display","block");
            $.get("load.php?start="+$('#loaded_max').val(), function(loaded){
                $('body').append(loaded);
                $('#loaded_max').val(parseInt($('#loaded_max').val())+50);
                $('#loadingbar').css("display","none");
                loading = false;
            });
        }
    }
});
$(document).ready(function() {
    $('#loaded_max').val(50);
});

<ul id='nav'> 
    <li>导航一</li> 
    <li>导航二</li> 
    <li>导航三</li>
</ul>

//注意：代码需要修饰完善

$('#nav').click(function(e) {
 // 要知道siblings的使用          

$(e.target).addClass('tclass').siblings('.tclass').removeClass('tclass');;

 });

<script src="prototype.js"></script>
<script src="http://blogbeta.blueidea.com/jquery.js"></script>
<script type="text/javascript"> jQuery.noConflict();</script> 

注意：一定要先引入prototype.js 再引入jquery.js，先后顺序不可错

//jQuery event封装支持判断元素上是否绑定了事件，此方法只适用于jQuery绑定的事件
var $events = $("#foo").data("events");
if( $events && $events["click"] ){　　
    //your code
} 

//切换（toggle）类允许你根据某个类的//是否存在来添加或是删除该类。
//这种情况下有些开发者使用：
a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');
//toggleClass允许你使用下面的语句来很容易地做到这一点
a.toggleClass('blueButton');

if ($.browser.msie) {
    // Internet Explorer就是个虐待狂
}

// 方法一
if (! $('#keks').html()) {
    //什么都没有找到;
}
// 方法二
if ($('#keks').is(":empty")) {
    //什么都没有找到;
}

var iFrameDOM = $("iframe#someID").contents();
//然后，就可以通过find方法来遍历获取iFrame中的元素了
iFrameDOM.find(".message").slideUp();

$("#searchbox") .focus(function(){
      $(this).val('')
}) .blur(function(){
     var $this = $(this); 
    // '请搜索...'为搜索框默认值 
    ($this.val() === '')? $this.val('请搜索...') : null; 
});

setInterval(function() { 
//每隔5秒钟刷新页面内容 //获取的内容将增加到 id为content的元素后 

$("#content").load(url); }, 5000);

//方法一： 为JQuery重新命名为
 $jvar $j = jQuery.noConflict();$j('#id').... //

方法二： 推荐使用的方式

(function($){ $(document).ready(function(){
     //这儿，你可以正常的使用JQuery语法 });
})(jQuery);

<input type="password" name="pass" id="pass" /> <span id="passstrength"></span>

//下面的正则表达式建议各位收藏哦，项目上有可能会用得着
$('#pass').keyup(function(e) { 

//密码为八位及以上并且字母数字特殊字符三项都包括 
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); 

//密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等 
 var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); 
var enoughRegex = new RegExp("(?=.{6,}).*", "g"); 

if (false == enoughRegex.test($(this).val())) { 

$('#passstrength').html('More Characters'); }
 else if (strongRegex.test($(this).val())) {
     $('#passstrength').className = 'ok'; 
     $('#passstrength').html('Strong!'); } 
else if (mediumRegex.test($(this).val())) {
    $('#passstrength').className = 'alert'; 
    $('#passstrength').html('Medium!'); }
 else { 
    $('#passstrength').className = 'error';      
    $('#passstrength').html('Weak!'); 
} 
return true;

});

附录四 常见CND加速服务

附录五 jQuery的一些资源

扩展阅读

参考

上一篇下一篇

猜你喜欢

热点阅读