Detaillierte Erläuterung der position() method_jquery von jQuery-js-Tutorial-php.cn

Detaillierte Erläuterung der position() method_jquery von jQuery

WBOY

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

Original

1558 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.