*

jQueryのセレクター3 parent/contains/hasセレクター

公開日: : 最終更新日:2015/08/03 jQuery ,

前回と同様にjQueryのセレクターを紹介します。

parentセレクター

parentセレクターは、何かしらの子要素や何かしらの
文字を含む要素を指定できるセレクタです。
CSS3のempty擬似クラスと逆のセレクターです。

contains/hasセレクター

containsセレクターは特定の文字列が含まれている要素を
hasセレクターは特定の要素が含まれている要素を指定できます。

下記のサンプルコードだと、「東京」という文字が含まれて
いるので文字が太く、赤くなります。

「神奈川」と文字列を<strong>タグで
囲っているので青くなります。

そして、parentで指定している<li>タグで何かしらの
子要素、文字を含んでいる物の背景は黄緑になります。

実行結果はこちらです。

スポンサードリンク

関連記事

catejQuery

水平方向のアコーディオンメニュー

今回紹介するのは横にスライドする アコーディオンメニューです。 実行結果はこちら

記事を読む

jQuery

スライドショーに色々な機能を付けてみた。

詳細はサンプルコードにコメントアウトしました。サンプルコードの実行結果はこちら CSSのサンプ

記事を読む

catejQuery

jQueryのセレクター2 eq/lt/gt/headerセレクター

前回に引き続きjQuery独自の セレクターについて紹介します。 eq/lt/gtセレクター

記事を読む

catejQuery

フォームの内容が変更されたことを感知する

change()は、フォームの内容(フォーム部品の値)が 変更されたことを感知する命令です。

記事を読む

catejQuery

要素の表示・非表示を交互に切り替える toggle()

toggle()は、要素の表示・非表示を交互に 切り替える命令です。セレクターで指定した要素が

記事を読む

catejQuery

マウスの動きに合わせて処理を行うmousemove()

この命令は、特定の要素上でマウスカーソルが 動いたときに処理を行います。 mousemove

記事を読む

catejQuery

フォーム関連のイベント処理

フォーカスを感知する focus() focus()は、input要素などのフォーム部品が マウ

記事を読む

catejQuery

ダブルクリックされたことを感知するdblclick()

特定の要素がダブルクリックされたときに、 何かしらの処理を実行したい場合は、 dblclick(

記事を読む

jQuery

Masonryのギャラリーの画像をクリックすると、画像が拡大し、キャプションがでるようにしてみる

前回の記事でMasonryのギャラリーを作成しましたが、今回はそれに、見出しをつけてみます。 サン

記事を読む

catejQuery

処理のタイミングを決めるイベントについて

jQueryを使ったコードは、セレクターで特定の HTML要素を指定して、CSSやHTMLを変更・

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