目錄
- jQuery的補充
- 基本篩選器
- 屬性選擇器
- 表單選擇器
- 篩選器方法
- 操作標簽
- 樣式操作
- 位置操作
- 尺寸
- 文本操作
- 屬性操作
- 檔案處理
- 事件
- 常用事件
- 事件系結
- 移除事件
- 阻止后續事件執行
- jQuery 系結事件的語法
- 阻止事件冒泡
- 檔案加載
jQuery的補充
基本篩選器
:first // 第一個
:last // 最后一個
:eq(index) // 索引等于index的那個元素
:even // 匹配所有索引值為偶數的元素，從0開始計數
:odd // 匹配所有索引值為奇數的元素，從0開始計數
:gt(index) // 匹配所有大于給定索引值的元素
:lt(index) // 匹配所有小于給定索引值的元素
:not(元素選擇器) // 移除所有滿足not條件的標簽
:has(元素選擇器) // 選取所有包含一個或多個標簽在其內的標簽(指的是從后代元素找)
屬性選擇器
[attribute]
[attribute=value] // 屬性等于
[attribute!=value] // 屬性不等于
表單選擇器
:text
:password
:file
:radio
:checkbox
:submit // 提交
:reset // 重置
:button // 按鈕
篩選器方法
下一個元素
$("#id").next
$("#id")/nextAll() // 同級別下面的所有元素
$("#id").nextUntil() // 查找下面所有元素，直到匹配到那一個元素為止
上一個元素
$("#id"),prev
$('#id').prevALL() // 同級別上面的全部元素
$("#id").prevUntil() // 查找上面所有元素，直到匹配到那一個元素為止
父親元素
$("#id").parent()
$("#id").parents() // 查找當前元素的所有父輩元素
$("#id").parentsUntil() // 查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為止
兒子和兄弟元素
$("id").children() // 查找子元素
$("id").sibings() // 查找兄弟元素
操作標簽
樣式操作
樣式類
addClass(): // 添加指定的css類名
removeClass(): // 移除指定的css類名
hasClass(): // 判斷樣式存不存在
toggleClass(): // 切換css類名，如果有就洗掉，如果沒有就添加
位置操作
offset() // 獲取匹配元素在當前視窗的相對偏移或設定元素位置
position() // 獲取匹配元素相對父元素的偏移
scrollTop() // 獲取元素相對滾動條頂部的偏移
scrollLeft() // 獲取元素相對滾動條左側的偏移
尺寸
height() // 高度
width() // 寬度
innerHeight // 文本內容與內邊距的高度和
innerWidth // 文本內容與內邊距的寬度和
outerHeight // 文本內容與內邊距與邊框的高度和
outerWidth // 文本內容與內邊距與邊框的寬度和
文本操作
HTML代碼
html() // 取得第一個匹配元素的html內容
html(val) // 設定所有匹配元素的html內容
文本值
text() // 取得所有匹配元素的內容
text(val) // 設定所有匹配元素的內容
值
val() // 取得第一個匹配元素的當前值
val(val) // 設定所有匹配元素的值
val(val1, val2) // 設定多選的checkbox,多選select的值
屬性操作
attr(attrName) // 回傳第一個匹配元素的屬性值
attr(attrName, attrValue) // 為所有匹配元素設定一個屬性值
attr(k1:v1, k2:v2) // 為索引匹配元素設定多個屬性值
removeAttr() // 從每一個匹配的元素中洗掉一個屬性
用于checkbox和radio
prop // 獲取屬性
removePorp() // 移除屬性
prop和attr的區別
attr全稱attribute(屬性)
prop全稱propperty(屬性)
兩者雖然都是屬性，但它們所指的屬性并不相同，attr所指的屬性是HTML標簽屬性，而prop所指的是DOM物件屬性，
總結
1.對于標簽上有的能看到的屬性和自定義屬性都用attr
2.對于回傳布林值的比如checkbox、radio、和option的是否被選中都用prop
檔案處理
添加到指定元素內部的后面
$(A).append(B) // 把B追加到A
$(A).appendTo(B) // 把A追加到B
添加到指定元素內部的前面
$(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 // 把A放到B的前面
移除和清空元素
remove() // 從DOM中洗掉所有匹配的元素
empty() // 洗掉匹配的元素集合中所有的子節點
替換
replaceWith()
replaceAll()
克隆
clone() // 引數復制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src=https://www.cnblogs.com/colacheng0930/p/"https://code.jquery.com/jquery-3.4.0.min.js"></script>
<style>
button {
height: 50px;
width: 80px;
color: violet;
border: 3px solid yellow;
background-color: orangered;
}
</style>
<body>
<script>
// var btnEle = $('button')[0];
// btnEle.onclick = function () {
// $(this).clone().insertAfter(this)
// // clone 默認不可隆事件
// }
// 如果要克隆事件，使用以下方式
$("button").on("click", function () {
$(this).clone(true).insertAfter(this);
});
</script>
</body>
</html>
事件
常用事件
click(function(){...}) // 滑鼠點擊
hover(function(){...}) // 懸浮
blur(function(){...}) // 失去焦點
focus(function(){...}) // 聚焦
change(function(){...}) // 改變應用域
keyup(function(){...}) // 按下按鍵時，改變文本域的顏色
事件系結
- ?
.on(events [, selector ], function(){})
event：事件selector：選擇器（可選）function：事件處理函式
移除事件
-
?
.off(events [, selector ], function(){})off()方法移除用.on()系結的事件處理程式
event：事件selector：選擇器（可選）function：事件處理函式
阻止后續事件執行
1.return false; // 常見阻止表單提交等
2.e.preventDefault();
jQuery 系結事件的語法
jQuery系結事件的語法
第一種語法結構：
$(選擇器).事件名(function(){
// 事件代碼
})
第二種語法結構 用處更廣
$(選擇器).on('事件名',function(){
// 事件代碼
})
# 實時監測input內部輸入變化
$('input').on('input',function () {
// 獲取用戶輸入的內容
console.log($(this).val())
})
阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src=https://www.cnblogs.com/colacheng0930/p/"https://code.jquery.com/jquery-3.4.0.min.js"></script>
<body>
div
p
span
<script>
$('div').click(function (e) {
alert('div')
});
$('p').click(function (e) {
alert('p')
});
$('span').click(function (e) {
alert('span');
e.stopPropagation() // 阻止事件冒泡
});
</script>
</body>
</html>
檔案加載
js中
window.onload = function() {
// 在這里寫JS代碼
}
jQuery中
$(document).ready(function() {
// 在這里寫jQuery代碼
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/31455.html
標籤：jQuery