【Java Web】jQuery技术解析与基础指南

林小新2023-10-29 15:13

一、前言

在Web开发中，jQuery是一个不可或缺的工具，它简化了JavaScript代码的编写和DOM操作，为我们提供了强大的能力，有助于创建交互性和动态性的网页。

本文将探讨 jQuery 的重要特性和一些基础用法。

二、内容

2.1 简介

在传统的Web开发中，jQuery是一个家喻户晓的工具。这个轻量级JavaScript库是Web页面开发的得力助手，已经被广泛用于创建交互性和动态性的网页。

那什么是 jQuery？

jQuery是一个开源的JavaScript库，旨在简化JavaScript代码的编写和DOM（文档对象模型）操作。

jQuery的设计目标是让开发者能够以更少的代码完成更多的工作，这体现在它的理念中："Write Less, Do More"。

2.2 为什么使用jQuery？

jQuery是一个轻量级JS库，使用十分简单。其核心是选择器 ，用于获取页面元素。通过jQuery，我们可以使用简洁而直观的方式来选取和操作DOM元素。例如，使用$('#test')选择一个元素比document.getElementById('test')更加简便，从而提高了开发效率。

另一个最显著的优势是，jQuery帮助开发者消除了浏览器之间的差异。你不需要编写复杂的兼容性代码，以确保你的网站在各种浏览器中都能正常运行。jQuery会自动处理这些差异，使得你的代码更加简洁和可维护。

此外，jQuery还提供了强大的动画和CSS操作功能，使得页面的交互和外观更加生动和吸引人。我们可以轻松地创建动画效果、修改CSS属性，而无需编写复杂的代码。

2.3 如何使用

要在你的网页中使用jQuery，只需在<head>部分引入jQuery文件，如下所示：

html 复制代码 
<html>
<head>
    <script src="//code.jquery.com/jquery-3.7.1.min.js"></script>
    ...
</head>
<body>
    ...
</body>
</html>

或者下载后在页面中进行引入。

html 复制代码 
<script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>

我们可以从jQuery官网下载最新版本的jQuery库，通常以一个名为jquery-xxx.js的文件提供。此文件有两个主要版本：compressed（已压缩）和uncompressed（未压缩）。它们的使用方式相同，但未压缩版本更适合深入研究jQuery源码。

2.4 $ 符号

符号在jQuery中具有重要的角色，它是一个合法的变量名，是jQuery库中的核心标识之一。实际上，所有jQuery的功能都被封装在一个全局变量`jQuery`中，而就是这个全局变量的一个引用。这使得使用jQuery库的功能更加便捷，因为$比jQuery更短、更易记。

本身就是一个函数对象。你可以像调用函数一样使用，例如$('selector')可以用来选择DOM元素。这使得$成为一个强大的工具，用于选择和操作HTML文档中的元素。

$不仅仅是一个函数，它还是一个JavaScript对象，因此它可以包含其他属性和方法。这些属性和方法可以扩展jQuery的功能，或者提供其他辅助功能。

2.5 选择器

前面提到了， jQuery的其核心之一就是选择器 ，用于获取页面元素。在开发Web页面时，有两个基本点，一是选择HTML页面上的哪些元素，二是在这些元素上做哪些动作。下面，我们会使用选择器来演示如何选择HTML页面上的元素

在jQuery中，我们可以使用两种方式来创建jQuery对象并选中元素：

  1. 使用jQuery(选择器表达式)语法。
  2. 使用$(选择器表达式)的简便语法（推荐）。

选择器表达式是一种用于匹配元素的字符串模式，它可以根据元素的标签名、ID、类、属性等来进行匹配。

（1）基本选择器

基本选择器是jQuery最基础，也是最常用的选择器表达式，共四种，如下所示：

举一个例子。现在的页面元素为：

html 复制代码 
<p>
	这是一个普通的p标签。
</p>
<p class="myClass">
	这是一个拥有"myclass"类的p标签
</p>
<div id="myElement">
	这是一个拥有ID为"myElement"的div标签
</div>

接着， 我们就可以使用选择器来选择这些元素。比如：

