jquery插件編寫
阿新 • • 發佈：2018-12-03
jquery對象 擴展 需要 對象 方式 text asc type 直接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>插件編寫</title>
</head>
<body>
<p>
<a href="javascript:;">鏈接一</a>
<a href="javascript:;">鏈接二</a>
<a href="javascript:;">鏈接三</a>
</p>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
/*方法一:通過$.extend()來擴展jQuery
在jQuery命名空間或者理解成jQuery身上添加了一個靜態方法
所以我們調用通過$.extend()添加的函數時直接通過$符號調用（$.myfunction()）
而不需要選中DOM元素($(‘#example‘).myfunction())。
這種方式用來定義一些輔助方法是比較方便的。比如一個自定義的console，輸出特定格式的信息，
定義一次後可以通過jQuery在程序中任何需要的地方調用它。
*/
$.extend({
sayHello:function(name){
alert("hello"+ (name ? name : "jim"));
}
});
//$.sayHello("xiao");
/*方法二:通過$.fn 向jQuery添加新的方法
基本上就是往$.fn上面添加一個方法，名字是我們的插件名稱。然後我們的插件代碼在這個方法裏面展開。
在插件名字定義的這個函數內部，this指代的是我們在調用該插件時，用jQuery選擇器選中的元素，
一般是一個jQuery類型的集合。比如$(‘a‘)返回的是頁面上所有a標簽的集合，且這個集合已經是jQuery包裝類型了，
也就是說，在對其進行操作的時候可以直接調用jQuery的其他方法而不需要再用美元符號來包裝一下。
*/
$.fn.colorRed = function(){
this.css("color","red"); ////在這個方法裏面,this指的是用jQuery選中的元素，不需要加$
this.each(function(){ //this指代jQuery選擇器返回的集合,在each方法內部，this指帶的是普通的DOM元素了，如果需要調用jQuery的方法那就需要用$來重新包裝一下。
$(this).append($(this).attr("href"));
})
}
/*調用的時候，要先獲取jquery對象，然後調用插件方法，不是直接colorRed("a")，切記！*/
$("a").colorRed();
</script>
</body>
</html>jquery插件編寫