1. 程式人生 > >jQuery中鏈式調用原理

jQuery中鏈式調用原理

query proto 使用 內部 nbsp clas span () .proto

(1).鏈式調用

1  $("#mybtn").css("width","100px")
2 
3                 .css("height","100px")
4 
5                 .css("background","red");

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

1 $("#mybtn").css({
2     width:200,
3     height:"200",
4     "background-color":"red"
5 })

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

1 var $result1 = $("div").css("width");
2 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();

jQuery中鏈式調用原理