jQuery中的基本操作-有解無憂

jQuery中的基本操作

一、操作元素的屬性

1、操作元素的屬性：操作元素的自定義屬性和固有屬性，屬性是每個頁面元素的重要內容，HTML標簽可以有一到若干個屬性，我們可以使用javascript中的getAttribute和setAttribute來操作元素的"元素屬性"，在jQuery中為用戶提供了attr()包裝集函式, 能夠同時操作包裝集中所有元素的屬性
分類：①prop()方法

prop()方法：prop()方法用來設定或獲取元素固有屬性值
prop()方法獲取屬性值語法： $(selector).prop(“屬性名”)
prop()方法設定屬性值語法： $(selector).prop(“屬性”, “屬性值”)
②attr()方法
attr()方法：attr()用來設定或獲取元素的自定義屬性，自定義屬性是指用戶給元素添加的非固有屬性
attr()方法獲取屬性值語法： $(selector).attr(“屬性名”)
attr()方法設定屬性值語法： $(selector).attr(“屬性”, “屬性值”)
③data()方法
data()方法：data()方法用來在指定的元素上存取資料，資料保存在記憶體中，并不會修改DOM元素結構
data()方法獲取屬性值語法： $(selector).data(“資料名”)
data()方法設定屬性值語法： $(selector).data(“資料名”, “資料值”)
3、獲取元素的屬性值

$(selector).attr(屬性名)

4、設定元素的屬性值
A、以物件的方式設定屬性值：

$(selector).attr({'屬性名':'屬性值'})

B、以key-value的方式設定屬性值

$(selector).attr('屬性名','屬性值')

C、以回呼函式的方式設定屬性值

$(selector).attr('屬性名',function(){
    return '值'
	})

5、洗掉元素的屬性

$(selector).removeAttr('屬性名')

6、操作“元素屬性”總結如下
在這里插入圖片描述

二、操作樣式與樣式類

1、操作樣式
(1)獲取樣式屬性的值

 $(selector).css('樣式屬性名')

(2)設定樣式屬性的值
A、以傳入物件的方式設定樣式：

 $(selector).css({'樣式屬性':'值'})

B、以給函式傳值的方式設定樣式

 $(selector).css('樣式屬性名','屬性值')

2、操作樣式類
①樣式類是CSS中的一個概念，它用于設定頁面上對應于“class”屬性的元素的樣式顯示
②操作CSS
在這里插入圖片描述 ③修改CSS樣式
④獲取或設定元素的高度和寬度

三、操作元素的內容

![在這里插入圖片描述](https://img-blog.csdnimg.cn/732efc01267d48e1871c8e1b59741da9.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpYmVu,size_16,color_FFFFFF,t_70
1、操作HTML代碼：作用類似于innerHTML
(1)獲取html代碼

$(selector).html()

(2)設定html代碼

$(selector).html('html代碼')

2、操作文本：作用類似于innerText
(1)獲取標簽的文本

$(selector).text()

(2)設定標簽的文本

 $(selector).text('文本')

3、操作值
(1)獲取元素的value屬性值

 $(selector).val()

(2)設定元素的value屬性值

 $(selector).val(值)

4、查找與篩選元素
（1）過濾Filtering
在這里插入圖片描述（2）查找 Finding
5、鏈式操作

“鏈式操作”是jQuery語法中最有特色的一個功能之一，簡單地說，“鏈式操作”就是把之前需要分很多行書寫的代碼使用“.”連接成一行進行書寫，這在很大程度上能夠節省網站需要加載的代碼量，同時也使對元素的各種操作更加集中，
其缺點就是由于鏈式操作所必需的連貫性，可能導致代碼的可讀性有所降低

四、jQuery元素操作

1、遍歷操作的基本語法

$(selector).each(function(index, domEle) {});

該方法的引數是一個函式，這個函式將會在遍歷時呼叫
在函式中，index引數是每個元素的索引號
domEle是每個DOM元素的物件（個元素呼叫一次不是jQuery物件）
如果要想使用jQuery方法，需要將這個DOM物件轉換成為jQuery物件，即$(domEle)
案例演示

<div>1</div><div>2</div><div>3</div>
<script>
  var arr = ["red", "green", "blue"];
  $("div").each(function (index, domEle) {
    console.log(index); // 查看索引號
    console.log(domEle); // 查看DOM元素
    $(domEle).css("color", arr[index]); // 對每個元素進行操作                                                              
  });
</script>

注：$.each()方法的基本語法

 $.each(Object, function(index, element) {});

2、創建元素
通過jQuery可以很方便地動態創建一個元素，直接在“$()”函式中傳入一個HTML字串即可進行創建

$(function () {
  var li = $("<li>我是后來創建的li</li>");	// 創建元素
  console.log(li);// 將元素輸出到控制臺
});

3、添加元素
①內部添加：內部添加的方式可以實作在元素內部添加元素，并且可以放到內部的最后面或者最前面
②外部添加：外部添加就是把元素放入目標元素的后面或者前面，通過after()和before()方法來實作
4、添加元素
洗掉元素：洗掉元素分為洗掉匹配的元素本身、洗掉匹配的元素里面的子節點兩種情況
在這里插入圖片描述

五、jQuery尺寸和位置操作

1、尺寸方法
尺寸操作：在jQuery中，尺寸方法用來獲取或設定元素的寬度和高度
在這里插入圖片描述 2、位置方法
（1）offset()方法：使用offset()方法可以獲取元素的位置，回傳的是一個物件，包含left和top屬性，表示相對于檔案的偏移坐標，和父級元素沒有關系
（2）position()方法：position()方法用于獲取元素距離父元素的位置，如果父元素沒有設定定位（即CSS中的position），則獲取的結果是距離檔案的位置
注：需要注意的是，position()方法只能獲取元素位置，不能設定元素位置
（3）scroTop()和scrollLeft()方法：scrollTop()方法用于獲取或設定元素被卷去的頭部距離，scrollLeft()方法用于獲取或設定元素被卷去的左側距離

六、購物車案例

購物車演示

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/289876.html

標籤：其他

上一篇：Web前端開發工程師知識體系_04_JavaScript基礎（二）

下一篇：基于SSH的寵物管理系統

jQuery中的基本操作