jQuery 常用代码片段收集

  收集一些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)

  

posted @ 2010-01-26 10:14  古道  阅读(587)  评论(2编辑  收藏  举报