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. 99 Lisp Problems 二叉树(P54~P69)

    P54A (*) Check whether a given term represents a binary tree Write a predicate istree which returns ...

  2. [转]一个小试验验证对象的指针计数置为nil的情况

    本文转载于新风作浪的博客专栏,博客地址:http://blog.csdn.net/duxinfeng2010/article/details/8757211 以下博客原文: 最近遇到这样一个问题,以前 ...

  3. 使用IntelliJ IDEA 14和Maven创建java web项目

    参考地址 http://www.cnblogs.com/jifeng/p/4658765.html

  4. ODAC（V9.5.15) 学习笔记（十七）主从模式

    主从模式(Master/Detail mode)是指建立主表和从表关系的多个数据集集合模式. 1. 关系设置 要设置主从模式,必须有一个主表数据集(TDataSet)和一个从表数据集(TDataSet ...

  5. 转载 jQuery的三种$()

    $号是jQuery“类”的一个别称,$()构造了一个jQuery对象.所以,“$()”可以叫做jQuery的构造函数(个人观点,呵呵!).   1.$()可以是$(expresion),即css选择器 ...

  6. Privacy Policy

    MINE Privacy Policy This unit values your privacy. You are using our service, we may collect and use ...

  7. Java-基本的程序设计结构

    Java-基本的程序设计结构 >注释 Java的注释分为三种情况 第一种://开头 第二种:"/*" 开头 "*/"结尾 上面两种情况跟C#.C++.Ob ...

  8. MSSQL自动备份数据库

    最近项目中,需要用到MSSQL自动定时备份功能,本来想利用C#自己写一个的,但是听说在MSSQL2008中已经集成了功能强大的自动备份功能,于是便提刀上阵,狠狠地琢磨了一番: 首先,打开MSSQL20 ...

  9. [转载]SharePoint 2013测试环境安装配置指南

    软件版本 Windows Server 2012 标准版 SQL Server 2012 标准版 SharePoint Server 2013 企业版 Office Web Apps 2013 备注: ...

  10. Click Models for Web Search(1) - Basic Click Models

    这篇文章主要是介绍一些基本的click model,这些不同的click model对用户与搜索结果页的交互行为进行不同的假设. 为了定义一个model,我们需要描述出observed variabl ...