jQuery 对象绑定新方法(插件的实现)
来源:互联网 发布:外卖送餐员用什么软件 编辑:程序博客网 时间:2024/05/18 15:28
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.11.2.min.js"></script></head><body><div id="test-highlight1"> <p>什么是<span>jQuery</span></p> <p><span>jQuery</span>是目前最流行的<span>JavaScript</span>库。</p></div><div id="test-external"> <p>如何学习<a href="http://jquery.com">jQuery</a>?</p> <p>首先,你要学习<a href="/xxx/xxxx">JavaScript</a>,并了解基本的<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML</a>。</p></div><script type="text/javascript">// 给jQuery对象绑定一个新方法是通过扩展$.fn对象实现的。让我们来编写第一个扩展——highlight1(): $.fn.highlight1=function (options) { //函数内部的this在调用时被绑定为jQuery对象,所以函数内部代码可以正常调用所有jQuery对象的方法。 var bgcolor = options && options.backgroundColor || '#fffceb'; var color = options && options.color || '#d85030'; this.css('backgroundColor', bgcolor).css('color', color);// this.css('backgroundColor','#93b300').css('color','#d85030'); //为什么最后要return this;? //因为jQuery对象支持链式操作,我们自己写的扩展方法也要能继续链式下去: return this; };$.fn.highlight = function (options) { // 合并默认值和用户设定值: var opts = $.extend({}, $.fn.highlight.defaults, options); this.css('backgroundColor', opts.backgroundColor).css('color', opts.color); return this;}// 设定默认值:$.fn.highlight.defaults = { color: '#d85030', backgroundColor: '#fff8de'} $('#test-highlight1 span').highlight1();//最终,我们得出编写一个jQuery插件的原则:////给$.fn绑定函数,实现插件的代码逻辑;//插件函数最后要return this;以支持链式调用;//插件函数要有默认值,绑定在$.fn.<pluginName>.defaults上;//用户在调用时可传入设定值以便覆盖默认值。//我们知道jQuery对象的有些方法只能作用在特定DOM元素上,比如submit()方法只能针对form。如果我们编写的扩展只能针对某些类型的DOM元素,应该怎么写?//还记得jQuery的选择器支持filter()方法来过滤吗?我们可以借助这个方法来实现针对特定元素的扩展。//举个例子,现在我们要给所有指向外链的超链接加上跳转提示,怎么做?//先写出用户调用的代码:$.fn.external = function () { // return返回的each()返回结果,支持链式调用: return this.filter('a').each(function () { // 注意: each()内部的回调函数的this绑定为DOM本身! 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); } }); } });}</script></body></html>
1 0
- jQuery 对象绑定新方法(插件的实现)
- 为jquery对象添加新方法
- [Jquery]hover方法实现对象绑定
- 基于jquery的双向绑定插件
- jquery数据绑定插件
- 浅谈javascript对象、如何实现继承、jQuery方法的扩展(jquery插件)
- jQuery插件的实现框架
- Android 动态创建Android控件、绑定事件处理的新方法
- jQuery对象级别的插件编写
- jquery对象级别插件的开发
- Linq to Excel绑定对象的实现
- 实现GPRS数据传输新方法的研究
- 实现嵌入式Linux系统的新方法
- 转:实现GPRS数据传输新方法的研究
- 一种实现嵌入式Linux的新方法-ramdisk
- 实现嵌入式Linux的新方法-ramdisk
- 一种实现嵌入式Linux的新方法-ramdisk
- 实现指南针的新方法SensorManager.getOrientation( )
- .net c# vs自动递增版本号
- C++11 中 Class
- 最长递增子序列,(搜狐[编程题]马戏团)
- APK反编译得到Java源码。
- 面向对象设计思想与常见设计模式小结
- jQuery 对象绑定新方法(插件的实现)
- Marvell 8686 SDIO WIFI 内核配置
- (十三)洞悉linux下的Netfilter&iptables:为防火墙增添功能模块【实战】
- HTTP文件下载原理
- Android 开源框架Universal-Image-Loader 学习
- IO 模型简介(理解阻塞、非阻塞、同步、异步)
- 使用高通Vuforia开发AR增强现实游戏之Single Image Target单一图片识别(一)
- KMP算法
- 算法(2)线性表