~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
開發工具與關鍵技術：Visual Studio 2015 && jQuery
作者：韋永桂
撰寫時間：2020 年 05 月 01 日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
一、jQuery簡介
1、jQuery是一個JavaScript函式庫，也是一個輕量級的"寫的少，做的多"的JavaScript庫。
2、jQuery庫包含以下功能：
①HTML 元素選取
②HTML 元素操作
③CSS 操作
④HTML 事件函式
⑤JavaScript 特效和影片
⑥HTML DOM 遍歷和修改
⑦AJAX
⑧Utilities
提示： 除此之外，jQuery還提供了大量的插件
3、如何使用jQuery
jQuery是一個JavaScript腳本庫，不需要特別的安裝，只需要我們在頁面標簽內中，通過<script>標簽引入jQuery庫即可
jQuery下載地址：https://jquery.com/download/
4、jQuery的語法
jQuery語法是通過選取 HTML 元素，并對選取的元素執行某些操作
基礎語法：$(selector).action();
- $美元符號定義jQuery
- selector 選擇符需要查找的元素 支持css1~css3中的主流選擇器
- action() 執行對元素的操作
例如：
$("p").hide();//隱藏所有 <p> 元素
二、jQuery基本選擇器
1、ID選擇器 【$("#id");】
id選擇器也是基本的選擇器，jQuery內部使用JavaScript函式document.getElementById()來處理ID的獲取。原生語法的支持總是非常高效的，所以在操作DOM的獲取上，如果能采用id的話盡然考慮用這個選擇器
注意:id是唯一的，每個id值在一個頁面中只能使用一次。如果多個元素分配了相同的id，
將只匹配該id選擇集合的第一個DOM元素。但這種行為不應該發生;
有超過一個元素的頁面使用相同的id是無效的。
2、class（類）選擇器【$(".classname");】
類選擇器，相對id選擇器來說，效率相對會低一點，但是優勢就是可以多選。
同樣的jQuery在實作上，對于類選擇器，如果瀏覽器支持，
jQuery使用JavaScript的原生getElementsByClassName()函式來實作的。
3、element（元素）選擇器【$("標簽名稱");】
元素選擇器，根據給定html標記名稱選擇所有的元素。
搜索指定元素標簽名的所有節點，這個是一個合集的操作。
同樣的也有原生方法getElementsByTagName()函式支持。
4、全選擇器 【$("*");】
全選擇器,也就是 *選擇器。
在CSS中，經常會在第一行寫下這樣一段樣式【* {padding:0; margin: 0;}】
通配符*意味著給所有的元素設定默認的邊距。
jQuery中我們也可以通過傳遞*選擇器來選中檔案頁面中的元素。
5、層級選擇器
檔案中的所有的節點之間都是有這樣或者那樣的關系。我們可以把節點之間的關系可以用傳統的家族關系來描述，可以把檔案樹當作一個家譜，那么節點與節點之間就會存在父子，兄弟，祖孫的關系了。
選擇器中的層級選擇器就是用來處理這種關系-->【子元素 后代元素 兄弟元素 相鄰元素】
通過一個串列，對比層級選擇器的區別
三、屬性操作
1、jQuery的屬性
每個元素都有一個或者多個特性，這些特性的用途就是給出相應元素或者其內容的附加資訊。
如：在img元素中，src就是元素的特性，用來標記圖片的地址。
JavaScript中操作特性的DOM方法主要有3個：
1.getAttribute()獲取特性
2.setAttribute()設定特性
3.removeAttribute() 移出特性
在jQuery中操作特性的jQuery方法:
1.attr() 獲取/設定屬性
2.removeAttr() 移出屬性
在jQuery中用一個attr()與removeAttr()就可以全部搞定了，
jQuery中用attr()方法來獲取和設定元素屬性,attr是attribute（屬性）的縮寫，在jQuery DOM操作中會經常用到attr()
2、attr()、removeAttr()與prop()的用法
attr()方法的用法:
1. $(element).attr("屬性名");【獲取屬性名的屬性值】
2. $(element).attr("屬性","屬性值");【設定屬性的屬性值】
3. $(element).attr("屬性名","函式值");【設定屬性的函式值】
4. $(element).attr({"屬性名":"屬性值","屬性名":"屬性值"});【給指定元素設定多個屬性值】
removeAttr()方法的用法:
1.$(element).removeAttr("屬性名");【移出對應的屬性】
prop()方法的用法:
1. $(element).prop("屬性名");【獲取屬性名的屬性值】
2. $(element).prop("屬性名","屬性值");【設定屬性的屬性值】
3. $(element).prop("屬性名","函式值");【設定屬性的函式值】
4. $(element).prop({"屬性名":"屬性值","屬性名":"屬性值"});【給指定元素設定多個屬性值】
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
四、樣式
1、jQuery樣式操作$(element).css()方法
通過JavaScript獲取DOM元素上的style屬性，我們可以動態的給元素賦予樣式屬性。
在jQuery中我們要動態的修改style屬性我們只要使用css()方法就可以實作了:
$(element).css()方法:獲取元素樣式屬性的計算值或者設定元素的CSS屬性
2、$(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})【可以傳入一個回呼函式，回傳取到對應的值進行處理】
3、注意事項
瀏覽器屬性獲取方式不同，在獲取某些值的時候都jQuery采用統一的處理，比如顏色采用RBG，尺寸采用px
$(element).css()方法支持駝峰寫法與大小寫混搭的寫法，內部做了容錯的處理
當一個數只被作為值（value）的時候，jQuery會將其轉換為一個字串，并添在字串的結尾處添加px，
例如 .css("width",50}) 與.css("width","50px"})一樣
4、$(element).width()和$(element).height()
1.$(element).width() 獲取或設定元素的寬度
2.$(element).height() 獲取或設定元素的高度
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/54495.html
標籤：JavaScript
下一篇：找個小伙伴一起做開源專案真難！！