Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung der position() method_jquery von jQuery

WBOY
Freigeben: 2016-05-16 15:49:39
Original
1497 Leute haben es durchsucht

Definition und Verwendung der Methode position():

Diese Methode ermittelt den Offset des übereinstimmenden Elements relativ zu einem anderen Element.

Das zurückgegebene Objekt enthält ein Objekt mit zwei ganzzahligen Attributen (oben und links).

Diese Methode funktioniert nur bei sichtbaren Elementen.

Grammatikstruktur:

$(selector).position()
Nach dem Login kopieren

Zu Beginn des Tutorials wird gesagt, dass es darum geht, den Versatz des passenden Elements relativ zu einigen Elementen zu ermitteln. In vielen Tutorials heißt es, dass der von der Methode zurückgegebene Offset relativ zum übergeordneten Element ist, aber das ist nicht ganz richtig. Diese Methode verarbeitet das übereinstimmende Element mit absoluter Positionierung. Dies bedeutet natürlich nicht, dass das übereinstimmende Element tatsächlich festgelegt ist absolute Positionierung. Das Offset-Referenzprinzip der Methode lautet wie folgt:

1. Wenn das übergeordnete Element keine Positionierung verwendet (der Positionsattributwert ist relativ, absolut oder fest), dann ist das Offset-Referenzobjekt das Fenster.

2. Wenn eines der übergeordneten Elemente die Positionierung verwendet, ist das Referenzobjekt des Offsets das nächstgelegene Element, das die Positionierung verwendet,

Beispielcode:

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

Nach dem Login kopieren

Da in der oberen Kombination im obigen Code das übergeordnete Element eine relative Positionierung verwendet, ist der erhaltene Versatz relativ zum übergeordneten Element. Da in der unteren Kombination das übergeordnete Element keine Positionierung verwendet, ist das versetzte Referenzobjekt das Fenster.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!