jQueryjQuery入门

备注

jQuery是一个JavaScript库，它简化了DOM操作，事件处理，AJAX和动画。它还处理底层DOM和JavaScript引擎中的许多浏览器兼容性问题。

每个版本的jQuery都可以从https://code.jquery.com/jquery/以压缩（缩小）和未压缩格式下载。

版本

版	笔记	发布日期
1.0	第一次稳定发布	2006-08-26
1.1		2007-01-14
1.2		2007-09-10
1.3	Sizzle引入了核心	2009-01-14
1.4		2010-01-14
1.5	延迟回调管理，ajax模块重写	2011-01-31
1.6	`attr()`和`val()`方法的性能显着提升	2011-05-03
1.7	新事件API： `on()`和`off()` 。	2011-11-03
1.8	Sizzle改写，改进了动画和`$(html, props)`灵活性。	2012-08-09
1.9	删除不推荐使用的接口和代码清理	2013年1月15日
1.10	合并了1.9和2.0 beta周期中报告的错误修复和差异	2013年5月24日
1.11		2014年1月24日
1.12		2016年1月8日
2.0	IE 6-8降低了对性能改进和缩小尺寸的支持	2013年4月18日
2.1		2014年1月24日
2.2		2016年1月8日
3.0	一些jQuery自定义选择器的大规模加速	2016年6月9日
3.1	没有更多的无声错误	2016年7月7日

入门

使用以下内容创建文件hello.html ：

<!DOCTYPE html>
<html>
<head>
    <title>Hello, World!</title>
</head>
<body>
    <div>
        <p id="hello">Some random text</p>
    </div>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#hello').text('Hello, World!');
        });
    </script>
</body>
</html>

JSBin现场演示

在Web浏览器中打开此文件。因此，您将看到一个包含以下文本的页面： Hello, World!

代码说明

从jQuery CDN加载jQuery库：
```
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
 
```
这引入了$ global变量，它是jQuery 函数和命名空间的别名。
请注意，包含jQuery时最常见的错误之一是在任何其他可能依赖或使用它的脚本或库之前未能加载库。

当jQuery检测到DOM（文档对象模型）被“准备好”时，推迟执行的函数：

// When the `document` is `ready`, execute this function `...`
$(document).ready(function() { ... });
 
// A commonly used shorthand version (behaves the same as the above)
$(function() { ... });

一旦DOM准备就绪，jQuery就会执行上面显示的回调函数。在我们的函数内部，只有一个调用可以执行两个主要操作：
1. 获取id 属性等于hello 的元素（我们的选择器 #hello ）。使用选择器作为传递参数是jQuery功能和命名的核心;整个库基本上是从扩展document.querySelectorAll ^MDN演变而来的。
2. 将所选元素中的text() 设置为Hello, World! 。
```
#    ↓ - Pass a `selector` to `$` jQuery, returns our element
$('#hello').text('Hello, World!');
#             ↑ - Set the Text on the element
 
```

有关更多信息，请参阅jQuery - Documentation页面。

避免命名空间冲突

除了jQuery之外的库也可以使用$ 作为别名。这可能会导致这些库和jQuery之间的干扰。

要释放$ 以用于其他库：

jQuery.noConflict();

调用此函数后， $ 不再是jQuery 的别名。但是，您仍然可以使用变量jQuery 本身来访问jQuery函数：

jQuery('#hello').text('Hello, World!');

或者，您可以将另一个变量指定为jQuery的别名：

var jqy = jQuery.noConflict();
jqy('#hello').text('Hello, World!');

相反，为了防止其他库干扰jQuery，您可以将jQuery代码包装在一个立即调用的函数表达式（IIFE）中，并传入jQuery 作为参数：

(function($) {
    $(document).ready(function() {
        $('#hello').text('Hello, World!');
    });
})(jQuery);

在这个IIFE中， $ 只是jQuery的别名。

另一种保护jQuery的$ 别名并确保DOM准备就绪的简单方法：

jQuery(function( $ ) { // DOM is ready
   // You're now free to use $ alias
   $('#hello').text('Hello, World!');
});

总结一下，

jQuery.noConflict() ： $ 不再引用jQuery，而变量jQuery 则引用jQuery 。
var jQuery2 = jQuery.noConflict() - $ 不再引用jQuery，而变量jQuery 也是如此，变量jQuery2 也是如此。

现在，存在第三种情况 - 如果我们希望jQuery 仅在jQuery2 可用， jQuery2 怎么jQuery2 ？使用，

var jQuery2 = jQuery.noConflict(true)

这导致$ 和jQuery 都没有引用jQuery。

当多个版本的jQuery要加载到同一页面上时，这很有用。

<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
<script>
    var jQuery1 = jQuery.noConflict(true);
</script>
<script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
<script>
    // Here, jQuery1 refers to jQuery 1.12.4 while, $ and jQuery refers to jQuery 3.1.0.
</script>

https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

在HTML页面的头部包含脚本标记

要从官方CDN加载jQuery ，请转到jQuery 网站。您将看到可用的不同版本和格式的列表。

