jQuery扩展与noConflict

jQuery扩展与noConflict

扩展性很强是jQuery又一大优势，我们可以扩展定制自己需要的任何功能。

l        jQuery扩展【加出属于自己的功能】

方式一：

ExtendsIndex.html

首先在适当文字引入自己扩展的js文件

<script type="text/javascript"src="myjQuery.js"></script>

 

ExtendsIndex.js

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

       $.myjq(); //这样一调用就可以了

);

 

myjQuery.js【扩展文件】

$.myjq=function(){

       alert("Hello,myjQuery");

}

 

方式二【更常见】：

ExtendsIndex.html

首先在适当文字引入自己扩展的js文件

<script type="text/javascript"src="myjQuery.js"></script>

文档中创建一个div

<div></div>

 

ExtendsIndex.js

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

       $("div").myjq();      //这样一调用就可以了

);

 

myjQuery.js【扩展文件】

$.fn.myjq=function(){

       $(this).text("Hello");

}

 

l        noConflict【解决“$”的冲突】

noConflict.html

<div>Hello</div>

<button id="btn">按钮</button>

 

noConflict.js

$.noConflict();

jQuery(document).ready(function(){

       jQuery("#btn").on("click",function(){

              jQuery("div").text("newHello");

       });

});

或者用一个对象替换

var myjq=$.noConflict();

myjq(document).ready(function(){

       myjq("#btn").on("click",function(){

              myjq("div").text("newHello");

       });

});