修改或扩展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 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
悬浮数字的实现案例
Feb 19 Javascript
javascript处理表单示例(javascript提交表单)
Apr 28 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
js中数组的常用方法小结
Dec 30 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
Node.js学习教程之Module模块
Sep 03 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
JavaScript基于SVG的图片切换效果实例代码
Dec 15 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中二维数组排序问题方法详解
2015/08/28 PHP
PHP的mysqli_thread_id()函数讲解
2019/01/24 PHP
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
sklearn线性逻辑回归和非线性逻辑回归的实现
2020/06/09 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
岗位职责定义及内容
2013/11/08 职场文书
电钳工人个人求职信
2014/05/10 职场文书
法制宣传标语
2014/06/23 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
通讯稿格式及范文
2015/07/22 职场文书