jQuery基礎筆記（1）
day54
參考：https://www.cnblogs.com/liwenzhou/p/8178806.html
1. 為什麼要學jQuery? MySQL Python
做同樣的事情 jQuery寫起來極其簡練 (write less, do more.)
2. jQuery是什麼?
jQuery相當於Python的第三方模組
第三方模組其實就是別人寫好(封裝)的一些程式碼,我們拿過來用(按照別人定好的規則)
原生的JS DOM操作是基礎
3. jQuery學習的內容
1. 改變標籤
2. 改變標籤的屬性
3. 改變標籤的樣式
4. 事件相關
查詢標籤
基本選擇器
id選擇器：
$("#id")
標籤選擇器：
$("tagName")
class選擇器：
$(".className")
配合使用：
$("div.c1") // 找到有c1 class類的div標籤
所有元素選擇器：
$("*")
組合選擇器：
$("#id, .className, tagName")
實踐：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>jQuery初識</title> </head> <body> <div id="d1">d1</div> <div class="c1">.c1</div> <p class="c2">p</p> <a class="c2" href="">a標籤</a> <!--先匯入--> <script src="jquery-3.2.1.min.js"></script> </body> </html>
頁面：
jQuery操作：
所有元素選擇器：
$("*")
組合選擇器：
$("#id, .className, tagName")
題目在：file:///media/nizhipeng/Seagate%20Backup%20Plus%20Drive/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80%E5%AD%A6%E4%B9%A0/%E8%80%81%E7%94%B7%E5%AD%A9Python%E6%95%99%E7%A8%8B/%E7%AC%AC%E4%B9%9D%E6%9C%9F/Python%E5%85%A8%E6%A0%889%E6%9C%9F%EF%BC%88%E7%AC%AC%E4%BA%8C%E9%83%A8%E5%88%86%EF%BC%89%EF%BC%9A%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B+%E6%95%B0%E6%8D%AE%E5%BA%93+%E5%89%8D%E7%AB%AF/3.%20%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/day54/day54/jQuery%E9%80%89%E6%8B%A9%E5%99%A8%E7%AD%9B%E9%80%89%E5%99%A8%E7%BB%83%E4%B9%A0.html
其中右邊控制檯中length:2表示找到2個內容。
層級選擇器：
x和y可以為任意選擇器
$("x y");// x的所有後代y（子子孫孫）
$("x > y");// x的所有兒子y（兒子）
$("x + y")// 找到所有緊挨在x後面的y $("x ~ y")// x之後所有的兄弟y
作業：
實踐：
注意空格的含義
約定俗成的命名規則
pEle為DOM物件，$pEle為jQuery物件。以上命名方式容易區分不同型別物件。
1. jQuery物件轉換成DOM物件,用索引取出具體的標籤
2. DOM物件轉換成jQuery物件,$(DOM物件)
注意:
jQuery物件儲存到變數的時候,變數名要加$字首
1.
2.
基本篩選器：
01jQuery初識
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>jQuery初識</title> </head> <body> <!--先匯入--> <script src="jquery-3.2.1.min.js"></script> <div id="d1">d1</div> <div class="c1">.c1</div> <p class="c2">p</p> <a class="c2" href="">a標籤</a> <!--篩選器--> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html>
方法：
:first // 第一個
:last // 最後一個
:eq(index)// 索引等於index的那個元素 :even // 匹配所有索引值為偶數的元素，從 0 開始計數 :odd // 匹配所有索引值為奇數的元素，從 0 開始計數 :gt(index)// 匹配所有大於給定索引值的元素 :lt(index)// 匹配所有小於給定索引值的元素 :not(元素選擇器)// 移除所有滿足not條件的標籤 :has(元素選擇器)// 選取所有包含一個或多個標籤在其內的標籤(指的是從後代元素找)
first、last
索引等於index的那個元素
:not(元素選擇器)// 移除所有滿足not條件的標籤
<!--not--> <div id="d2"> <p class="c1">div</p> <p class="c1">div</p> <p class="c2">div</p> <p class="c2">div</p> </div>
實踐：
:has(元素選擇器)// 選取所有包含一個或多個標籤在其內的標籤(指的是從後代元素找)
<!--:has--> <div id="d3"> <div style="background-color: green"> <p>div中的p標籤</p> </div> <div style="background-color: red"> <a href="">div中的a標籤</a> </div> </div>
實踐：
屬性選擇器：
[attribute]
[attribute=value]// 屬性等於
[attribute!=value]// 屬性不等於
<!--屬性選擇器--> <form action="" id="f1"> <label>使用者名稱: <input name="username" type="text" disabled> </label> <label>密碼: <input name="pwd" type="password"> </label> <label>籃球: <input name="hobby" value="basketball" type="checkbox"> </label> <label>足球: <input name="hobby" value="football" type="checkbox"> </label> <label>男 <input name="gender" value="1" type="radio"> </label> <label>女: <input name="gender" value="0" type="radio"> </label> </form>
實踐：
根據屬性name、gender、value查詢。
表單篩選器：
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
表單
<!--表單選擇器--> <form action="" id="f1"> <label>使用者名稱: <input name="username" type="text" disabled> </label> <label>密碼: <input name="pwd" type="password"> </label> <label>籃球: <input name="hobby" value="basketball" type="checkbox"> </label> <label>足球: <input name="hobby" value="football" type="checkbox"> </label> <label>男 <input name="gender" value="1" type="radio"> </label> <label>女: <input name="gender" value="0" type="radio"> </label> </form>
例子：
$(":checkbox") // 找到所有的checkbox
checkbox在html中為type="checkbox" ，也可寫做$("input[type='checkbox']")/$("input:text")
表單物件屬性:
:enabled
:disabled
:checked 查詢checkbox中被選中的
:selected
$(":disabled")可以查詢。