史上最全的jquery精华总结，拿走不谢，本人一个字一个字敲的，欢迎评论区讨论

<!-- 改变CSS样式 -->
$('.box').css('background','red');
$('li').filter('.box').css('background','red');<!-- 意思是选中li里面的class=box的元素 -->
<!-- jq方法函数化 -->
$(function(){
    $('#div1').click(function(){
        alert($(this).HTML());<!-- jq的写法 -->
        alert(this.innerHTML);<!-- js的写法 -->
    });
});

$(function(){
    $('li').html('hello');<!-- 当一组元素的时候，赋值是一组中的所有元素 -->
})
$(function(){
    alert($('li').html());<!-- 当一组元素的时候，取值是一组中的第一个 -->
})
eg:<ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
   </ul>
   
增加属性：
$(function(){
    $('div').attr('title','456');
    $('div').attr('class','box');
})

过滤选择器：filter:过滤
$(function(){
    $('div').filter('.box').css('background','red');
    <!-- 只会选中div里面class=box的元素-->
});

not:
$(function(){
    $('div').not('.box').css('background','red');
    <!-- 选中div里面除了class=box的元素-->
});
has:包含
$(function(){
    $('div').has('span').css('background','red');
    <!-- 选中div里面包含span的元素-->
});
filter和has的区别：
filter只会过滤div里面有相应属性(父元素的属性)的元素;
has只会选中包含元素(父元素的子元素)的元素;

$(function(){
    <!-- 添加class样式-->
    $('div').addClass('box2 box4');
    <!-- 移除class样式 -->
    $('div').removeClass('box1');
});

before和insertBefore的区别：
$('div').before($('span')).css('background','red');<!-- 这里面后续css操作的是div元素 -->
$('span').insertBefore($('div')).css('background','red');<!-- 这里面后续CSS操作的是span元素 -->
eg：
    <div>div</div>
    <span>span</span>

appendTo的用法:
$(function(){
    $('div').appendTo($('span'));
})<!-- 表示div嵌套在span里面的后面了 -->

prependTo的用法:
$('div').prependTo($('span'));
<!-- 表示div嵌套在了span里面的前面了 -->

$('div').remove();<!-- 此方法是删除了div元素 -->
$('div').on('click mouseover',function(){
    alert(123);<!-- 此方法可以添加多个事件，让多个事件同时执行一种操作-->
});
$('div').on({
    'click':function(){
        alert(123);
    },
    'mouseover':function(){
        alert(456);
    }
});<!-- 此方法可以让一个选中元素，同时具有多个事件的功能 -->

$('div').on('click',function(){
    alert(123);
    $('div').off();<!-- 此方法可以让选中的元素 执行完事件之后关闭事件-->
});
$('div').on('click mouseover',function(){
    alert(123);
    $('div').off('mouseover');<!-- 此方法可以取消mouseover的功能-->
});

$(document).click(function(){
    alert($(window).scrollTop());
    <!-- 获取滚动距离-->
});

$(function(){
   var oDiv = $('<div>div</div>');
   $('body').append(oDiv);
   <!-- 创建div元素,并且嵌入到body元素中 -->
});

$('div').one('click',function(){
    alert(123);<!-- one表示只执行一次事件 -->
});

$('div').click(function(ev){
    ev:event对象
    ev.pageX(相对于文档的，获取鼠标横坐标) : clientX(相对于可视区)；
    ev.which:keyCode <!-- 获取键值-->
    ev.preventDefault();<!-- 阻止默认事件 -->
    ev.stopPropagation();<!-- 阻止冒泡的操作 -->
    return false; <!-- 既阻止默认事件，又阻止冒泡操作-->
})

$('#div2').offset().left <!-- 获取到屏幕的左距离-->

$(function(){
    alert($('#div2').offset().left)<!-- 获取到屏幕的左距离 -->
    alert($('#div2').position().left);<!-- 到有定位的父级的left值,把当前元素转化成类似定位的形式 -->
})

$(function(){
       $('#div1').hover(function(){<!-- 其中第一个function指的是鼠标进入的状态 -->
           $(this).css('background','blue');
       },function(){<!-- 其中第二个function指的是鼠标离开的状态 -->
           $(this).css('background','red');
       });
});

$(function(){
       $('#div1').hover(function(){<!-- 其中第一个function指的是鼠标进入的状态 -->
           $('#div2').hide(3000);<!-- 鼠标移入时显示 -->
       },function(){<!-- 其中第二个function指的是鼠标离开的状态 -->
           $('#div2').show(3000);<!-- 鼠标离开时隐藏 -->
       });
});

$(function(){
       $('#div1').hover(function(){<!-- 其中第一个function指的是鼠标进入的状态 -->
           $('#div2').fadeOut(1000);<!-- 鼠标移入时逐渐消失 fadeOut淡出，里面的参数默认值是400-->
       },function(){<!-- 其中第二个function指的是鼠标离开的状态 -->
           $('#div2').fadeIn(1000);<!-- 鼠标离开时逐渐显示 fadeIn淡入 里面的参数默认值是400-->
       });
});

$(function(){
       $('#div1').hover(function(){<!-- 其中第一个function指的是鼠标进入的状态 -->
           $('#div2').slideUp(1000);<!-- 鼠标移入时逐渐向上收缩-->
       },function(){<!-- 其中第二个function指的是鼠标离开的状态 -->
           $('#div2').slideDown(1000);<!-- 鼠标离开时逐渐向下展开，参数是时间-->
       });
});

$(function(){
       $('#div1').hover(function(){<!-- 其中第一个function指的是鼠标进入的状态 -->
           $('#div2').fadeTo(1000,0.5);<!-- 鼠标移入时(1s内)逐渐到达相对应的透明度状态-->
       },function(){<!-- 其中第二个function指的是鼠标离开的状态 -->
           $('#div2').fadeTo(1000,1);<!-- 鼠标离开时(1s内)逐渐到达相对应的透明度状态-->
       });
});