服务器之家

服务器之家 > 正文

使用JQuery库提供的扩展功能实现自定义方法

时间:2021-03-11 16:46     来源/作者:JQuery教程网

JQuery包装器提供了大量的方法,可以再页面中直接使用。但是,没有任何一个库可以满足所有的需求,所以,JQuery库提供了丰富的扩展功能。以禁用一组表单元素为例,看看怎么简单有效的在JQuery库中添加自定义的功能扩展。(JQuery没有禁用表单元素的方法哦)

上代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE>
 
<html lang="en">
 
<head>
 
<title>Custom Method!</title>
 
<meta http-equiv="content-type" content="text/html;charset=utf-8">
 
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
 
<script type="text/javascript">
 
jQuery(function()
 
{
 
$("form input").disable();
 
});
 
</script>
 
</head>
 
<body>
 
<p>测试自定义方法禁用表单元素</p>
 
<form>
 
<input type="text" value="test"><br/>
 
<input type="button" value="confirm" class="test">
 
</form>
 
</body>
 
</html>

文本框和按钮已经被禁用:
使用JQuery库提供的扩展功能实现自定义方法

若只禁用按钮,添加一个css类即可;

?
1
2
3
4
jQuery(function()
{
$("form input.test").disable();
});

看看是不是禁用了按钮:

使用JQuery库提供的扩展功能实现自定义方法

实现也很简单,打开jquery-2.1.1.js源码,没有压缩的,比较容易,我引入

的是jquery-2.1.1.js,然后添加下列代码

?
1
2
3
4
5
6
7
8
9
10
11
jQuery.fn.disable=function () {
 
return this.each(function()
 
{
 
if(this.disabled != null) this.disabled=true;
 
});
 
}

在按照上述案例的方式调用即可。

在《JQuery In Action》一书中,提到以$.fn.方法名方式扩展(P12),我测试过,没有实现禁用。错误之处,还望指正。

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部