javascript 复制代码 
// 使用ID选择器选择了具有ID属性为"myElement"的元素，并将其文本颜色设置为蓝色。
$("#myElement").css("color", "blue");

// 使用元素选择器选择了所有段落元素 <p>，并将它们的字体加粗。
$("p").css("font-weight", "bold");

// 使用类选择器选择了所有带有类名 "myClass" 的元素，并将它们的背景颜色设置为黄色。
$(".myClass").css("background-color", "yellow");

// 使用组合选择器选择多个元素，并将它们的边框设置为1像素宽的红色实线。
$("p, .myClass, #myElement").css("border", "1px solid red");

效果如下：

（2）层叠选择器

层叠选择器是根据元素的位置关系来获取元素的选择器表达式。

举一个例子。现在的页面元素为：

html 复制代码 
<div>
    <p>Paragraph 1</p>
</div>
<ul>
    <li>List item 1</li>
    <li>List item 2</li>
</ul>
<p>Paragraph 2</p>
<h2>Heading 2</h2>
<p>Paragraph 3</p>
<p>Paragraph 4</p>

接着， 我们就可以使用选择器来选择这些元素。比如：

javascript 复制代码 
// 选择包含在 <div> 元素内部的 <p> 元素，将它们的文字颜色设置为绿色
$("div p").css("color", "green");

// 选择直接位于 <ul> 元素内部的 <li> 元素，并将它们的字体加粗
$("ul>li").css("font-weight", "bold");

// 选择所有与前一个 <h2> 元素处于相同级别的 <p> 元素，并将它们的背景颜色设置为黄色。
$("h2~p").css("background-color", "yellow");

效果如下：

（3）属性选择器

属性选择器是根据元素的属性值来选择元素的选择器表达式。

举一个例子。现在的页面元素为：

html 复制代码 
<p title="example">This is an example paragraph.</p>
<ul>
    <li><a href="https://www.example.com" target="_blank">Visit Example.com</a></li>
    <li><a href="https://www.example.org" target="_blank">Visit Example.org</a></li>
</ul>
<input type="text" name="username" >
<input type="password" name="password">
<button data-action="submit">Submit</button>
<button data-action="reset">Reset</button>

接着， 我们就可以使用选择器来选择这些元素。比如：

javascript 复制代码 
// 选择了所有title属性值为 "example"的段落元素，并将它们的文本颜色设置为蓝色。
$("p[title='example']").css("color", "blue");

//  选择了所有href属性值以 "https://www." 开头的链接，并将它们的文本颜色设置为红色。
$("a[href^='https://www.']").css("color", "red");

// 选择了所有type属性值以 "word" 结尾的输入元素，并将它们的背景颜色设置为黄色。
$("input[type$='word']").css("background-color", "yellow");

// 选择所有type属性值包含 "ex" 的输入元素，并将它们的背景颜色设置为浅蓝色。
$("input[type*='ex']").css("background-color", "lightblue");

效果如下：

（4）其他选择器

下面介绍其他选择器，即位置选择器和表单选择器。

位置选择器是指通过位置获取指定的元素，例如"获取第3个元素"

比如：

  1. 获取第一个元素 $("selector:first"): 这个选择器用于获取匹配选择器的结果中的第一个元素。
  2. 获取最后一个元素 $("selector:last"): 这个选择器用于获取匹配选择器的结果中的最后一个元素。
  3. 获取偶数位置的元素（从0开始） $("selector:even"): 这个选择器用于获取匹配选择器的结果中位于偶数位置（索引从0开始）的元素。
  4. 获取奇数位置的元素（从0开始） $("selector:odd"): 这个选择器用于获取匹配选择器的结果中位于奇数位置（索引从0开始）的元素。
  5. 获取指定位置的元素（从0开始） $("selector:eq(n)"): 这个选择器用于获取匹配选择器的结果中指定位置（以0为起始索引）的元素，其中 n 是您希望选择的元素的索引。

表单选择器是获取表单元素的简化形式，例如：获取所有文本框。

