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

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

         }

})

标题名称：jquery常用代码--（一）
网页网址：https://www.cdcxhl.com/article36/jidpsg.html

成都网站建设公司_创新互联，为您提供全网营销推广、ChatGPT、网站收录、静态网站、域名注册、网站营销

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联