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
});
相关方法：
- height() - 设置或返回元素的高度
- innerWidth() - 返回元素的宽度（包含 padding）
- innerHeight() - 返回元素的高度（包含 padding）
- outerWidth() - 返回元素的宽度（包含 padding 和 border）
- outerHeight() - 返回元素的高度（包含 padding 和 border）
insertBefore(); 找到元素节点，把它移动到元素的前面去，是剪切、不是复制。（insertBefore() 方法在被选元素前插入 HTML 元素）
$('span').insertBefore( $('div') );
// 下面这种写法也可以
<script>
$(document).ready(function(){
$("button").click(function(){
$("<span>Hello world!</span>").insertAfter("p");
});
});
</script>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script> <script> //appendTo : appendChild $(function(){ //$('span').insertBefore( $('div') ); //$('div').insertAfter( $('span') ); 原生JS是没有这个方法的 //$('div').appendTo( $('span') ); //$('div').prependTo( $('span') ); 原生JS里没有这个方法 //区别 ：后续操作变了 //$('span').insertBefore( $('div') ).css('background','red'); 这里是span的背景色变红 $('div').before( $('span') ).css('background','red'); // 这里是div的背景变红 }); </script> </head> <body> <div>div</div> <span>span</span> </body> </html>
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()