修改或扩展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下给元素添加事件的方法与代码
Aug 13 Javascript
JavaScript 替换Html标签实现代码
Oct 14 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
详解node.js中的npm和webpack配置方法
Jan 21 Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 Javascript
vue开发中遇到的问题总结
Apr 07 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 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
PHP swfupload图片上传的实例代码
2013/09/30 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
js实现文字滚动效果
2016/03/03 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
深入理解Python爬虫代理池服务
2018/02/28 Python
python读取几个G的csv文件方法
2019/01/07 Python
python库matplotlib绘制坐标图
2019/10/18 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
为什么要做架构设计
2015/07/08 面试题
酒店管理毕业生自荐信
2013/10/24 职场文书
工程部经理岗位职责
2013/12/08 职场文书
医院护士的求职信
2014/01/03 职场文书
七一党建活动方案
2014/01/28 职场文书
委托公证书
2014/04/08 职场文书
艺术教育实施方案
2014/05/03 职场文书
学校教学工作总结2015
2015/05/19 职场文书
欠款起诉书范文
2015/05/19 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android