• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > 修改或扩展jQuery原生方法的代码实例

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

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了修改,扩展,jQuery,原生方法等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

修改或者扩展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函数设置元素

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • jQuery+ajax实现修改密码验证功能实例详解
  • jQuery修改DOM结构_动力节点Java学院整理
  • jQuery css() 方法动态修改CSS属性
  • jQuery动态修改字体大小的方法【测试可用】
  • jQuery增加、删除及修改select option的方法
  • 基于jQuery实现表格的查看修改删除
  • JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
  • jquery easyui datagrid实现增加,修改,删除方法总结
  • jquery ajax双击div可直接修改div中的内容
  • jquery实现用户信息修改验证输入方法汇总

相关文章

  • 2017-08-16jQuery实现对象转为url参数的方法
  • 2017-08-16为Jquery EasyUI 组件加上清除功能的方法(详解)
  • 2017-08-16轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
  • 2017-08-16浅析jQuery Mobile的初始化事件
  • 2017-08-16jquery win 7透明弹出层效果的简单代码
  • 2017-08-16jQuery链使用指南
  • 2017-08-16JQuery右键菜单插件ContextMenu使用指南
  • 2017-08-16jQuery实现二维码扫描功能
  • 2017-08-16jquery iframe操作详细解析
  • 2017-08-16jquery validate.js表单验证的基本用法入门

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • Jquery插件easyUi表单验证提交(示例代码)
    • jQuery获取与设置iframe高度的方法
    • JQuery实现超链接鼠标提示效果的方法
    • jQuery插件实现无缝滚动特效
    • 基于jQuery的Tab选项框效果代码(插件)
    • 到处都是jQuery选择器的年代 不了解它们的性能,行吗
    • jquery tools系列 overlay 学习第1/2页
    • jquery获得同源iframe内body下标签的值的方法
    • jQuery.ajax实现根据不同的Content-Type做出不同的响应
    • jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有