学步园

　　收集一些jquery常用的代码片段，方便记忆和以后使用。不断更新。

　　8.密码强度检测

    $(function(){
               
        function checkPasswod(){
            var pwd = $(this).val().length;
            if(pwd<6){
                $('#hint  span:eq(1)').css({'color':'#000'}).html('至少六位数字或字母！');
                $('#s').css({'width':'0'});
            }
            else if(pwd>=6 && pwd<10){
                $('#hint span:eq(1)').css({'color':'#C00'}).html('弱');
                $('#s').css({background:'#C00',width:'50px',height:'10px'});
            }
            else if(pwd>9 && pwd <14){
                $('#hint span:eq(1)').css({'color':'#F90'}).html('中等');
                $('#s').css({'background':'#F90','width':'100px','height':'10px'});
            }
            else if(pwd>13 && pwd<18){
                $('#hint span:eq(1)').css({'color':'#060'}).html('强');
                $('#s').css({'background':'#060','width':'150px','height':'10px'});
            }
            else{
                $('#hint span:eq(1)').css({'color':'#060'}).html('超强');
                $('#s').css({'background':'#060','width':'200px','height':'10px'});
            }
        }
        
        $('input').keyup(checkPasswod);
        $('input').change(checkPasswod);
    })

　   V2 2010.2.1

 --------------------------------------------------------------------------------------------------------------------------------------------------------------------

　　1.自动识别超级链接并应用相应样式　

$('a[href]').each(function() {
   if((C = $(this).attr('href').match(/[.](doc|xls|pdf)$/))) {
       $(this).addClass(C[1]);
   }
});

　　应用场合：根据下载链接中的文件自动匹配链接样式。

　　2. 检验所有为空元素

$('*').each(function() {
         if ($(this).text() == "") {
                   //Do Something
         }
});
var emptyTest = $('#myDiv').is(:empty);

　　3.检查元素是否存在

if ( $('#myElement').length > 0 ) {
    // it exists
}

　　4.当搜索框获得焦点时，自动清除其中的默认文字

$("#s")
    .val("输入搜索内容...")
    .css("color", "#ccc")
    .focus(function(){
        $(this).css("color", "black");
        if ($(this).val() == "输入搜索内容...") {
            $(this).val("");
        }
    })
    .blur(function(){
        $(this).css("color", "#ccc");
        if ($(this).val() == "") {//如果失去焦点，但输入内容为空则继续显示默认内容
            $(this).val("输入搜索内容...");
        }
    });

　　5.没有子菜单的父节点去除背景

$("ul.dropdown > li:not(:has('ul')) a").css({
        "background-image": "none",
});

　　应用场合：当下一级中没有内容时，让父节点显示不同于其他有子菜单的节点，防止用户点击后才发现下面没有内容了。（用到时就有体会了）

　　6.只触发一次的事件

$('#my-selector').bind('click', function() {
       $(this).unbind('click');
       alert('Clicked and unbound!');
       //Do Something
});

　　也可以这样，本质相同

$(‘#my-selector’).one(‘click’, function() {
alert(‘This can only happen once’);
});

　　7.简易的图片轮回效果

        $(document).ready(function() {
     var j = 0;
     var delay = 2000; //millisecond delay between cycles
     function cycleThru(){
             var jmax = $("ul#cyclelist li").length -1;
             $("ul#cyclelist li:eq(" + j + ")")
                     .animate({"opacity" : "1"} ,400)
                     .animate({"opacity" : "1"}, delay)
                     .animate({"opacity" : "0"}, 400, function(){
                             (j == jmax) ? j=0 : j++;
                             cycleThru();
                     });
             };
     cycleThru();
 });
    <style type="text/css">
        ul#cyclelist {width:200px;border:solid;position:relative;overflow:hidden;height:200px}
        ul#cyclelist li {font-size:1.4em;padding:20px;opacity:0;position:absolute}
    </style>
//将下面的文本替换为图片
    <ul id="cyclelist">
        <li>list 1</li>
       <li>list 11</li>
       <li>list 111</li>
       <li>list 1111</li>
       <li>list 11111</li> 
       <li>list 111111</li>
       <li>list 1111111</li>
    </ul>

　　注：部分内容来源网络，参考URL：http://css-tricks.com/snippets/

 　  （V1  2010.01.26）