jQuery の first() セレクターの基本的な紹介とサンプルデモンストレーション-jsチュートリアル-php.cn

jQuery の first() セレクターの基本的な紹介とサンプルデモンストレーション

巴扎黑

リリース： 2017-06-22 15:23:31

オリジナル

1409 人が閲覧しました

定義と使用法

first() 一致する要素のセットをセット内の最初の要素に削減します。

構文

.first()

詳細

DOM 要素のコレクションを表す jQuery オブジェクトが与えられた場合、 .first() メソッドは最初に一致する要素を持つ新しい jQuery オブジェクトを構築します。

単純なリストを含む次のページを考えてみましょう:

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

ログイン後にコピー

このメソッドをリスト項目のコレクションに適用できます:

$(&#39;li&#39;).first().css(&#39;background-color&#39;, &#39;red&#39;);

ログイン後にコピー

例:

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

ログイン後にコピー

以上がjQuery の first() セレクターの基本的な紹介とサンプルデモンストレーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。