点击链接走进前端学习:https://blog.csdn.net/qq_53810245/article/details/116831968
jQueryAPI 中文文档
一、初识jQuery及公式
1、导入
1.1、cdn导入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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选择器
2.2、jQuery事件
事件:
- 鼠标事件
$('.class').mousedown(); :鼠标按下$('.class').mouseleave(); :鼠标离开$('.class').mousemove(); :鼠标移动$('.class').mouseover(); :鼠标点击结束
案例展示:获取当前鼠标的坐标尾椎
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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/ 创作不易,大侠请留步… 动起可爱的双手,来个赞再走呗 (???←?)
|