比如：

  1. 所有输入元素 $("selector:input"): 这个选择器用于获取所有表单元素，包括文本框、密码框、提交按钮、复选框、单选按钮等。
  2. 获取文本框 $("selector:text"): 这个选择器用于获取所有文本框元素。
  3. 获取密码框 $("selector:password"): 这个选择器用于获取所有密码框元素。
  4. 获取提交按钮 $("selector:submit"): 这个选择器用于获取所有提交按钮元素。
  5. 获取重置按钮 $("selector:reset"): 这个选择器用于获取所有重置按钮元素。

2.6 操作属性

无论是获取、设置、还是删除属性。jQuery提供了一组方便的方法来处理元素属性。

  • .attr(name)：获取元素属性的值。
  • .attr(name, value)：设置元素属性的值。
  • .removeAttr(name)：移除元素的属性。

（1）获取元素属性

使用jQuery获取元素属性的方法是.attr()。

比如：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>jQuery属性操作</title>
</head>
<body>
    <img id="myImage" src="image.jpg" alt="我的图片">
    
    <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
    <script>
        // 获取src属性的值
    	var srcValue = $("#myImage").attr("src");
        alert("我的图片的src属性值是：" + srcValue);
    </script>
</body>
</html>

在这个例子中，我们首先通过元素的ID选择了一个<img>元素，然后使用.attr()方法来获取src属性的值。

（2）设置元素属性

要设置元素属性，我们可以使用.attr()方法，将属性名称和要设置的值传递给它。

比如：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>jQuery属性操作</title>
</head>
<body>
    <a id="myLink" href="#">这是一个链接，点击我</a>
    
    <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
    <script>
        // 设置href属性的值
    	$("#myLink").attr("href", "https://www.example.com");
    </script>
</body>
</html>

在这个示例中，我们选择了一个链接元素，并使用.attr()方法将href属性设置为 https://www.example.com。

（3）移除元素属性

要移除元素的属性，可以使用.removeAttr()方法，将要移除的属性名称传递给它。

比如：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>jQuery属性操作</title>
</head>
<body>
    <img id="myImage" src="image.jpg" alt="我的图片">
    
    <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
    <script>
        // 移除alt属性
    	$("#myImage").removeAttr("alt");
    </script>
</body>
</html>

在这个示例中，我们选择了一个图像元素，并使用.removeAttr()方法来移除alt属性。

2.7 操作元素的CSS样式

jQuery提供了一组方便的方法来添加、获取和删除元素的CSS类和样式属性。

  • .addClass(className)：为元素添加CSS类。
  • .css(propertyName)：获取元素的CSS属性值。
  • .css(propertyName, value)：设置元素的CSS属性值。
  • .removeClass(className)：从元素中删除CSS类。

（1）添加 CSS 类

要为元素添加CSS类，可以使用.addClass()方法。你可以为元素添加一个或多个CSS类。

比如：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>jQuery CSS样式操作</title>
	<style>
		.myClass {
			font-style: italic;
			color: darkblue;
		}
	</style>
</head>
<body>
    <div id="myDiv">这是一个 div 元素</div>
    
    <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
    <script>
		// 添加一个CSS类
		$("#myDiv").addClass("myClass");

		// 添加多个CSS类，用空格隔开
		$("#myDiv").addClass("class1 class2 class3");
    </script>
</body>
</html>

在这个示例中，我们首先选择了一个<div>元素，并使用.addClass()方法将一个CSS类myClass添加到它。

我们还可以使用相同的方法，用空格隔开，为该元素添加多个CSS类。

（2）获取和设置CSS属性

使用.css()方法可以获取或设置元素的CSS属性。你可以传递一个CSS属性名来获取该属性的值，也可以传递一个CSS属性名和一个新的值来设置属性的值。甚至，我们能传递一个 JSON 格式的CSS属性设置。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>jQuery CSS样式操作</title>
</head>
<body>
    <div id="myDiv">这是一个 div 元素</div>
    
    <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
    <script>
		// 获取CSS属性值
		var color = $("#myDiv").css("color");
		alert("文本颜色是：" + color);
		
		// 设置CSS属性值
		$("#myDiv").css("font-size", "24px");
        // 设置多个CSS属性值
        $("#myDiv").css({ "color": "red", "font-weight": "bold", "font-style": "italic" });
    </script>
</body>
</html>

