jQuery 從入門到實踐：基礎語法、事件與元素操作全解析

個人主頁：?喜歡做夢

歡迎??👍點贊? ?關注? ??收藏? 💬評論

?編輯

??定義

🍓引入依賴

?編輯??語法?

🍑基礎語法

🍑選擇器

🍑jQuery事件

??操作

🍐添加操作

🍐刪除操作

🍐獲取和設置元素

🍅text（）

🍅html（）

🍅val（）

🍐獲取/置css屬性

??案例

??定義

jQuery是一個快速、簡潔的JavaScript庫，他簡化了HTML文檔遍歷、事件處理、動畫和交互等操作。設計宗旨是“Write Less，Do More”（寫的更少，做的更多）

🍓引入依賴

jQuery CDN

進入這個頁面?

這什么幾個都可以點擊，我選的是slim minified，這個是壓縮版的更小更快一點。

點擊進入下面的界面后右鍵保存在，你所寫帶代碼的文件下面

?隨后引入你們所下載的對應的庫名，否則寫JQuery語法的時候，會直接報錯。

<script src="jquery-3.7.1.slim.min.js"></script>

??語法?

🍑基礎語法

$(selector).action()

?$()是一個函數，是jQuery提供的一個全局函數，用于選擇和操作html元素
selector：選擇器，用來“查詢”和“查找元素”
action：執行對元素的操作

🍑選擇器

語法	描述
$（“*”）	選取所有元素
$（this）	選擇當前html元素
$（“p”）	所有<p>元素
$（“p：first”）	選取第一個<p>元素
$（“p：last”	選取最后一個<p>元素
$（“.box”）	所有class=“box”的元素
$（“#box”）	選取id=“box”的元素
$（“p.intro”）	選取class為intro的<p>的元素
$（“ul li：first”）	選取第一個ul元素的第一個li元素
$? (“：input”)	所有input元素
$（“：text”）	選取所有type=“text”的<input>元素
$（“：checkbox”）	所有type=“checkbox”的<input>元素

🍑jQuery事件

?用戶對于頁面的一些操作（點擊、選擇、修改）都會在瀏覽器中產生一個個事件，被js獲取到，從而進行交互。

常見事件

事件	代碼
文檔就緒事件	$（document）.ready（function）
點擊事件	$（selector）.click（function）
雙擊事件	$（selector）.dbclick（function）
元素的值發生改變	$（selector）.change（function）
鼠標懸停事件	$（selector）.mouseover（function）

??操作

🍐添加操作

append（）：添加在列表內部末尾；
prepend（）：添加在列表內部開頭；
after（）：添加在外部后面；
before（）：添加在外部前面。

<body><ol><li>hello</li><li>world</li></ol><script>//添加元素//在ol內部添加//添加在內部末尾$("ol").append("append");//添加在內部開頭$("ol").prepend("prepend");//在ol外部添加//添加在外部后面$("ol").after("after");//添加在外部前面$("ol").before("before");</script>
</body>

🍐刪除操作