现在，复制你要加载的jQuery版本的源代码。假设，你想加载jQuery 2.X ，点击未压缩或缩小的标签，它会显示如下：

复制完整代码（或单击复制图标）并将其粘贴到html的<head> 或<body> 中。

最佳实践是使用async 属性在head标记处加载任何外部JavaScript库。这是一个演示：

<!DOCTYPE html>
    <html>
      <head>
         <title>Loading jquery-2.2.4</title>
         <script src="https://code.jquery.com/jquery-2.2.4.min.js" async></script>
      </head>
      <body>
          <p>This page is loaded with jquery.</p>
      </body>
   </html>

当使用async 属性时要有意识，因为javascript库然后会被异步加载并尽快执行。如果包含两个库，其中第二个库依赖于第一个库，则如果第二个库在第一个库之前加载并执行，那么它可能会抛出错误并且应用程序可能会中断。

jQuery命名空间（“jQuery”和“$”）

jQuery 是编写任何jQuery代码的起点。它可以用作函数jQuery(...) 或变量jQuery.foo 。

$ 是jQuery 的别名，两者通常可以相互交换（除非使用了jQuery.noConflict(); - 请参阅避免命名空间冲突）。

假设我们有这个HTML片段 -

<div id="demo_div" class="demo"></div>

我们可能想使用jQuery为这个div添加一些文本内容。为此，我们可以使用jQuery text() 函数。这可以使用jQuery 或$ 编写。即 -

jQuery("#demo_div").text("Demo Text!");

要么 -

$("#demo_div").text("Demo Text!");

两者都会产生相同的最终HTML -

<div id="demo_div" class="demo">Demo Text!</div>

由于$ 比jQuery 更简洁，因此它通常是编写jQuery代码的首选方法。

jQuery使用CSS选择器，在上面的例子中使用了ID选择器。有关jQuery 中选择器的更多信息，请参阅选择器的类型。

通过控制台在没有它的页面上加载jQuery。

有时必须使用不使用jQuery 页面，而大多数开发人员习惯使用jQuery 。

在这种情况下，可以使用Chrome Developer Tools 控制台（ F12 ）通过运行以下命令在加载的页面上手动添加jQuery ：

var j = document.createElement('script');
j.onload = function(){ jQuery.noConflict(); };
j.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(j);

您想要的版本可能与上面的版本不同（ 1.12.4 ）您可以在此处获得所需的链接。

加载命名空间的jQuery插件

通常在加载插件时，请确保在 jQuery 之后始终包含插件。

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="some-plugin.min.js"></script>

如果你必须使用多个版本的jQuery，那么确保在所需的jQuery版本之后加载插件，然后加载代码来设置jQuery.noConflict(true) ;然后加载下一个版本的jQuery及其相关的插件：

<script src="https://code.jquery.com/jquery-1.7.0.min.js"></script>
<script src="plugin-needs-1.7.min.js"></script>
<script>
// save reference to jQuery v1.7.0
var $oldjq = jQuery.noConflict(true);
</script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="newer-plugin.min.js"></script>

现在，在初始化插件时，您需要使用关联的jQuery版本

<script>
// newer jQuery document ready
jQuery(function($){
  // "$" refers to the newer version of jQuery
  // inside of this function

  // initialize newer plugin
  $('#new').newerPlugin();
});

// older jQuery document ready
$oldjq(function($){
  // "$" refers to the older version of jQuery
  // inside of this function

  // initialize plugin needing older jQuery
  $('#old').olderPlugin();
});
</script>

可以只使用一个文档就绪函数来初始化两个插件，但为了避免混淆以及文档就绪函数中任何额外的jQuery代码的问题，最好将引用分开。

jQuery对象

每次调用jQuery时，通过使用$() 或jQuery() ，在内部它都会创建一个new 的jQuery 实例。这是显示新实例的源代码：

// Define a local copy of jQuery
jQuery = function( selector, context ) {

    // The jQuery object is actually just the init constructor 'enhanced'
    // Need init if jQuery is called (just allow error to be thrown if not included)
    return new jQuery.fn.init( selector, context );
}

在内部，jQuery将其原型称为.fn ，这里使用的内部实例化jQuery对象的样式允许暴露该原型而不需要调用者明确使用new 。

除了设置实例（这是jQuery API的方式，如.each ， children ， filter 等），内部jQuery还将创建一个类似于数组的结构来匹配选择器的结果（前提是除了没有， undefined ， null 或类似的东西作为参数传递。在单个项目的情况下，此类阵列结构将仅保留该项目。

一个简单的演示是找到一个带有id的元素，然后访问jQuery对象以返回底层DOM元素（当多个元素匹配或存在时，这也将起作用）。

var $div = $("#myDiv");//populate the jQuery object with the result of the id selector
var div = $div[0];//access array-like structure of jQuery object to get the DOM Element

PDF - Download jQuery for free

Previous Next

Related Tags

This modified text is an extract of the original Stack Overflow Documentation created by following contributors and released under CC BY-SA 3.0

This website is not affiliated with Stack Overflow

Email: tutorialpedia@outlook.com