jQuery中鏈式調用原理

(1).鏈式調用

      

 $("#mybtn").css("width","100px")

                .css("height","100px")

                .css("background","red");

 

 

(2).在對屬性進行操作時建議使用JSON形式控制樣式

$("#mybtn").css({
    width:200,
    height:"200",
    "background-color":"red"
})

 

 

(3).事件中this的指向
//事件中this的指向
//JQuery中提示了一個方法,該方法可以將原生JS元素對象 轉換成JQ對象
//語法結構:$(原生JS元素對象)
console.log($(this).html());
//css方法若傳遞一個參數可以獲取屬性名的屬性值
//當使用JQ中的方法取值是一般都無法進行鏈式調用,
//原因是方法內部return的已經不是JQ實例本身了

 

var $result1 = $("div").css("width");
console.log($result1);

 

 

 

(4).以下是鏈式調用原理

 

var MyJQ = function(){
       }
        MyJQ.prototype = {
            css:function(){
               console.log("設置css樣式");
                return this;
            },
           show:function(){
                console.log("將元素顯示");
               return this;
            },
           hide:function(){
                console.log("將元素隱藏");
           }
       };
        var myjq = new MyJQ();
        myjq.css().css().show().hide();