本文列舉一些常用的jQuery的api。
- $('selector').on()
<ul>
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
<li id="4">4</li>
<li id="5">5</li>
<li id="6">6</li>
</ul>
複製程式碼$('ul').on('click','li',(e)=>{
console.log(e.currentTarget.innerText)
})
複製程式碼如此便可以列印出點選的li的內容。
-
$('selector').addClass()
接受一個字串，為selector增加一個class名。 -
$('selector').removeClass()
移除接收的class名。 -
$('selector').animate()
<div class="aa">
<div class="a"></div>
</div>
複製程式碼.a{
width:30px;
height:30px;
border: 1px solid red;
position: relative;
}
.aa{
width: 200px;
height: 200px;
border: 1px solid red;
}
複製程式碼$('.aa').click(function(){
$('.a').animate({marginLeft: 40},'slow');
});
複製程式碼- $('selector').trigger()
$(document).ready(()=>{
$('.aa').trigger('click')
})
複製程式碼文件載入完後幫我們點選'.aa'。
- $('selector').css()
$('selector').css('background':'red')
複製程式碼為selector新增背景顏色。
-
$('selector').remove()
移除該節點。 -
$('selector').text('我')
向selector中增加內容'我'。 -
$('selector').parent()
獲取父元素。 -
$('selector').children()
獲取selector的所有子節點。 -
$('selector').sibilings()
獲取selector的兄弟元素。 -
$('selector').next()
selector的下一份元素。 -
$('selector').prev()
selector的上一個元素。 -
$('selector').eq()
<div class='a'></div>
<div class='b'></div>
<div class='c'></div>
複製程式碼$('div').eq(2)
從符合選擇器條件中的元素選擇指定元素，下標從零開始。
- $('selector').append()
let p = document.createElement('p')
p.innerText = '要努力'
$('.aa').append(p)
複製程式碼向'.aa'選擇器中新增新元素p。
- $('selector').bind('event','handler')
<div class="a">123</div>
複製程式碼$('.a').bind('click',(e)=>{
console.log(e.currentTarget.innerText)
})
複製程式碼-
$('selector').hide('slow')
讓selector慢慢隱藏，也可以不設定引數--直接隱藏。 -
$('selector').scrollTop(value)
可以用來實現點選回到頂部。
$('body').click(()=>{
$(window).scrollTop(0);
})
複製程式碼- $('selector').scroll(function)
頁面滑動時啟用函式。
$(window).scroll(function () {
console.log($(window).scrollTop())
});
複製程式碼