JQuery 基礎：

（一）、概念：一個JavaScript框架。簡化JS開發

jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。

JavaScript框架：本質上就是一些js文件，封裝了js的原生代碼而已

（二）、快速入門

步驟：
目前jQuery有三個大版本：
①、1.x：兼容ie678,使用最爲廣泛的，官方只做BUG維護，功能不再新增。因此一般項目來說，使用1.x版本就可以了，最終版本：1.12.4 (2016年5月20日)
②、2.x：不兼容ie678，很少有人使用，官方只做BUG維護，功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x，最終版本：2.2.4 (2016年5月20日)
③、3.x：不兼容ie678，只支持最新的瀏覽器。除非特殊要求，一般不會使用3.x版本的，很多老的jQuery插件不支持這個版本。目前該版本是官方主要更新維護的版本。最新版本：3.2.1（2017年3月20日）
jquery-xxx.js 與 jquery-xxx.min.js區別：
①、jquery-xxx.js：開發版本。給程序員看的，有良好的縮進和註釋。體積大一些
②、jquery-xxx.min.js：生產版本。程序中使用，沒有縮進。體積小一些。程序加載更快
導入JQuery的js文件：導入min.js文件
JQuery對象和JS對象區別與轉換
①、 JQuery對象在操作時，更加方便。
②、JQuery對象和js對象方法不通用的.
③、兩者相互轉換
Ⅰ、 jq – > js : jq對象[索引] 或者 jq對象.get(索引)
Ⅱ、js – > jq : $(js對象)

（三）、選擇器：篩選具有相似特徵的元素(標籤)

1. 語法的基本操作學習：

事件綁定

<body>
    <div id="div1">div1....</div>
    <div id="div2">div2....</div>
    <input type="button" value="點我" id="b1">
<script>
    //給b1按鈕添加單擊事件

    //1.獲取b1按鈕
    $("#b1").click(function(){
        // alert("abc");
    })
</script>

入口函數

$(function () {
		           
});

window.onload 和 $(function) 區別：

window.onload只能定義一次,如果定義多次，後邊的會將前邊的覆蓋掉
$(function)可以定義多次的。

樣式控制：css方法

<script>
    $(function(){
        $("#div1").css("backgroundColor","red");
        $("#div2").css("backgroundColor","pink");
    });
</script>
<div id="div1">div1....</div>
<div id="div2">div2....</div>
<input type="button" value="點我" id="b1">

2. 選擇器分類👉jQuery 選擇器詳解

2.1 基本選擇器

			1. 選擇器（元素選擇器）
				* 語法： $("html標籤名") 獲得所有匹配標籤名稱的元素
			2. id選擇器 
				* 語法： $("#id的屬性值") 獲得與指定id屬性值匹配的元素
			3. 類選擇器
				* 語法： $(".class的屬性值") 獲得與指定的class屬性值匹配的元素
			4. 並集選擇器：
				* 語法： $("選擇器1,選擇器2....") 獲取多個選擇器選中的所有元素

2.2 層級選擇器

			1. 後代選擇器
				* 語法： $("A B ") 選擇A元素內部的所有B元素		
			2. 子選擇器
				* 語法： $("A > B") 選擇A元素內部的所有B子元素

2.3 屬性選擇器

			1. 屬性名稱選擇器 
				* 語法： $("A[屬性名]") 包含指定屬性的選擇器
			2. 屬性選擇器
				* 語法： $("A[屬性名='值']") 包含指定屬性等於指定值的選擇器
			3. 複合屬性選擇器
				* 語法： $("A[屬性名='值'][]...") 包含多個屬性條件的選擇器

2.4 過濾選擇器

			1. 首元素選擇器 
				* 語法： :first 獲得選擇的元素中的第一個元素
			2. 尾元素選擇器 
				* 語法： :last 獲得選擇的元素中的最後一個元素
			3. 非元素選擇器
				* 語法： :not(selector) 不包括指定內容的元素
			4. 偶數選擇器
				* 語法： :even 偶數，從 0 開始計數
			5. 奇數選擇器
				* 語法： :odd 奇數，從 0 開始計數
			6. 等於索引選擇器
				* 語法： :eq(index) 指定索引元素
			7. 大於索引選擇器 
				* 語法： :gt(index) 大於指定索引元素
			8. 小於索引選擇器 
				* 語法： :lt(index) 小於指定索引元素
			9. 標題選擇器
				* 語法： :header 獲得標題（h1~h6）元素，固定寫法

2.5 表單過濾選擇器

			1. 可用元素選擇器 
				* 語法： :enabled 獲得可用元素
			2. 不可用元素選擇器 
				* 語法： :disabled 獲得不可用元素
			3. 選中選擇器 
				* 語法： :checked 獲得單選/複選框選中的元素
			4. 選中選擇器 
				* 語法： :selected 獲得下拉框選中的元素

