修改或扩展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 相关文章推荐
Javascript MD4
Dec 20 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
jQuery选择器基础入门教程
May 10 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
vue实现登录拦截
Jun 29 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
改变Apache端口等配置修改方法
2008/06/05 PHP
PHP去除数组中重复的元素并按键名排序函数
2008/08/18 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
基于复选框demo(分享)
2017/09/27 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
taro小程序添加骨架屏的实现代码
2019/11/15 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
用Python读取几十万行文本数据
2018/12/24 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
药品质量检测应届生求职信
2013/11/14 职场文书
校园活动策划书范文
2014/01/10 职场文书
会计实训报告范文
2014/11/04 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
pandas数值排序的实现实例
2021/07/25 Python
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