第一次接触jquery

本文介绍: jQue ry 是一个 Ja vaScri p t 函数库。jQue ry 是一个轻量级的”写的少，做的多”的 Ja vaScri p t 库。jQue ry 库包含以下功能：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUti li ti es 提示：除此之外，jQue ry 还提供了大量的插件。

文章 目录

一.关于jqurey
二.什么是jqurey
三.上课实例

一.关于 jqure y

简而言之：jQuer y 是一个 JavaSc rip t 库。

jQuer y 极大地简化了 JavaSc rip t 编程。

二.什么是jqure y

jQuer y 是一个 JavaScrip t 函数库。

jQue r y 是一个轻量级的”写的少，做的多”的 JavaScrip t 库。

jQue r y 库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScrip t 特效和动画
HTML DOM 遍历和修改
AJAX
Uti li ti es
提示：除此之外，jQue r y 还提供了大量的插件。

三.上课实例

1.表格 2.鼠标 移动 效果 3隐藏和显示 效果

代码 如下

<!DOCTYPE html&gt;
<html&gt;
	<head&gt;
		<meta charset="utf-8"&gt;
		<title&gt;</title>
		<script type="text/javascript" src="jquery-3.6.3.min.js"></script>
		<script type="text/javascript" src="index.js" defer></script>
	</head>
	<body>
	<button type="button" id="btn">隐藏</button>
	
	
		<table id="tab">
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>爱好</th>
		</tr>
		<tr>
			<td>xxx</td>
			<td>19</td>
			<td>唱歌</td>
		</tr>
		<tr>
			<td>xxx</td>
			<td>20</td>
			<td>游戏</td>
		</tr>
		<tr>
			<td>xxx</td>
			<td>3</td>
			<td>小汽车</td>
		</tr>
		<tr>
			<td>xxx</td>
			<td>31</td>
			<td>唱歌</td>
		</tr>
		</table>
	</body>
</html>

$("#tab").css({
	"width":"600px",
	"margin":"0 auto",
	"text-align":"center",
	"line-height":"30px"
	
})

$("tr:odd").css({
	"background":"red",
	"color":"blue"
})
.mouseleave(function(){
	$(this).css({
		"background":"red",
		"color":"blue"
	})
});

$("tr:even").css({
	"background":"#333",
	"color":"#ddd"
})
.mouseleave(function(){
	$(this).css({
		"background":"#333",
			"color":"#ddd"
		
	})
	
});

//鼠标移动上去改变背景颜色
//链式写法
$("tr").mouseenter(function(){
	$(this).css({
		"background":"red"
	})
});

	$("#btn").click(function(){
	$("#tab").toggle();
	
	/* if($(this).text=="隐藏"){
		$(this).text("显示");
		$("#tab").fadeOut(2000);
	}
	else{
		$(this).text("隐藏");
		$("#tab").fadeIn(2000);
	} */
	
});