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({'300',height:'300'},1000);

animate({......},....,function(){

  回调函数;

  在整个动画效果执行完毕之后执行;

});

$('.div1').animate({'300',height:'300'},1000,function(){

  

});

$('.div1').mouseover(function () {

$('.div2').stop().animate({'300'},500);

}).mouseout(function () {

$('.div2').stop().animate({'0'},500);

});

//每次动画执行之前都stop();防止动画叠加;

原文地址:https://www.cnblogs.com/xinchenhui/p/8118920.html