修改或扩展jQuery原生方法的代码实例-js教程-PHP中文网

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

PHPz

发布： 2016-05-16 16:20:48

转载

1456人浏览过

这篇文章主要介绍了修改或扩展jquery原生方法的代码实例,本文用一个扩展jquery原生方法val的例子,讲解了如何对jquery原生方法修改或扩展,需要的朋友可以参考下

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

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

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

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>php中文网</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">php中文网</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 (){}，返回一个函数对象。

名扬银河企业建站源码2.0.2

名扬银河企业建站系统，适用于无代码基础的新手，快速搭建企业网站，程序内置了多项实用功能及插件，能够便捷的对网站进行修改、调整、优化等方面进行操作。【部分功能介绍】1、产品管理发布企业产品信息，管理企业产品，自定义产品封面图，产品详情图、文、视频，产品扩展属性自定义等。2、案例管理系统发布企业成功案例，管理成功案例，自定义案例封面图，案例详情图、文、视频，案例扩展属性自定义等。3、资讯管理系统发布企