JQuery基礎

本章主要總結JQuery的一些基本操作，

1.JQuery概述

概念：一個JavaScript框架，簡化JS開發，
- JQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優秀的JavaScript代碼庫（或JavaScript框架），jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情，它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML檔案操作、事件處理、影片設計和Ajax互動，
- JavaScript框架：本質上就是一些js檔案，封裝了js的原生代碼而已，
JQuery物件與JS物件區別與轉換
1. JQuery物件在操作時，更加方便，
2. JQuery物件和js物件方法不通用的，
3. 兩者相互轉換
  - jq – > js : jq物件[索引] 或者 jq物件.get(索引)
  - js – > jq : $(js物件)

2.選擇器操作

選擇器：篩選具有相似特征的元素（標簽）

在我們學習選擇器操作之前先了解一下基本操作：

基本操作：

事件系結：

//1.獲取b1按鈕
$("#b1").click(function(){
    alert("abc");
});

入口函式：
```
$(function () {
	           
});
```
window.onload 和 $(function) 區別:
- window.onload 只能定義一次,如果定義多次，后邊的會將前邊的覆寫掉，
- $(function)可以定義多次的，
樣式控制：css方法

$("#div1").css("background-color","red");
$("#div1").css("backgroundColor","pink");

選擇器操作：

基本選擇器
1. 標簽選擇器（元素選擇器）
  
  語法：$("html標簽名")，獲得所有匹配標簽名稱的元素，
2. id選擇器
  
  語法：$("#id的屬性值")，獲得與指定id屬性值匹配的元素，
3. 類選擇器
  
  語法：$(".class的屬性值") ，獲得與指定的class屬性值匹配的元素，
4. 并集選擇器
  
  語法： $("選擇器1,選擇器2....") ，獲取多個選擇器選中的所有元素，
層級選擇器
1. 后代選擇器
  
  語法：$("A B ") 選擇A元素內部的所有B元素，
2. 子選擇器
  
  語法：$("A > B") 選擇A元素內部的所有B子元素，
屬性選擇器
1. 屬性名稱選擇器
  
  語法：$("A[屬性名]") 包含指定屬性的選擇器，
2. 屬性選擇器
  
  語法：$("A[屬性名='值']") 包含指定屬性等于指定值的選擇器，
3. 復合屬性選擇器
  
  語法：$("A[屬性名='值'][]...") 包含多個屬性條件的選擇器，
過濾選擇器
1. 首元素選擇器
  語法：first 獲得選擇的元素中的第一個元素，
2. 尾元素選擇器
  語法：last 獲得選擇的元素中的最后一個元素，
3. 非元素選擇器
  語法：not(selector) 不包括指定內容的元素，
4. 偶數選擇器
  語法：even 偶數，從 0 開始計數，
5. 奇數選擇器
  語法：odd 奇數，從 0 開始計數，
6. 等于索引選擇器
  語法：eq(index) 指定索引元素，
7. 大于索引選擇器
  語法：gt(index) 大于指定索引元素，
8. 小于索引選擇器
  語法：lt(index) 小于指定索引元素，
9. 標題選擇器
  語法：header 獲得標題（h1~h6）元素，固定寫法，
表單過濾選擇器
1. 可用元素選擇器
  語法：enabled 獲得可用元素，
2. 不可用元素選擇器
  語：:disabled 獲得不可用元素，
3. 選中選擇器
  語法：checked 獲得單選/復選框選中的元素，
4. 選中選擇器
  語法：selected 獲得下拉框選中的元素，

3.DOM操作

內容操作
1. html()：獲取/設定元素的標簽體內容，
 
 <a>內容</a> --> 內容
2. text()：獲取/設定元素的標簽體純文本內容，
 
 <a>內容</a> --> 內容
3. val()：獲取/設定元素的value屬性值，
屬性操作
1. 通用屬性操作
  1. attr()：獲取/設定元素的屬性
  2. removeAttr()：洗掉屬性
  3. prop()：獲取/設定元素的屬性
  4. removeProp()：洗掉屬性
  attr和prop區別？
  1. 如果操作的是元素的固有屬性，則建議使用prop，
  2. 如果操作的是元素自定義的屬性，則建議使用attr，
2. 對class屬性操作
  1. addClass()：添加class屬性值
  2. removeClass()：洗掉class屬性值
  3. toggleClass()：切換class屬性
    
    判斷如果元素物件上存在class=“one”，則將屬性值one洗掉掉，如果元素物件上不存在class=“one”，則添加，
  4. css()：樣式控制
CRUD操作
1. append()：父元素將子元素追加到末尾
  
  物件1.append(物件2):：將物件2添加到物件1元素內部，并且在末尾，
2. prepend()：父元素將子元素追加到開頭
  
  物件1.prepend(物件2)：將物件2添加到物件1元素內部，并且在開頭，
3. appendTo()：
  
  物件1.appendTo(物件2)：將物件1添加到物件2內部，并且在末尾，
4. prependTo()：
  
  物件1.prependTo(物件2)：將物件1添加到物件2內部，并且在開頭，
5. after()：添加元素到元素后邊
  
  物件1.after(物件2)：將物件2添加到物件1后邊，物件1和物件2是兄弟關系，
6. before()：添加元素到元素前邊
  
  物件1.before(物件2)：將物件2添加到物件1前邊，物件1和物件2是兄弟關系，
7. insertAfter()
  
  物件1.insertAfter(物件2)：將物件2添加到物件1后邊，物件1和物件2是兄弟關系，
8. insertBefore()
  
  物件1.insertBefore(物件2)：將物件2添加到物件1前邊，物件1和物件2是兄弟關系，
9. remove()：移除元素
  
  物件.remove()：將物件洗掉掉，
10. empty()：清空元素的所有后代元素
  
  物件.empty()：將物件的后代元素全部清空，但是保留當前物件以及其屬性節點，

提醒：這些東西不需要記住，用的時候查檔案即可！！！

最后喜歡的小伙伴別忘了一鍵三連哦🎈🎈🎈 在這里插入圖片描述

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

標籤：其他

上一篇：初學者這樣玩 TypeScript，遲早進大廠系列（第七期）

下一篇：“空物件 {}” 與 “空陣列 []” 的相加問題（詳解！！！）

JQuery基礎操作超詳解?

文章目錄

JQuery基礎

1.JQuery概述

2.選擇器操作

3.DOM操作