源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-09-30 01:50 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:修改或扩展jQuery原生方法的代码实例
修改或者扩展jQuery的方法代码实例: 毫无疑问,jQuery是一款功能强大且使用方便的类库。 从它的广泛应用可以证实上面的观点,但是正所谓人无完人,金无足赤,jQuery也是如此,并非在任何时候或者场合都能够完美的完成我们的任务,所以有事以后就需要对jQuery原有的方法进行扩展修改,但是最好方法仍然具有原来的功能。 代码实例:
[u]复制代码[/u] 代码如下:
<!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函数设置元素
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部