JavaScript學習筆記十六—— jQuery簡介
參考教程B站狂神https://www.bilibili.com/video/BV1JJ41177di
jQuery庫，裏面存放了大量的JavaScript函數
下載jQuery（不想下載的話直接百度搜jQuery CDN用網上的鏈接粘貼到項目裏就行），官網：https://jquery.com/
如果點進去發現是跳轉網頁，那就直接ctrl+s保存就行。下面的這個是開發版，也可以下載
jQuery使用：
jQuery公式：$(選擇器).action()
<a href="" id="test-jQuery">點我</a>
<script>
$('#test-jQuery').click(function () {
alert('hello,jQuery')
})
</script>
jQuery選擇器
//css中的選擇器都能使用
$('p').click(); //標籤選擇器
$('#id1').click(); //id選擇器
$('.class1').click(); //class選擇器
jQuery在線文檔：http://jquery.cuishifeng.cn/
事件
鼠標、鍵盤等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.5.1.min.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid black;
}
</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>
操作dom
節點文本操作
<ul id="test-ul">
<li class="js">JavaScript</li>
<li name="python">Python</li>
</ul>
<script>
$('#test-ul li[name=python]').text(); //text()沒有參數就是取值，有參數就是設置值
$('#test-ul').html();
</script>
css操作
$('#test-ul li[name=python]').css('color','red');
多個就用鍵值對錶示
顯示和隱藏（本質 display:none）
$('#test-ul li[name=python]').show();
$('#test-ul li[name=python]').hide();