[前端系列第5弹]JQuery简明教程：轻松掌握Web页面的动态效果

2023-11-17

在这篇文章中，我将介绍jQuery的基本概念、语法、选择器、方法、事件和插件，以及如何使用它们来实现Web页面的动态效果。还将给一些简单而实用的例子，让你可以跟着我一步一步地编写自己的jQuery代码。

一、什么是JQuery

JQuery是一个轻量级的JavaScript库，它封装了JavaScript的常用功能，并提供了一种简洁而易用的接口。jQuery的宗旨是“write less, do more”，即用更少的代码实现更多的功能。

JQuery的优点是：

JQuery兼容多种浏览器，可以屏蔽浏览器之间的差异，不用担心跨浏览器兼容性问题。
JQuery提供了一个强大而灵活的选择器机制，可以轻松地选中和操作页面中的元素。
JQuery提供了一系列的方法，可以对页面中的元素进行样式、属性、内容、动画、事件等方面的操作。
JQuery提供了一个简单而高效的Ajax接口，可以方便地与服务器进行数据交互。
JQuery提供了一个丰富而活跃的插件生态系统，可以使用各种功能强大而美观的插件来增强你的Web页面。

JQuery的示例：

// 使用jQuery选择器选中所有p元素
$("p")

// 使用jQuery方法改变所有p元素的颜色为红色
$("p").css("color", "red");

// 使用jQuery方法为所有p元素绑定点击事件
$("p").click(function() {
  // 使用jQuery方法隐藏被点击的p元素
  $(this).hide();
});

二、如何使用JQuery

要使用jQuery，需要先在Web页面中引入jQuery库文件。有两种方式可以引入jQuery库文件：（需要的读者评论区可以滴我）

本地引入：将jQuery库文件下载到本地，并使用<script>标签引入到Web页面中，如：

<script src="jquery-3.6.0.min.js"></script>

CDN引入：使用CDN（Content Delivery Network）服务提供商提供的在线链接来引入jQuery库文件，如：

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

CDN引入有以下优点：

可以节省本地服务器的带宽和空间。
可以提高加载速度和稳定性，因为CDN服务商通常有多个分布式节点来缓存和分发内容。
可以避免版本更新问题，因为CDN服务商通常会及时更新最新版本的jQuery库文件。

无论使用哪种方式引入jQuery库文件，都需要注意以下几点：

需要将<script>标签放在Web页面的<head>或<body>部分，通常建议放在<body>的最后，以避免阻塞页面的渲染。
需要确保在使用jQuery代码之前引入jQuery库文件，否则会报错。
可以根据需要引入不同版本的jQuery库文件，但是要注意版本之间可能存在一些差异和兼容性问题。

在引入jQuery库文件之后，就可以开始编写你的jQuery代码了。可以jQuery代码放在以下几种地方：

<script>标签中：直接在Web页面中使用<script>标签来编写jQuery代码，如：

<script>
  // 使用jQuery代码
</script>

外部JS文件中：将jQuery代码保存在一个外部JS文件中，并使用<script>标签引入到Web页面中，如：

<script src="script.js"></script>

$(document).ready()方法中：将jQuery代码放在$(document).ready()方法中，这样可以确保在文档加载完成后再执行jQuery代码，如：

$(document).ready(function() {
  // 使用jQuery代码
});

简写形式：$(document).ready()方法还有一个简写形式，即$(function() {})，它与前者等效，如：

$(function() {
  // 使用jQuery代码
});

三、JQuery的选择器

jQuery的选择器是jQuery最核心和最强大的功能之一，它可以让我们轻松地选中和操作页面中的元素。jQuery的选择器基于CSS选择器的语法，但是也扩展了一些自定义的选择器，以满足更多的需求。jQuery的选择器可以分为以下几类：

基本选择器（basic selector）：这类选择器用于根据元素的名称、类名、ID名或通配符来选择元素，如p, .class, #id, *。
层级选择器（hierarchical selector）：这类选择器用于根据元素之间的层级关系来选择元素，如A B, A > B, A + B, A ~ B。
过滤选择器（filter selector）：这类选择器用于根据元素的状态、属性、内容或位置来过滤或筛选元素，如:first, :last, :even, :odd, :visible, :hidden, [attr], [attr=value], :contains(text), :has(selector)。
表单选择器（form selector）：这类选择器用于专门针对表单元素进行选择，如:input, :text, :password, :radio, :checkbox, :submit, :reset, :button, :image, :file, :selected, :checked。

