有时我们要用到自己定义的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");
});
});
很简单...