Zi 字媒體

JQuery筆記（上）

2021/12/25

1.JQuery簡介。

jQuery是一套跨瀏覽器的JavaScript庫，簡化HTML與JavaScript之間的操作。由John Resig在2006年1月的BarCamp NYC上發布第一個版本。目前是由 Dave Methvin 領導的開發團隊進行開發。全球前10000個訪問最高的網站中，有59%使用了jQuery，是目前最受歡迎的JavaScript庫。簡單來說就是一款免費且開放源代碼的JavaScript代碼庫，類似的JavaScript代碼庫還有比如：jQuery、dojo、prototype、ExtJS。

2.JQuery特點。

動態特效
AJAX
通過插件來擴展
方便的工具 - 例如瀏覽器版本判斷
漸進增強
鏈式調用
多瀏覽器支持，支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+（在2.0.0中取消了對Internet Explorer6,7,8的支持）。

3.JQuery中的選擇器

在JQuery中，獲得頁面中元素的方式就稱做選擇器。

基本
層級
簡單
內容
可見性
屬性
子元素
表單
表單對象屬性

3.1.基本

#id ：通過id屬性值獲取元素
Element ：通過元素名獲取元素selector1,selector2 ：獲取列表中指定的所有元素.
class ：獲取使用class樣式的所有元素

3.2簡單

first ：匹配第一個元素
last ：匹配最後一個元素
even ：匹配索引為偶數的元素
odd ：匹配索引為奇數的元素
eq(index) ：匹配索引為指定值的元素
gt(index) ：匹配索引大於指定值的元素
lt(index) ：匹配索引小於指定值的元素
not(selector) ：匹配除了指定選擇器之外的所有元素

3.3層級

ancetor descendant：匹配祖先元素下的後代元素
parent > child ：匹配父元素下的子元素
prev + next ：匹配上一個元素的後面的元素，必須是挨著的
prev~siblings ：匹配前一個元素的所有平輩元素，在prev元素後面才能匹配

3.4內容

:contains(text)：匹配內容中包含指定內容的元素
:empty ：匹配內容為空的元素
:has(selector)：匹配內容中包含指定選擇器的元素
:parent：匹配內容不為空的元素

3.5可見性

hidden：匹配隱藏的元素
visible：匹配顯示的元素

3.6屬性

[attribute]：匹配具有指定屬性的元素
[attribute=value]：匹配屬性值等於指定值的元素
[attribute!=value]：匹配屬性值不等於指定值的元素
[attribute^=value]：匹配屬性值以指定值的開始的元素
[attribute$=value]：匹配屬性值以指定值的結束的元素
[attribute*=value]：匹配屬性值中包含指定值的元素
[selector1][selector2][selectorN]：同時滿足所有條件，則匹配

3.7子元素

:nth-child(index/even/odd)：匹配指定索引的元素，從1算起
:first-child：匹配第一個子元素
:last-child：匹配最後一個元素
:only-child：如果子元素是父元素的唯一元素，則匹配

3.8表單

:input：匹配所有表單元素
:text：匹配文本框
:password：匹配密碼框
:radio：匹配單選按鈕
:checkbox：匹配複選框
:submit：匹配提交按鈕
:reset：匹配重置按鈕
:image：匹配圖像按鈕
:button：匹配按鈕
:file：匹配文件框
:hidden：匹配隱藏域

對於web前端的學習有不懂的，或者不知道學習路線，不知道學習方法，不知道該如何紮實能找到工作的朋友，我還是要推薦下我自己建的前端學習群：477149581，首先你要是前端黨，其次不管你是小白還是大牛，我都挺歡迎，小白嘛，主動點多問問題也就學好了，群里每天分享乾貨，包括我自己最近花了一星期整理的一份適合2017年自學的最新web前端資料，送給大家，歡迎初學和進階中的小夥伴。

3.9表單對象屬性

:enabled：匹配狀態可用的表單元素
:disabled：匹配狀態不可用的表單元素
:checked：匹配被選中的元素單選或複選
:selected：匹配被選中的元素匹配的是option

4.0 JQuery對象與dom對象

4.1什麼是dom對象

以上方式獲取回來的是dom對象，dom對象可以調用dom屬性和相關方法，dom對象不能調用JQuery方法。

4.2什麼是JQuery對象

以上方式獲取回來的是JQuery對象，其實，jQuery對象本身就是一個數組，選擇器匹配回來幾個數組元素，jQuery對象（數組）長度就是元素個數。每個jQuery對象下的某個元素都是一個dom對象。

4.3dom對象與JQuery對象的相互轉換

1)JQuery對象轉dom對象

語法: JQuery[0]或JQuery.get(0)

2)dom對象轉JQuery對象

語法: $(dom)

5、屬性操作

5.1基本屬性

attr(name)：獲取指定屬性的值
attr(key,value)：獲取指定屬性的值
attr(properties)：一次設置多個屬性的值，要求參數必須是json對象
attr(key,fn)：通過一個函數的返回值設置指定屬性的值
removeAttr(name)：刪除指定的屬性

5.2css

addClass(class)：添加樣式
removeClass(class)：移除樣式
toggleClass(class)：切換樣式
hasClass(class)：判斷是否使用了摸個樣式，返回true:有，false:沒有

5.3html/文本/值

html
html(val)
text
text(val)
val
val(val)

6、css操作

6.1 基本css

css(name)：獲取指定樣式的值css(name,value)：設置指定樣式的值css(properties)：一次設置多個樣式的值，要求參數的json對象

6.2 位置

offset：獲取元素的位置，返回json對象，包含left和top屬性offset(coordinates) ：設置元素的位置，要求參數json對象，必須包含left和top

6.3尺寸

width：獲取寬度width(value)：設置寬度height：獲取高度height(value)：設置高度

7、事件編程

7.1頁面載入

js中

window.onload=function{ //頁面初始化}

JQuery中封裝了方法用於頁面載入

$(document).ready(function{ //頁面初始化});

7.2基本事件

change(fn)：內容改變click(fn)：點擊dblclick(fn)：雙擊focus(fn)：獲取焦點keydown(fn)：鍵盤按下keyup(fn)：鍵盤抬起keypress(fn)：鍵盤點擊load(fn)：頁面載入unload(fn)：頁面關閉mousedown(fn)：滑鼠按下mouseup(fn)：滑鼠抬起mousemove(fn)：滑鼠移動mouseover(fn)：滑鼠經過mouseout(fn)：滑鼠離開resize(fn)：改變尺寸scroll(fn)：滾動條滾動select(fn)：選擇內容submit(fn)：提交按鈕