欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-06-20 09:23:01
修改或者扩展jquery的方法代码实例: 毫无疑问，jquery是一款功能强大且使用方便的类库。 从它的广泛应用可以证实上面的观点，但是正所谓人无完人，金无足赤，jquery也...

修改或者扩展jquery的方法代码实例:

毫无疑问，jquery是一款功能强大且使用方便的类库。

从它的广泛应用可以证实上面的观点，但是正所谓人无完人，金无足赤，jquery也是如此，并非在任何时候或者场合都能够完美的完成我们的任务，所以有事以后就需要对jquery原有的方法进行扩展修改，但是最好方法仍然具有原来的功能。

代码实例:

代码如下:


<!doctype html>
<html>
<head>
<meta charset=" utf-8">
<title>博客园</title>
<script src="https://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" />
<p id="show"></p>
</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函数设置元素

上一篇： 青椒丝怎么切以及如何切辣椒不辣手

下一篇： 清朝富家小姐的私人用品，你知道是什么吗?

推荐阅读