jQuery
1. jQuery是什麼
--> 寫項目都用這個2. jQuery短小精悍
write less，do more
是一個別人寫好的類庫（模塊），我們直接在頁面上引用這個類庫（模塊），就可以直接使用類庫裏面定義好的方法
2. jQuery怎麼用
1. 引用jQuery文件兩種方式：
1. 本地文件
<script src="jquery-3.2.1.min.js"></script>
<script>按照jQuery的規則寫代碼</script>
2. CDN方式
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>按照jQuery的規則寫代碼</script>
2. jQuery版本
3.x
jQuery.js
jQuery.min.js
3. jQuery使用
3.1 查找標籤
①基本查找 $("條件都寫在這裏")
1. ID查找 -> $("#ID值")② 層級查找
2. class查找 -> $(".class名字")
3. 標籤查找 -> $("標籤名")
4. * -> $("*")
5. 結合來用 -> $("div.c1") $("p.c2")6. 組合查詢 -> $("條件1,條件2") $("div,p")
1. 後代選擇器 -> $("x y")③ 篩選器
2. 兒子選擇器 -> $("x>y")
3. 弟弟選擇器 -> $("x~y")4. 毗鄰選擇器 -> $("x+y")
選擇器補充：
- 屬性選擇器
- $("[egon]")
- $("[type='text']")
- $("input[type!='submit']")
④ 篩選器方法1.基本篩選器
:first // 第一個 :last // 最後一個 :eq(index)// 索引等於index的那個元素 :even // 匹配所有索引值爲偶數的元素，從 0 開始計數 :odd // 匹配所有索引值爲奇數的元素，從 0 開始計數 :gt(index)// 匹配所有大於給定索引值的元素 :lt(index)// 匹配所有小於給定索引值的元素 :not(元素選擇器)// 移除所有滿足not條件的標籤 :has(元素選擇器)// 選取所有包含一個或多個標籤在其內的標籤(指的是從後代元素找)2. 表單篩選器
:text
:password
:...
:enable
:disable
:checked
:selected
1. 下一個（同級的標籤/弟弟標籤）
- next()
- nextAll()
- nextUntil(“終止條件”) (不包含終止條件)
2. 上一個（同級的標籤/姐姐標籤）
- prev()
- prevAll()
- prevUntil(“終止條件”) (不包含終止條件)
3. 父標籤系列- parent()
- parents()
- parentsUntil(終止條件) 不包含
.children()
.siblings()
$("").find()$("").first()
.last()
3.2 修改標籤的樣式
原生JS:
獲取樣式類： classList
添加樣式類名 classList.add(.cls)
移除樣式類名 classList.remove(.cls)
3.2. 操作標籤
1. 樣式操作
1. addClass
2. removeClass
3. toggleClass
2. CSS操作
1. $("").css("color", "red") --> .css({"color": "red", "border": "1px solid black"})
3. 位置
position
1. fixed
2. relative --> 相對位置，相對自己原來應該在的位置
3. absolute --> 絕對位置，相對上一級相對定位過的父標籤
4. static
jQuery
offset 獲取相對當前窗口的偏移 {top: xx, left: xxx}
position 相當於已經定位父標籤的偏移 {top:xx, left:xx}
offset({top: xx,left:xx}) --> 可以設置標籤相對當前窗口的偏移
- scrollTop() 返回頂部示例
- scrollLeft()
4. 尺寸 (CSS盒子模型)
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
5. 文本操作
DOM:
innerHTML
innerText
jQuery：
.html()
.text()
6. 屬性操作
val() input、多選的select
*****取值是默認取第一個匹配元素的值*****
*****設置值是設置所有的標籤的值*****
用於checkbox 和radio
prop() // 獲取屬性
removeProp() // 移除屬性
用於ID等或自定義屬性：attr(attrName)// 返回第一個匹配元素的屬性值 attr(attrName, attrValue)// 爲所有匹配元素設置一個屬性值 attr({k1: v1, k2:v2})// 爲所有匹配元素設置多個屬性值 removeAttr()// 從每一個匹配的元素中刪除一個屬性
- each循環
1. $.each()
2. $("").each()
- 注意：this具體指的是誰（進入循環的當前對象）
- return false 後面的時間或函數不執行
- 如果一個jQuery查找的對象被多次用到，我們可以用變量把它保存起來，減少重複查找1. 文檔操作
各種添加
1. 內部添加 （子標籤）
往前添加 prepend
往後添加 append
2. 外部添加 （同級）
往後添加after
往前添加before
3.清空和刪除
1. remove()
2. empty() --> 把子標籤刪除
4. 替換
A.replaceWith(B) --> B替換A
A.replaceAll(B) --> A替換所有的B
5. 克隆
注意參數：true，加上true表示標籤和事件都複製
2. 常用事件和事件綁定
按鍵按下事件 --> 批量操作
1. 常用事件
click()
blur()
focus()
change()
keyup()
keydown()
hover() --> 我們不一樣（實際是鼠標移上去和移出來兩個事件）
2. 事件的綁定
.on() 分兩種情況
1. 普通綁定事件
.on("具體的事件", function(){...})
2. 當綁定事件時，觸發事件的標籤還不存在時，應該使用事件委託
.on("具體的事件", "篩選條件", function(){...})
3. 事件的移除
.off()
4. 頁面加載完之後執行
$("document").ready(function(){
// 綁定事件的代碼
})
$(function(){...})
5. 阻止後續事件的執行
return false
阻止表單提交示例
事件委託
原理：利用事件冒泡--> 父標籤捕獲事件->處理事件
$("已經存在的標籤").on("事件", "選擇器", function(){...})
3 .each()循環
分兩種情況
1. $.each(循環的對象, function(i,v){...})
2. $().each(function(){...})
return false --> 跳出循環 --> 類似於 break
return --> 跳出本次循環，進入下一次循環 --> 類似於 continue
4. 動畫效果
1. 顯示隱藏
.show()
.hide()
.toggle()
2. 滑動(遮陽板)
左側菜單
.slideUp()
.slideDown()
.slideToggle()
3. 淡入淡出
.fadeIn()
.fadeOut()
.fadeTo()
.fadeToggle()
4. animate({"width": "+=50px"}, 1000)
5 .data()方法
.data("k1", "v1") 保存任意數據
.data（"k1"） 獲取k1對應的數據
.removeData("k1") 清除k1對應的數據
.removeData() 清除所有數據
示例：
table增刪改查
6、 jQuery擴展
給jQuery擴展方法
$.extend({
funcName: function(){...},
})
給jQuery對象擴展方法
$.fn.extend({
funcName: function(){...},
})
用到的JS知識點
1. JS中變量作用域由誰控制的？ --> 函數外部訪問不到函數內部的變量
2. 匿名函數
function(){...}
3. 自執行函數
(function(arg){...})(arg);
示例：
自定義登錄校驗插件
7.Ajax