jQuery是一个快速而简洁的JavaScript库,由John Resig在2006年创建,其中有一个很好的座右铭:少写,多做. jQuery简化了HTML文档遍历,事件处理,动画和Ajax交互,以实现快速Web开发. jQuery是一个JavaScript工具包,旨在通过编写更少的代码来简化各种任务.以下是jQuery支持的重要核心功能列表;
DOM操作 : 通过使用名为 Sizzle 的跨浏览器开源选择器引擎,jQuery可以轻松选择DOM元素,协商它们并修改其内容.
事件处理 : jQuery提供了一种捕获各种事件的优雅方式,例如用户点击链接,而不需要使用事件处理程序来混淆HTML代码本身.
AJAX支持 : jQuery可以帮助您使用AJAX技术开发响应式和功能丰富的站点.
动画 : jQuery带有大量内置动画效果,您可以在网站中使用.
轻量级 : jQuery是非常轻量级的库 - 大小约为19KB(缩小和gzip).
跨浏览器支持 : jQuery具有跨浏览器支持,适用于IE 6.0 +,FF 2.0 +,Safari 3.0 +,Chrome和Opera 9.0 +
最新技术 : jQuery支持CSS3选择器和基本的XPath语法.
那里有两种使用jQuery的方法.
本地安装 : 您可以在本地计算机上下载jQuery库并将其包含在HTML代码中.
基于CDN的版本 : 您可以直接从Content Delivery Network(CDN)将jQuery库包含到HTML代码中.
转到 https://jquery.com/download/下载最新版本.
现在下载 jquery-2.1.3.min. js 文件在您网站的目录中,例如/jquery.
现在您可以包含 jquery 您的HTML文件中的库如下 :
<html> <head> <title>The jQuery Example</title> <script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js"> </script> <script type = "text/javascript"> $(document).ready(function() { document.write("Hello, World!"); }); </script> </head> <body> <h1>Hello</h1> </body> </html>
这将产生以下结果 :
您可以一起使用多个库,而不会相互冲突.例如,您可以一起使用jQuery和MooTool javascript库.您可以查看 jQuery noConflict 方法以获取更多详细信息.
如果你不理解上面的例子,不要太担心.您将在后续章节中很快掌握它们.
下一章将尝试涵盖传统JavaScript中的一些基本概念.
现在让我们使用Google CDN中的jQuery库重写上面的示例.
<html> <head> <title>The jQuery Example</title> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type = "text/javascript"> $(document).ready(function() { document.write("Hello, World!"); }); </script> </head> <body> <h1>Hello</h1> </body> </html>
如何调用jQuery库函数?
几乎所有事情,我们都在使用jQuery读取或操作文档对象模型(DOM)时,我们需要确保在DOM准备好后立即开始添加事件等.
如果您希望事件在您的页面上运行,您应该在$(document).ready()函数内调用它. 在加载DOM之后和加载页面内容之前,其中的所有内容都将加载.
为此,我们为文档注册一个ready事件,如下所示:
$(document).ready(function() { // do stuff when DOM is ready });
要调用任何jQuery库函数,请使用HTML脚本标记,如下所示:
<html> <head> <title>The jQuery Example</title> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type = "text/javascript" language = "javascript"> $(document).ready(function() { $("div").click(function() {alert("Hello, world!");}); }); </script> </head> <body> <div id = "mydiv"> Click on this to see a dialogue box. </div> </body> </html>
最好在自定义JavaScript文件中编写自定义代码:custom.js,如下所示:
/* Filename: custom.js */ $(document).ready(function() { $("div").click(function() { alert("Hello, world!"); }); });
现在我们可以在HTML文件中包含custom.js文件,如下所示:
<html> <head> <title>The jQuery Example</title> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type = "text/javascript" src = "/jquery/custom.js"> </script> </head> <body> <div id = "mydiv"> Click on this to see a dialogue box. </div> </body> </html>
This will produce following result ;
您可以一起使用多个库,而不会相互冲突. 例如,您可以一起使用jQuery和MooTool javascript库. 您可以查看jQuery noConflict方法以获取更多详细信息.
如果你不理解上面的例子,不要太担心. 您将在后续章节中很快掌握它们.
下一章将尝试涵盖来自传统JavaScript的一些基本概念.
本文地址:https://itbaoku.cn/tutorial/jquery-index.html
18 jquery
172 jquery
34 jquery
22 jquery
24 jquery