文章目錄
- 題外話
- 前言
- 1. jQuery是什么
- 1.1 jQuery的下載
- 1.2 jQuery基礎語法
- 1.3 jQuery選擇器
- 1.4 jQuery事件
- 結語
題外話
📢 博客主頁：?布小禪?
📢 作者專欄：
?Python?
?Java?
前言
身為一個合格的后端開發人員
前端的基礎知識也是需要了解的
1. jQuery是什么
jQuery是JavaScript的一個庫，用來簡化我們對原生js代碼的撰寫
1.1 jQuery的下載
下載可以去官方下載，也可以去一些技術社區下載
官方：Download jQuery
jQuery有兩個版本，一個是原生版本，是符合我們大多數人審美的，用于閱讀源代碼
一個是壓縮版，去掉了所有空格和縮進，一般用于匯入使用
這邊建議兩個版本都下載
1.2 jQuery基礎語法
jQuery是由一個函式$為核心的，這個美元符號不是什么特殊符號，是一個函式名
而jQuery一般都是這樣的形式：$(選擇器).操作();
當然，在使用之前我們需要先下載匯入這個庫
先將下載好的jQuery放在方便匯入的目錄
我是放在了當前目錄的上一級目錄
<script src="../jquery-3.6.0.min.js"></script>
<!-- ..是回傳上一級目錄，/是進入下一級目錄 注意這里的<script>需要放在<head>里面-->
需要將jQuery函式放在
<script>
$(document).read(function (){
代碼塊
});
</script>
里面，這是為了防止js代碼在頁面還沒有加載完全的時候就加載
1.3 jQuery選擇器
jQuery就像DOM一樣，或者說，就是簡化了DOM的操作
有各種選擇器：標簽名選擇器，id選擇器，類選擇器，屬性選擇器，，，
現在就簡單地說一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function (){
$("#id1").click(function (){
alert("我是id選擇器，我選擇了id為“id1”的標簽");
});
$(".class1").click(function (){
alert("我是類選擇器，我選擇了class為“class1”的標簽");
});
$("[name]").click(function (){
alert("我是屬性選擇器，我選擇了含有“name”屬性的選擇器");
});
$("button").click(function (){
alert("我是標簽名選擇器，你點擊任何一個按鈕，我都會出來");
});
});
</script>
</head>
<body>
<label>
<button id="id1">id選擇器</button>
<button class="class1">類選擇器</button>
<button>標簽名選擇器</button>
<button name="name1">屬性選擇器</button>
</label>
</body>
</html>
1.4 jQuery事件
常用的事件
| Event 函式 | 系結函式至 |
|---|---|
| $(document).ready(function) | 將函式系結到檔案的就緒事件（當檔案完成加載時） |
| $(selector).click(function) | 觸發或將函式系結到被選元素的點擊事件 |
| $(selector).dblclick(function) | 觸發或將函式系結到被選元素的雙擊事件 |
| $(selector).focus(function) | 觸發或將函式系結到被選元素的獲得焦點事件 |
| $(selector).mouseover(function) | 觸發或將函式系結到被選元素的滑鼠懸停事件 |
這和原生的事件是差不多的，只不過是換了一個形式而已
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function (){
$("#p1").click(function (){
$("#p1").css("color", "red");
});
$("#p2").dblclick(function (){
$("#p2").css("color", "yellow");
});
$("#bu1").focus(function (){
$("#bu1").css("color", "red");
});
$("#p3").mouseover(function (){
$("#p3").css("color", "blue");
});
});
</script>
</head>
<body>
<p id="p1">單擊我，你會看到我變紅</p>
<p id="p2">雙擊我，你會看到我變黃</p>
<button id="bu1">單擊我，你會看到我變紅</button>
<p id="p3">滑鼠挪過來，你會看到我變藍</p>
</body>
</html>
結語
興趣是最好的老師，堅持是不變的真理，
學習不要急躁，一步一個腳印，踏踏實實的往前走，
每天進步一點點，榷訓月累之下，你就會發現自己已經變得很厲害了，
我是布小禪，一枚自學萌新，跟著我每天進步一點點吧！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/291331.html
標籤：其他
下一篇：JS的介紹