修改或扩展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 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
借用Google的Javascript API Loader来加速你的网站
Jan 28 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
RxJS的入门指引和初步应用
Jun 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
CI框架的安全性分析
2016/05/18 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
node.js require() 源码解读
2015/12/13 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
js简易版购物车功能
2017/06/17 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
js实现内置计时器
2019/12/16 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
Python模拟登录12306的方法
2014/12/30 Python
在Python中移动目录结构的方法
2016/01/31 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
深入了解python中元类的相关知识
2019/08/29 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
给海归自荐信的建议
2013/12/13 职场文书
2015年暑假工作总结
2015/07/13 职场文书
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS