国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

? php教程 PHP開發(fā) jQuery ???? ??? ??

jQuery ???? ??? ??

Dec 06, 2016 pm 03:52 PM
jquery

jQuery ???? ? ??? ??? ?? ???? ?? ??? ?? ??? ? ????. ? ????? jQuery ???? ??? ??, ?? ?? ? ???? ??? ?? ???? ?????.

1. ????

jQuery ???? ??? jQuery.fn? ? ?? ??? ???? ??? ?????. ??? ??? ?? ??? ??? ????? ?????. :

. ??? ??? ????.

jQuery.fn.myPlugin = function(){
//你自己的插件代碼
};

????? ?? ???? ??? ??? ???? ??? ????? ?? JavaScript ??????? ??? ??? ?? jQuery? ?? ?? ?? ????? ???? ?? ????. ??? jQuery? ??? ???? ?? ?????? $ ??? ???? ?? ?????.

??? ??? ????.

(function ($) {
$.fn.myPlugin = function () {
//你自己的插件代碼
};
})(jQuery);

? ??? ??????? $ ??? ?? ?? ???? jQuery? ??? ? ????. ??.

2. ??

?? ?? ???? ?? ??? ??? ? ????. ??? ? ?? ????? ??? ??? ?? ????? ??? ???. ???? ???? this ???? ????? ??? jQuery ??? ?????. ??? ???? ?? jQuery ????? this ???? ?? DOM ??? ???? ??? ??? ???? ??? ???? ????. . ?? ?? ???? ??? ?? ??? jQuery?? this ???? ????? ???? ??? ????.

??? ??? ????.

(function ($) {
$.fn.myPlugin = function () {
//此處沒有必要將this包在$號中如$(this),因為this已經(jīng)是一個jQuery對象。
//$(this)等同于 $($('#element'));
this.fadeIn('normal', function () {
//此處callback函數(shù)中this關(guān)鍵字代表一個DOM元素
});
};
})(jQuery);
$('#element').myPlugin();

3. ?? ??

?? ??? ??????. jQuery ???? Knowledge ? ?? ?? ?? ????? ??? ?????.

??? ??? ????.

(function ($) {
$.fn.maxHeight = function () {
var max = 0;
this.each(function () {
max = Math.max(max, $(this).height());
});
return max;
};
})(jQuery);
var tallest = $('div').maxHeight(); //返回高度最大的div元素的高度
   
這是一個簡單的插件,利用.height()返回頁面中高度最大的div元素的高度。

4. ??? ??

????? ??? ??? ??? ???? ?? ?? ????. ?? ???? ??? ?? ???? ?????. ??? jQuery ???? ?????? jQuery? ??? ?? ?? ? ?????. ??? ????? ???? ????? ????? this ???? ????? ???? ???.

??? ??? ????.

(function ($) {
$.fn.lockDimensions = function (type) {
return this.each(function () {
var $this = $(this);
if (!type || type == 'width') {
$this.width($this.width());
}
if (!type || type == 'height') {
$this.height($this.height());
}
});
};
})(jQuery);
$('div').lockDimensions('width').CSS('color', 'red');

????? ? ???? ?????, jQuery? .css? ?? jQuery ???? ?? ??? ? ????. ??? ????? ?? ?? ???? ?? ?? ?? ?? ??? ?? this ???? ???? ???. ?? ????? ??? ????? ???? ?? ??? ??? ???? ??? ? ????. ??? ?? ???? ??? 'width'? ????? ?? ????? ???.

5. ??? ? ??

??? ?? ??? ??? ?? ???? ?? ??? ????? ?? ????? ??? ? ?? ?? ??? ?? ?? ?? ????. ($.extend? ????) ?????. ??? ?? ????? ???? ????? ???? ?? ?????? ??? ??? ?? ????? ???? ????? ??? ? ????.

??? ??? ????.

(function ($) {
$.fn.tooltip = function (options) {
//創(chuàng)建一些默認值,拓展任何被提供的選項
var settings = $.extend({
'location': 'top',
'background-color': 'blue'
}, options);
return this.each(function () {
// Tooltip插件代碼
});
};
})(jQuery);
$('div').tooltip({
'location': 'left'
});

? ???? ?? ? ?? ??? ?? ??? ??????. ?? ????. ??? ??? ????? ????? ?? ???? ?? ??

???. ???

{
'location': 'left',
'background-color': 'blue'
}

?? ???? ?? ??? ?? ??? ???? ??? ??? ?? ??? ????? ??? ? ?? ?? ??? ?????.

6. ??????

