修改或扩展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如何处理从java后台返回的list
Apr 24 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 Javascript
深入浅析JS中的严格模式
Jun 04 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 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 验证码制作(网树注释思想)
2009/07/20 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
网页常用特效代码整理
2006/06/23 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
实例解析Array和String方法
2016/12/14 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
NVM安装nodejs的方法实用步骤
2019/01/16 NodeJs
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
QML实现钟表效果
2020/06/02 Python
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
Java面试笔试题大全
2016/11/23 面试题
绩效考核实施方案
2014/03/18 职场文书
法律专业自荐信
2014/06/03 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
房屋过户委托书范本
2014/10/07 职场文书
爱心助学感谢信
2015/01/21 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
如何基于python实现单目三维重建详解
2022/06/25 Python