ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery の first() セレクターの基本的な紹介とサンプル デモンストレーション
定義と使用法
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>
このメソッドをリスト項目のコレクションに適用できます:
$('li').first().css('background-color', 'red');
例:
<!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 サイトの他の関連記事を参照してください。