（四）、 DOM操作

1. 內容操作

①、 html(): 獲取/設置元素的標籤體內容 <a>內容</a> --> 內容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script  src="../js/jquery-3.3.1.min.js"></script>
		<script>
			$(function () {
                //獲取mydiv的標籤體內容
				var html = $("#mydiv").html();
				alert(html);//<p><a href="#">標題標籤</a></p>
                $("#mydiv").html("<p>aaaa</p>");
            });
		</script>		
	</head>
	<body>
		<input id="myinput" type="text" name="username" value="張三" /><br />
		<div id="mydiv"><p><a href="#">標題標籤</a></p></div>
	</body>
</html>

②、 text(): 獲取/設置元素的標籤體純文本內容 <a>內容</a> --> 內容

<script>
	$(function () {
        // 獲取mydiv文本內容
        var text = $("#mydiv").text();
        alert(text);//-->標題標籤
        $("#mydiv").text("bbb");//將“ <p><a href="#">標題標籤</a></p> ” 修改爲bbb
    });
</script>

③、 val()：獲取/設置元素的value屬性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script  src="../js/jquery-3.3.1.min.js"></script>
		<script>
			$(function () {
                // 獲取myinput 的value值
				 var value = $("#myinput").val();
                 $("#myinput").val("李四");
            });
		</script>
		
	</head>
	<body>
		<input id="myinput" type="text" name="username" value="張三" /><br />
		<div id="mydiv"><p><a href="#">標題標籤</a></p></div>
	</body>
</html>

2. 屬性操作

2.1 通用屬性操作

①、 attr(): 獲取/設置元素的屬性

<head>
<script type="text/javascript">
	$(function () {
        //獲取北京節點的name屬性值
		var name = $("#bj").attr("name");
		//設置北京節點的name屬性的值爲dabeijing
		$("#bj").attr("name","dabeijing");
		//新增北京節點的discription屬性 屬性值是didu
		$("#bj").attr("discription","didu");
    });
</script>
</head>
<body>			
	 <ul>
	 	 <li id="bj" name="beijing" xxx="yyy">北京</li>
		 <li id="tj" name="tianjin">天津</li>
	 </ul>
	 <input type="checkbox" id="hobby"/>
</body>

②、 removeAttr():刪除屬性

//刪除北京節點的name屬性並檢驗name屬性是否存在
$("#bj").removeAttr("name");

③、 prop():獲取 / 設置元素的屬性

//獲得hobby的的選中狀態
var checked = $("#hobby").prop("checked");
alert(checked);

④、 removeProp():刪除屬性
attr和prop區別？
①、如果操作的是元素的固有屬性，則建議使用prop
②、如果操作的是元素自定義的屬性，則建議使用attr

2.2 對class屬性操作

更詳細用法👉jQuery HTML / CSS 方法
①、 addClass():添加class屬性值

//<input type="button" value=" addClass"  id="b2"/>
$("#b2").click(function () {
    $("#one").addClass("second");//second爲css選擇器的樣式
});

②、 removeClass():刪除class屬性值

//<input type="button" value="removeClass"  id="b3"/>
$("#b3").click(function () {
    $("#one").removeClass("second");
});

③、 toggleClass():切換class屬性

//<input type="button" value=" 切換樣式"  id="b4"/>
$("#b4").click(function () {
    $("#one").toggleClass("second");
});

toggleClass("one"): 判斷如果元素對象上存在class="one"，則將屬性值one刪除掉。如果元素對象上不存在class="one"，則添加

3. CRUD操作:

append():父元素將子元素追加到末尾
對象1.append(對象2): 將對象2添加到對象1元素內部，並且在末尾

 <script type="text/javascript">
	 $(function () {
         // <input type="button" value="將反恐放置到city的後面"  id
		 $("#b1").click(function () {
			 //append
			 //$("#city").append($("#fk"));
			 //appendTo
             $("#fk").appendTo($("#city"));
         });
        
     });
</script>

</head>
<body>
	<input type="button" value="將反恐放置到city的後面"  id="b1"/>
	<input type="button" value="將反恐放置到city的最前面"  id="b2"/
	<input type="button" value="將反恐插入到天津後面"  id="b3"/>
	<input type="button" value="將反恐插入到天津前面"  id="b4"/>
	 <ul id="city">
	 	 <li id="bj" name="beijing">北京</li>
		 <li id="tj" name="tianjin">天津</li>
		 <li id="cq" name="chongqing">重慶</li>
	 </ul>
	  <ul id="love">
	 	 <li id="fk" name="fankong">反恐</li>
		 <li id="xj" name="xingji">星際</li>
	 </ul> 
</body>

