电子商务公司建设网站方案设计最新国际军事动态
文章目录
- 一.关于jqurey
- 二.什么是jqurey
- 三.上课实例
- 1.表格 2.鼠标移动效果 3隐藏和显示效果
- 代码如下
- 注意
一.关于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” 的元素