一.关于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” 的元素