jQuery扩展-noconflict
Extendsindex.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../../Scripts/jquery-3.4.1.min.js"></script>
<script src="myJquery.js"></script>
<script src="Extendsindex.js"></script>
</head>
<body>
<div ></div>
<!--noconflict-->
<div>Hello</div>
<button id="btn">按钮</button>
</body>
</html>
Extendsindex.js
//$(document).ready(function () {//文档加载完毕
// $.myjq();//方式1
// $("div").myjq();
// //noconflict
// $("#btn").on("click", function () {
// $("div").text("new Hello");
// });
//});
$.noConflict();//后续无需再使用美元符号,美元符号变回jQuery
jQuery(document).ready(function () {//文档加载完毕
//noconflict
jQuery("#btn").on("click", function () {
jQuery("div").text("new Hello");
});
});
myJquery.js
//拓展
$.myjq = function () {
alert("Hello myjQuery");
}
//第二种方式
$.fn.myjq = function () {
$(this).text("Hello");//调用此函数,并添加内容
}