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. ODAC（V9.5.15) 学习笔记（十九）主键值自动生成

    ODAC支持通过Oracle的序列来自动生成表的主键功能.这个过程允许在客户端自动完成,不需要过多代码.这个对一些要求自动增长字段做主键的场合非常有用.其实现步骤为: 1.数据库必须先建立生成主键的序 ...

  2. WIN7 64位如何添加网络打印机

    http://wenku.baidu.com/view/2d64bef0f61fb7360b4c65ac.html 该文介绍的比较详细,并且我按照他的方法,确实安装成功了.

  3. 转载 -- 如何判断Javascript对象是否存在

    http://www.ruanyifeng.com/blog/2011/05/how_to_judge_the_existence_of_a_global_object_in_javascript.h ...

  4. libevent源码深度剖析

    原文地址: http://blog.csdn.net/sparkliang/article/details/4957667 第一章 1,前言 Libevent是一个轻量级的开源高性能网络库,使用者众多 ...

  5. 十七、EnterpriseFrameWork框架核心类库之Web控制器

    回<[开源]EnterpriseFrameWork框架系列文章索引> EFW框架源代码下载:http://pan.baidu.com/s/1qWJjo3U EFW框架中的WebContro ...

  6. 超实用的JavaScript技巧及最佳实践（下）

    1.使用逻辑符号&&或者||进行条件判断 1 2 3 var foo = 10;  foo == 10 && doSomething(); // is the same ...

  7. symfony安装使用

    symfony是一个强大的具有DI特性的框架,目前比较流行的php开发框架Drupal,Laravel底层都是使用了symfony. 想了解symfony更多内容,传送门 安装symfony很简单,一 ...

  8. git回滚到上一版本

    git reset --hard HEAD~1

  9. [转载]AxureRP 7.0部件详解（一）

    本文为Axure RT7.0教程,本章主要介绍menu菜单.table表格.Tree Widget 树部件三个部件,后续将持续更新...... Menu 菜单 常用案例 网站导航菜单部件通常用于母板之 ...

  10. Hadoop第11周练习—HBase基础知识

    1 :数据即日志 内容 2 :HBase合并过程 内容 3 :HBase一致性 内容 书面作业1:数据即日志 内容 我们常说HBase是“数据即日志”的数据库,它是怎样修改和删除数据的?和Oracle ...