jQuery - 入门教程

jQuery - 入门教程 首页 / jQuery入门教程 / jQuery - 入门教程

什么是jQuery?

jQuery是John Resig在2006年创建的快速简洁的JavaScript库,它的座右铭是:写的少,多的做。 jQuery简化了HTML文档的遍历,事件处理,动画和Ajax交互,从而实现了快速的Web开发。 jQuery是一个JavaScript工具箱,旨在通过编写更少的代码来简化各种任务。

这是jQuery支持的重要核心函数的列表-

  • DOM manipulation        - jQuery通过使用称为 Sizzle 的跨浏览器开源选项器引擎。

  • Event handling                - jQuery提供了一种优雅的方式来捕获各种各样的事件,如用户单击链接,而无需将HTML代码与事件混在一起处理程序。

  • AJAX Support                 - jQuery帮助您使用AJAX技术开发响应迅速且函数丰富的网站。

  • Animations                      - jQuery带有许多内置的动画效果,您可以在网站中使用它们。

  • Lightweight                     - jQuery是一个非常轻量级的库-大小约为19KB(缩小并压缩)。

  • Cross Browser Support - jQuery具有跨浏览器支持,并且在IE 6.0 +,FF 2.0 +,Safari 3.0 +,Chrome和Opera 9.0+中运行良好

  • Latest Technology          -  jQuery支持CSS3selector和基本XPath语法。

如何使用jQuery?

有两种使用jQuery的方法。

  • 本地安装  − 您可以在本地计算机上下载jQuery库,并将其包含在HTML代码中。

  • CDN版本 − 您可以直接从Content Delivery Network(CDN)将jQuery库包含到HTML代码中。

本地安装

现在,您可以在HTML文件中包含 jquery 库,如下所示-

<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>

这将产生以下输出-

链接:https://www.learnfk.comhttps://www.learnfk.com/jquery/jquery-overview.html

来源:LearnFk无涯教程网

Hello, World!

基于CDN的版本

您可以直接从Content Delivery Network(CDN)将jQuery库包含到HTML代码中。

在本教程中,将使用Google CDN版本的库。

现在,使用来自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>

这将产生以下输出-

Hello, World!

调用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>

这将产生以下输出-

链接:https://www.learnfk.comhttps://www.learnfk.com/jquery/jquery-overview.html

来源:LearnFk无涯教程网

使用自定义脚本

最好在自定义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>

使用多个库

您可以一起使用多个库,而不会互相冲突。如,您可以同时使用jQuery和MooTool javascript库。您可以检查 jQuery noConflict 方法以获取更多详细信息。

jQuery目录

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

玩转Git三剑客 -〔苏玲〕

NLP实战高手课 -〔王然〕

罗剑锋的C++实战笔记 -〔罗剑锋〕

Flink核心技术与实战 -〔张利兵〕

性能优化高手课 -〔尉刚强〕

Serverless进阶实战课 -〔静远〕

AI大模型之美 -〔徐文浩〕

结构思考力 · 透过结构看问题解决 -〔李忠秋〕

徐昊 · AI 时代的软件工程 -〔徐昊〕

好记忆不如烂笔头。留下您的足迹吧 :)