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("－請輸入－")   

         }

})