第十五个知识：JQuery
初识JQuery:
<head><meta charset="UTF-8"><title>Title</title><script src="lib/jquery-3.7.1.js"></script>//引入jquery
</head>
<body><a href="https://www.baidu.com" id="baidu">点我</a><script>$('#baidu').click(function (){alert('你用jquery写了一行代码');})</script>
</body>我们通过一个公式：$(selector).action() 来使用JQuery，selector表示选择器---id、class、标签名都是选择器,就像document.getElementById……一样
JQuery里的选择器：
-
与之前的document.getElementById相同，却更加简洁
$('#id').click(function (...))//id选择器
$('.class').click(function (...))//类选择器
$('p').click(function (...))//标签选择器
···JQuery里的事件：所谓事件其实就是函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="lib/jquery-3.7.1.js"></script><style>#b{height: 500px;width: 500px;border: 3px solid black;}</style>
</head>
<body>mouse_position:<span id="a"></span><div id="b"></div>
<script>$(function () {$('#b').mousemove(function (e) {//用id来获取span节点，对标签内容进行操作，mousemove是jQuery库里的方法$('#a').text('x:'+ e.pageX +'y:'+e.pageY);//用id来获取div节点，text也是jquery库里的方法})})
</script>
</body>
</html>用JQuery操控dom元素：
-
操作dom其实就是找到节点位置，然后对节点进行改变
$('#p1').text();//获取id为p1的标签的内容
$('#p1').text('天玄地号');//改变id为p1的标签的内容对于列表：
$('#test-ul li[name=x]').text();//获取列表中li元素节点内容
$('#test-ul li[name=x]').css({"background","red"});//改变li下name为x的节点的背景颜色之后还有很多东东，大家可以多去菜鸟教程或者Jquery官网学习，在这里我就不多赘述了，毕竟实在是太多了（汗流浃背了）
最后，学海无涯苦作舟，奥里给，你可以的，少年！