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 ...