???? ??? ???? ???? ?? ???? ??? ?? ?? ??? ?????. ??? ??????? ???? ??? ???? ?? ?? ?????? ?? ??? ????? ??? ???? ?? ??? ?? ??? ? ????. ??????? ???, ??? ? ???? ? ? ???? ? ??? ?? ??? ???? ?????? ?? ? ?? ??????.

7. ???? ??

??? ?? ????? jQuery.fnjQuery.fn ??? ?? ??????? ???? ? ???.

??? ??? ????.

(function ($) {
$.fn.tooltip = function (options) {
// this
};
$.fn.tooltipShow = function () {
// is
};
$.fn.tooltipHide = function () {
// bad
};
$.fn.tooltipUpdate = function (content) {
// !!!
};
})(jQuery);

.fn? .fn ??????? ???? ??? ??? ???? ????. ? ??? ????? ?? ????? ???? ?? ?? ???? ??? ???? ??? ??? ????? ???? ???? ???.

??? ??? ????.

(function ($) {
var methods = {
init: function (options) {
// this
},
show: function () {
// is
},
hide: function () {
// good
},
update: function (content) {
// !!!
}
};
$.fn.tooltip = function (method) {
// 方法調(diào)用
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method' + method + 'does not exist on jQuery.tooltip');
}
};
})(jQuery);
//調(diào)用init方法
$('div').tooltip();
//調(diào)用init方法
$('div').tooltip({
foo: 'bar'
});
// 調(diào)用hide方法
$(‘div').tooltip(‘hide');
//調(diào)用Update方法
$(‘div').tooltip(‘update', ‘This is the new tooltip content!');

??? ??? ???? ????? ???? ?? ???? ?? ???? ???? ? ????. ???? ???? ??? ??? ? ???? ???? ? ??? ?? ?? ??? ?????. ??? ??? ??? ? ????? jQuery ???? ????? ???? jQuery UI? ???? ? ??? ??? ??? ?????? ?????.

8. ???

??? ???? ? ???? ?? ??? ??? ?????? ???? ?????. ????? ???? ????? ?? ? ???? ??????? ???? ?? ????. ??? ?? ???? ??? ? ?? ?????? ? ?? ??? ??? ?? ???? ???? ????. '.'? ?? ????? ?? ???? ??????? ???? ???.


???

(function ($) {
var methods = {
init: function (options) {
return this.each(function () {
$(window).bind('resize.tooltip', methods.reposition);
});
},
destroy: function () {
return this.each(function () {
$(window).unbind('.tooltip');
})
},
reposition: function () {
//...
},
show: function () {
//...
},
hide: function () {
//...
},
update: function (content) {
//...
}
};
$.fn.tooltip = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.tooltip');
}
};
})(jQuery);
$('#fun').tooltip();
//一段時間之后… …
$(‘#fun').tooltip(‘destroy');

???.

在這個例子中,當tooltip通過init方法初始化時,它將reposition方法綁定到resize事件并給reposition非那方法賦予命名空間通過追加.tooltip。 稍后, 當開發(fā)人員需要銷毀tooltip的時候,我們可以同時解除其中reposition方法和resize事件的綁定,通過傳遞reposition的命名空間給插件。 這使我們能夠安全地解除事件的綁定并不會影響到此插件之外的綁定。

九、數(shù)據(jù)

通常在插件開發(fā)的時候,你可能需要記錄或者檢查你的插件是否已經(jīng)被初始化給了一個元素。 使用jQuery的data方法是一個很好的基于元素的記錄變量的途徑。盡管如此,相對于記錄大量的不同名字的分離的data, 使用一個單獨的對象保存所有變量,并通過一個單獨的命名空間讀取這個對象不失為一個更好的方法。

. 代碼如下:

(function ($) {
var methods = {
init: function (options) {
return this.each(function () {
var $this = $(this),
data = $this.data('tooltip'),
tooltip = $(&#39;<div />&#39;, {
text: $this.attr(&#39;title&#39;)
});
// If the plugin hasn&#39;t been initialized yet
if (!data) {
/*
Do more setup stuff here
*/
$(this).data(&#39;tooltip&#39;, {
target: $this,
tooltip: tooltip
});
}
});
},
destroy: function () {
return this.each(function () {
var $this = $(this),
data = $this.data(&#39;tooltip&#39;);
// Namespacing FTW
$(window).unbind(&#39;.tooltip&#39;);
data.tooltip.remove();
$this.removeData(&#39;tooltip&#39;);
})
},
reposition: function () {
// ...
},
show: function () {
// ...
},
hide: function () {
// ...
},
update: function (content) {
// ...
}
};
$.fn.tooltip = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === &#39;object&#39; || !method) {
return methods.init.apply(this, arguments);
} else {
$.error(&#39;Method &#39; + method + &#39; does not exist on jQuery.tooltip&#39;);
}
};
})(jQuery);

將數(shù)據(jù)通過命名空間封裝在一個對象中,可以更容易的從一個集中的位置讀取所有插件的屬性。

十、總結(jié)和最佳做法

編寫jQuery插件允許你做出庫,將最有用的功能集成到可重用的代碼,可以節(jié)省開發(fā)者的時間,使開發(fā)更高效。 開發(fā)jQuery插件時,要牢記:

1.始終包裹在一個封閉的插件:

. 代碼如下:

(function($) {
/* plugin goes here */
})(jQuery);

2.不要冗余包裹this關(guān)鍵字在插件的功能范圍內(nèi)

3.除非插件返回特定值,否則總是返回this關(guān)鍵字來維持chainability 。

4.傳遞一個可拓展的默認對象參數(shù)而不是大量的參數(shù)給插件。

5.不要在一個插件中多次命名不同方法。

3.始終命名空間的方法,事件和數(shù)據(jù)。

最后加一個自己寫的放大鏡的插件`

(function($){$.fn.Fdj=function(){
$(&#39;#smallImg&#39;).on(&#39;mouseover&#39;, function() {
$(&#39;#slider&#39;).show();
})
$(&#39;#smallImg&#39;).on(&#39;mouseout&#39;, function() {
$(&#39;#slider&#39;).hide();
})
$(&#39;#smallImg&#39;).on(&#39;mousemove&#39;, function(e) {
var x = e.clientX - $(&#39;#slider&#39;).width() / 2;
var y = e.clientY - $(&#39;#slider&#39;).height() / 2;
if(x <= 0) {
x = 0
}
if(x > $(&#39;#smallImg&#39;).width() - $(&#39;#slider&#39;).width()) {
x = $(&#39;#smallImg&#39;).width() - $(&#39;#slider&#39;).width();
}
if(y <= 0) {
y = 0
}
if(y > $(&#39;#smallImg&#39;).height() - $(&#39;#slider&#39;).height()) {
y = $(&#39;#smallImg&#39;).height() - $(&#39;#slider&#39;).height();
}
$(&#39;#slider&#39;).css({
&#39;left&#39;: x,
&#39;top&#39;: y
})
var X=x/$(&#39;#smallImg&#39;).width()*800
var Y=y/$(&#39;#smallImg&#39;).height()*800
$(&#39;#img&#39;).css({
left:-X,
top:-Y
})
})
}
})(jQuery)

? ?


? ????? ??
? ?? ??? ????? ???? ??? ??????, ???? ?????? ????. ? ???? ?? ???? ?? ??? ?? ????. ???? ??? ???? ???? ??? ?? admin@php.cn?? ?????.

? AI ??

Undresser.AI Undress

Undresser.AI Undress

???? ?? ??? ??? ?? AI ?? ?

AI Clothes Remover

AI Clothes Remover

???? ?? ???? ??? AI ?????.

Video Face Swap

Video Face Swap

??? ??? AI ?? ?? ??? ???? ?? ???? ??? ?? ????!

???

??? ??

???++7.3.1

???++7.3.1

???? ?? ?? ?? ???

SublimeText3 ??? ??

SublimeText3 ??? ??

??? ??, ???? ?? ????.

???? 13.0.1 ???

???? 13.0.1 ???

??? PHP ?? ?? ??

???? CS6

???? CS6

??? ? ?? ??

SublimeText3 Mac ??

SublimeText3 Mac ??

? ??? ?? ?? ?????(SublimeText3)

???

??? ??

??? ????
1601
29
PHP ????
1502
276
???
jQuery ?? ??? ?? ??? ??: ?? ?? ??? jQuery ?? ??? ?? ??? ??: ?? ?? ??? Feb 27, 2024 pm 06:45 PM

jQuery ?? ??? ?? ??? ??: ?? ?? ??? jQuery? ? ??? ??? ?? ???? JavaScript ??????, JavaScript ?????? ????? ????? ??? ??? ?????. ? ????? jQuery? ?? ??? ??? ???? ??? ??? ??? ? ??? ???? ?? ??? ?????. jQuery ?? ?? HTML ??? jQuery ?????? ???? ???. CDN ??? ?? ????? ????? ? ????.

jQuery?? PUT ?? ??? ???? ??? ?????? jQuery?? PUT ?? ??? ???? ??? ?????? Feb 28, 2024 pm 03:12 PM

jQuery?? PUT ?? ??? ???? ??? ?????? jQuery?? PUT ??? ??? ??? ?? ??? ??? ??? ?? ????? ? ?? ?? ??? ?? ?? ??? ???? ???. PUT ??? ????? ??????? ??? ???? ?? ??? ?? ????? ?? ???? ?????? ? ?????. ??? jQuery?? PUT ?? ???? ???? ???? ?? ?????. ?? jQuery ????? ??? ????? ??? ?? $.ajax({u? ?? PUT ??? ?? ? ????.

jQuery ?: ???? ?? ?? ??? ???? ??? ?????. jQuery ?: ???? ?? ?? ??? ???? ??? ?????. Feb 28, 2024 pm 09:06 PM

??: jQuery ?: ???? ?? ?? ??? ???? ??? ?????. ? ????? ???? ??? ???? ???? ?? ??? ????. jQuery? ??? ? ???? ?? ?? ??? ??? ??? ? ?? ???? ?? ??? ???, ?? ??? ???? ??? ? ????. ??? jQuery? ???? ???? ?? ?? ???? ??? ???? ??? ???? ???? ?? ??? ?????. ?? jQuery ????? ??? ???? ?? ??? ???? ?????? ???? ???. &lt

jQuery? ???? ?? ??? ??? ?? ?? jQuery? ???? ?? ??? ??? ?? ?? Feb 28, 2024 pm 05:42 PM

??: jQuery? ???? ?? ??? ??? ??? ?????. jQuery? DOM ??? ???? ? ?? ???? ?? ?? JavaScript ????????. ? ??? ?? ?? ???? ?? ?? ??(??)? ??? ??? ???? ?? ??? ?? ????. ? ????? jQuery? ???? ? ??? ???? ??? ???? ???? ?? ??? ?????. ?? ???? jQuery ?????? ???? ???. HTML ??? ?? ??? ?????.

jQuery? ???? ??? ?? ??? ???? ??? ?????? jQuery? ???? ??? ?? ??? ???? ??? ?????? Feb 28, 2024 am 08:39 AM

jQuery? ???? ??? ?? ??? ???? ??? ?????? ????? ????? ??? ?? ??? ???? ?? ??? ?? ????. ??? ??? ??? ???? ???? ? ?? ?? ??? ?? ??? ???? ?? ??? ????. ? ????? jQuery? ???? ??? ?? ??? ???? ??? ???? ???? ?? ??? ?????. jQuery? ???? ?? ??? ???? ?? ?? CSS? ?? ??? ???? ???. height ??? ??? ??? ???? ? ?????.

jQuery?? eq? ?? ? ?? ???? ?? jQuery?? eq? ?? ? ?? ???? ?? Feb 28, 2024 pm 01:15 PM

jQuery? ? ????? DOM ?? ? ??? ??? ???? ? ?? ???? ?? ?? JavaScript ????????. jQuery?? eq() ???? ??? ??? ???? ??? ???? ? ?????. ???? ?? ? ?? ????? ??? ????. jQuery?? eq() ???? ??? ??? ??? ?? ??? ?????. ??? ??? 0?? ???? ?????. ?, ? ?? ??? ???? 0?? ? ?? ??? ???? 1???. eq() ???? ??? ??? ????: $("s

jQuery? ???? ???? ? ?? ???? ?? ?? jQuery? ???? ???? ? ?? ???? ?? ?? Feb 29, 2024 am 08:12 AM

jQuery? ? ??? ?? ???? ?? ?? JavaScript ????????. ? ?? ?? JavaScript? ?? ???? ? ?? ???? ???? ?? ??? ????. ? ????? jQuery? ???? ???? ? ?? ???? ??? ???? ?? ?? ??? ?????. ?? HTML ???? jQuery ?????? ???? ???. jQuery ?????? ?? ??? ?? ??? ??? ? ????.

jQuery ??? ?? ??? ??? ??? ? ? ???? jQuery ??? ?? ??? ??? ??? ? ? ???? Feb 29, 2024 am 09:03 AM

jQuery ??? ?? ??? ??? ??? ? ? ???? jQuery? ???? DOM ??? ??? ? ??? ?? ??? ??? ???? ?? ??? ?? ?????. ? ?? jQuery?? ???? ???? ???? ? ??? ?? ??? ? ????. ??? jQuery ??? ?? ??? ??? ???? ?? ????? ???? ? ?? ??? ?? ?? ??? ?? ?????. ?? 1: attr() ???? typeof ???? // ???? ??? ?? ??? ??? ??

See all articles