$.fn.extend()的具体用法。

最新推荐文章于 2025-10-09 18:22:29 发布

翻译最新推荐文章于 2025-10-09 18:22:29 发布 · 697 阅读

收录于

jQuery

当前文章被收录于：

jQuery

20 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍如何使用jQuery的$.fn.extend方法来为所有jQuery对象添加自定义的方法和属性，并通过具体的HTML页面示例展示了如何实现点击按钮时弹出警告框及访问自定义数据的功能。

译自：http://api.jquery.com/jQuery.fn.extend/

具体html页面例子如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$.fn.extend({

alertWhileClick : function() {
alert("what?");
}
});
</script>
<script>
$.fn.extend({
data : 123,
message : "abc"
});
</script>
<script>
$.fn.extend({
alertWhileClick2 : function() {
alert($.fn.data);
alert($.fn.message);
}
});
</script>
</head>
<body>

<button onclick="$.fn.alertWhileClick()">Copy Text</button>
<button onclick="$.fn.alertWhileClick2()">Copy Text</button>

说明：$.fn和$.prototype是同一个对象。

//////////////////////////、、、、、、、、、、、、、、、

扩展例子后如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$.fn.extend({

alertWhileClick : function() {
alert("what?");
}
});
</script>
<script>
$.fn.extend({
data : 123,
message : "abc"
});
</script>
<script>
$.fn.extend({
alertWhileClick2 : function() {
alert($.fn.data);
alert($.fn.data.sub);
alert($.fn.data.ssub);
alert($.fn.message);
}
});
</script>
<script>
$.fn.data={
sub:521,
ssub:'qwe'
}
</script>
</head>
<body>

<button onclick="$.fn.alertWhileClick()">Copy Text</button>
<button onclick="$.fn.alertWhileClick2()">Copy Text</button>
<button onclick="$.prototype.alertWhileClick2()">Copy Text</button>

</body>
</html>