我是辰兮，很高興你能來閱讀，本章初識jQuery，用案例詳細的講解了jQuery的DOM操作，每一個操作都有詳細的案例以及截圖，希望對你有幫助，分享獲取新知，大家一起進步。
下一篇請參考：JQuery-DOM進階
一、初識jQuery
（1）jQuery簡介
jQuery是一個快速、簡潔的JavaScript框架
jQuery設計的宗旨是“Write Less，Do More”，即倡導寫更少的代碼，做更多的事情。
它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
jQuery的核心特性可以總結爲：
①具有獨特的鏈式語法和短小清晰的多功能接口；
②具有高效靈活的css選擇器，並且可對CSS選擇器進行擴展；
③擁有便捷的插件擴展機制和豐富的插件。
④jQuery兼容各種主流瀏覽器，如IE 6.0+、FF1.5+、Safari 2.0+、Opera 9.0+等
（2）什麼是jQuery
jQuery是一個JavaScript函數庫。 jQuery是一個輕量級的"寫的少，做的多"的JavaScript庫。
jQuery庫包含以下功能：
- HTML 元素選取
- HTML 元素操作
- CSS 操作
- HTML 事件函數
- JavaScript 特效和動畫
- HTML DOM 遍歷和修改
- AJAX
- Utilities
二、jQuery DOM操作
屬性操作
（1）value屬性
獲取元素value的屬性值和設置value的屬性值
分享一下案例代碼，初學者建議嘗試
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
//屬性操作
//1.value屬性
//1-1獲取value屬性值
var v =$("#userName").val();
alert(v);
//1-2設置value屬性值
$("#pwd").val("wahaha");
})
})
</script>
</head>
<body>
<input type="button" value="屬性操作" id="btn1" />
<hr />
<input type="text" id="userName" />
<input type="text" id="pwd" />
</body>
</html>
①案例代碼首先是這樣的顯示結果
②jQuery的操作就是點擊按鈕button，執行jQuery命令
$("#btn1").click(function(){
//屬性操作
//1.value屬性
//1-1獲取value屬性值
var v =$("#userName").val();
alert(v);
//1-2設置value屬性值
$("#pwd").val("wahaha");
})
③點擊確定後彈出框關閉，wahaha設置成功
小結：
- 獲取元素的value屬性值
var v = $(selector).val();- 設置元素的value屬性值
$(selector).val("v");
（2）class屬性
分享一下案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ToDo list</title>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<style>
li.sty1{
background-color: bisque;
}
li.sty2{
font-size: x-large;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("#1").addClass("sty2") //添加
$("#2").removeClass("sty2") //移除
$("#3").toggleClass("sty1") //添加或者移除
})
})
</script>
</head>
<body>
<div>
<input type="button" value="屬性操作" id="btn1" />
<ul id="todo">
<li class="sty1" id="1">買菜</li>
<li id="2" class="sty2">做飯</li>
<li id="3" class="">拖地</li>
</ul>
</div>
</body>
</html>
- ①基礎的顯示樣式如下
- ②點擊按鈕，執行class屬性的功能
$("#btn1").click(function(){
$("#1").addClass("sty2") //添加
$("#2").removeClass("sty2") //移除
$("#3").toggleClass("sty1") //添加或者移除
})
- ③再次點擊的時候，就只執行如下功能（ps：前面兩個已經執行過了）
$("#3").toggleClass("sty1") //添加或者移除
小結：
- 給元素的class屬性添加樣式
$(selector).addClass("className");- 從元素的class屬性中移除樣式
$(selector).removeClass("className");- 從元素的class屬性中移除|添加樣式
$(selector).toggleClass("className");
（3）其他屬性(attr解決)
實戰參考代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
<script>
$(document).ready(function() {
$("button").click(function() {
//獲取屬性的值
var v =$("#w3s").attr("href");
alert(v);
//設置屬性的值，然後打印出來
$("#w3s").attr("href","www.baidu.com");
//打印出來
alert($("#w3s").attr("href"));
//移除屬性
$("#w3s").removeAttr("href");
//再次打印
alert($("#w3s").attr("href"));
});
});
</script>
</head>
<body>
<p>
<a href="http://www.w3school.com.cn" id="w3s" title="aaa">W3School.com.cn</a>
</p>
<button>顯示 href 值</button>
</body>
</html>
首先圖片的參考樣式如圖
其次當我們執行按鈕功能，獲取href的值，然後打印出來
當我們點擊確定後，我們進行了更改屬性值的操作，爲了讓你直觀的看到屬性值，我又打印了出來。
最後執行了移除屬性的操作，我們再次打印 驗證成功。
小結：
- 獲取屬性值
var v = $(selector).attr("attrName");- 設置屬性值
$(selector).attr("attrName","attrName");- 移除屬性
$(selector).removeAttr("attrName");
一句通俗的話概括什麼是Dom操作：
把一個文檔當做一個對象加載到內存中進行操作…
The best investment is to invest in yourself
2020.05.07 記錄辰兮的第62篇博客