jQuery庫：里面存了大量的javaScript函數
引入jQuery
法一：去官網jquery.com 下載 jQuery 庫
-
Production version：用於實際的網站中，已被精簡和壓縮。
-
Development version：用於測試和開發（未壓縮，是可讀的代碼）。
法二：從公網引用jQuery
百度jQuery cdn【CDN的全稱是Content Delivery Network,即內容分發網絡】
復制該鏈接到head標簽里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="lib/jQuery-3.6.0.js"></script>
</head>
<body>
<!--公式： $(selector).action()-->
<a href="" id="test_jquery">點我</a>
<script>
//選擇器就是css的選擇器
$('#test_jquery').click(function(){
alert('hello,world!');
})
</script>
</body>
</html>
jQuery選擇器
<script>
//原生js選擇器少
document.getElementById();//id
document.getElementsByClassName();//類
document.getElementsByTagName();//標簽
//jQuery css中的選擇器它全部都能用
$('p').click();//標簽
$('#id1').click();//id
$('.class1').click();//class
</script>
文檔工具站 jQuery速查：https://jquery.cuishifeng.cn/index.html
jQuery事件
鼠標事件，鍵盤事件，觸屏事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="lib/jQuery-3.6.0.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 3px solid darkred;
}
</style>
</head>
<body>
<!--獲取鼠標當前的一個坐標-->
mouse坐標：<span id="mouseMove"></span>
<div id="divMove">
在這里移動鼠標試試
</div>
<script>
//當網頁元素加載完畢后，響應事件
$(document).ready(function (){
$('#divMove').mousemove(function (e){
$('#mouseMove').text('x:'+e.pageX+'Y:'+e.pageY);
});
});
//可以簡寫為$(function(){...});
</script>
</body>
</html>
操作DOM元素
- 文本的操作
$('#ul_test').text();//獲得值
$('#ul_test').text('kaka');//設置值，有點類似於Java中方法的重寫？
$('#ul_test').html();//獲得值
$('#ul_test').html('<strong>kaka</strong>');//設置值
- css的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="lib/jQuery-3.6.0.js"></script>
</head>
<body>
<div id="d">
</div>
<ul id="ul_test">
<li class="js">javaScript</li>
<li name="book">python</li>
</ul>
<script>
$('#ul_test li[name=book]').css("color","red");
</script>
</body>
</html>
- 元素的顯示和隱藏
$('#ul_test li[name=book]').hide();//隱藏，本質即為屬性dispaly:none
$('#ul_test li[name=book]').show();//顯示
cdn引入什么意思
另外，關於jQuery位置順序問題
在單獨的js文件里使用Jquery，直接使用就可以了，你不需要任何的引入操作,因為引入操作在前端頁面已經執行了，你在單獨的js文件里所需要的東西等於前面已經有了，當然可以直接使用了.當然前端頁面的引入順序當然也需要jquery庫文件在前面，而你的js文件放在后面，順序不能錯了，因為js是解釋型 語言，從前往后執行，你不能在沒有的時候 就使用.
參考鏈接：https://blog.csdn.net/u011442439/article/details/80907805