?remove（）：刪除被選元素(及子元素）
empty（）：刪除被選元素的子元素

    <script>//刪除被選元素(及子元素)$("ol").empty();//刪除被選元素的子元素$("ol").remove();</script>

🍐獲取和設置元素

JQuery方法	說明
text（）	設置元素或返回所選元素的文本內容
html（）	設置元素或返回所選元素的內容（包括html標簽）
val（）	設置或返回表單字段的值

🍅text（）

獲取文本內容（無參數）:$(selector).text()

作用：返回元素集合的第一個元素的文本內容（去除所有html標簽）

<body><div id="文本">你好<p>這是一個段落標簽</p></div><script>$(document).ready(function(){//獲取文本let textContent1=$("#文本").text();console.log(textContent1);})</script>
</body>

設置文本內容（有參數）：$(selector).text(content)

作用：為匹配所有元素設置文本內容，content為要設置的文本（會自動轉義html特殊字符）

<body><div id="文本">你好<p>這是一個段落標簽</p></div><script>$(document).ready(function(){//設置文本$("#文本").text("修改文本");let textContent2=$("#文本").text();console.log(textContent2);})</script>
</body>

document：整個文檔對象，一個頁面就是一個文檔對象；
$(document).ready():等待頁面DOM結構加載完成后，在執行函數內的代碼；
#選取id，.選取class。

🍅html（）

獲取html元素

   <div id="html1">你好<p>這是一個段落標簽</p> </div><script>$(document).ready(function(){//獲取html文本let htmlContent=$("#html1").html();console.log(htmlContent);})</script>

設置html元素

  <div id="html1">你好<p>這是一個段落標簽</p> </div><script>$(document).ready(function(){//獲取html文本$("#html1").html("<h1>一級標題</h1>")let htmlContent=$("#html1").html();console.log(htmlContent);})</script>

🍅val（）

獲取表單字段的值：

 <input id="23" value="3"><script>$(document).ready(function(){let valContent=$("#23").val();})</script>

設置表單字段的值

    <input id="23" value="3"><script>$(document).ready(function(){$("#23").val(100);let valContent=$("#23").val();})</script>

🍐獲取/置css屬性

獲取css屬性

 <div style="font-size: 24px;">你好</div><script>$(document).ready(function(){let css1=$("div").css("font-size");console.log(css1);})</script>

設置css屬性

  <div style="font-size: 24px;">你好</div><script>$(document).ready(function(){$("div").css("font-size","100px");let css1=$("div").css("font-size");console.log(css1);})</script>

??案例

猜數字

代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="jquery-3.7.1.slim.min.js"></script>
</head>
<body><!-- 頁面效果 --><input type="button" id="reset" value="重新開始一局游戲"><br/><span>請輸入要猜的數字：</span><input type="text" id="number"><input type="button" id="guess" value="猜"><br/><span>已經猜的次數:</span><span id="guesscount">0</span><br/><span>結果：</span><span id="result"></span><!-- 功能 --><script>count=0;//生成數字:1-100number=Math.floor(Math.random()*100)+1;console.log(number);$("#guess").click(function(){//猜的次數增加count++;$("#guesscount").text(count);//獲取猜測的值let guessNum=$("#number").val();//判斷結果if(number<guessNum){$("#result").text("猜大了！！！");$("#result").css("color","red");}else if(number>guessNum){$("#result").text("猜小了！！！");$("#result").css("color","red");}else{$("#result").text("猜對了！！！");$("#result").css("color","green");}} );//重置$("#reset").click(function(){let count=0;//生成數字:1-100let number=Math.floor(Math.random()*100)+1;console.log(number);$("#number").val("");$("#guesscount").text(count);$("#result").text("");})</script>
</body>
</html>

表白墻

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>留言板</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<style>.container {width: 350px;height: 300px;margin: 0 auto;text-align: center;}.grey {color: grey;}.container .row {width: 350px;height: 40px;display: flex;justify-content: space-between;align-items: center;}.container .row input {width: 260px;height: 30px;}#submit {width: 350px;height: 40px;background-color: orange;color: white;border: none;margin: 10px;border-radius: 5px;font-size: 20px;}
</style>
<!-- 頁面 -->
<div class="container"><h1>留言板</h1><p class="grey">輸入后點擊提交，會將信息顯示表示在表格中</p><div class="row"><span>誰：</span><input type="text" id="from" name=""></div><div class="row"><span>對誰：</span><input type="text" id="to" name=""></div><div class="row"><span>說什么：</span><input type="text" id="say" name=""></div><div><input type="button" value="提交" id="submit"  onclick="submit()"></div>
</div><!-- 功能 --><script>function submit(){let from=$("#from").val();let to=$("#to").val();let say=$("#say").val();if(from=="" || to==""||say==""){return;}let html1="<div>"+from+"對"+to+"說:"+say+"</div>"//重置$(".container").append(html1);$("#from").val("");$("#to").val("");$("#say").val("");}</script>
</body >
</html>

實現效果

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/97117.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/97117.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/97117.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！