8. jQuery
jQuery库，里面存在大量的Javascript函数
jQuery是一个快速、简洁的JavaScript框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery官网：https://jquery.com/
开发版：jquery-3.6.0.js
生产版：jquery-3.6.0.min.js 这个是上面压缩版的，去掉了空格啥的，一般部署的时候用这个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- cdn引入-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!-- 导入本地下载的jquery-->
<script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<a href="" id="a1">点击</a>
<script>
<!-- 公式 ：$(selector).action()
$代表jQuery
selector代表选择器(css里的选择器)
action():事件,发生这个事件时,执行()里面的语句
-->
$('#id').click(function (){
alert("你好");
})
</script>
</body>
</html>
选择器
<script>
//原生js，选择器少，麻烦不好记
//标签
document . getElementsByTagName();
//id
document . getElementById();
//类
document . getElementsByClassName();
//jQuery_ css 中的选择器它全部都能用!
$('p').click(); //标签选择器
$(' #id1' )c1ick(); //id选择器
$(' . class1').click() //class选择器
文档工具站：https://jquery.cuishifeng.cn/
事件
鼠标事件，键盘事件,其他事件
mousedown() 鼠标按下 mousemove() 鼠标移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.6.0.js"></script>
<style>
#divMove{
width: 508px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--要求:获取鼠标当前的一个坐标-->
mouse : <span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<script>
//页面加载完成后开始运行do stuff when DOM is ready 中的语句!
$(document).ready(function() {
// do stuff when DOM is ready
});
//上面的简写
$(function (){
$('#divMove').mousemove(function (e){
$('#mouseMove').text('x：'+e.pageX+'y：'+e.pageY);
})
});
</script>
</body>
</html>
DOM节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.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('123456');//修改文本
</script>
</body>
</html>
设置html
$('#test-ul').html();//获得html
$('#test-ul').html('<strong>123</strong>'); //设置值
设置CSS
$('#test-ul li[name=python]').css("color","red");
$('#test-ul li[name=python]').css({"color":"red","background":"blue"});
元素的显示和隐藏：本质css中的 display:none
$('#test-ul li[name=python]').show();//显示
$('#test-ul li[name=python]').hide()//隐藏
测试
$ (window).width () $ (window).height()
如何巩固JS（看jQuery源码,看游戏源码! ) 巩固HTML。CSS(扒网站，全部down下来，然后对应修改看效果~)
标签：JQuery,name,python,介绍,li,2023.3,ul,test,选择器 From： https://www.cnblogs.com/shanzha/p/17172830.html