1. 概述
jquery允许拓展自定义的方法， 绑定到$.fn对象上，
编写一个jQuery插件的原则：
- 给
$.fn绑定函数，实现插件的代码逻辑； - 插件函数最后要
return this;以支持链式调用； - 插件函数要有默认值，绑定在
$.fn.<pluginName>.defaults上； - 用户在调用时可传入设定值以便覆盖默认值。
2. example
<html><body><div id="test-highlight1"> <p>什么是<span>jQuery</span></p> <p><span>jQuery</span>是目前最流行的<span>JavaScript</span>库。</p></div><script src='/images/loading.gif' data-original="jquery-3.1.0.js"></script><script type="text/javascript">$(function(){ 'use strict'; (function(){ $.fn.highlight = function (options) { var opts = $.extend({}, $.fn.highlight.defaults, options); // this已绑定为当前jQuery对象: this.css('backgroundColor', opts.backgroundColor).css('color', opts.color); return this; } $.fn.highlight.defaults = { 'backgroundColor' : '#d85030', 'color' : '#fff8de' }; $.fn.highlight.defaults.backgroundColor = '#659f13'; $.fn.highlight.defaults.color = '#f2fae3'; $("#test-highlight1 span").highlight();
$('#test-highlight1 span').highlight({
color : '#dd1144'
}); })();});</script></body></html>
3. 使用过滤 针对特定元素的拓展
类似submit方法只能作用在form上，我们也可以自定义针对指定dom元素使用的方法。
jquery的filter这时派上了用场。
example
<html><body><div id="test-external"> <p>如何学习<a href="http://jquery.com">jQuery</a>？</p> <p>首先，你要学习<a href="http://www.cnblogs.com//wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000">JavaScript</a>，并了解基本的<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML</a>。</p></div><script src='/images/loading.gif' data-original="jquery-3.1.0.js"></script><script type="text/javascript">$(function(){ 'use strict'; (function(){ $.fn.external = function () { return this.filter('a').each(function(){ var a = $(this); var url = a.attr('href'); if(url && (url.indexOf('http://')===0 || url.indexOf('https://')===0)){ a.attr('href', '#0') .removeAttr('target') .append('<i ></i>') .click(function(){ if(confirm("确认跳转到"+url)){ window.open(url); } }); } }); } $('#test-external a').external(); })();});</script></body></html>
原标题：jquery 拓展
关键词：jquery
我知道了 