jQuery中已經存在很多常用的工具函數，使用這些函數能夠在開發中幫助我們解決很多常見的問題，進而提高開發效率，比如常用的有：$.ajax使用ajax調用，$.each用于周遊對象和數組，$.grep用于過濾數組，$.map對于一個數組進行一定程度轉換後傳回轉換後的數組，等等一系列的方法；但是有時候由于業務的需要，我們可能需要在項目中多次使用一些函數，在這種情況下，可以把這些函數封裝成jQuery的實用函數，以友善調用和重用
不帶參數的jquery插件開發
<!DOCTYPE html>
<html>
<head>
<title>不帶參數的jquery插件開發</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta charset="UTF-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
(function($){
$.fn.extend({
plugName:function(){
$(this).click(function(){
alert($(this).val())
})
}
})
})(jQuery);
</script>
</head>
<body>
<input type="button" value="點選我" id="btn" />
</body>
<script type="text/javascript">
$("#btn").plugName();
</script>
</html>
大概的解釋一下，$.fn.extend是一個執行個體的擴充，但是$.extend是類的擴充
jQuery和$是等價的，你可以認為是别名。plugName這個是插件的名字
帶參數的jquery插件開發
<!DOCTYPE html>
<html>
<head>
<title>帶參數的jquery插件開發</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta charset="UTF-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
(function($){
$.fn.highLight=function(options){
var defaults={"color":"red","background-color":"yellow"};
var opts=$.extend(defaults,options);
$(this).css(opts);
}
})(jQuery)
</script>
</head>
<body>
<div id="myDiv">帶參數的jquery插件開發</div>
</body>
<script type="text/javascript">
$("#myDiv").highLight({color:"#fff"});
</script>
</html>
這裡和不帶參數的jquery插件差不多，但是還有略微的不同，最後$("#myDiv").highLight({color:"#fff"});來給jquery傳遞參數！如果不寫的話，那就用jquery自帶的預設的值
var opts = $.extend(defaults,options);這句話的意思是吧defaults的屬性和options的屬性合并并儲存到opts中
![如何正确的去學習web前端開發？[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)