jQuery高级应用（上篇）

最新推荐文章于 2022-03-26 18:00:59 发布

今晚刺碴

最新推荐文章于 2022-03-26 18:00:59 发布

阅读量300

点赞数

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/qq_37122159/article/details/96474475

版权

这篇博客详细介绍了jQuery的基础知识，包括jQuery的选择器、控制页面、动画特效。内容涵盖jQuery的$符号用法、基本选择器、内容过滤选择器、属性选择器、CSS样式操作以及动画效果如淡入淡出、滑动等，旨在帮助读者掌握jQuery的高级用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习辅助资料为：JavaScript+jQuery动态网页设计案例课堂（第2版）

jQuery的基础知识

jQuery是一个优秀的JavaScript脚本库。是一个兼容多浏览器的JavaScript框架。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>用JavaScript实现表格奇偶行异色</title>
		<style type="text/css">
			.datalist{
				border: 1px sol #007108;
				font-family: arial;
				border-collapse: collapse;  /*边框重叠*/
				background-color: #d999dc;
				font-size: 14px;
			}
			.datalist th{
				border: 1px solid #007108;
				background-color: #000000;
				color: #FFFFFF;
				font-weight: bold;
				padding-top: 4px;
				padding-bottom: 4px;
				padding-left: 12px;
				padding-right: 12px;
				text-align: center;
			}
			.datalist td{
				border: 1px solid #007108;
				text-align: left;
				padding-top: 4px;
				padding-bottom: 4px;
				padding-left: 10px;
				padding-right: 10px;
			}
			.datalist tr.altrow{
				background-color: #a5e5ff;  /*隔行变色：蓝色*/
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var oTable = document.getElementById("Table");
				for(var i=0;i<Table.rows.length;i++)
				{
					if(i%2==0)  Table.rows[i].className = "altrow"
				}
			}
		</script>
	</head>
	<body>
		<table class="datalist" summary="list of members in EE Study" id="Table">
			<tr>
				<th scope="col">姓名</th>
				<th scope="col">性别</th>
				<th scope="col">出生日期</th>
				<th scope="col">移动电话</th>
			</tr>
			<tr>
				<td>李蕊</td>
				<td>女</td>
				<td>8月10号</td>
				<td>1302304049</td>
			</tr>
			<tr>
				<td>张键</td>
				<td>男</td>
				<td>5月25号</td>
				<td>112304049</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>男</td>
				<td>4月23号</td>
				<td>12367899</td>
			</tr>
			<tr>
				<td>杨朝</td>
				<td>男</td>
				<td>12月23号</td>
				<td>189765427</td>
			</tr>
		</table>
	</body>
</html>

这是未加jQuery的代码，显示的效果为：
在这里插入图片描述
图1

我们想要使用jQuery库，就必须先下载它并配置它。
在官网中找到最新的jQuery库并下载，https://jquery.com
下载之后，放在你的代码所在的文件里，如我的代码在
在这里插入图片描述图2

现在只需要在代码中引用jQuery库即可。
上一个JavaScript实现的奇偶行异色就可以简单的实现了。
将其中的script代码改为如下

		<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
			$(function (){
				$("table.datalist tr:nth-child(odd)").addClass("altrow");
			})
		</script>

实现的功能完全一样，但是代码比较简单。将之前的循环变成了一句就可以实现和之前一模一样的效果。

jQuery的引入：弥补了浏览器与CSS3兼容性不好的缺陷，因为jQuery提供了几乎所有的CSS3属性选择器，而且jQuery的兼容性很好。目前的主流浏览器几乎都可以完美实现。开发者只需要按照以前的方法定义CSS类型，在引入jQuery之后，通过addClass（）方法添加至指定元素即可。

接下来正式进入jQuery的第一个简单入门实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>jQuery 第一个实例</title>
		<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				alert("Hello jQuery!");
			});
		</script>
	</head>
	<body>
	</body>
</html>

在网页中弹出对话框：
在这里插入图片描述图3

jQuery的选择器

在JavaScript中，要想获取网页的DOM元素，必须使用该元素的ID和TagName。但是在jQuery库中却提供了许多功能强大的选择器，帮助开发人员获取页面的DOM元素，而且获取到的每个对象都以jQuery包装集的形式返回。

jQuery的$

