修改或扩展jQuery原生方法的代码实例
修改或扩展jQuery原生方法的代码实例
发布时间:2016-12-30 来源:查字典编辑
摘要:修改或者扩展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函数设置元素

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类