在这个示例中，我们首先使用.css()方法获取了color属性的值。同时，我们还使用相同的方法设置了font-size属性的值，以及展示如何设置多个属性值。

（3）删除CSS类

要从元素中删除CSS类，可以使用.removeClass()方法。我们可以删除一个或多个CSS类，也可以指定要删除的特定类。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>jQuery CSS样式操作</title>
</head>
<body>
    <div id="myDiv" class="class1 class2 class3">这是一个div元素</div>
    
    <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
    <script>
		// 删除特定CSS类
		$("#myDiv").removeClass("class2");
		
		// 删除多个CSS类，用空格隔开
		$("#myDiv").removeClass("class1 class3");
    </script>
</body>
</html>

在这个示例中，我们首先选择了一个带有多个CSS类的<div>元素，并使用.removeClass()方法删除了一个或多个CSS类。

2.8 设置元素内容

jQuery提供了一组方便的方法来获取和设置元素的内容。

  • .val()：获取或设置输入项的值。
  • .text()：获取或设置元素的纯文本内容。
  • .html()：获取或设置元素内部的HTML内容。

（1）获取和设置输入项的值

要获取或设置输入项（例如文本框、下拉框、复选框等）的值，可以使用.val()方法。

比如：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>jQuery元素内容操作</title>
</head>
<body>
    <input type="text" id="myInput" value="默认值">
    
    <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
    <script>
		// 获取输入项的值
		var inputValue = $("#myInput").val();
		alert("输入框的值是：" + inputValue);
		
		// 设置输入项的值
		$("#myInput").val("新的值");
    </script>
</body>
</html>

在这个示例中，我们首先使用.val()方法获取了文本框的值。接着，我们使用相同的方法设置了文本框的新值。

（2） 获取和设置元素的纯文本

使用.text()方法可以获取或设置元素的纯文本内容，这意味着任何HTML标签都会被视为文本。

比如：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>jQuery元素内容操作</title>
</head>
<body>
    <p id="myParagraph">这是一个 <strong>段落</strong> 元素。</p>
    
    <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
    <script>
		// 获取元素的纯文本内容
		var textContent = $("#myParagraph").text();
		alert("元素的纯文本内容是：" + textContent);
		
		// 设置元素的纯文本内容
		$("#myParagraph").text("这是一个新的段落元素。");
    </script>
</body>
</html>

在这个示例中，我们首先使用.text()方法获取了段落元素的纯文本内容。接着，我们使用相同的方法设置了段落元素的新纯文本内容。

（3）获取和设置元素的HTML内容

使用.html()方法可以获取或设置元素内部的HTML内容，包括任何嵌套的HTML标记。

比如：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>jQuery元素内容操作</title>
</head>
<body>
    <div id="myDiv">这是一个 <strong>div</strong> 元素。</div>
    
    <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
    <script>
		// 获取元素的HTML内容
		var htmlContent = $("#myDiv").html();
		alert("元素的HTML内容是：" + htmlContent);
            
		// 设置元素的HTML内容
		$("#myDiv").html("这是一个 <em>更新后的</em> div 元素。");
    </script>
</body>
</html>

在这个示例中，我们首先使用.html()方法获取了<div>元素内部的HTML内容。接着，我们使用相同的方法设置了<div>元素的新HTML内容。

2.9 事件处理

（1）概述

事件是网页中的交互行为或响应，它可以是用户与页面元素互动的结果，例如点击按钮、输入文本、移动鼠标等。页面对不同访问者的响应叫做事件，通常通过事件处理程序来定义页面在事件发生时的行为。

在jQuery中编写事件处理方法是很简单的。比如：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>jQuery事件处理</title>
</head>
<body>
    <a id="myLink" href="#0">这是一个链接，点击看看</a>
    
    <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
    <script>
        $('#myLink').on('click', function (){
            alert('Hello!');
        });
    </script>
</body>
</html>

在这里，on 方法用于为选中的页面元素绑定一个事件，我们需要传入事件名称，以及对应的匿名处理函数。

同时，我们用的更多的，是绑定事件的简写形式，如下所示：

javascript 复制代码 
$('#myLink').click(function (){
    alert('Hello!');
});

（2）常用事件

