修改或扩展jQuery原生方法的代码实例

148 阅读 0 评论 98 点赞

我是靠谱客的博主甜蜜跳跳糖，最近开发中收集的这篇文章主要介绍修改或扩展jQuery原生方法的代码实例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

修改或者扩展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函数设置元素