jQuery的position()方法詳解
position()方法的定義和用法:
此方法獲取匹配元素相對(duì)某些元素的偏移量。
返回的對(duì)象包含兩個(gè)整型屬性(top和left)的對(duì)象。
此方法只對(duì)可見(jiàn)元素有效。
語(yǔ)法結(jié)構(gòu):
$(selector).position()
在教程的開頭之所以說(shuō)是獲取匹配元素相對(duì)于某些元素的偏移量。很多教程都說(shuō)方法返回的偏移量是相對(duì)于父元素,其實(shí)并非完全如此,此方法會(huì)將匹配元素以絕對(duì)定位方式處理,當(dāng)然并不是說(shuō)真的將匹配元素設(shè)置為絕對(duì)定位。方法的偏移量參考原則如下:
1.如果父輩元素中沒(méi)有采用定位的(position屬性值為relative、absolute或者fixed),那么偏移量參考對(duì)象為窗口。
2.如果父輩元素中有采用定位的,那么偏移量的參考對(duì)象為距離它最近的采用定位的元素,
實(shí)例代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.father{
background-color:green;
width:200px;
height:200px;
padding:50px;
margin-bottom:50px;
margin-left:100px;
}
.children{
height:150px;
width:150px;
background-color:red;
line-height:150px;
text-align:center;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".children").each(function(){
var text;
text="left:"+$(this).position().left;
text+="top:"+$(this).position().top;
$(this).text(text);
})
})
</script>
</head>
<body>
<div class="father" style="position:relative">
<div class="children"></div>
</div>
<div class="father">
<div class="children"></div>
</div>
</body>
</html>
在以上代碼中頂部組合,由于父元素采用的是相對(duì)定位,那么獲取的偏移量就是相對(duì)于父元素的。在底部的組合中,由于父元素沒(méi)有采用定位,那么偏移量參考對(duì)象就是窗口。
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
相關(guān)文章
jQuery模擬完美實(shí)現(xiàn)經(jīng)典FLASH導(dǎo)航動(dòng)畫效果【附demo源碼下載】
這篇文章主要介紹了jQuery模擬完美實(shí)現(xiàn)經(jīng)典FLASH導(dǎo)航動(dòng)畫效果,通過(guò)jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式實(shí)現(xiàn)flash切換的效果,非常經(jīng)典實(shí)用,文末還提供了demo源碼供讀者下載學(xué)習(xí)或使用,需要的朋友可以參考下2016-11-11
JavaScript的jQuery庫(kù)中function的存在和參數(shù)問(wèn)題
這篇文章主要介紹了JavaScript的jQuery庫(kù)中function的存在和參數(shù)問(wèn)題,包括function的參數(shù)傳遞和檢測(cè)一個(gè)jQuery方法是否存在等,需要的朋友可以參考下2015-08-08
jQuery實(shí)現(xiàn)的手動(dòng)拖動(dòng)控制進(jìn)度條效果示例【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的手動(dòng)拖動(dòng)控制進(jìn)度條效果,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-04-04
MultiSelect左右選擇控件的設(shè)計(jì)與實(shí)現(xiàn)介紹
由于項(xiàng)目中用到左右選擇的控件,網(wǎng)上找了一些相關(guān)的實(shí)現(xiàn),基本上有兩個(gè):1、基于JQuery UI的控件2、某個(gè)兄弟手寫的一個(gè)控件,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈2013-06-06
jquery實(shí)現(xiàn)select選中行、列合計(jì)示例
這篇文章主要介紹了jquery如何實(shí)現(xiàn)select選中行、列合計(jì)示例 ,需要的朋友可以參考下2014-04-04
jquery 插件開發(fā) extjs中的extend用法小結(jié)
在jquery中,extend其實(shí)在做插件時(shí)還是用的比較多的,今天同時(shí)小結(jié)jquery和ext js中的extend用法,有需要的朋友可以參考下2013-01-01
jQuery實(shí)現(xiàn)簡(jiǎn)單計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07
jquery動(dòng)態(tài)添加以及遍歷option并獲取特定樣式名稱的option方法
下面小編就為大家分享一篇jquery動(dòng)態(tài)添加以及遍歷option并獲取特定樣式名稱的option方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01

