Rumah > Artikel > hujung hadapan web > Penjelasan terperinci tentang position() jQuery method_jquery

Penjelasan terperinci tentang position() jQuery method_jquery

WBOYasal: 2016-05-16 15:49:391498semak imbas

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()

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>

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.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Kaedah Javascript untuk mendapatkan dan menetapkan kedudukan kursor_kemahiran javascriptArtikel seterusnya：Kaedah Javascript untuk mendapatkan dan menetapkan kedudukan kursor_kemahiran javascript

Artikel berkaitan

Lihat lagi