jQuery

jQuery

2018, Mar 07    

JQuery is a fast, concise JavaScript framework, and a great JavaScript code base (or JavaScript framework) after Prototype. The purpose of jQuery design is “write Less, Do More”, which is to advocate writing Less code and doing More things. It encapsulates JavaScript’s commonly used functional code, providing a simple JavaScript design pattern that optimizes HTML document manipulation, event handling, animation design, and Ajax interactions. The core features of jQuery can be summarized as: unique chain syntax and short and clear multi-function interface; Has a high efficiency and flexible CSS selectors, and can be extended to CSS selectors; Have a convenient plug-in extension mechanism and rich plug-ins. JQuery is compatible with all major browsers, such as IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+, etc.

jQuery

解决同一页面jQuery多个版本或和其他js库冲突方法

  1. 同一页面jQuery多个版本或冲突解决方法 
     <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <meta charset="utf-8" />
     <title>jQuery测试页</title>
 </head>
 <body>
     <!-- 引入 jquery 1.8.0 -->
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
     <script type="text/javascript">

         var $180 = $;

     </script>

     <!-- 引入 jquery 1.9.0 -->
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
     <script type="text/javascript">

         var $190 = $;

     </script>

     <!-- 引入 jquery 2.0.0 -->
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
     <script type="text/javascript">

         var $200 = $;

     </script>

	    <script type="text/javascript">
         console.log($180.fn.jquery);
         console.log($190.fn.jquery);
         console.log($200.fn.jquery);
     </script>

 </body>

 </html>

    jQuery

  2. 同一页面jQuery和其他js库冲突解决方法
  • jQuery在其他js库前
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>jQuery测试页</title>
    </head>

    <body>
        <!-- 引入 jquery 1.8.0 -->
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
        <script type="text/javascript">
            var $180 = $;
            console.log($.fn.jquery);
        </script>

        <!-- 引入 其他库-->
        <script type="text/javascript">
            $ = {
                fn:{
                    jquery:"wang91an.io"
                }
            };
        </script>
        <script type="text/javascript">
            console.log($.fn.jquery);
            console.log($180.fn.jquery);
        </script>
    </body>
    </html>

jQuery

  • jQuery在其他js库后
    <!DOCTYPE html>
   	<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>jQuery测试页</title>
    </head>
    <body>

        <!-- 引入 其他库-->
        <script type="text/javascript">
            $ = {
                fn:{
                    jquery:"wang91an.io"
                }
            };
        </script>

        <!-- 引入 jquery 1.8.0 -->
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    	 <script type="text/javascript">
            console.log($.fn.jquery);
            var $180 = $.noConflict();
            console.log($.fn.jquery);
            console.log($180.fn.jquery);
        </script>
    </body>
    </html>

jQuery

另外3个解决方案：

  • 方案1：

    • 引入noConflict(),将$替换为其他符号

代码如下面：

	var $j = jQuery.noConflict(); 

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

		$j("#btn1").click(function(){ 

		alert("Text: " + $j("#test").text()); 

		}); 

	});

缺点：引入了这段代码后，不仅是当前的js文件，该html引用的所有js中，如果有用到jquery中的$，都得用$j来代替之前的$

  • 方案2：

代码如下

	ready函数是jquery的入口函数，可以 

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

	替换成

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

缺点：只对ready嵌套内的代码有效，对嵌套外的代码是无效的。如果你所有的逻辑，都在写ready函数中，那没问题。但我们一般都会在ready函数之外写一些子函数，然后ready函数再去调用这些函数。这个方案对这些函数是无效的，因此这套方案有局限性。

  • 方案3（推荐，特别是开发js插件时）：

    • 给js内容包上一个函数

代码如下


	jQuery(function($){ 

	//你的js代码放在这里（例如第二个方案提到的ready函数和子函数） 

	//如果是js文件，其实就是在文件头部和尾部各加一行代码 

	}
	或者
	
	(function($) { 

	//你的js代码 

	})(jQuery);

这个方法，没有上面两个方案的缺点，只会影响到被包在jQuery(function($){}中的代码。 不会影响到其他js代码，这一点很重要。试想一下，假如你写了一个js公共组件，该组件需要用到jquery，为了提高鲁棒性，需考虑$符号冲突问题。如果使用方案1，那么别人在使用时，还得遵守你的约定，把自己js代码中的$改成$,而如果使用方案3，既能避免$冲突对该组件的影响，又无需要求使用公共组件的人修改自己的代码。

Twitter Facebook Google+
# jQuery