修改或扩展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 相关文章推荐
理解Javascript_05_原型继承原理
Oct 13 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
js中prototype用法详细介绍
Nov 14 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
Bootstrap简单表单显示学习笔记
Nov 15 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
微信小程序云开发之云函数详解
May 16 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 Javascript
CocosCreator如何实现划过的位置显示纹理
Apr 14 Javascript
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
PHP的FTP学习(二)
2006/10/09 PHP
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
php银联网页支付实现方法
2015/03/04 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
精选的10款用于构建良好易用性网站的jQuery插件
2011/01/23 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
javascript实现连续赋值
2015/08/10 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
Python验证码识别处理实例
2015/12/28 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
python实现随机漫步方法和原理
2019/06/10 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
python二进制文件的转译详解
2019/07/03 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
在Django中实现添加user到group并查看
2019/11/18 Python
tornado+celery的简单使用详解
2019/12/21 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
护理专业的自荐信
2013/10/22 职场文书
QA工程师岗位职责
2013/11/20 职场文书
敬老模范事迹
2014/05/21 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers