Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
561
Help us understand the problem. What is going on with this article?
@Thought_Nibbler

jQueryのセレクタメモ

More than 5 years have passed since last update.

はじめに

最近 jQuery はじめたけど、セレクタ自由に使えないと捗らないのでまとめておく。

注意点

  • 以下に出てくるセレクタ特殊文字('.', ',', ':', '#', '[', ']')はエスケープが必要

基本セレクタ

タグ名 or クラス名 or ID による指定ができる。

$("form");       // タグ名="form"
$(".className"); // クラス名="className"
$("#formId");    // ID="formId"

複合条件の指定

区切りなしでAND、カンマ区切りでOR。

AND 指定

$("ul.listClass1"); // タグ名="ul" and クラス名="listClass1" 
$("ul#listId1");    // タグ名="ul" and ID="listId1"

OR 指定

$("div,.listClass1"); // タグ名="div" or クラス名=listClass1 
$("ul,#divId1");      // タグ名="ul"  or ID="divId1"

階層関係の指定

親-子関係

$("#root > .node");         // 「ID="root"」を親に持つ「クラス名="node"」 
$(".node").parent("#root"); // 「クラス名="node"」の親のうち「ID="root"」の要素

先祖-子孫関係

$("#root .node");            // 「ID="root"」を先祖に持つ「クラス名="node"」 
$(".node").parents("#root"); // 「クラス名="node"」の先祖のうち「ID="root"」の要素

兄-弟関係

$(".node").siblings(); // 「クラス名="node"」の兄弟(自分を除く)

フィルタ

属性

$('input[name]');          // タグ名="input" and name属性を持つ
$('input[name="quiz1"]');  // タグ名="input" and name属性が"quiz1"と一致
$('input[name!="quiz1"]'); // タグ名="input" and name属性が"quiz1"と不一致
$('input[name^="quiz1"]'); // タグ名="input" and name属性が"quiz1"と先頭一致
$('input[name$="quiz1"]'); // タグ名="input" and name属性が"quiz1"と末尾一致
$('input[name*="quiz1"]'); // タグ名="input" and name属性が"quiz1"と部分一致

使用可否

$('input[type="text"]:enabled');   // 入力可能テキストボックス
$('input[type="text"]:disabled');  // 入力禁止テキストボックス

選択状態

$('input[type="checkbox"]:checked'); // 選択済チェックボックス
$('input[type="radio"]:checked');    // 選択済ラジオボタン
$('select > option:selected');       // リストボックス・コンボボックス内の選択済要素

可視性

$('div:hidden');    // 不可視状態になっているdiv要素(display:noneも含む)
$('input:hidden');  // 不可視状態になっているinput要素≒$('input[type="hidden"]');
$('div:visible');   // 可視状態になっているdiv要素

なお、単純な":hidden"だとhead,title,scriptタグ等にもマッチする可能性がある。

おことわり

  • ここで挙げたのは、個人的によく使いそうなもののみである。
  • 動作未確認のため、表記ミス・勘違いがあるかもしれない。
  • 指摘があれば多分修正する。
561
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Thought_Nibbler
"現実は貴方の想像を凌駕する"
ark-info-sys
最新IT技術を利用したソフト開発、パッケージ製品の企画開発を中心に、お客様に満足いただけるサービスをご提供いたします。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
561
Help us understand the problem. What is going on with this article?