ホームページ ウェブフロントエンド jsチュートリアル jQuery の first() セレクターの基本的な紹介とサンプル デモンストレーション

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

Jun 22, 2017 pm 03:23 PM
first jquery 導入 基本 セレクタ

定義と使用法

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常​​、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエスト メソッドを使用した具体的なコード例です。まず、jQuery ライブラリ ファイルが含まれていることを確認してから、$.ajax({u

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキスト コンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリ ファイルを導入し、次のコードがページに導入されていることを確認する必要があります: &lt

Samsung S24aiの機能を詳しく紹介 Samsung S24aiの機能を詳しく紹介 Jun 24, 2024 am 11:18 AM

2024 年は AI 携帯電話元年です。AI スマート テクノロジーにより、携帯電話はますます効率的かつ便利に使用できるようになります。最近、今年の初めにリリースされたGalaxy S24シリーズは、生成AIエクスペリエンスを再び改善しました。以下で詳細な機能の紹介を見てみましょう。 1. 生成 AI は Samsung Galaxy S24 シリーズを強力に強化します。Galaxy S24 シリーズは、Galaxy AI によって強化され、多くのインテリジェント アプリケーションをもたらします。これらの機能は Samsung One UI6.1 と緊密に統合されており、ユーザーはいつでも便利なインテリジェントなエクスペリエンスを得ることができ、パフォーマンスが大幅に向上します。携帯電話の効率と使いやすさ。 Galaxy S24 シリーズで先駆けて開発されたサークルアンド検索機能は、長押しするだけで実現できる機能です。

華宜山Heart of the Moon Lu Shuのスキルと特性の紹介 華宜山Heart of the Moon Lu Shuのスキルと特性の紹介 Mar 23, 2024 pm 05:30 PM

Hua Yishan Heart Moon では、Lu Shu は SSR の有名人です。彼は単一ターゲットのバックライン プレイヤーとして配置されており、非常に優れたクリティカル ヒット率を持っています。多くのプレイヤーは Lu Shu についてあまり知りません。私があなたに持ってきたものは次のとおりです。 . 華宜山心月陸朔のスキルと属性の紹介をご覧ください。有名人の属性 有名人のスキル 1. Lu Ming Shuzhong スキルの説明: Lu Ming Shuzhong スキルの説明: Lu Shu はShuzhong の Qiongqihui で生まれ、子供の頃から武術を練習しており、優れた武術のスキルを持っています。敵の後列攻撃力の100%に等しい基本攻撃ダメージを与え、対象の怒りを10ポイント減少させる。スキル属性: レベル 2: 基本攻撃ダメージが 105% に増加します。レベル 2: 基本攻撃のダメージが 110% に増加し、ターゲットの怒りが 15 ポイント減少します。レベル 2: 基本攻撃ダメージが 115% に増加しました。レベル 2: 基本攻撃のダメージが 120% に増加し、ターゲットの怒りが 20 ポイント減少します。レベル2:基本攻撃

jQuery を使用してすべての a タグのテキスト コンテンツを変更する jQuery を使用してすべての a タグのテキスト コンテンツを変更する Feb 28, 2024 pm 05:42 PM

タイトル: jQuery を使用して、すべての a タグのテキスト コンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンク タグ (タグ) のテキスト コンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。

ドージコインとは ドージコインとは Apr 01, 2024 pm 04:46 PM

Dogecoin は、インターネット ミームに基づいて作成された暗号通貨であり、固定供給上限がなく、速い取引時間、低い取引手数料、そして大規模なミーム コミュニティを備えています。用途には、少額の取引、チップ、慈善寄付が含まれます。しかし、その無限の供給、市場のボラティリティ、ジョークコインとしての地位は、リスクと懸念ももたらします。ドージコインとは何ですか? Dogecoin は、インターネットのミームやジョークに基づいて作成された暗号通貨です。起源と歴史: Dogecoin は、2 人のソフトウェア エンジニア、ビリー マーカスとジャクソン パーマーによって 2013 年 12 月に作成されました。当時人気だった「Doge」ミームからインスピレーションを得た、片言の英語を話す柴犬をフィーチャーしたコミカルな写真。特徴と利点: 無制限の供給: ビットコインなどの他の暗号通貨とは異なります。

オンラインスコアチェックプラットフォーム(便利で高速なスコア照会ツール)の紹介 オンラインスコアチェックプラットフォーム(便利で高速なスコア照会ツール)の紹介 Apr 30, 2024 pm 08:19 PM

高速スコア照会ツールは、生徒と保護者にとって利便性を高めます。インターネットの発展に伴い、ますます多くの教育機関や学校がオンライン スコア チェック サービスを提供し始めています。お子様の学業の進歩を簡単に追跡できるように、この記事では、一般的に使用されているオンラインスコアチェックプラットフォームをいくつか紹介します。 1. 利便性 - 保護者は、オンラインスコア確認プラットフォームを通じて、いつでもどこでも子供のテストスコアを確認できます。保護者は、コンピュータまたは携帯電話で対応するオンラインスコア確認プラットフォームにログインすることで、いつでも簡単に子供のテストスコアを確認できます。インターネットに接続できる環境であれば、仕事中でも外出中でも、保護者は子どもの学習状況を把握し、的を絞った指導や支援を行うことができます。 2. 複数の機能 - スコアのクエリに加えて、コースのスケジュールや試験の手配などの情報をオンラインで検索することもできます。

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? Feb 29, 2024 am 09:03 AM

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery を使用して DOM 要素を操作する場合、要素に特定の属性があるかどうかを判断する必要がある状況がよく発生します。この場合、jQuery が提供するメソッドを使用してこの関数を簡単に実装できます。以下では、jQuery 要素が特定の属性を持つかどうかを判断するために一般的に使用される 2 つの方法を紹介し、具体的なコード例を添付します。方法 1: attr() メソッドと typeof 演算子 // を使用して、要素に特定の属性があるかどうかを判断します

See all articles