3. $()下的常用方法

addClass() removeClass()
width() innerWidth() outerWidth()
insertBefore() before()
insertAfter() after()
appendTo() append()
prependTo() prepend()
remove()
on() off()
scrollTop()

样式操作：addClass() 添加样式 removeClass() 删除样式

$('div').addClass('box2 box4')  //给div元素添加class名为 box2 和 box4 的样式,不影响原来的样式 
$('div').removeClass('box1')  //删除div元素class名为 box1 的样式,不影响原来的样式。

元素宽度：width() outerWidth() innerWidth()

//style:
div{100px;height:100px;background:red;padding:10px;border:10px solid #000;margin:10px;}
//html:
<div>div</div>
$('div').width()  //100 盒模型content区域
$('div').innerWidth() //120 盒模型padding+content区域
$('div').outerWidth() //140 完整盒模型
【特殊】$('div').outerWidth(true) //160 完整盒模型+margin区域

位置变化：inserBefore() before() inserAfter() after() appendTo() append() prependTo() prepend()

//inserBefore() inserAfter() appendTo() prependTo()
//html:
<div>div</div>
<span>span<span>
$('span').insertBefore( $('div') ); //将span元素放置在div元素前面
//结果：
 <span>span</span>
 <div>div</div>
//延用上面html
$('div').insertAfter( $('span') );  //将div元素放置在span元素后面
$('div').appendTo( $('span') );  //将div元素放置在【span元素内】的最后位置
$('div').prependTo( $('span') ); //将div元素放置在【span元素内】的最前位置

//before after append prepend
 //上述方法类似动词 将 【谁谁】 的位置改到 【某某】 地方
 //这些方法类似名字 规定 【谁谁】 的位置 必须在 【某某】 地方
$('div').before( $('span') ) //规定div必须在span前方,符合规定内容不变;否则按规则改变位置[将div移到span前面]

【区别:操作元素不同】
$('div').before( $('span') ).css('background','red'); //div变红
$('div').inserBefore( $('span') ).css('background','red'); //span元素变红

事件操作：remove() on() off() scrollTop()

html:
<div>div</div>
<span>span</span>

$('div').remove();  //删除所有选中的div元素

//对比直接链接事件方法
$('div').click(function(){});
$('div').on('click',function(){
  alert(123);
})
//对自定义事件进行操作
$('div').on('show',function(){
  alert(123);
})
//同时对多个事件进行操作
$('div').on('mousevoer mouseout',function(){
  alert(123);
})
//不同事件不同操作
$('div').on({
  'click': function(){
    alert(123);
  },
  'mouseover':function(){
     alert(456);
   }
})

$('div').on('mouseover mouseout',function(){
   $('div').off();  //阻止所有事件
   $('div').off('mouseover'); //阻止鼠标移入事件
})

//html:
<body style="height:2000px;">
  <div>div</div>
  <span>span</span>
</body>
$('document').click(function(){
   alert($(window).scrollTop); //当滚动条滚动之后 滚动条顶端至浏览器顶端的距离
})