第一次接触jquery

最新推荐文章于 2024-05-14 15:41:22 发布

疯掉就疯掉吧

最新推荐文章于 2024-05-14 15:41:22 发布

阅读量861

点赞数

分类专栏： web前端开发文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_62512326/article/details/129110645

版权

web前端开发专栏收录该内容

25 篇文章 3 订阅

订阅专栏

文章目录

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

一.关于jqurey

简而言之：jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

二.什么是jqurey

jQuery 是一个 JavaScript 函数库。

jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

jQuery 库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
提示：除此之外，jQuery 还提供了大量的插件。

三.上课实例

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

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></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);
	} */
	
});

注意

JQUREY的语法和CSS有些不同，它是以$().()
美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作
实例:

$(this).hide() - 隐藏当前元素

$(“p”).hide() - 隐藏所有 < p > 元素

$(“p.test”).hide() - 隐藏所有 class=“test” 的 < p > 元素

$(“#test”).hide() - 隐藏 id=“test” 的元素

疯掉就疯掉吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一次接触jquery

jQuery 是一个 JavaScript 函数库。jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。jQuery 库包含以下功能：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities提示：除此之外，jQuery 还提供了大量的插件。
复制链接

扫一扫