- <!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>
来源: http://www.bubuko.com/infodetail-2870640.html