addClass() 、 removeClass()方法：

 

$('div').addClass('box1 box2');  // 注意，这里的样式之间是用空格来分隔的, 其中如果添加了已经存在的css，JQuery会自动判断，不用担心；

$('div').removeClass('box1');  // 移除样式也是这个道理；

 

思考：如何用原生JS来实现addClass方法？

 

width() 方法： 设置或返回被选元素的宽度

$('div').width();

 

$(function(){

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

　　　　alert( $('div').innerWidth() ); //width + padding

　　　　alert( $('div').outerWidth() ); //width + padding + border

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

});

 

相关方法：

•  - 设置或返回元素的高度
•  - 返回元素的宽度（包含 padding）
•  - 返回元素的高度（包含 padding）
•  - 返回元素的宽度（包含 padding 和 border）
•  - 返回元素的高度（包含 padding 和 border）

 

insertBefore();   找到元素节点，把它移动到元素的前面去，是剪切、不是复制。（insertBefore() 方法在被选元素前插入 HTML 元素）

  $('span').insertBefore( $('div') );

 

// 下面这种写法也可以

<script>

　　$(document).ready(function(){

　　  $("button").click(function(){

　　    $("<span>Hello world!</span>").insertAfter("p");

　　  });

　　});

</script>

 

     
      div
     
span

 

on()方法，支持自定义事件，也可以同时写多个事件；

off()是取消该事件；

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

 

 

scrollTop();

// $(window).scrollTop()