JQuery选择器，事件，DOM操作,动画
JQuery是一个JavaScript代码库，或者是JavaScript框架；
1、选择器：(和CSS选择器一致)
基本选择器：ID选择器$('#div1');Class选择器('.div1');标签选择器('img');
并列选择器('用逗号隔开');后代选择器('用空格隔开');
2、过滤选择器：
first：$('.div1:first').click(function(){});
last：$('.div1:last').click(function(){});
eq(索引号)：$('.div1:eq(0)').click(function(){});
not(选择器)：$('.div1:not(#aa)').click(function(){}); //排除所有class为div1，id为aa的点击事件；
[属性名]：$('.div1[data-aaa]').click(function(){});//只有有[data-aaa]属性的div才有点击事件；
[属性名=值]：$('.div1[data-aaa==aaa]').click(function(){});
[属性名!=值]：$('.div1[data-aaa!=aaa]').click(function(){});
$('.div1:not(.div1[data-aaa])').click(function(){});//排除所有.div1属性名为[data-aaa]的点击事件；
contains(字符串)：$('div1:contains(aa)').click(function(){});
has(选择器)：$('.div1:has(#div)').click(function(){});//
3、事件：
JQuery事件：把JS事件的on去掉即可；
click：点击事件；dblclick：鼠标双击事件；mouseover：鼠标移入事件；mouseout鼠标移出事件；
foucs：元素获得焦点事件；blur：失去焦点事件；keydown：按键按下事件；keyup：按键抬起事件；
4、复合事件：
$('.div1').hover(function(){},function(){});//相当于monseover和movseout的组合；
5、事件冒泡：父级div包含子级div的时候，如果父级子级都有点击事件的话会他们两个的点击事件都会触发；
阻止事件冒泡：return false；
6、DOM操作：
属性操作：
获取属性：var a = $('.div').attr('属性名');
设置属性：var a = $('.div').attr('属性名','属性值');
删除属性：$('.div1').removeAttr('属性名');
样式操作：
获取样式：var a = $('.div').css('样式名');
设置样式：$('.div').css('样式名','值');//也可以修改样式
操作样式表的class：
添加class名：$('.div1').addClass('class名');
移除class名：$('.div1').removeClass('class名');
表单元素取值赋值：
取值：var a = $('.div1').val();
赋值：$('.div1').val('值');
非标单元素取值赋值：
取值：var a = $('.div1').html(); var a = $('.div1').text();
赋值：var a = $('.div1').html('值'); var a = $('.div1').text('值');
相关元素操作：
父级：parent();//他的父级;
parents('选择器');//他的父级们;
平级：prev();//他的上一级;
prevAll();//他的上级们;
next();//他的下级;
nextAll();//他的下级们;
添加：
内部添加：$('.div1').appen($('HTML字符串'));
下部平级添加：$('.div1').after($('HTML字符串'));
上部平级添加：$('.div1').before($('HTML字符串'));
移除：
清空内部所有元素：$('.div1').empty();
移除元素：$('.div1').remove('想要移除的元素');
7、动画
$('.div1').show();//相当于给class='div1';加了个display=block;
$('.div1').hide();//相当于给class='div1';加了个display=none;
$('.div1').slideUp();
$('.div1').slideDown();
$('.div1').fadeIn();
$('.div1').fadeOut();
//效果和sildedown，slideup一样，只不过是淡入淡出；
//slideUp(),slideDown()可以组成一套下拉菜单动画 $('.btn_1').click(function(){ if($('.div1').css('display')==none) { $('.div1').slideDown(); }else { $('.div1').slideUp(); } });
自定义动画：
animate({json类型的键值对},时间单位毫秒);
$('.div1').animate({width:'300',height:'300'},1000);
animate({......},....,function(){
回调函数;
在整个动画效果执行完毕之后执行；
});
$('.div1').animate({width:'300',height:'300'},1000,function(){
});
$('.div1').mouseover(function () {
$('.div2').stop().animate({width:'300'},500);
}).mouseout(function () {
$('.div2').stop().animate({width:'0'},500);
});
//每次动画执行之前都stop();防止动画叠加；