prepend():父元素將子元素追加到開頭
對象1.prepend(對象2):將對象2添加到對象1元素內部，並且在開頭
appendTo():
對象1.appendTo(對象2):將對象1添加到對象2內部，並且在末尾
prependTo()：
對象1.prependTo(對象2):將對象1添加到對象2內部，並且在開頭

// <input type="button" value="將反恐放置到city的最前面"  
$("#b2").click(function () {
	//prepend
	//$("#city").prepend($("#fk"));
	//prependTo
	$("#fk").prependTo($("#city"));
});

after():添加元素到元素後邊
對象1.after(對象2)：將對象2添加到對象1後邊。對象1和對象2是兄弟關係
before():添加元素到元素前邊
對象1.before(對象2)：將對象2添加到對象1前邊。對象1和對象2是兄弟關係
insertAfter()
對象1.insertAfter(對象2)：將對象2添加到對象1後邊。對象1和對象2是兄弟關係

// <input type="button" value="將反恐插入到天津後面"  id="
$("#b3").click(function () {
	//after
	//$("#tj").after($("#fk"));
	//insertAfter
	$("#fk").insertAfter($("#tj"));
});

insertBefore()
對象1.insertBefore(對象2)：將對象2添加到對象1前邊。對象1和對象2是兄弟關係

// <input type="button" value="將反恐插入到天津前面"  id="
 $("#b4").click(function () {
      //before
      //$("#tj").before($("#fk"));
      //insertBefore
      $("#fk").insertBefore($("#tj"));
});

remove():移除元素
對象.remove():將對象刪除掉
empty():清空元素的所有後代元素。
對象.empty():將對象的後代元素全部清空，但是保留當前對象以及其屬性節點

<script type="text/javascript">
$(function () {
    // <input type="button" value="刪除<li id='bj' name='beijing'>北
	$("#b1").click(function () {
		$("#bj").remove();
    });
    // <input type="button" value="刪除city所有的li節點   清空元素中
    $("#b2").click(function () {
        $("#city").empty();
    });
});
	
</script>
</head>
 
<body>
<input type="button" value="刪除<li id='bj' name='beijing'>北京</li>"
<input type="button" value="刪除所有的子節點   清空元素中的所有後代節
	 <ul id="city">
	 	 <li id="bj" name="beijing">北京</li>
		 <li id="tj" name="tianjin">天津</li>
		 <li id="cq" name="chongqing">重慶</li>
	 </ul>
	 <p class="hello">Hello</p> how are <p>you?</p> 
</body>

JQuery框架入門、選擇器分類及DOM操作

JQuery 基礎：

（一）、概念：一個JavaScript框架。簡化JS開發

（二）、快速入門

（三）、選擇器：篩選具有相似特徵的元素(標籤)

1. 語法的基本操作學習：

2. 選擇器分類👉jQuery 選擇器詳解

2.1 基本選擇器

2.2 層級選擇器

2.3 屬性選擇器

2.4 過濾選擇器

2.5 表單過濾選擇器

（四）、 DOM操作

1. 內容操作

2. 屬性操作

2.1 通用屬性操作

2.2 對class屬性操作

3. CRUD操作:

如何使用 JS 判斷用戶是否處於活躍狀態

Mono 支持LoongArch架構

lightdb秒級增加列和刪除列（not null帶默認值）

lightdb數據庫超時相關控制參數

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

❤️‍🔥 Solon Cloud Event 新的事務特性與應用

網絡爬蟲的祕密：如何高效地抓取JD.com視頻鏈接

lightdb mysql 8.0兼容之不可見主鍵

使用 JS 實現在瀏覽器控制檯打印圖片 console.image()

基於Ubuntu-22.04安裝K8s-v1.28.2實驗（四）使用域名訪問網站應用

Java集合之Collection集合、泛型【集合綜合案例：鬥地主】

常見API整理【Object類、日期時間類、System類、StringBuilder類、包裝類】

ServletContext對象的相關概念以及文件下載案例

JavaWeb實現用戶登錄【HTML+MySQL+JDBCTemplate+Servlet+Druid連接池】

常見API整理【Scanner類、匿名對象、Random類以及ArrayList集合】

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

JQuery框架入門、選擇器分類及DOM操作

JQuery 基礎：

（一）、概念： 一個JavaScript框架。簡化JS開發

（二）、 快速入門

（三）、 選擇器：篩選具有相似特徵的元素(標籤)

1. 語法的基本操作學習：

2. 選擇器分類👉jQuery 選擇器詳解

2.1 基本選擇器

2.2 層級選擇器

2.3 屬性選擇器

2.4 過濾選擇器

2.5 表單過濾選擇器

（四）、 DOM操作

1. 內容操作

2. 屬性操作

2.1 通用屬性操作

2.2 對class屬性操作

3. CRUD操作:

（一）、概念：一個JavaScript框架。簡化JS開發

（二）、快速入門

（三）、選擇器：篩選具有相似特徵的元素(標籤)