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. CvMat 矩阵的使用方法和简单程序

    一:CvMat* cvInitMatHeader( CvMat* mat, int rows, int cols, int type,void* data=NULL, int step=CV_AUTO ...

  2. typeof instanceof 之间的区别总结

        typeof   它返回值是一个字符串,该字符串说明运算数的类型. a=1; b=true; c="c"; d=function(){ console.log(" ...

  3. HP原装硒鼓

  4. C# barcode生成代码

    protected void Page_Load(object sender, EventArgs e) { string code = Request.Params["code" ...

  5. Android源码网站

    https://mirrors.tuna.tsinghua.edu.cn/ https://mirrors.tuna.tsinghua.edu.cn/help/AOSP/ https://mirror ...

  6. ODAC（V9.5.15) 学习笔记（十六）直接访问模式

    直接访问模式(Direct mode)是ODAC最大的特色之一,即不需要安装Oracle客户端,ODAC越过了OCI(Oracle Call Interface ),使用TCP/IP协议就可以直接与O ...

  7. Qt编写自定义控件大全

    最新版可执行文件 http://pan.baidu.com/s/1i491FQP 不定期增加控件及修正BUG和改进算法. 总图: 1:动画按钮 * 1:可设置显示的图像和底部的文字 * 2:可设置普通 ...

  8. iOS 7定制UIPageControl遇到的问题

    转自snorlax's blog 先说下ios7之前 那些点点的实现非常简单 就是UIPageControl.subviews 就是一个个点的UIImageView 所以只需简单的替换掉就好了代码如下 ...

  9. CGAL4.4+VC2008编译

    一: CGAL是欧盟资助的基础几何库,很底层, 纯算法, 对于你的项目和科研都是不可多得的好东西, 废话一句, 国内做这样的东西, 估计会活不下去交不了差的. 不多介绍.送上 英文原址, 从软件角度, ...

  10. android手机出现sqlite3 not found的解决方法

    解决方法如下: 1.如果/system目录为不可读写的,需要挂载为读写: C:\Users\easteq>adb shell root@android:/ # mount -o remount, ...