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); //当滚动条滚动之后 滚动条顶端至浏览器顶端的距离 })