jQuery基礎使用與樣式
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
開發工具與關鍵技術：Adobe Dreamweaver JavaScript
作者：黃富滔
撰寫時間：2020年5月02日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
知識點羅列：
1、jQuery簡介：
什么是jQuery？jQuery是一個JavaScript函式庫，是一種輕量級的“寫的少，做的多”的JavaScript庫，使代碼更加簡化，用更少的代碼，實作更多的功能。
2、 jQuery庫包含以下功能：
HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函式
JavaScript 特效和影片
HTML DOM 遍歷和修改
AJAX
Utilities
提示： 除此之外，jQuery還提供了大量的插件
3、jQuery物件與Javascript物件的區別
①.DOM物件是通過原生的JS獲取的物件，DOM物件只能使用JS中的方法和屬性
②.jQuery物件是通過jQuery包裝DOM物件后產生的物件，它是jQuery獨有的。
③jQuery可以使用jQuery庫里面的方法，但是不能使用JS中的方法
JavaScript中的DOM物件
例如：document.getElementById("box");
jQuery物件
在JQuery庫中，可以通過本身自帶的方法獲取頁面元素的物件叫做JQurey物件
例如： $(".box");
Javascript DOM物件與jQuery物件的互相轉換
Javascript物件轉換為jQuery物件
var box =document.getElementByid(“box”);
var $box=$(box);
JQuery物件轉換為Javascript DOM物件（有兩種方法）
（1）var $box=$(“#box”);
var box=$box[0];
（2）var $box=$(“#box”);
var box=$box.get(0);
4、jQuery基本選擇器和基本篩選器
基本選擇器：像CSS那樣來獲取頁面元素
1.1 ID選擇器 $("#id");
1.2 class選擇器 $(".classname");
1.3 element元素選擇器 $("標簽名稱");
1.4 全選擇器 $("*")
1.5 層級選擇器
選擇器 描述
$("ancestor descendant") 后代選擇器：選擇給定的祖先元素的所有后代元素，一個元素的后可能該元素的一個孩子，孫子，曾孫等
$("parent > child") 子選擇器：parent的直接子元素
$("prev + next") 相鄰兄弟選擇器：匹配所有緊接在 prev 元素后的 next 元
$("prev ~ siblings") 一般兄弟選擇器：匹配 prev 元素之后的所有 siblings 元素
基本篩選選擇器
篩選選擇器很多都不是CSS的規范，而是jQuery自己為了開發者的便利延展出來的選擇器
篩選選擇器的用法與CSS中的偽元素相似，選擇器用冒號":"開頭，基本篩選器的描述見jQuery API檔案
選擇器 描述 例子
$(":first") 獲取匹配第一個元素 $('li:first');
$(":last") 獲取匹配的最后個元素 $('li:last');
$(":not(selector)") 去除所有與給定選擇器匹配的元素 $("input:not(:checked)")
$(":even") 匹配所有索引值為偶數的元素，從 0 開始計數 $("li:even")
$(":odd") 匹配所有索引值為奇數的元素，從 0 開始計數 $("li:odd")
$(":eq(index)") 匹配一個給定索引值的元素，從 0 開始計數 $("li:eq(1)")
$(":gt(index)") 匹配所有大于給定索引值的元素，從 0 開始計數 $("li:gt(0)")
$(":lt(index)") 匹配所有小于給定索引值的元素，從 0 開始計數 $("li:gt(2)")
$(":focus") 匹配當前獲取焦點的元素。
$(":root") 擇該檔案的根元素。在HTML中，檔案的根元素，和$(":root")選擇的元素一樣， 永遠是<html>元素。 $(":root").css("background-color","yellow");
5、jQuery的一些方法
方法：
獲得內容的和設定內容三個方法（jQuery屬性的.html()方法 .text()方法 .val()方法）
①jQuery屬性的.html() 與 .text()方法
讀取、修改元素的html結構或者元素的文本內容是常見的DOM操作，
JavaScript中提供innerHTML與innerText屬性
jQuery針對這樣的處理提供了2個便捷的方法.html()與.text()
$(element).html()方法
獲取集合中第一個匹配元素的HTML內容 或 設定每一個匹配元素的html內容.
（1）. $(element).html()
-獲取element元素的HTML內容
（2）. $(element).html("htmlString")
-為每一個匹配元素添加html內容
重要說明：$(element) .html()方法內部使用的是DOM的innerHTML屬性來處理的，
所以在設定與獲取上需要注意的一個最重要的問題，這個操作是針對整個HTML內容（不僅僅只是文本內容
$(element).text()方法
得到匹配元素集合中每個元素的文本內容結合，包括他們的后代，
或設定匹配元素集合中每個元素的文本內容為指定的文本內容。
（1） . $(element).text()
-獲取element元素的文本內容
（2） . $(element).text("textString")
- 用于設定匹配元素內容的文本
$(element).html()與 $(element).text()之間的差異
.html與.text的異同:
.html與.text的方法操作是一樣，只是在具體針對處理物件不同
.html處理的是元素內容，.text處理的是文本內容
.html只能使用在HTML檔案中，.text 在XML 和 HTML 檔案中都能使用
如果處理的物件只有一個子文本節點，那么html處理的結果與text是一樣的
火狐不支持innerText屬性，用了類似的textContent屬性，.text()方法綜合了2個屬性的支持，所以可以兼容所有瀏覽器
②jQuery屬性的val()方法
$(ele).val()方法主要是用于處理表單元素的值,比如 input, select 和 t extarea。
jQueryt中的value屬性
（1）. $(ele).val()
-獲取匹配的元素集合中第一個元素的當前值
（2）. $(ele).val(value)
-設定匹配的元素集合中每個元素的值
通過$(ele).val()處理select元素， 當沒有選擇項被選中，它回傳null
$(ele).val()方法多用來設定表單的欄位的值
③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()
attr()與removeAttr()的用法
attr()方法的用法:
（1）. $(element).attr("屬性名");
-獲取屬性名的屬性值
（2）. $(element).attr("屬性","屬性值");
-設定屬性的屬性值
（3）. $(element).attr("屬性名","函式值");
- 設定屬性的函式值
（4）. $(element).attr({"屬性名":"屬性值","屬性名":"屬性值"});
-給指定元素設定多個屬性值
removeAttr()方法的用法:
$(element).removeAttr("屬性名");
-移出對應的屬性
④jQuery屬性 動態操作class
1.$(element).addClass(類名);
-為每個匹配元素所要增加的一個或多個樣名
- 方法不會替換一個樣式類名。它只是簡單的添加一個樣式類名到元素上
2.$(element).removeClass(類名);
- 每個匹配元素移除的一個或多個用空格隔開的樣式名
3. $(element).toggleClass(類名);
-如果已經有了該類，就洗掉該類；如果沒有該類，就添加。
如果添加多個類，每個類之間用空格隔開
⑤jQuery樣式操作$(element).css()方法
通過JavaScript獲取DOM元素上的style屬性，我們可以動態的給元素賦予樣式屬性。
在jQuery中我們要動態的修改style屬性我們只要使用css()方法就可以實作了:
$(element).css()方法:獲取元素樣式屬性的計算值或者設定元素的CSS屬性
$(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})
-可以傳入一個回呼函式，回傳取到對應的值進行處理
說明：
瀏覽器屬性獲取方式不同，在獲取某些值的時候都jQuery采用統一的處理，比如顏色采用RBG，尺寸采用px
$(element).css()方法支持駝峰寫法與大小寫混搭的寫法，內部做了容錯的處理
當一個數只被作為值（value）的時候，jQuery會將其轉換為一個字串，并添在字串的結尾處添加px，
例如 .css("width",50}) 與 .css("width","50px"})一樣
⑥$(element).width()和$(element).height()
（1）.$(element).width()
-獲取或設定元素的寬度
（2）.$(element).height()
-獲取或設定元素的高度
獲取第一個匹配元素內部區域高度（包括內邊距、不包括邊框）。
1.$(element).innerWidth();
2.$(element).innerHeight();
獲取第一個匹配元素外部高度（默認包括內邊距和邊框）。
1.$(element).outerWidth();
2.$(element).outerHeight();
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/54523.html
標籤：非技術區