jQuery
2022-08-29 23:53:56
jQuery
篩選器
1.下一個元素
$("#id").next() // 篩選出元素的下一個兄弟元素
$("#id").nextAll() // 篩選元素后面所有的兄弟
$("#id").nextUntil("#i2") // 篩選出元素后面所有兄弟元素直到選擇器元素位置
2.上一個元素
$("#id").prev() // 篩選元素的上一個兄弟元素
$("#id").prevAll() // 篩選元素前面所有的兄弟
$("#id").prevUntil("#i2") // 篩選出元素前面所有兄弟元素直到選擇器元素位置
3.父親元素
$("#id").parent() // 篩選出元素的父元素
$("#id").parents() // 查找當前元素的所有父輩元素
$("#id")parentsUntil() // 查找當前元素的所有父輩元素，直到選擇器元素為止
4.鏈式操作的底層原理
對象調用方法之后返回一個對象，從而實現鏈式操作的效果
操作標簽
jQuery操作 js操作 jQuery操作功能
.css('樣式名','樣式值') style.樣式名 = '樣式值'
1.樣式操作
addClass() classList.add() 添加指定的css類名
removeClass() classList.remove() 移除指定的css類名
hasClass() classList.contains() 判斷樣式存不存在
toggleClass() classList.toggle() 有css類名就移除，沒有就添加
2.文本操作
text() innerText() 取得所有匹配元素的內容
html() innerHTML() 取得第一個匹配元素的html內容
val() value 取得第一個匹配元素的當前值
[0].files files 獲取所有文件
3.屬性操作
attr() 靜態屬性 setAttribute() 返回第一個匹配元素的屬性值
prop() 動態屬性(checked) 獲取屬性
4.文檔處理
append() append() 添加到指定元素內部的后面
prepend() 添加到指定元素內部的前面
after() 添加到指定元素外部的后面
before() 添加到指定元素外部的前面
remove() 從DOM中刪除所有匹配的元素
empty() 刪除匹配的元素集合中所有的子節點
jQuery綁定事件方法
js綁定事件與jQuery綁定事件
1.js綁定事件
標簽對象.on事件名 = function(){事件代碼}
2.jQuery綁定事件
2.1方法1:
jQuery對象.事件名(function(){事件代碼})
$btnEle.click(function(){alter(123)})
2.2方法2:
jQuery對象.on('事件名',function(){事件代碼})
$btnEle.on('click',function(){alter(123)})
'使用jQuery方法1綁定事件無法觸發時可以切換為方法2'
事件案例
1.常用事件
click(function(){...}) // 單擊事件
hover(function(){...}) // 懸浮事件
blur(function(){...}) // 鼠標移除input框
focus(function(){...}) // 鼠標進入input框
change(function(){...}) // 文本域變化事件
keyup(function(){...}) // 松開鍵盤事件
2.clone()克隆事件示例
<body>
<button id="d1" class="c1">多重影分身之術</button>
<script>
let $btnEle = $('#d1');
$btnEle.click(function (){
$('body').append($(this).clone())
})
</script>
</body>
3.hover事件示例
<body>
<p>第一個</p>
<p>第二個</p>
<p>第三個</p>
<script>
// 影響所有p標簽
$('p').hover(
function (){
alert('我進來了')
},
function (){
alert('我出來了')
}
)
</script>
</body>
4.實時監聽input輸入值變化示例
<body>
<input type="text" id="d1">
<script>
$('#d1').on('input', function (){
console.log(this.value)
})
</script>
</body>
事件相關補充知識
1.能夠觸發form表單提交數據動作的標簽有兩個
1.1<input type="submit" value="提交">
1.2<button>提交</button>
'給已經有事件的標簽綁定事件，會先執行綁定的事件，再去執行默認的執行'
2.也可以讓標簽之前的事件不執行
2.1return false
2.2$(':submit').click(function (e){
alert('來了')
e.preventDefault()
})
3.事件冒泡
'涉及到標簽嵌套并且有相同事件的時候，當你觸發兒子標簽的事件時，它會逐級向上匯報'
<body>
<div>div
<p>div>p
<span>div>p>span</span>
</p>
</div>
<script>
$('div').click(function (){
alert('div')
})
$('p').click(function (){
alert('p')
})
$('span').click(function (){
alert('span')
})
</script>
</body>
4.阻止事件冒泡
4.1return false
4.2$('p').click(function (e){
alert('p')
e.stopPropagation()
})
'''
創建標簽的兩種方法
1.js
document.createElement()
2.jQuery
$('<標簽名>')
'''
5.事件委托
事情綁定默認情況下是不會對動態創建的標簽生效的，如果想生效需要事情委托
$('div').on('click','button',function () {
alert('阿姨壓一壓')
})
jQuery動畫效果
1.基本
show([s,[e],[fn]]) // 顯示隱藏的匹配元素
hide([s,[e],[fn]]) //
toggle([s],[e],[fn]) //
Bootstrap
下載地址
https://v3.bootcss.com/getting-started/
本文摘自 ：https://www.cnblogs.com/
更多科技新聞 ......