jquery常用代码--（一）

        在工作中，常用的特效，其实不是很多。主要分为以下几大类：

        1.常见Tab切换 

                2.有关输入框 input的简单交互 

                3.进度条

                4. Banner切换

                5.可拖拽弹出层

                6.文字超出则省略且显示为点点

                7.内容区内部右边3D云标签

1.常见Tab切换

        $(function(){

               $(‘.tab_change  ul  li‘).click(function(){         

                    $(this).addClass(‘cur‘).siblings().removeClass(‘cur‘);         

                    $(‘.tab_change ol li‘).eq($(this).index()).show().siblings().hide();

                }) 

        })

2.有关输入框 input的简单交互

    1.一般要求的直接带入写法

    <input    type=“text”   value=“请输入关键字”                            

               onfocus=“if(value==‘请输入关键字’){value=‘    ’}”                                    

                onblur=“if(value==‘’){value=‘请输入关键字’}”                   />

    2.特别要求，比如用jQuery在html结构页面外写 

    $(function(){        

                $( ‘.text’).focus(function(){                          

                        if($(this).val()==‘请输入关键字’)  {

                               $(this).val(‘’) ;   

                        }       

                })                

                $( ‘.text’).blur(function(){                          

                         if($(this).val()==‘’) {  

                                 $(this).val(‘请输入关键字’);

                         }       

                 })

   3.特别要求，比如多个输入框的验证，以及输入前后，字体的颜色

 $(‘#name , #psw , #code‘).focus(function(){        

         if( $(this).val()==‘请输入用户名‘ || $(this).val()==‘请输入密码’ || $(this).val()==‘请输入验证码‘)               {                 

                $(this).val(‘‘);                 

                $(this).css(‘color‘,‘#000‘);        

         }

    });

    $(‘#name , #psw , #code‘).blur(function(){           

            if( $(this).val()==‘‘)  {

                    $(‘#name‘).val(‘请输入用户名‘);  

                    $(‘#psw‘).val(‘请输入密码‘);

                    $(‘#code‘).val(‘请输入验证码‘);    

                    $(this).css(‘color‘,‘#9a9a9a‘);           

                }  

     });

4.特别要求,比如原为文本框的，后写入时变为输入密码框

<input name="psw" id="psw" type="text" value="请输入密码" />

<input name="password" id="password" type="password" class="input display_none"  />

$("#psw").focus(function() {

        var text_value = $(this).val();

        if (text_value ==this.defaultValue) {

                $("#psw").hide();

                $("#password").show().focus();   

         }

});

$("#password").blur(function() {

            var text_value = $(this).val();

            if (text_value == "") {

                    $("#psw").show();$("#password").hide();

            }

});

5.特别要求：输入前文字居中，输入后文字左靠齐

$("input[type=‘text‘]").focus(function(){  

          $(this).css({"text-align":"left","color":"#333"})          

           $(this).val(" ")

})

$("input[type=‘text‘]").blur(function(){    

        if($(this).val()==" "){

                $(this).css({"text-align":"center","color":"#dfdfdf"})

                $(this).val("－请输入－")   

         }

})

本文出自 “旅行者唯一的等待” 博客，请务必保留此出处http://sunnyyeyuzhu.blog.51cto.com/6793234/1562342