3. $()下的常用方法
生活随笔
收集整理的這篇文章主要介紹了
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{width: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); //當滾動條滾動之后 滾動條頂端至瀏覽器頂端的距離 })?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
轉載于:https://www.cnblogs.com/wssjzw/p/9108423.html
總結
以上是生活随笔為你收集整理的3. $()下的常用方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python相关背景及语言特点
- 下一篇： 下拉插件dropload js时间计算