@TOC
一、初识jQuery及公式
1、导入
1.1、cdn导入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn引入-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
</head>
1.2、本地导入
在 https://www.bootcdn.cn/jquery/网址下载jQuery库，然后导入本地：
<script src="lib/jquery-3.4.1.js"></script>
2、使用，公式为$(selector).action()
<body>
<a href="" id="test-jquery">点我</a>
<script>
$('#test-jquery').click(function () {
alert('hello,jQuery!');
})
</script>
</body>
2.1、jQuery选择器
- 标签选择器
$('p').click(); - id选择器
$('#id1').click(); - class选择器
$('.class1').click();
文档工具站：https://jquery.cuishifeng.cn/2.2、jQuery事件
事件：
- 鼠标事件
$('.class').mousedown();：鼠标按下$('.class').mouseleave();：鼠标离开$('.class').mousemove();：鼠标移动$('.class').mouseover();：鼠标点击结束
案例展示：获取当前鼠标的坐标尾椎
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn引入-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
mouse:<span id="mouseMove"></span>
<div id="divMove">在这里移动鼠标试试</div>
<script>
// 当网页元素加载完毕后，开始响事件
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
})
});
</script>
</body>
</html>
- 键盘事件
文档工具站：https://jquery.cuishifeng.cn/
二、jQuery操作Dom元素
1、节点文本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="test-ul">
<li class="js">JavaScript</li>
<li name="python">Python</li>
</ul>
<script>
$('#test-ul li[name=python]').text(); // 获得值
$('#test-ul li[name=python]').text('新值'); // 设置值
</script>
</body>
</html>
$('#test-ul li[name=python]').text(); // 获得值
$('#test-ul li[name=python]').text('新值'); // 设置值
$('#test-ul li[name=python]').html(); // 获得值
$('#test-ul li[name=python]').html('<strong>123</strong>'); // 设置值
文档工具站：https://jquery.cuishifeng.cn/
2、CSS的操作
$('#test-ul li[name=python]').css({
"color","red"})
文档工具站：https://jquery.cuishifeng.cn/
......
3、元素的显示和隐藏，本质 display:none
$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hidde()
文档工具站：https://jquery.cuishifeng.cn/
三、jQuery常用方法
1、index();获取元素索引
2、text();获取和设置文本节点
3、css();获取和设置样式
4、val();获取和设置value属性
5、attr();获取和设置属性值，例如src
6、addClass();添加class
7、removeClass();删除class
8、toggleClass();切换class
9、siblings();获取同级其他元素
10、find("选择器");获取子级
11、parent();获取父级
创作不易，大侠请留步… 动起可爱的双手，来个赞再走呗 (๑◕ܫ￩๑)
