修改或扩展jQuery原生方法的代码实例


Posted in Javascript onJanuary 13, 2015

修改或者扩展jQuery的方法代码实例:

毫无疑问,jQuery是一款功能强大且使用方便的类库。

从它的广泛应用可以证实上面的观点,但是正所谓人无完人,金无足赤,jQuery也是如此,并非在任何时候或者场合都能够完美的完成我们的任务,所以有事以后就需要对jQuery原有的方法进行扩展修改,但是最好方法仍然具有原来的功能。

代码实例:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<title>三水点靠木</title>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script>

$.prototype.val = function (base) {

  return function () {

    var s = this;

    var a = "data-property";

    var p = s.attr(a);

    var isset = arguments.length > 0;

    var v = isset ? arguments[0] : null;

         

    if (isset&&typeof(base)=="function") { 

      base.call(s, v); 

    } 

    else { 

      v = base.call(s); 

    }

    if (p) {

      if (isset) { 

        s.attr(p, v); 

        return s 

      }

      else { 

        return s.attr(p) 

      }

    }

    else {

      if (!s.is(":input")){ 

        if (isset) { 

          s.text(v); return s; 

        } 

        else { 

          return s.text(); 

        } 

      }

      else { 

        return isset ? s : v; 

      }

    }

  }

}($.prototype.val);

$(document).ready(function(){

  $("#show").html($("#lbl").val()+"<br>"+$("#txt").val());

})

</script>

</head>

<body>

<span id="lbl">三水点靠木</span>   

<input type="text" id="txt" value="softwhy.com" />

<input type="checkbox" value="antzone" />

<div id="show"></div>

</body>

</html>

上面的代码毫无疑问是对jQuery的val()方法做的扩展,下面介绍一下它的实现过程。

代码注释:

1.$.prototype.val = function (base) {}(($.prototype.val),修改jQuery原来的val()方法,这里采用闭包的方式,传递的参数是原来的val()方法,以保持原来val()方法的功能。
2.return function (){},返回一个函数对象。
3.var s = this,将this的指向引用赋值给变量s,这里的this是指向jQuery对象实例的。
4.var a = "data-property",声明一个变量并赋值,关于它的更多内容面会介绍。
5.var p = s.attr(a),其实data-property就是标签上的一个自定义属性,那么这段代码就是获取此属性值。
6.var isset = arguments.length > 0,判断修改后的val()方法是否传递了参数。
7.var v = isset ? arguments[0] : null,如果传递参数,那么久获取第一个参数,其他的忽略。
8.if (isset&&typeof(base)=="function") {
  base.call(s, v);
},如果传递了参数,且base参数是一个函数,那么就调用base函数设置元素

Javascript 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
showModelessDialog()使用详解
Sep 21 Javascript
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
jquery密码强度校验
Dec 02 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
基于JavaScript实现数码时钟效果
Mar 30 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
JQuery.get提交页面不跳转的解决方法
Jan 13 #Javascript
15个jquery常用方法、小技巧分享
Jan 13 #Javascript
js对象基础实例分析
Jan 13 #Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 #Javascript
js使用心得分享
Jan 13 #Javascript
js查找节点的方法小结
Jan 13 #Javascript
使用js画图之画切线
Jan 12 #Javascript
You might like
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
jupyter notebook 重装教程
2020/04/16 Python
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
数据库测试通常都包括哪些方面
2015/11/30 面试题
小学教师节活动方案
2014/01/31 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
导游词之广西漓江
2019/11/02 职场文书