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.特别要求,比如用jQueryhtml结构页面外写 

    $(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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。