jQuery库：里面存在大量的JavaScript函数
官网：https://jquery.com/
9.1 获取jQuery
jQuery引入
-
cdn 引入
<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script> -
本地引入
<script src="lib/jquery-3.6.3.js"></script>
jQuery公式：
$(selector).action()
<a href="" id="test-jquery">点我试试</a>
<script>
//原来
var test = document.getElementById('id');
test.click()
//使用jquery后
//选择器就是CSS的选择器
$('#test-jquery').click(function (){
alert('hello,jquery');
});
</script>
9.2 选择器
//原生的js 选择器少 麻烦不好记
document.getElementsByTagName();//标签
document.getElementById();//id
document.getElementsByClassName();//类
//jQuery，CSS中的选择器全都可以用
$('p').click();//标签
$('#id1').click();//id
$('.class1').click();//类
文档工具站： jQuery
9.3 事件
鼠标事件，键盘事件，其他事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.6.3.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('('+e.pageX+','+e.pageY+')')
})
});
</script>
</body>
</html>
9.4 操作DOM
-
节点文本操作
$('#test-ul li[name="html"]').text();//获得值 $('#test-ul li[name="html"]').text('设置值');//设置值 $('#test-ul').html();//获得值 $('#test-ul').html('<strong>123</strong>');//设置值 -
CSS的操作
$('#test-ul li[name="css"]').css("color","pink"); -
元素的显示和隐藏
- 本质
display:none
$('#test-ul li[name="css"]').show(); $('#test-ul li[name="css"]').hide(); - 本质
其他测试
$(window).width();
$(window).height();
$('#test-ul li[name="css"]').toggle();
