jquery基礎學習二

對於動態加載到頁面的html元素，每次都須要從新綁定事件到這些元素

插件livequery,後來經過javascript添加的元素都會被綁定到事件

普通方法綁定單擊事件

$(「a」).click(function(){

//doSomething

 

})

可是這樣經過js動態加載的內容中的超連接元素則不會綁定單擊事件

 

 

$(‘a‘).livequery(‘click’,function(){

 

//doSomething

})

 

 

 

 

 

$(document).ready(function(){

                   $('li').livequery(function(){

 

                            //hover函數綁定over,out事件

$(this).hover(function()

         {$(this).addClass('hover');

                                               },function(){

                                                        $(this).removeClass('hover');

                                               });

 

                   },function(){

                            //解除綁定

                            $(this).unbind('mouseover')

                            .unbind('mouseout');

 

 

                   });

 

 

});

 

//加延遲防止單擊失效
<script type="text/javascript">
    $(function(){
        $('#myList').sortable({delay:1});
    });
</script>

//cookie
<script type="text/javascript">
    $(function(){
        var COOKIE_NAME='username';
        if($.cookie(COOKIE_NAME)){
            $('#username').val($.cookie(COOKIE_NAME));
        }

        $(#check).click(function(){
            if(this.checked){
                $.cookie(COOKIE_NAME,$('#username').val(),{path:'/',expires:10});
            }else{
                $.cookie(COOKIE_NAME,null,{path:'/'});
            }
        });
    });

</script>

/*封裝對象方法的插件 jQuery.fn.extend()
封裝全局函數的插件  jQuery.extend()
選擇器插件  jQuery.extend()

jquery.[插件名].js
全部對象的方法都應附加到jQuery.fn對象上
利用閉包的特性，既能夠避免內部臨時變量影響全局空間，又能夠在插件內部繼續使用$做爲jquery的別名
*/
//()做爲參數傳遞進去，供內部使用
(function() {})();;
(function($) {

    var foo;
    var bar = function() {

    }
    $.BAR = bar;

})(jQuery);

;
(function($) {
    //此處編寫jquery插件代碼

})(jQuery);
/*
jQuery提供了兩個用於擴展jquery的功能jQuery.fn.extend() jQuery.extend()

jQuery.extend()用一個或多個其餘對象來擴展一個對象，而後返回被擴展的對象
*/
var settings={validate:false,limit:5,name:"foo"};
var options={validate:false,name:"bar"};
var newOptions=jQuery.extend(settings,options);
console.log(newOptions);

jquery.color.js
 ;(function() {
        jQuery.fn.extend({
            "color": function(value) {
                return this.css('color', value);
            },
            "border":function(value){

            },
            "background":function(value){

            }

        });

//隔行變色

;(function($){
    $.fn.extend({
        "alterBgColor":function(options){
            //設置默認值
            options=$.extend({
                odd:"odd",
                even:"even",
                selected:"selected"
            },options);
            $('tbody>tr:odd',this).addClass(options.odd);
            $('tbody>tr:even',this).addClass(options.even);
            $('tbody>tr',this).click(function(){
                var hasSelected=$(this).hasClass(options.selected);
                $(this)[hasSelected?"removeClass":"addClass"](options.selected).find(':checkbox').attr('checked',!hasSelected);
            });
            $('tbody>tr:has(:checked)',this).addClass(options.selected);
            return this;

        }
    })
})

 

//封裝全局函數的插件,在jquery命名空間添加了一個函數
;(function($) {
    $.extend({
        ltrim: function(text){
            return (text || "").replace( /^\s+/g,"");
        },
        rtrim:function(text){
            return (text ||"").replace( /\s+$/g,"");
        }
    });
})(jQuery);

 

 

//jquery提供了一套方法讓用戶製做插件來使用自定義選擇器
//between
;(function($){
    $.$.extend(jQuery.expr[":"], {
        between:function(a,i,m){
            var tmp=m[3].split(",");
            return tmp[0]-0<i&&i<tmp[1]-0;
        }
    });
    
})(jQuery);

html放到http://validator.w3.org/