jQuery 的css、动画、操作html

jQuery的css操作

• 获取css样式 .css(‘属性名’)

	$('.box').css('color');
  	$('.box').css('font-size');
    $('.box').css('padding');

• 设置css属性

	$('.box').css('background-color','blue');
    $('.box').css('color','green');
    $('.box').css('width','100px');
    $('.box').css('height','100px');

    $('.box').css({
        width: '200px',
        height: '200px',
        color: 'yellow',
        'background-color': 'pink';
    });

• 添加类名,添加多个类名用空格隔开 $(‘.div’).addClass(‘box box1 box2 box3’)
• 移除类名 $(‘.div’).removeClass(‘box box1 box2 box3’)
• 切换类名 $(‘.div’).toggleClass(‘box box1 box2 box3’)

jQuery的动画操作

• show(动画执行时间，回调函数(动画完成之后的函数)) 显示 //下同
• hide() 隐藏
• toggle() 切换显示隐藏
• fadeIn() 淡入
• fadeOut（）淡出
• fadetoggle() 淡入淡出切换
• fadeTo(动画执行时间，透明度（0-1))动画透明度变化
• 自定义动画 animate 无法设置颜色

$('.box').animate({
            width: '100px',
            height: '100px',
            color:'green'
        })

jQuery的事件机制

• bind()和on() 用on()居多
• bind() 有三个参数，分别是event（事件）、data（额外要添加的数据）、function（执行函数）。
• on() 有四个参数，分别是event（事件）、selector（选择器）、data（额外要添加的数据,）、function（执行函数） on可以通过选择器筛选出子元素从而给子元素绑定事件。

 $('.btn').on({
        'click': function () {
            console.log('点击了');
        },
        'mouseenter': function () {
            console.log('进入了');
        }
    })

• 阻止事件冒泡 event.stopPropagation
• 阻止默认行为（跳转…）event.preventDefault

	$('input').bind('keyup', function (event) {
        console.log(event);
        event.stopPropagation();//阻止事件冒泡
        event.preventDefault();//阻止默认行为
    })

jQuery对HTML操作

• $().html（）与innerHTML类似
• $().text （）与innertext类似
• $().val() 可以设置或返回（无参数情况下）表单元素的值
• $().attr()方法，返回或设置元素的属性
• $().prop（）返回或设置元素的属性
• attr()方法，返回的是字符串，prop()方法,不能获取自定义属性。一般情况下，使用prop()方法设置获取元素