JQuery笔记02

JQuery笔记02

jQuery设置css样式：

        //$('#box').css('style', 'value');
        $('.box').css({
            width: '100px',
            height: '314px'
        })
        // JSON对象：
        $('.box').css({
            'width': '100px',
            'height': '120px'
        })

jQuery的css()函数如果只传样式名，则返回该样式的值，注意返回的颜色是RGB
多个符合条件的则返回第一个的值

//类名操作
$('.box').addClass('one two');
不会覆盖掉已有的不同类
$('.box').removeClass('one');
//判断是否有这个类名：
$('.box').hasClass('one')
//有则删除，无则添加
$('.box').toggleClass('one');

jQuery创建元素:

$('<span>haha</span>')
//添加
$(document.body).append($('<span>haha</span>'));
$(document.body).append('<span>haha</span>');
$(document.body).append(document.createElement('div'));

/*append也有剪贴效果，如果是个jQuery组调用append，则会每个下面都添加。
 .after() 变为自己的下一个兄弟
 .before() 变成自己的上一个兄弟
*/
$('.box').html('<span></span>') //相当于innerHTML

清空和删除元素：

empty()删除子元素
remove()删掉自己
clone(boolean) 复制节点，默认 false ，复制全部内容, 如果传 true ， 会连同注册事件一起复制’不能复制用原生方式注册的事件

jQuery动画：

• .show / .hide / .toggle(speed, linear / swing, callback - function) 同时改变宽高透明度

• .slideDown / .slideUp / .slideToggle(speed, linear / swing, callback - function)

• .fadeIn / .fadeout / .fadeToggle(speed, linear / swing, callback - function)

animate：
animate(json , speed , linear / swing , callback)
注意属性必须是带数字的属性

        $("button").click(function () {
            var div = $("div");
            div.animate({ left: '100px' }, "slow");
            div.animate({ fontSize: '3em' }, "slow");
        });

stop(是否清除动画队列 , 是否跳到当前动画最终效果)解决动画队列问题，默认都是false
- F F 立即执行下一个动画 （默认）
- T F 定在当前（常用）常用在注册动画之前，加一个.stop(true)
- T T 直接展示当前动画最终效果，并停止
- F T 直接展示当前动画最终效果，并开始下一个动画