Rumah > Artikel > hujung hadapan web > Analisis perbezaan antara offset() dan position() dalam Jquery_jquery

Analisis perbezaan antara offset() dan position() dalam Jquery_jquery

WBOYasal: 2016-05-16 16:15:301120semak imbas

Artikel ini menganalisis perbezaan antara offset() dan position() dalam Jquery melalui contoh. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

1. offset() dalam Jquery

Dapatkan offset relatif bagi elemen padanan dalam port pandangan semasa. Kedudukan sentiasa dikira secara relatif kepada dokumen, tanpa mengira atribut kedudukan unsur induk atau nenek moyang elemen.
Objek yang dikembalikan mengandungi dua sifat integer: atas dan kiri. Kaedah ini hanya berfungsi pada elemen yang boleh dilihat.

Contohnya:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p { margin-left:10px; } 
</style> 
<script src="js/jquery.js"></script> 
</head> 
<body> 
 <p>Hello</p><p>2nd Paragraph</p> 
<script>
var p = $("p:last"); 
var offset = p.offset(); 
p.html( "left: " + offset.left + ", top: " + offset.top );
</script> 
</body> 
</html>

2. kedudukan() dalam Jquery

Dapatkan offset elemen padanan berbanding dengan elemen induk. Secara umumnya, ia ialah kedudukan unsur induk atau unsur nenek moyang terdekat bagi unsur yang mengandungi kedudukan:relatif. Jika tiada unsur induk atau nenek moyang seperti itu ditemui, kedudukan dikira secara relatif kepada dokumen (iaitu, sudut kiri atas port pandangan Objek yang dikembalikan mengandungi dua sifat integer: atas dan kiri. Untuk pengiraan yang tepat, gunakan unit piksel untuk sifat pengisi, sempadan dan isian.

Contohnya:

<!DOCTYPE html> 
<html> 
<head> 
 <style> 
 div { padding: 15px;} 
 p { margin-left:10px; } 
 </style> 
 <script src="jquery脚本URL"></script> 
</head> 
<body> 
<div> 
 <p>Hello</p> 
</div> 
<p></p> 
<script> 
var p = $("p:first"); 
var position = p.position(); 
$("p:last").text( "left: " + position.left + ", top: " + position.top ); 
</script> 
</body> 
</html>

3. Perbezaan antara offset() dan position()

1. Kaedah offset() memperoleh offset relatif bagi elemen padanan dalam tetingkap semasa. Tetingkap di sini merujuk kepada tetingkap halaman semasa, tidak termasuk bar menu penyemak imbas, dll. Sudah tentu, kita tidak perlu menggunakan jquery untuk mengawal keseluruhan pelayar Apa yang kita mahu kawal ialah tetingkap halaman.

2. Kaedah position() memperoleh offset elemen padanan berbanding dengan elemen induk. Iaitu, apa yang diperolehi ialah offset elemen relatif kepada elemen induk terdekat dengan kedudukan mutlak atau kedudukan relatif. Jika semua elemen induk berada dalam mod penentududukan statik lalai, kaedah pemprosesan adalah sama seperti offset(), iaitu offset bagi tetingkap semasa.

3. Apabila menggunakan kaedah position(), jika semua elemen induknya berada dalam mod penentududukan lalai (statik), kaedah pemprosesan adalah sama seperti offset(), iaitu offset relatif bagi tetingkap semasa

4. Menggunakan kaedah offset(), tidak kira bagaimana elemen diletakkan atau elemen induknya diposisikan, offset elemen relatif kepada viewport semasa diperolehi.

5. Dalam keadaan biasa, jika elemen B yang akan dipaparkan disimpan di bawah elemen induk yang sama bagi elemen A (iaitu, B ialah nod adik-beradik A), adalah paling sesuai untuk menggunakan position() pada ini masa; jika elemen B yang akan dipaparkan disimpan di bahagian atas atau bawah DOM (iaitu, elemen induknya ialah badan). Sebaik-baiknya gunakan offset() pada masa ini.

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.

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：Penyelesaian kepada masalah kebocoran memori apabila menggunakan jQuery untuk menetapkan semula alamat iframe di bawah IE_jqueryArtikel seterusnya：Penyelesaian kepada masalah kebocoran memori apabila menggunakan jQuery untuk menetapkan semula alamat iframe di bawah IE_jquery

Artikel berkaitan

Lihat lagi