當(dāng)前位置:首頁(yè) > IT技術(shù) > Web編程 > 正文

jQuery
2022-08-29 23:53:56

jQuery

篩選器

1.下一個(gè)元素
$("#id").next()  // 篩選出元素的下一個(gè)兄弟元素
$("#id").nextAll()  // 篩選元素后面所有的兄弟
$("#id").nextUntil("#i2")  // 篩選出元素后面所有兄弟元素直到選擇器元素位置

2.上一個(gè)元素
$("#id").prev()  // 篩選元素的上一個(gè)兄弟元素
$("#id").prevAll()  // 篩選元素前面所有的兄弟
$("#id").prevUntil("#i2")  // 篩選出元素前面所有兄弟元素直到選擇器元素位置

3.父親元素
$("#id").parent()  // 篩選出元素的父元素
$("#id").parents()  // 查找當(dāng)前元素的所有父輩元素
$("#id")parentsUntil()  // 查找當(dāng)前元素的所有父輩元素,直到選擇器元素為止

4.鏈?zhǔn)讲僮鞯牡讓釉?對(duì)象調(diào)用方法之后返回一個(gè)對(duì)象,從而實(shí)現(xiàn)鏈?zhǔn)讲僮鞯男Ч?

操作標(biāo)簽

jQuery操作				js操作				jQuery操作功能
.css('樣式名','樣式值')	style.樣式名 = '樣式值'
1.樣式操作
addClass()				classList.add()			添加指定的css類名
removeClass()			classList.remove()		移除指定的css類名
hasClass()				classList.contains()	判斷樣式存不存在
toggleClass()			classList.toggle()		有css類名就移除,沒有就添加

2.文本操作
text()					innerText()			取得所有匹配元素的內(nèi)容
html()					innerHTML()			取得第一個(gè)匹配元素的html內(nèi)容
val()					value				取得第一個(gè)匹配元素的當(dāng)前值
[0].files				files				獲取所有文件

3.屬性操作
attr() 靜態(tài)屬性			 setAttribute()		  返回第一個(gè)匹配元素的屬性值
prop() 動(dòng)態(tài)屬性(checked)					 獲取屬性

4.文檔處理
append()				append()			添加到指定元素內(nèi)部的后面
prepend()								  添加到指定元素內(nèi)部的前面
after()									  添加到指定元素外部的后面
before()								  添加到指定元素外部的前面

remove()								  從DOM中刪除所有匹配的元素
empty()									 刪除匹配的元素集合中所有的子節(jié)點(diǎn)

jQuery綁定事件方法

js綁定事件與jQuery綁定事件

1.js綁定事件
標(biāo)簽對(duì)象.on事件名 = function(){事件代碼}

2.jQuery綁定事件
2.1方法1:
jQuery對(duì)象.事件名(function(){事件代碼})
$btnEle.click(function(){alter(123)})
2.2方法2:
jQuery對(duì)象.on('事件名',function(){事件代碼})
$btnEle.on('click',function(){alter(123)})
'使用jQuery方法1綁定事件無法觸發(fā)時(shí)可以切換為方法2'
img

事件案例

1.常用事件
click(function(){...})  // 單擊事件
hover(function(){...})  // 懸浮事件
blur(function(){...})  // 鼠標(biāo)移除input框
focus(function(){...})  // 鼠標(biāo)進(jìn)入input框
change(function(){...})  // 文本域變化事件
keyup(function(){...})  // 松開鍵盤事件

2.clone()克隆事件示例
<body>
    <button id="d1" class="c1">多重影分身之術(shù)</button>
    <script>
        let $btnEle = $('#d1');
        $btnEle.click(function (){
            $('body').append($(this).clone())
        })
    </script>
</body>

3.hover事件示例
<body>
    <p>第一個(gè)</p>
    <p>第二個(gè)</p>
    <p>第三個(gè)</p>
    <script>
        // 影響所有p標(biāo)簽
        $('p').hover(
            function (){
                alert('我進(jìn)來了')
            },
            function (){
                alert('我出來了')
            }
        )
    </script>
</body>

4.實(shí)時(shí)監(jiān)聽input輸入值變化示例
<body>
    <input type="text" id="d1">
    <script>
        $('#d1').on('input', function (){
            console.log(this.value)
        })
    </script>
</body>

事件相關(guān)補(bǔ)充知識(shí)

1.能夠觸發(fā)form表單提交數(shù)據(jù)動(dòng)作的標(biāo)簽有兩個(gè)
1.1<input type="submit" value="提交">
1.2<button>提交</button>
'給已經(jīng)有事件的標(biāo)簽綁定事件,會(huì)先執(zhí)行綁定的事件,再去執(zhí)行默認(rèn)的執(zhí)行'

2.也可以讓標(biāo)簽之前的事件不執(zhí)行
2.1return false
2.2$(':submit').click(function (e){
            alert('來了')
            e.preventDefault()
        })

3.事件冒泡
'涉及到標(biāo)簽嵌套并且有相同事件的時(shí)候,當(dāng)你觸發(fā)兒子標(biāo)簽的事件時(shí),它會(huì)逐級(jí)向上匯報(bào)'
<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()
    })

'''
創(chuàng)建標(biāo)簽的兩種方法
1.js
document.createElement()
2.jQuery
$('<標(biāo)簽名>')
'''
5.事件委托
事情綁定默認(rèn)情況下是不會(huì)對(duì)動(dòng)態(tài)創(chuàng)建的標(biāo)簽生效的,如果想生效需要事情委托
$('div').on('click','button',function () {
            alert('阿姨壓一壓')
        })

jQuery動(dòng)畫效果

1.基本
show([s,[e],[fn]])  // 顯示隱藏的匹配元素
hide([s,[e],[fn]])  // 
toggle([s],[e],[fn])  // 

Bootstrap

下載地址
https://v3.bootcss.com/getting-started/

本文摘自 :https://www.cnblogs.com/

開通會(huì)員,享受整站包年服務(wù)立即開通 >