Penjelasan terperinci tentang position() jQuery method

Penjelasan terperinci tentang position() jQuery method_jquery

WBOY

Lepaskan： 2016-05-16 15:49:39

asal

1542 orang telah melayarinya

Takrifan dan penggunaan kaedah position():

Kaedah ini mendapat pengimbangan unsur yang dipadankan berbanding beberapa elemen.

Objek yang dikembalikan mengandungi objek dengan dua atribut integer (atas dan kiri).

Kaedah ini hanya berfungsi pada elemen yang boleh dilihat.

Struktur tatabahasa:

$(selector).position()

Salin selepas log masuk

Pada permulaan tutorial, sebab mengapa dikatakan adalah untuk mendapatkan offset elemen padanan berbanding beberapa elemen. Banyak tutorial mengatakan bahawa offset yang dikembalikan oleh kaedah adalah relatif kepada elemen induk, tetapi ini tidak sepenuhnya benar Kaedah ini akan memproses elemen padanan dengan kedudukan mutlak Sudah tentu, ia tidak bermakna elemen padanan sebenarnya ditetapkan kepada kedudukan mutlak. Prinsip rujukan offset kaedah adalah seperti berikut:

1. Jika elemen induk tidak menggunakan kedudukan (nilai atribut kedudukan adalah relatif, mutlak atau tetap), maka objek rujukan mengimbangi ialah tetingkap.

2. Jika mana-mana elemen induk menggunakan kedudukan, maka objek rujukan bagi offset ialah elemen terdekat yang menggunakan kedudukan,

Contoh kod:

<!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>

Salin selepas log masuk

Dalam kombinasi teratas dalam kod di atas, memandangkan elemen induk menggunakan kedudukan relatif, offset yang diperoleh adalah relatif kepada elemen induk. Dalam gabungan bawah, memandangkan elemen induk tidak menggunakan kedudukan, objek rujukan mengimbangi ialah tetingkap.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.