jquery常用代码--(一)

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

定海ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:028-86922220(备注:SSL证书合作)期待与您的合作!

        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.一般要求的直接带入写法

    

              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.特别要求,比如原为文本框的,后写入时变为输入密码框


$("#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("-请输入-")   

         }

})


网站栏目:jquery常用代码--(一)
文章网址:http://hbruida.cn/article/jidpsg.html