鼠标事件 键盘事件 表单事件 文档/窗口事件
click：鼠标单击 keypress：按一次键后 submit：提交表单时 load：文档或页面加载完成时
dblclick：鼠标双击 keydown：键盘按下时 change：表单元素内容改变 resize：当用户离开页面时
mouseenter：鼠标进入 keyup：键盘松开时 focus：获得焦点 scroll：当用户调整浏览器窗口大小时
mouseleave：鼠标离开 blur：失去焦点 unload：当用户滚动页面时

（3）页面就绪函数

页面就绪函数（document ready function）是在页面加载完成后执行的JavaScript函数。这种函数通常用于确保页面的DOM结构已经完全加载，以便执行JavaScript代码。

简单来说，ready 表示文档加载完成后再执行的一个事件。我们将初始化代码放到 document 对象的 ready 事件中，保证 DOM 已完成初始化，相关代码会在 DOM 树初始化后再执行。

页面就绪函数通常用于确保在访问DOM元素之前，DOM结构已准备就绪。

我们可以这样写页面就绪函数：

javascript 复制代码 
$(document).on('ready', function() {
    // 在页面加载完成后执行的代码
});

同样，简写的方式如下：

javascript 复制代码 
$(document).ready(function() {
    // 在页面加载完成后执行的代码
});

甚至，还能进一步简写，语法如下：

javascript 复制代码 
$(function() {
    // 在页面加载完成后执行的代码
});

这种语法实际上是完全等效的，也是最常见的。

（4）事件参数

在处理某些事件时，我们通常需要获取事件的参数，比如鼠标位置、按键的值或者触发事件的元素等。此时，我们就需要接收一个事件对象，该对象包含了与事件相关的所有信息。

在Query中，事件处理函数也可以接收事件对象（event）作为参数。

比如：

javascript 复制代码 
$(document).ready(function() {
    // 点击事件处理函数
    $("button").click(function(event) {
        // 使用event对象获取鼠标点击的坐标
        var x = event.clientX;
        var y = event.clientY;
        console.log("鼠标点击坐标：x=" + x + ", y=" + y);
    });

    // 键盘按下事件处理函数
    $(document).keydown(function(event) {
        // 使用event对象获取按下的键的键码
        var keyCode = event.which; // 或者 event.keyCode
        console.log("按下的键码：" + keyCode);
    });
});

三、总结

总的来说，jQuery的简洁性和强大性使其成为许多开发者的首选，不仅可以快速选择和操作DOM元素，还能消除浏览器之间的兼容性问题。

下面是jQuery官方文档，帮助我们进一步的学习：

相关推荐
WalkingWithTheWind～21 分钟前
Linux搭建Nginx直播流媒体服务RTMP/RTSP转Http-flv视频浏览器在线播放/Vue/Java/ffmpeg
java·linux·nginx·ffmpeg·vue·http-flv·rtsp
FLZJ_KL26 分钟前
【设计模式】【创建型模式】抽象工厂模式（Abstract Factory）
java·设计模式·抽象工厂模式
粉03211 小时前
Keeppalived 实现Nginx 的高可用集群
java·服务器·nginx
路在脚下@1 小时前
Java使用Redisson实现布隆过滤器
java·spring boot
魔道不误砍柴功2 小时前
Java中的Stream API：从入门到实战
java·windows·python
晚安7202 小时前
idea添加web工程
java·前端·intellij-idea
xinghuitunan2 小时前
时间转换（acwing）c/c++/java/python
java·c语言·c++·python
八月五2 小时前
Java并发编程——ThreadLocal
java·并发编程
多敲代码防脱发2 小时前
Spring框架基本使用(Maven详解)
java·网络·后端·spring·maven
热门推荐
01DeepSeek各版本说明与优缺点分析02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek本地部署详细指南04本地部署DeepSeek教程（Mac版本）05本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程06DeepSeek r1本地安装全指南07太炸裂了！清华大学deepseek从入门到精通使用手册又出第三版了，《普通人如何抓住DeepSeek红利》（无套路，直接下载）08DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具09在Windows下安装Ollama并体验DeepSeek r1大模型10保姆级教程：利用Ollama与Open-WebUI本地部署 DeedSeek-R1大模型