$是jQuery中最常用的一个符号，用于声明jQuery对象。可以说，在jQuery中，无论使用哪种类型的选择器，都需要从一个
$符号和一对“（）”开始。在“（）”中通常使用字符串参数，参数中可以包含任何CSS选择符表达式。

$通常的用法：
① 在参数中使用标记名，如
$(“div”),用于获取文档中全部的
.
② 在参数中使用ID，如
$("#username"),用于获取文档中ID属性值为username的一个元素。
③ 在参数中使用CSS类名，如
$(".btn_grey"),用于获取文档中使用CSS类名为btn_grey的所有元素。
例：选择文本段落的奇数行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>选择奇数行</title>
		<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				var oElements = $("p:odd");
				for(var i=0; i<oElements.length;i++)
					oElements[i].innerHTML=i.toString();
			}
		</script>
	</head>
	<body>
		<div id="body">
			<p>第一行</p>
			<p>第二行</p>
			<p>第三行</p>
			<p>第四行</p>
			<p>第五行</p>
		</div>
	</body>
</html>

网页中显示的结果为：
在这里插入图片描述图4

功能函数的前缀：清理文本框中空格
创建DOM元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>选择奇数行</title>
		<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				var New = $("<a>(open in a new window)</a>");
				New.insertAfter("#target");
			});
		</script>
	</head>
	<body>
		<a id="target" href="http://www.google.com">Google</a>
		<a href="http://www.baidu.com">Baidu</a>
	</body>
</html>

网页显示结果为：
在这里插入图片描述图5

基本选择器：是其他类型选择器的基础，是jQuery选择器中最为重要的部分。

通配符选择器（*）：选取指定元素中的所有子元素。

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
        <script type="text/javascript">
        	$(document).ready(function(){
        		$("body *").css("background-color","#B2E0FF");
        	});
        </script>	
        
    </head>
    <body>
    	<h1>欢迎光临我的网站</h1>
    	<p class="intro">网站管理员介绍</p>
    	<p>姓名：沐曦</p>
    	<p>性别：女</p>
    	<div id="choose">
    		兴趣爱好：
    		<ul>
    			<li>读书</li>
    			<li>听音乐</li>
    			<li>跑步</li>
    		</ul>
    	</div>
    </body>
</html>

网页显示效果为：
在这里插入图片描述图6
ID选择器：利用DOM元素的ID属性值来筛选匹配的元素，并以jQuery包装集的形式返回给对象。

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
        <script type="text/javascript">
        	$(document).ready(function(){
        		$("#choose").css("background-color","#B2E0FF");
        	});
        </script>	
        
    </head>
    <body>
    	<h1>欢迎光临我的网站</h1>
    	<p class="intro">网站管理员介绍</p>
    	<p>姓名：沐曦</p>
    	<p>性别：女</p>
    	<div id="choose">
    		兴趣爱好：
    		<ul>
    			<li>读书</li>
    			<li>听音乐</li>
    			<li>跑步</li>
    		</ul>
    	</div>
    </body>
</html>

网页显示效果为：
在这里插入图片描述图7

元素选择器：根据元素名称匹配相应的元素。即根据选择的标记名来选择的。一般是一组元素。

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
        <script type="text/javascript">
        	$(document).ready(function(){
        		$("p").css("background-color","#B2E0FF");
        	});
        </script>	
    </head>
    <body>
    	<h1>欢迎光临我的网站</h1>
    	<p class="intro">网站管理员介绍</p>
    	<p>姓名：沐曦</p>
    	<p>性别：女</p>
    	<div id="choose">
    		兴趣爱好：
    		<ul>
    			<li>读书</li>
    			<li>听音乐</li>
    			<li>跑步</li>
    		</ul>
    	</div>
    </body>
</html>

网页显示效果为：
在这里插入图片描述图8

复合选择器：将多个选择器组合在一起，可以使任意选择器。它们之间用逗号隔开。

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
        <script type="text/javascript">
        	$(document).ready(function(){
        		$("#choose,.intro").css("background-color","#B2E0FF");
        	});
        </script>	
    </head>
    <body>
    	<h1>欢迎光临我的网站</h1>
    	<p class="intro">网站管理员介绍</p>
    	<p>姓名：沐曦</p>
    	<p>性别：女</p>
    	<div id="choose">
    		兴趣爱好：
    		<ul>
    			<li>读书</li>
    			<li>听音乐</li>
    			<li>跑步</li>
    		</ul>
    	</div>
    </body>
</html>

网页显示效果为&#