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. html5开发之viewport使用

    随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择.然而,每一款手机有不同的分辨率,不同屏幕 ...

  2. 使用linux mint 安装无线网卡驱动

    新买了个笔记本Thinkpad E440,用了两天发现无线网非常不稳定,有时候能搜到wifi却连不上,有时候连上了却连不上互联网,于是决定重新安装个网卡驱动. 首先看看自己显卡的型号: lspci : ...

  3. [转]Sql Server 给表与字段添加描述

    /* 在SQL语句中通过系统存储过sp_addextendedproperty可为表字段添加上动态的说明(备注)下面是SQL SERVER帮助文档中对sp_addextendedproperty存储过 ...

  4. SQL Server 数据库操作类

    /// <summary> /// SQLServerHelper的摘要说明. /// </summary> public class SQLServerHelper { pu ...

  5. jqgrid单元格中增加按钮

    1.增加列配置 { label: '问题数据', name: 'action', width: 80, align: 'center' } 2.函数 gridComplete: function () ...

  6. mem_fun 例子

    // functional_mem_fun.cpp // compile with: /EHsc #include <vector> #include <functional> ...

  7. asp.net添加验证码

    1.新建一个aspx页面生成验证码图像 using System; using System.Data; using System.Configuration; using System.Collec ...

  8. Ubuntu中QT使用FFmpeg的奇怪问题

    FFmpeg都已经编译安装好了,QT的程序中调用av_register_all却总是在链接阶段报错,经过长时间的摸索,发现时静态链接库的问题,网上给出的答案都只能解决部分问题,所需的全部链接库如下: ...

  9. 控制反转(Ioc)和依赖注入(DI)

    控制反转IOC, 全称 “Inversion of Control”.依赖注入DI, 全称 “Dependency Injection”. 面向的问题:软件开发中,为了降低模块间.类间的耦合度,提倡基 ...

  10. WebKit内核分析之Page

    参考地址:http://blog.csdn.net/dlmu2001/article/details/6213377 注:本系列博客是在原博主博客基础上增加了自己的理解和片段,可以看源博文获得清晰的结 ...