jQuery笔记（二）

$()下的常用方法

addClass()：添加样式

removeClass()：删除样式

$('div').addClass('box2 box4');
$('div').removeClass('box2 box4');

width():获取元素的宽

与css('width')的区别：width()获取时没有带单位。

alert($('div').width());
alert($('div').css('width'));

innerWidth()、outWidth()

alert($('div').innerWidth());//width+padding
alert($('div').outWidth());//width+padding+border
alert($('div').outWidth(true));//width+padding+border+margin

jQuery方法之DOM操作

$(function(){
    $('span').insertBefore($('div'));//找到span，剪切放到div前面
     $('div').insertAfter($('span'));//找到div，剪切放到span后面
    $('div').appendTo($('span'));//appendTo=appendChlid,把div放在span里面的最后一个位置
     $('div').prependTo($('span'));//把div放在span里面的第一个位置，把一个节点添加到指定节点的最开始位置
})

$(function(){
    $('div').before($('span'));//span前面必须是div
     $('div').after($('span'));//span后面必须是div
    $('div').appendTo($('span'));//appendTo=appendChlid,把div放在span里面的最后一个位置
     $('div').prependTo($('span'));//把div放在span里面的第一个位置，把一个节点添加到指定节点的最开始位置
})

before与insertBefore的区别：后续操作变了

$('div').before($('span')).css('background','red');//变红的是div
 $('span').insertBefore($('div')).css('background','red');//变红的是span
$('div').remove();//删除div

事件的写法

$(function(){
    $('div').click(function(){
        alert(123);
    });
})

或

$(function(){
    $('div').on('click mouseover',function(){
        alert(123);//可用于自定义事件,还可以同时写多个事件
    })
})

鼠标点击弹123，鼠标移入弹456,Json写法:

$(function(){
    $('div').on({
        'click':function()
         {
            alert(123);
         }
        },{
        'mouseover':function(){
            alert(456);
        }
        })
})

取消事件，还可以针对不同的取消事件：

$(function(){
    $('div').on('click mouseover',function(){
        alert(123);
    $('div').off('mouseover');//取消鼠标移入事件
    })
})
$(function(){
    $('div').on('click mouseover',function(){
        alert(123);
    $('div').off();//取消所有事件
    })
})

获取滚动距离

$(function(){
    $(document).click(function(){
        alert($(window).scrollTop());
     })

})

创建一个div

$(function(){
    document.createElement('div');//原生的写法
    var oDiv=$('<div>div</div>');
    $('body').append(oDiv);
})