修改或扩展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实现的listview效果
Apr 28 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
JS DOM实现鼠标滑动图片效果
Sep 17 Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 Javascript
jQuery的框架介绍
May 11 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 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网站提速三大“软”招
2006/10/09 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
js下用gb2312编码解码实现方法
2009/12/31 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
利用jQuery和CSS将背景图片拉伸
2015/10/16 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
详解JS预解析原理
2020/06/16 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
Python 含参构造函数实例详解
2017/05/25 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
什么是Python变量作用域
2020/06/03 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
学生会主席就职演讲稿
2014/01/14 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
闭幕式主持词
2014/04/02 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
离职告别感言
2015/08/04 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android
搭建Yolov5服务器
2022/04/30 Servers