1. 概述

jquery允许拓展自定义的方法， 绑定到$.fn对象上，

编写一个jQuery插件的原则：

  1. 给$.fn绑定函数，实现插件的代码逻辑；
  2. 插件函数最后要return this;以支持链式调用；　　　　
  3. 插件函数要有默认值，绑定在$.fn.<pluginName>.defaults上；
  4. 用户在调用时可传入设定值以便覆盖默认值。

2. example

<html>

<body>

<div id="test-highlight1">

    <p>什么是<span>jQuery</span></p>

    <p><span>jQuery</span>是目前最流行的<span>JavaScript</span>库。</p>

</div>

<script src="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="/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000">JavaScript</a>，并了解基本的<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML</a>。</p>

</div>

<script src="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 class="uk-icon-external-link"></i>')

                 .click(function(){

                    if(confirm("确认跳转到"+url)){

                        window.open(url);

                    }

                  });

            }

        });

    }

    $('#test-external a').external();

  })();

});

</script>

</body>

</html>

　　　　

jquery 拓展的更多相关文章

  1. js获取网页的url文件名( 例如index.aspx),js获取url的参数(例如获取 ?cid=joeylee的值),给jquery拓展方法

      <script type="text/javascript"> var JsRequest={ //这就是一个静态类,类里面有2个静态方法 //方法一:获取url的 ...

  2. jquery 拓展函数集

    方式: 通过拓展在调用$()时返回的包装器 1.将函数绑定到$.fn $.fn.disable = function(){ return this.each(function(){ if (typeo ...

  3. Jquery拓展方法

    拓展JQuery一般有两个方法: 1.全局拓展 比如 $.ajax()就是全局函数 拓展方法: Jquery.extend(); 比如: $.extend({ hello:function(mynam ...

  4. jquery 拓展方法

    摘抄自(http://hi.baidu.com/jjjvzugcpmcdmor/item/0e32a89c36a18544f04215d7) $.fn是指jquery的命名空间,加上fn上的方法及属性 ...

  5. jQuery拓展简易快速实现触摸效果

    1.js代码 //触摸开始事件,改变元素的样式 function touchstart(e) { $(this).removeClass("touchend").addClass( ...

  6. jquery拓展插件-popup弹窗

    css:<style> /* 公共弹出层 */ .popWrap{position: fixed;left: 0;top: 0; width: 100%;height: 100%;z-in ...

  7. jquery拓展插件开发

    学习参考网址整理: http://blog.csdn.net/chenxi1025/article/details/52222327 http://www.cnblogs.com/ellisonDon ...

  8. jQuery扩展插件和拓展函数的写法

    <script type="text/JavaScript">            //jQuery插件的写法(需要传入操作对象)        ;(function ...

  9. [原创作品]手把手教你怎么写jQuery插件

    这次随笔,向大家介绍如何编写jQuery插件.啰嗦一下,很希望各位IT界的‘攻城狮’们能和大家一起分享,一起成长.点击左边我头像下边的“加入qq群”,一起分享,一起交流,当然,可以一起吹水.哈,不废话 ...

随机推荐

  1. SQL Server Profiler：使用方法和指标说明

    SQL Server Profiler的中文意思是SQL Server事件探查,一个Sql的监视工具,可以具体到每一行Sql语句,每一次操作,和每一次的连接.感觉这个工具的作用还是很大的,给大家分享一 ...

  2. [转载]IE678兼容性前缀区分

    符合一贯简单的风格,只需记住两个符号 _ 和 * 看例子: #main { background:black; *background:red; _background:blue; } 第一句会被所有 ...

  3. IOS实现中间凸起圆形TabBar

    中间凸起的圆形TabBar曾经比较流行,类似于闲鱼之类的APP就使用了中间凸起TabBar,这两天自己动手实现了一个,效果图如下: 大致原理:重写UITabBar和UITabBarController ...

  4. PLSQL Developer 出64位版了

    在win64环境上,一般安装oracle客户端都是64位的了,Toad 也是64位的,但是PLSQL Developer 还是32位的,只能单单为它装一个32位的oracle 客户端,现在退出64位, ...

  5. CENTOS 基础指令——查看系统环境

    1.查看内核版本 # cat /proc/version # uname -a # uname -r 2.查看linux版本 # cat /etc/issue # cat /etc/redhat-re ...

  6. Ubuntu 配置AP总结

    1.这个是使用别人写的一个GUI来配置,:http://hi.baidu.com/lexiangtaotao/item/5d4e87f22db132c70cd1c86f 2.使用hostapd配置:h ...

  7. java 实现验证码

    package edu.zzuli.common; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; i ...

  8. java框架篇---spring AOP 实现原理

    什么是AOP AOP(Aspect-OrientedProgramming,面向方面编程),可以说是OOP(Object-Oriented Programing,面向对象编程)的补充和完善.OOP引入 ...

  9. MyBatis知多少（16）MyBatis映射

    之前我们详细地讨论了MyBatis背后的设计理念以及iBATIS框架是如何产生的.也说明了MyBatis是一个混合型解决方案,它从处理关系数据库的其他不同方法那里借鉴了许多思想.那么MyBatis到底 ...

  10. WCF小白初试 错误之一：“有零个应用程序终结点”的解决办法

    遇到这类问题 应该是配置文件出现了问题 解决办法是将配置文件中的<service name="命名空间+类名">就可以解决