昨天总结了jquery的常用语法（上），本来想着过两天再总结，但是，我要改掉我拖拉的毛病，今天就把jquery的常用语法（下）总结出来。

事件

页面载入

1. ready（）

其实这个事件原来的写法是: $(document).ready(function(){}),但是这个作者觉得这样写太麻烦了，所以就直接改成了：$(function(){}),这两种写法是等价的。而在js原生中，其实它和window.onload = function(){}是一样的作用，但又有不同点。

事件处理

1.on（）

在jquery中所有的事件都默认为用事件监听的方式来处理，而on（）也是用得最多的一个。

用法：

$('div').on('click',function(){}),这样即使页面中有1000个div，也会为他们都绑定上这个监听事件，而js原生中，事件只能绑定一个，后面再绑定，会覆盖掉前面已经绑定的事件。
也可以添加多个事件处理函数：

<script>
.$( "div.test" ).on({click: function() {
 $( this ).toggleClass( "active" );}, mouseenter: function() 
 {
 $( this ).addClass( "inside" );
 },
 mouseleave: function() {
  $( this ).removeClass( "inside" );
 }
});
</script>

可以用on（），来实现事件委托，而且比js原生代码方便。可以把当前事件源的选择器写在第二个参数里就可以了。

$('div').on('click','.p',function(){})

2.off

off(),的意思是表示移出这个事件，（off的意思也是关的意思嘛，所以开是on，关是off）

不过在这里注意的一点是，不能直接像下面这样写：

$('.btn').on('click,function(){
    $('div').off('click')
}')

你会发现，你这样写了以后，它还是没关掉，为什么呢？因为函数是一个引用数据类型，它会把它的函数部分赋值给一个地址，存在堆中，造成此函数已非原函数，所以这时，我们一个用一个变量把原函数存起来：

var fn = function(){
    //执行事件
}

$('.btn').on('click,function(){
    $('div').off('click'，fn)
}')

像以上这样写，就可以通过点击btn这个按钮移除掉div上的事件。

3.one（）

one（），是用于只运行一次就移除掉的事件函数

4.trigger()

trigger(),是用于在运行时就会自己调用一次的函数

5.hover（）

hover（）在css象中，代表的是鼠标滑过事件，但是在jquery中，代表的是mouseenter()和mouseleave()的组合体,书写方式如下：

$('div').hover(function () {
    // mouseenter
    console.log('enter')
  }, function () {
    // mouseleave
    console.log('leave')
  })

其实还有两组与之相似，他们分别是mouseover,mouseout,但这两个用得较少，因为，如果你用他们写事件，他们会出现一些“不和谐”的现象，所以这两个简单提一提。

事件对象

1.eve.preventDefault

这个主要用于阻止浏览器的默认事件，这个主要是什么意思呢，浏览器中点击右键弹出快捷菜单，点击超级链接跳转刷新页面，表单中点击提交按钮能够提交表单，但在实际的项目中，我们并不需要整个页面的跳转，而只是局部的刷新，所以这时候就会用到阻止浏览器的默认行为。

$('a').on('click',function(){
    $(this).preventDefault;
})

### 2.eve.stoppropagation

这个主要是用于阻止冒泡事件，冒泡事件是什么意思呢？假如我们有一组以下列表，当我们给li绑定事件却没有阻止冒泡事件时，浏览器就会默认找到所有的li元素。当我们添加了阻止冒泡事件后，它就会只找当前的li元素。

动画效果

基本

show（）

显示，相当于js中的display:block/inline-block

hide()

隐藏，相当于js中的display:none

滑动

slideDown

向下展出，

语法：

$('btn').on('click',function(){
    $('div').slideDown(1000)
})

slideUp

向上收缩，

语法：

$('btn').on('click',function(){
    $('div').slideUp(1000)
})

slideToggle

先向下展开，再向上收缩，

语法：

$('btn').on('click',function(){
    $('div').slideToggle(1000)
})

其他的

fadeIn()
fadeOut()
fadeTo() ，里面可以先填时间，再填透明度（1000，0.5），表示，在1秒内，透明度由0变到0.5
fadeToggle()

以上主要是一个透明度的变化

其实都是差不多的效果

animate

自定义动画，可以自己定义怎么移动，轮播图做过，

$('div').animate({
    width:200px,
    height:100px
    opacity:0.5
},1000,funtion(){
    //动画的回调
})

自定义动画的用处还是挺大的！！！

jquery常用语法总结（下）