修改或扩展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 常用校验函数
Mar 26 Javascript
jQuery操作input type=radio的实现代码
Jun 14 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
react的hooks的用法详解
Oct 12 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
Js切换功能的简单方法
2010/11/23 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
Web服务器框架 Tornado简介
2014/07/16 Python
Python出现segfault错误解决方法
2016/04/16 Python
Python简单实现enum功能的方法
2016/04/25 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
python3爬虫怎样构建请求header
2018/12/23 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
Python3 使用pillow库生成随机验证码
2019/08/26 Python
超实用的 30 段 Python 案例
2019/10/10 Python
Python运行异常管理解决方案
2020/03/09 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
公职人员索取回扣检举信
2014/04/04 职场文书
公司节能减排方案
2014/05/16 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
PHP新手指南
2021/04/01 PHP
Python爬虫之爬取二手房信息
2021/04/27 Python