当前位置: 首页 > 编程笔记 >

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

阎功
2023-03-14
本文向大家介绍修改或扩展jQuery原生方法的代码实例,包括了修改或扩展jQuery原生方法的代码实例的使用技巧和注意事项,需要的朋友参考一下

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

 类似资料:
  • 我正在为mysql数据库创建一个REST api服务。我使用IntelliJ的持久化工具生成了类。它做得很好。 我正在使用的模式有一些古怪之处。用户希望endpoint可由“id”主键列以外的其他属性访问。 Ex:<代码>/对象/ 这里有一个问题。模式可以改变。name属性不会去任何地方,所以我可以安全地假设它将永远在对象上。 我了解到您可以使用超类强制这些生成的实体具有自定义属性而不会影响数据库

  • 本文向大家介绍jQuery扩展方法实现Form表单与Json互相转换的实例代码,包括了jQuery扩展方法实现Form表单与Json互相转换的实例代码的使用技巧和注意事项,需要的朋友参考一下 JQuery笔记 记两段代码,使用JQuery实现从表单获取json与后端交互,以及把后端返回的json映射到表单相应的字段上。 把表单转换出json对象 将josn对象赋值给form,使表单控件也显示相应的

  • 本文向大家介绍ReactNative-JS 调用原生方法实例代码,包括了ReactNative-JS 调用原生方法实例代码的使用技巧和注意事项,需要的朋友参考一下 第一步首先创建ReactNative 模块类继承ReactContextBaseJavaModule 第二步创建一个React包管理器实现ReactPackage将每个模块放到模块集合中 第三步在应用入口注册这个React包管理器 第四

  • 本文向大家介绍原生js实现复制对象、扩展对象 类似jquery中的extend()方法,包括了原生js实现复制对象、扩展对象 类似jquery中的extend()方法的使用技巧和注意事项,需要的朋友参考一下 jq的extend()方法能很方便的实现扩展对象方法,语法如下:$.extend(obj1,boj2,obj3); 现在要实现的是:原生js实现复制对象,扩展对象,类似jq中的extend()

  • 问题内容: 我想在node.js中使用.net dll。这是否意味着我需要使用“ CLR托管”(LA)使这些DLL在C / C ++中可用 .NET Framework 4托管接口或 托管公共语言运行时 不幸的是, 在github上创建一个nodejs本机.Net扩展的示例有点令人失望,只需向下滚动到最后一步 将“公共语言运行时支持”选项更改为“无公共语言运行时支持” 你知道我的意思。更正此条款的

  • 本文向大家介绍原生JS实现获取及修改CSS样式的方法,包括了原生JS实现获取及修改CSS样式的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了原生JS实现获取及修改CSS样式的方法。分享给大家供大家参考,具体如下: 大家都知道在JavaScript原生操作中获取元素的样式,在实际操作是使用时比较频繁的一件事,这里像大家介绍下获取css样式的方法,希望可以帮助一些需要的人,如果有幸被大牛