以下是一些常用的jQuery选择器的示例：

$("p") 选中所有p元素。
$(".class") 选中所有class属性值为class的元素。
$("#id") 选中所有id属性值为id的元素。
$("*") 选中所有元素。
$("div p") 选中所有div元素内部的p元素。
$("div > p") 选中所有div元素直接子级的p元素。
$("div + p") 选中所有div元素紧邻的下一个p元素。
$("div ~ p") 选中所有div元素之后的同级的所有p元素。
$(":first") 选中第一个匹配的元素。
$(":last") 选中最后一个匹配的元素。
$(":even") 选中索引值为偶数（从0开始）的匹配的元素。
$(":odd") 选中索引值为奇数（从0开始）的匹配的元素。
$(":visible") 选中可见的匹配的元素。
$(":hidden") 选中隐藏的匹配的元素。
$("[attr]") 选中有attr属性的匹配的元素。
$("[attr=value]") 选中attr属性值为value的匹配的元素。
$(":contains(text)") 选中包含text文本内容的匹配的元素。
$(":has(selector)") 选中含有selector选择器匹配的子元素的匹配的元素。
$(":input") 选中所有表单输入控件，如input, textarea, select等。

四、JQuery的方法

jQuery的方法是jQuery提供的一系列的函数，可以让你对页面中的元素进行各种操作。jQuery的方法可以分为以下几类：

CSS方法（CSS method）：这类方法用于获取或设置元素的样式属性，如css(), addClass(), removeClass(), toggleClass(), hasClass()等。
属性方法（attribute method）：这类方法用于获取或设置元素的属性值，如attr(), prop(), val(), removeAttr(), removeProp()等。
内容方法（content method）：这类方法用于获取或设置元素的文本内容或HTML内容，如text(), html(), empty(), append(), prepend(), after(), before()等。
尺寸方法（dimension method）：这类方法用于获取或设置元素的宽度、高度、内边距、外边距或边框，如width(), height(), innerWidth(), innerHeight(), outerWidth(), outerHeight(), offset(), position()等。
遍历方法（traversing method）：这类方法用于在元素集合中进行筛选、查找或遍历，如filter(), find(), children(), parent(), parents(), siblings(), next(), prev()等。
事件方法（event method）：这类方法用于绑定或触发元素的事件，如on(), off(), trigger(), click(), hover(), focus(), blur()等。
动画方法（animation method）：这类方法用于为元素添加或移除动画效果，如show(), hide(), toggle(), fadeIn(), fadeOut(), fadeToggle(), slideDown(), slideUp(), slideToggle()等。
Ajax方法（Ajax method）：这类方法用于向服务器发送或接收数据，如ajax(), get(), post(), load()等。

以下是一些常用的jQuery方法的示例：

$("input").val() 获取第一个input元素的value属性值。
$("p").attr("title", "This is a paragraph") 为所有p元素设置一个title属性值为This is a paragraph。
$("p").text() 获取所有p元素的文本内容。
$("p").text("Hello") 设置所有p元素的文本内容为Hello。
$("div").html() 获取第一个div元素的HTML内容。
$("div").append("<p>World</p>") 在所有div元素的末尾添加一个<p>World</p>元素。
$("div").prepend("<p>Hello</p>") 在所有div元素的开头添加一个<p>Hello</p>元素。
$("p").parent("div") 从所有p元素中获取div直接父元素。
$("p").parents("div") 从所有p元素中获取div祖先元素。
$("p").next("div") 从所有p元素中获取div紧邻的下一个同级元素。
$("p").prev("div") 从所有p元素中获取div紧邻的上一个同级元素。
$("p").click(function() {alert("Hello");}) 为所有p元素绑定点击事件，点击时弹出Hello，等同于使用on()方法。
$.get("data.json", function(data) {console.log(data);}) 使用Ajax向服务器发送一个GET请求，获取data.json文件的内容，并在成功时打印出来，等同于使用ajax()方法。
$.post("data.php", {name: "Alice", age: 25}, function(data) {console.log(data);}) 使用Ajax向服务器发送一个POST请求，传递一个包含name和age两个参数的对象，并在成功时打印出服务器返回的数据。

以上就是本文的全部内容啦，看看学习起来~

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)