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

工程师恩泽技术 2022年11月11日

0 收藏 345 点赞 2,807 浏览 1232 个字

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

很简单…