Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie GT- und LT-Selektoren in JQuery

So verwenden Sie GT- und LT-Selektoren in JQuery

WBOY
WBOYOriginal
2022-06-01 18:36:103302Durchsuche

Die gt- und lt-Selektoren in jquery: 1. Der „:gt“-Selektor wird verwendet, um Elemente mit einem Indexwert auszuwählen, der höher als der angegebene Wert ist. Die Syntax lautet „$(“:gt(index value)““; 2. Der Selektor „:lt“ wird verwendet, um Elemente auszuwählen, deren Indexwert kleiner als der angegebene Wert ist. Die Syntax lautet „$(“:lt(index)“).

So verwenden Sie GT- und LT-Selektoren in JQuery

Die Betriebsumgebung dieses Tutorials: Windows10-System, JQuery3.2.1-Version, Dell G3-Computer.

Die gt- und lt-Selektoren in jquery

:gt-Selektor

:gt-Selektor wählt Elemente aus, deren Indexwert höher als die angegebene Zahl ist.

Indexwert beginnt bei 0.

Wird oft in Verbindung mit anderen Elementen/Selektoren verwendet, um Elemente nach einer bestimmten Nummer in einer bestimmten Gruppe auszuwählen (wie im obigen Beispiel).

Syntax

$(":gt(index)")

Index erforderlich. Gibt die auszuwählenden Elemente an.

wählt Elemente aus, deren Indexwert größer als die angegebene Zahl ist.

:lt() Selector

:lt() Selector wählt Elemente aus, deren Indexwert kleiner als die angegebene Zahl ist.

Indexwerte beginnen bei 0.

Die häufigste Verwendung: Wird mit anderen Selektoren verwendet, um Elemente vor einer bestimmten Sequenznummer in einer bestimmten Kombination auszuwählen (wie im obigen Beispiel).

Die Syntax lautet:

$(":lt(index)")

Das Beispiel lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("tr:lt(4)").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>欢迎来到我的主页</h1>
<table border="1">
  <tr>
    <th>序号</th>
    <th>站点名</th>
    <th>网址</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Google</td>
    <td>google.com</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Runoob</td>
    <td>runoob.com</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Taobao</td>
    <td>taobao.com</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Baidu</td>
    <td>baidu.com</td>
  </tr>
  <tr>
    <td>5</td>
    <td>Sina</td>
    <td>sina.com.cn</td>
  </tr>
  <tr>
    <td>6</td>
    <td>Facebook</td>
    <td>facebook.com</td>
  </tr>
  <tr>
    <td>7</td>
    <td>twitter</td>
    <td>twitter.com</td>
  </tr>
  <tr>
    <td>8</td>
    <td>youtube</td>
    <td>youtube.com</td>
  </tr>
  
</table>
</body>
</html>

Ausgabeergebnis:

So verwenden Sie GT- und LT-Selektoren in JQuery

Empfohlene verwandte Video-Tutorials: jQuery-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo verwenden Sie GT- und LT-Selektoren in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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