修改或扩展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 相关文章推荐
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
jquery调用asp.net 页面后台的实现代码
Apr 27 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
js浏览器html5表单验证
Oct 17 Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 Javascript
jQuery实现购物车全功能
Jan 11 jQuery
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
一棵php的类树(支持无限分类)
2006/10/09 PHP
php获取域名的google收录示例
2014/03/24 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
html读出文本文件内容
2007/01/22 Javascript
extjs fckeditor集成代码
2009/05/10 Javascript
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
浅谈Vue数据绑定的原理
2018/01/08 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
numpy.array 操作使用简单总结
2019/11/08 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
中医药大学毕业生自荐信
2013/11/08 职场文书
迎七一演讲稿
2014/09/12 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
Redis 彻底禁用RDB持久化操作
2021/07/09 Redis
Redis实现短信验证码登录的示例代码
2022/06/14 Redis