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();防止动画叠加；