jQuery常用api

本文列举一些常用的jQuery的api。

1. $('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的内容。

2. $('selector').addClass()
   接受一个字符串，为selector增加一个class名。

3. $('selector').removeClass()
   移除接收的class名。

4. $('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');
});
复制代码

5. $('selector').trigger()

$(document).ready(()=>{
  $('.aa').trigger('click')
})
复制代码

文档加载完后帮我们点击'.aa'。

6. $('selector').css()

$('selector').css('background':'red')
复制代码

为selector添加背景颜色。

7. $('selector').remove()
   移除该节点。

8. $('selector').text('我')
   向selector中增加内容'我'。

9. $('selector').parent()
   获取父元素。

10. $('selector').children()
    获取selector的所有子节点。

11. $('selector').sibilings()
    获取selector的兄弟元素。

12. $('selector').next()
    selector的下一份元素。

13. $('selector').prev()
    selector的上一个元素。

14. $('selector').eq()

<div class='a'></div>
<div class='b'></div>
<div class='c'></div>
复制代码

$('div').eq(2) 从符合选择器条件中的元素选择指定元素，下标从零开始。

15. $('selector').append()

let p = document.createElement('p')
p.innerText = '要努力'
$('.aa').append(p)
复制代码

向'.aa'选择器中添加新元素p。

16. $('selector').bind('event','handler')

<div class="a">123</div>
复制代码

$('.a').bind('click',(e)=>{
  console.log(e.currentTarget.innerText)
})
复制代码

17. $('selector').hide('slow')
    让selector慢慢隐藏，也可以不设置参数--直接隐藏。

18. $('selector').scrollTop(value)
    可以用来实现点击回到顶部。

$('body').click(()=>{
    $(window).scrollTop(0);
})
复制代码

19. $('selector').scroll(function)
    页面滑动时激活函数。

$(window).scroll(function () {
  console.log($(window).scrollTop())
});
复制代码