知識點：
1、 jQuery：是一個“寫得少，做得多”的JavaScript函式庫
jQuery庫包含以下功能：
1) HTML 元素選取
2) HTML 元素操作
3) CSS 操作
4) HTML 事件函式
5) JavaScript 特效和影片
6) HTML DOM 遍歷和修改
7) AJAX
8) Utilities
除此之外，jQuery還提供了大量的插件
2、 jQuery的使用：它是一個JavaScript腳本庫，不需要特別的安裝，只需要在頁面標簽內中，通過<script>標簽引入jQuery庫即可
jQuery下載地址：https://jquery.com/download/
3、 jQuery語法：是通過選取 HTML 元素，并對選取的元素執行某些操作
基礎語法：$(selector).action();
- $美元符號定義jQuery
- selector 選擇符需要查找的元素 支持css1~css3中的主流選擇器
- action() 執行對元素的操作
例如：
$("p").hide();//隱藏所有 <p> 元素
4、 jQuery選擇器
頁面的任何操作都需要節點的支撐，開發者如何快速高效的找到指定的節點也是前端開發中的一個重點。
jQuery提供了一系列的選擇器幫助開發者達到這一目的，讓開發者可以更少的處理復雜選擇程序與性能優化，更多專注業務邏輯的撰寫。
jQuery幾乎支持主流的css1~css3選擇器的寫法。
5、 ID選擇器：$(“id”)
id選擇器也是基本的選擇器，jQuery內部使用JavaScript函式document.getElementById()來處理ID的獲取。
原生語法的支持總是非常高效的，所以在操作DOM的獲取上，如果能采用id的話盡然考慮用這個選擇器
注意:id是唯一的，每個id值在一個頁面中只能使用一次。如果多個元素分配了相同的id，
將只匹配該id選擇集合的第一個DOM元素。但這種行為不應該發生;有超過一個元素的頁面使用相同的id是無效的
通過ID選擇器獲取元素：
6、 Class選擇器：$(“.classname”);
類選擇器，相對id選擇器來說，效率相對會低一點，但是優勢就是可以多選
同樣的jQuery在實作上，對于類選擇器，如果瀏覽器支持，jQuery使用JavaScript的原生getElementsByClassName()函式來實作的
通過類選擇器獲取元素：
7、 element元素選擇器：$(“標簽名稱”)
元素選擇器，根據給定html標記名稱選擇所有的元素
搜索指定元素標簽名的所有節點，這個是一個合集的操作。同樣的也有原生方法getElementsByTagName()函式支持
根據div標簽名稱獲取所有的div元素：
8、 全選擇器：$(“*”);
全選擇器,也就是 *選擇器
在CSS中，經常會在第一行寫下這樣一段樣式
* {padding: 0; margin: 0;}
通配符*意味著給所有的元素設定默認的邊距。jQuery中我們也可以通過傳遞*選擇器來選中檔案頁面中的元素
輸出所有的頁面元素：
9、 層級選擇器
檔案中的所有的節點之間都是有這樣或者那樣的關系。我們可以把節點之間的關系可以用傳統的家族關系來描述，
可以把檔案樹當作一個家譜，那么節點與節點之間就會存在父子，兄弟，祖孫的關系了。
選擇器中的層級選擇器就是用來處理這種關系
子元素 后代元素 兄弟元素 相鄰元素
通過一個串列，對比層級選擇器的區別
$("ancestor descendant") 后代選擇器：選擇給定的祖先元素的所有后代元素，一個元素的后代可能該元素的一個孩子，孫子，曾孫等
$("parent > child") 子選擇器：parent的直接子元素
$("prev + next") 相鄰兄弟選擇器：匹配所有緊接在 prev 元素后的 next 元素
$("prev ~ siblings")一般兄弟選擇器：匹配 prev 元素之后的所有 siblings 元素
10、jQuery的屬性：每個元素都有一個或者多個特性，這些特性的用途就是給出相應元素或者其內容的附加資訊。
如：在img元素中，src就是元素的特性，用來標記圖片的地址
JavaScript中操作特性的DOM方法主要有3個，
? getAttribute()獲取特性
? setAttribute()設定特性
? removeAttribute() 移出特性
在jQuery中操作特性的jQuery方法:
? attr() 獲取/設定屬性
? removeAttr() 移出屬性
1)、attr()與removeAttr()的用法
attr()方法的用法:
1. $(element).attr("屬性名");//獲取屬性名的屬性值
2. $(element).attr("屬性","屬性值");//設定屬性的屬性值
3. $(element).attr("屬性名","函式值");//設定屬性的函式值
4. $(element).attr({"屬性名":"屬性值","屬性名":"屬性值"});//給指定元素設定多個屬性值
removeAttr()方法的用法:
1. $(element).removeAttr("屬性名");//移出對應的屬性
2）、prop()與removeProp()的用法
prop()方法的用法:
1. $(element).prop("屬性名");//獲取屬性名的屬性值
2. $(element).prop("屬性名","屬性值");//設定屬性的屬性值
3. $(element).prop("屬性名","函式值");//設定屬性的函式值
4. $(element).prop({"屬性名":"屬性值","屬性名":"屬性值"});//給指定元素設定多個屬性值
removeProp()方法的用法:
1. $(element).removeProp("屬性名");//移出對應的屬性
3）、Attribute和Property的區別
Attribute
- attribute是HTML中就有的，是元素的選項|附加項。
例如：id、class、title、src、alt、href
- 值只能為string型別
- 客戶端向HTML元素添加的自定義的屬性，推薦稱為attribute
Property
- JS DOM中，物件的成員(組成部分)，所以可以用JS DOM物件訪問property(用物件訪問成員)
例如：tagName, nodeName, nodeType, defaultChecked (這幾個屬性是DOM物件中屬性)
- 值型別多樣化：property因為是物件的成員，型別可多樣化(boolean, string, number等)
- 如果獲取DOM物件中的屬性，推薦使用property
11、 jQuery屬性 動態操作class
1. $(element).addClass();//為每個匹配元素所要增加的一個或多個樣式名
- 方法不會替換一個樣式類名。它只是簡單的添加一個樣式類名到元素上
2. $(element).removeClass();//每個匹配元素移除的一個或多個用空格隔開的樣式名
3. $(element).toggleClass();//在匹配的元素集合中的每個元素上添加或洗掉一個或多個樣式類,取決于這個樣式類是否存在或值切換屬性。即：如果存在（不存在）就洗掉（添加）一個類
12、jQuery屬性的.html()與.text()方法
1）、$(element).html()方法
獲取集合中第一個匹配元素的HTML內容 或 設定每一個匹配元素的html內容.
1. $(element).html() 獲取element元素的HTML內容
2. $(element).html("htmlString") 為每一個匹配元素添加html內容
重要說明：$(element) .html()方法內部使用的是DOM的innerHTML屬性來處理的，
所以在設定與獲取上需要注意的一個最重要的問題，這個操作是針對整個HTML內容（不僅僅只是文本內容）
2）、$(element).text()方法
得到匹配元素集合中每個元素的文本內容結合，包括他們的后代，或設定匹配元素集合中每個元素的文本內容為指定的文本內容。
1. $(element).text() 獲取element元素的文本內容
2. $(element).text("textString") 用于設定匹配元素內容的文本
3）、$(element).html()與 $(element).text()之間的差異
? .html與.text的方法操作是一樣，只是在具體針對處理物件不同
? .html處理的是元素內容，.text處理的是文本內容
? .html只能使用在HTML檔案中，.text 在XML 和 HTML 檔案中都能使用
如果處理的物件只有一個子文本節點，那么html處理的結果與text是一樣的
火狐不支持innerText屬性，用了類似的textContent屬性，.text()方法綜合了2個屬性的支持，所以可以兼容所有瀏覽器
13、jQuery屬性的val（）方法：主要是用于處理表單元素的值
比如：input, select 和 textarea。
JavaScript中的value屬性
1. $(ele).val() 獲取匹配的元素集合中第一個元素的當前值
2. $(ele).val(value) 設定匹配的元素集合中每個元素的值
通過$(ele).val()處理select元素， 當沒有選擇項被選中，它回傳null
$(ele).val()方法多用來設定表單的欄位的值
如果select元素有multiple（多選）屬性，并且至少一個選擇項被選中，
$(ele).val()方法回傳一個陣列，這個陣列包含每個選中選擇項的值
14、jQuery樣式操作$(element).css()方法：獲取元素樣式屬性的計算值或者設定元素的CSS屬性
1）$(element).css()方法使用方法
1. $(element).css("屬性名") //獲取匹配元素集合中的第一個元素的樣式屬性的計算值
2. $(element).css(["屬性名1","屬性名2"]) //傳遞一個陣列，回傳一個物件結果
3. $(element).css("屬性","屬性值") //設定元素的css樣式
4. $(element).css({"屬性1":"屬性值1","屬性2":"屬性值2"}) //可以傳一個物件，同時設定多個樣式
5. $(element).css({屬性名,function}) //可以傳入一個回呼函式，回傳取到對應的值進行處理
2）注意事項
1、瀏覽器屬性獲取方式不同，在獲取某些值的時候都jQuery采用統一的處理，比如顏色采用RBG，尺寸采用px
2、$(element).css()方法支持駝峰寫法與大小寫混搭的寫法，內部做了容錯的處理
3、當一個數只被作為值（value）的時候，jQuery會將其轉換為一個字串，并添在字串的結尾處添加px，
例如 .css("width",50}) 與 .css("width","50px"})一樣
3）$(element).width()和$(element).height()
1、$(element).width() 獲取或設定元素的寬度
2、$(element).height() 獲取或設定元素的高度
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/56064.html
標籤：非技術區
上一篇：url變數 不會玩了 求幫助
下一篇：JQuery基礎使用與樣式篇總結