修改或扩展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 相关文章推荐
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
JS解析XML实例分析
Jan 30 Javascript
JQuery动画与特效实例分析
Feb 02 Javascript
JavaScript实现SHA-1加密算法的方法
Mar 11 Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
vue render函数动态加载img的src路径操作
Oct 26 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&amp;&amp;mysql)三
2006/10/09 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
js 幻灯片的实现
2011/12/06 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
JS验证字符串功能
2017/02/22 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
Python快速从注释生成文档的方法
2016/12/26 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
Python range与enumerate函数区别解析
2020/02/28 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
大学生写自荐信的技巧
2014/01/08 职场文书
班级道德讲堂实施方案
2014/02/24 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
2015年班组工作总结
2015/04/20 职场文书