jQuery扩展与noConflict的用法-小示例

时间:2022-09-04 22:19:19

有时我们要用到自己定义的jquery,这时可以通过jQuery扩展来实现该功能

index.html

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.1.0.min.js"></script>
<script src="myjQuery.js"></script>
<script src="Extends.js"></script>
</head>
<body> </body>
</html>

自己定义的 myjQuery.js

$.myjq = function(){
alert("hello myjQuery");
}

Extends.js

$(document).ready(function(){
$.myjq();
});

最后打开浏览器后访问,成功输出 “hello myjQuery”

接下来介绍另一种比较常用的扩展方法:

index.html

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.1.0.min.js"></script>
<script src="myjQuery.js"></script>
<script src="Extends.js"></script>
</head>
<body>
<div></div>
</body>
</html>

自己定义的 myjQuery.js

$.fn.myjq = function(){
$(this).text("hello");
}

Extends.js

$(document).ready(function(){
$("div").myjq();
});

同样实现了效果

2、jQuery当前的美元符号如果被其它框架所占有时的处理方法

index.html

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.1.0.min.js"></script>
<script src="noConflict.js"></script>
</head>
<body>
<div>Hello</div>
<button id="btn">按钮</button>
</body>
</html>

noConflict.js

 var myjq = $.noConflict();//当前的美元符号如果被其它框架所占有的时候,加上这句话,然后将美元符号换成myjq即可
myjq(document).ready(function(){
myjq("#btn").on("click",function(){
myjq("div").text("new hello");
});
});

很简单...