目錄
- jQuery介紹
- jQuery引入方式
- jQuery基礎語法
- 查找標簽
- 基本選擇器
- id選擇器
- 標簽選擇器
- class選擇器
- 組合選擇器
- 所有元素選擇器
- 配合使用
- 層級選擇器
- 基本篩選器
- 屬性選擇器
- 表單篩選器
- 基本選擇器
- 篩選器方法
- 操作標簽
- 樣式操作
- 位置操作
- 邊框尺寸
- 文本操作
- 屬性操作
- 檔案處理
- 添加到元素內部的后面
- 添加到元素內部的前面
- 添加到指定元素外部的后面
- 添加到指定元素外部的前面
- 移除和清空元素
- 克隆
- 事件
- 常用事件
- jQuery事件系結
- hover系結事件
- 實時監測input內部輸入內容
- 阻止后續事件執行
- 事件冒泡
- 頁面載入
- 事件委托
- 影片效果
- each
- .data()
jQuery介紹
jQuery是一個輕量級、兼容多瀏覽器的JavaScript庫，能使用戶更方便地處理HTML檔案，實作影片效果、方便地進行Ajax互動，
jQuery引入方式
一種是引入本地的jQuery檔案，另一種是參考jQuery的cdn
<script src=https://www.cnblogs.com/setcreed/p/"https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
jQuery基礎語法
$(選擇器).action()
查找標簽
基本選擇器
id選擇器
$('#id')
標簽選擇器
$('div')
class選擇器
$('.c1')
組合選擇器
$('#d1, .c1, p')
所有元素選擇器
$('*') // 選擇所有的標簽
配合使用
$("div.c1") // 找到有c1 class類的div標簽
層級選擇器
$("div span") // div 的所有span后代
$("div > span") // div的所有兒子span
$("div + span") // 毗鄰 div緊挨著的span
$("div ~ span") // div同級下面的所有span
基本篩選器
:first // 第一個
:last // 最后一個
:eq(index)// 索引等于index的那個元素
:even // 匹配所有索引值為偶數的元素，從 0 開始計數
:odd // 匹配所有索引值為奇數的元素，從 0 開始計數
:gt(index)// 匹配所有大于給定索引值的元素
:lt(index)// 匹配所有小于給定索引值的元素
:not(元素選擇器)// 移除所有滿足not條件的標簽
:has(元素選擇器)// 選取所有包含一個或多個標簽在其內的標簽(指的是從后代元素找)
例子：
$('ul li:first') //找到ul標簽下第一個li標簽
$("div:has(h1)") // 找到所有后代中有h1標簽的div標簽
$("div:has(.c1)") // 找到所有后代中有c1樣式類的div標簽
$('div span:has("#d1")') // 找到div所有后代中有的id為d1的span標簽
$('div span:not("#d1")') // 找到div所有后代中有的id不為d1的span標簽
屬性選擇器
$('[username]')
$('[username = "cwz"]')
$('p[username = "cwz"]')
表單篩選器
:僅僅在表單選擇器上使用，默認是在input框，type屬性
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
補充知識點：
<!--novalidate 取消前端給你做的校驗功能-->
<form action="" novalidate></form>
特殊：
$(":checkbox") // 找到所有的checkbox
篩選器方法
下一個元素
$("#id").next()
$("#id").nextAll() // 同級之下所有的
$("#id").nextUntil("#i2")
上一個元素
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父親元素
$("#id").parent()
$("#id").parents() // 查找當前元素的所有的父輩元素
$("#id").parentsUntil() // 查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為止，
兒子和兄弟元素：
$("#id").children();// 兒子們
$("#id").siblings();// 兄弟們
.first() // 獲取匹配的第一個元素
.last() // 獲取匹配的最后一個元素
.not() // 從匹配元素的集合中洗掉與指定運算式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素，
.eq() // 索引值等于指定值的元素
$('div span:first') // 等價操作：
$('div span').first()
filter篩選
$("div").filter(".c1") // 從結果集中過濾出有c1樣式類的
// 等價于 $("div.c1")
操作標簽
樣式操作
addClass(); // 增加類
removeClass(); // 移除指定的類
hasClass(); // 判斷樣式是否存在
toggleClass(); // 有則移除，沒有就增加
例子：開關燈實體
修改css有樣式
<div>
<p>11</p>
<p>22</p>
</div>
需求：把11所在標簽變為紅色，22所在標簽變為綠色
$('div').children().first().css('color','red').next().css('color','green')
位置操作
offset() // 獲取匹配元素在當前視窗的相對偏移或設定元素位置
position() // 獲取匹配元素相對父元素的偏移
scrollTop() // 獲取匹配元素相對滾動條頂部的偏移
scrollLeft() // 獲取匹配元素相對滾動條左側的偏移
$(window).scrollTop(0) // 瀏覽器滾動條能快速回到頂部
邊框尺寸
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
示例：
$('p').innerHeight()
60.8
$('p').innerWidth()
820
文本操作
$('div').text() // 獲取文本值
$('div').html() // 獲取html代碼
$('div').text('有點意思') // 設定文本值
$('div').html('<h1>有點意思</h1>') // 設定所有匹配元素的html內容，識別內容里的標簽元素
獲取用戶輸入的值
$('input').val()
$('input').val('阿什頓') // 不加引數，獲取值；加了引數，設定值
自定義登錄校驗示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src=https://www.cnblogs.com/setcreed/p/"https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<body>
注冊頁面
<script>
var btnEle = $('#submit')[0];
btnEle.onclick = function () {
// 獲取用戶輸入的用戶名 密碼
var userNameVal = $('#d1').val();
var passWordVal = $('#d2').val();
// 檢驗用戶名和密碼是否輸入
if (userNameVal.length === 0) {
// 去對應的提示框中 展示錯誤資訊
$('.errors').first().text('用戶名不能為空')
}
if (passWordVal.length === 0) {
// 去對應的提示框中 展示錯誤資訊
$('.errors').last().text('密碼不能為空')
}
};
var inputEleList = $('input');
for(let i=0;i<inputEleList.length;i++){
inputEleList[i].onfocus = function () {
$(this).next().text('')
}
}
</script>
</body>
</html>
屬性操作
attr(attrName) // 回傳第一個匹配元素的屬性值
attr(attrName, attrValue) // 為所有匹配元素設定一個屬性值
attr({k1: v1, k2:v2}) // 為所有匹配元素設定多個屬性值
removeAttr() // 從每一個匹配的元素中洗掉一個屬性
對于checked和radio：
// attr()不能動態獲取用戶輸入的內容,而prop()可以判斷用戶是否選中
$('input').first().attr('checked', 'checked') // 不能設定值
$('input').first().prop('checked', 'checked') // 可以設定值
移除屬性：
// $('input').first().removeProp('checked') 已經沒有效果了
$('input').first().prop('checked', false)
注意：在1.x及2.x版本的jQuery中使用attr對checkbox進行賦值操作時會出bug，在3.x版本的jQuery中則沒有這個問題，為了兼容性，我們在處理checkbox和radio的時候盡量使用特定的prop()，不要使用attr("checked", "checked")，
總結：
- 對于標簽上有的能看到的屬性和自定義屬性都用attr
- 對于回傳布林值的比如checkbox、radio和option的是否被選中都用prop，
- 洗掉也是使用prop
檔案處理
添加到元素內部的后面
var pEle = document.createElement('p')
$('body').append(pEle)
$(pEle).appendTo('body') // 兩者效果一樣
添加到元素內部的前面
$(A).prepend(B) // 把B前置到A
$(A).prependTo(B) // 把A前置到B
添加到指定元素外部的后面
$(A).after(B) // 把B放到A的后面
$(A).insertAfter(B) // 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B) // 把B放到A的前面
$(A).insertBefore(B) // 把A放到B的前面
移除和清空元素
remove() // 從DOM中洗掉所有匹配的元素，
empty() // 洗掉匹配的元素集合中所有的子節點，
克隆
close() //默認只克隆html和css，不克隆js close(true) 克隆所有
克隆示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src=https://www.cnblogs.com/setcreed/p/"https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
button {
height: 100px;
width: 150px;
background-color: red;
border: 3px solid darkgrey;
color: white;
font-size: 18px;
}
</style>
<body>