Maison > interface Web > js tutoriel > Introduction de base et exemple de démonstration du sélecteur first() dans jQuery

Introduction de base et exemple de démonstration du sélecteur first() dans jQuery

巴扎黑
Libérer: 2017-06-22 15:23:31
original
1438 Les gens l'ont consulté

Définition et utilisation

first() Réduit l'ensemble des éléments correspondants au premier élément de l'ensemble.

Syntaxe

.first()

Description détaillée

Si on lui donne un objet jQuery représentant une collection d'éléments DOM, .first() La méthode construira un nouvel objet jQuery avec le premier élément correspondant.

Considérez la page suivante avec une liste simple :

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
Copier après la connexion

Nous pouvons appliquer cette méthode à cette collection d'éléments de liste :

$(&#39;li&#39;).first().css(&#39;background-color&#39;, &#39;red&#39;);
Copier après la connexion

Exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>:first选择器</title> 
<script type="text/javascript" src="jquery-2.0.3.js"></script> 
<style type="text/css"> 
body{ 
width:7%; 
height:100%; 
font-size:24px; 
font-weight:bold; 
background-color:#CCCCFF; 
text-align:center; 
} 
</style> 
<script type="text/javascript"> 
$(function(){ 
//设置ul中的第一个li的背景色,运用到:first选择器 
$("li:first").css("background-color","#00DDDD"); 
//设置ol中的第一个li的背景色,运用到:first选择器 
$(".two li:first").css("background-color","#0000CC"); 
//设置ol中的第一个li的字体颜色,运用到:first选择器 
$(".two li:first").css("color","#FFFFFF"); 
}); 
</script> 
</head> 
<body> 
<div> 
<ul class="one"> 
<li>苹果</li> 
<li>梨子</li> 
<li>橘子</li> 
<li>西瓜</li> 
<li>荔枝</li> 
<li>葡萄</li> 
<li>香蕉</li> 
<li>香瓜</li> 
</ul> 
<ol class="two"> 
<li>苹果</li> 
<li>梨子</li> 
<li>橘子</li> 
<li>西瓜</li> 
<li>荔枝</li> 
<li>葡萄</li> 
<li>香蕉</li> 
<li>香瓜</li> 
</ol> 
</div> 
</body> 
</html>
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal