一、JQuery
JQuery库,里面存在大量的JavaScript函数
二、获取JQuery
三、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/JQuery3.6.0.js"></script>
</head>
<body>
<!--公式 : $(selector).action() -->
<a href="" id="test-jquery">点我</a>
<script>
$('#test-jquery').click(function () {
alert("Hello JQuery");
})
</script>
</body>
</html>
四、JQuery选择器
<script>
//JQuery能够使用css中的所有选择器
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click();//class选择器
</script>
五、文档工具站
六、事件
鼠标事件、键盘事件、其它事件
6.1、鼠标事件
6.2、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/JQuery3.6.0.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>
6.3、效果
七、JQuery常见操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/JQuery3.6.0.js"></script>
</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("Massimo");//设置值
$('#test-ul').html();//获取html格式的值
//$('#test-ul').html("<span>js</span>");//设置为html格式的值
//css的操作
$('#test-ul li[name=python]').css({"color":"red"})
//元素的显示和隐藏:本质display:none;
//$('#test-ul li[name=python]').show();
//$('#test-ul li[name=python]').hide();
//$('#test-ul li[name=python]').toggle();显示和隐藏切换
</script>
</body>
</html>