jQueryセレクターの概要（セレクター+要素のフィルタリング）

1.jQueryセレクター

1.基本セレクター

• #ID セレクター：IDに基づいてラベルオブジェクトを検索します

• .class セレクター：クラスに従ってラベルオブジェクトを検索します

• element セレクター：ラベル名に従ってラベルオブジェクトを検索します

• * セレクター：すべての要素を表します

• selector1，selector2 組み合わせセレクター：セレクター1、セレクター2の結果をマージし、

• $("div.one")選択されたclass="one"<div>、$("div,.one")選択されたすべての<div>およびすべてのclass="one"要素など、コンマのないものもあります

例：

$("#lastname")  //选取id="lastname" 的元素
$(".intro") //选取class="intro" 的所有元素
$("p") //选取所有 <p> 元素
$("*") //选取所有元素
$("h1,div,p") //选取所有 <h1>、<div> 和<p> 元素
$("div.one") //选取class="one"的<div>
$("div,.one") //选取所有<div>和所有class="one"的元素

2.レベルセレクター

• ancestor descendant 子孫セレクター：息子要素や孫などの他の要素を含む、特定の祖先要素の下にあるすべての子孫要素に一致します
• parent > child 子要素セレクター：孫などの他の要素を除き、息子要素のみを含む、指定された親要素の下のすべての子要素に一致します
• prev + next 隣接する要素セレクター：prev要素の直後の次の要素を照合します。prevの直後の要素がnextでない場合は検索に失敗し、nextの場合は、prev要素の直後の次の要素を1つだけ照合します。前と次の関係は兄弟愛です。
• prev ~ sibings prev後の兄弟要素セレクター：prev要素の後のすべての兄弟要素に一致し、prev要素とsiblings要素の間の兄弟である要素のみに一致します

例：

$("body div") //选择 body 内的所有 div 元素
$("body > div") //在 body 内, 选择为div的子元素
$("#one+div") //选择 id 为 one 的下一个 div 元素
$("#one~div") //选择 id 为 one 的元素后面的所有 div 兄弟元素

3.フィルターセレクター

3.1基本的なフィルターセレクター

• :first 最初の要素を取得する
• :last 最後の要素を取得します
• :not(selector) 指定されたセレクターに一致するすべての要素を削除します
• :even 0からカウントを開始し、すべての要素を偶数のインデックスと一致させます
• :odd 0からカウントを開始して、すべての要素を奇数のインデックス値と一致させます
• :eq(index) 指定されたインデックス値を持つ要素と一致します
• :gt(index) 指定されたインデックス値より大きいすべての要素に一致します
• :lt(index) 指定されたインデックス値未満のすべての要素に一致します
• :header h1、h2、h3などの見出し要素を一致させる
• :animated アニメーション効果を実行しているすべての要素に一致する

例：

$("li:first")    //第一个li
$("li:last")     //最后一个li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li
$("li:even")     //挑选下标为偶数的li
$("li:odd")      //挑选下标为奇数的li
$("li:eq(4)")    //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)")    //下标大于 2 的li
$("li:lt(2)")    //下标小于 2 的li
$(":header")     //选择所有的标题元素
$(":animated")   //选择当前正在执行动画的所有元素

3.2コンテンツフィルタリングセレクター

• :contains(text) 指定されたテキストを含む要素を一致させる
• :empty 子要素またはテキストを含まないすべての空の要素に一致します
• :parent 子要素またはテキストを含む要素を一致させる
• :has(selector) 一致には、セレクターによって一致した要素が含まれます

例：

$("div:contains('Runob')")    // 包含 Runob文本的div元素
$("td:empty")                 //不包含子元素或者文本 的空td元素
$("td:parent")                //选择含有子元素或者文本 的td元素
$("div:has(.one)")        //选择含有 class 为 one 元素的 div 元素

3.3属性フィルターセレクター

• [attribute] 指定された属性を含む要素に一致します。
• [attribute=value] 指定された属性が特定の値である要素に一致します
• [attribute!=value] 属性が特定の値と等しくないすべての要素、または属性を含まない要素に一致します（属性のない要素も選択されます）。
• [attribute^=value] 特定の属性の一致は、ある値で始まる要素です
• [attribute$=value] 指定された属性に一致するのは、ある値で終わる要素です
• [attribute*=value] 特定の属性に一致するのは、特定の値を含む要素です
• [attrSel1][attrSel2][attrSelN] 複数の条件を同時に満たす必要がある場合に使用される複合属性セレクター

例：

$("div[id]")        //所有含有 id 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")        // id属性值不等于123的div元素，或者不含有id属性的div元素
$("div[id^='aa']")        // id属性值以aa开头的div 元素
$("div[id$='zz']")        // id属性值以zz结尾的div 元素
$("div[id*='bb']")        // id属性值包含bb的div 元素
$("div[id][title*='es']") //首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素

3.4可視性フィルターセレクター

• :hidden すべての目に見えない要素に一致する
• :visible 表示されているすべての要素に一致する

例：

$("li:hidden")       //匹配所有不可见的li
$("li:visible")      //匹配所有可见的li

3.5ステータスフィルターセレクター

• :enabled 利用可能なすべての要素に一致する
• :disabled 利用できないすべての要素に一致する
• :checked ドロップダウンリストで選択されたすべての選択された単一選択、複数選択、およびオプションラベルオブジェクトに一致します
• :selected 選択したすべてのオプションに一致

例：

$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input
$("input:checked")    // 匹配选中的 input
$("option:selected")  // 匹配选中的 option

4.フォームセレクター

• :input すべての入力タグ要素に一致
• :text すべてのテキスト入力ボックスに一致
• :password すべてのパスワード入力ボックスに一致
• :radio すべてのラジオボタンに一致
• :checkbox すべてのチェックボックスに一致
• :submit すべての送信ボタンに一致
• :image すべてのimgタグに一致
• :reset すべてのリセットボタンに一致
• :button すべての入力タイプに一致=ボタン<ボタン>ボタン
• :file すべての入力タイプに一致=ファイルファイルのアップロード

例：

$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":image") 	 //所有带有 type="image" 的 input 元素
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域

2.jQuery要素フィルタリングで使用されるいくつかのメソッド

• eq()指定された要素のインデックスを取得します;:eq()同じ関数
• first()最初の要素を取得します;:first同じ機能
• last()最後の要素を取得します;:last同じ関数
• filter(exp) 一致する要素を残す
• is(exp) 指定されたセレクターと一致するかどうかを判断し、一致する限りtrueを返します
• has(exp)要素に一致するセレクター要素を返します;:has同じ関数
• not(exp)一致するセレクター要素を削除します;:not同じ機能
• children(exp)指定された子要素セレクターに一致するものを返します。parent>child同じ機能を持つ
• find(exp)指定されたセレクターの子孫要素に一致するリターン;ancestor descendant同じ機能
• next()現在の要素を次の兄弟要素に返します;prev + next関数としての関数
• nextAll()要素の後の現在のすべての兄弟を返します;prev ~ siblings同じ関数を持つ関数
• nextUntil() 現在の要素の後の要素を指定された一致した要素に返します
• parent() 親要素を返す
• prev(exp) 現在の要素の前の兄弟要素を返します
• prevAll() 現在の要素の前にあるすべての兄弟要素を返します
• prevUnit(exp) 現在の要素から指定された一致した要素に前の要素を返します
• siblings(exp) すべての兄弟要素を返す
• add() addによって一致したセレクターの要素を現在のjqueryオブジェクトに追加します

例：

$("div").eq(3) //选择索引值为等于 3 的 div 元素
$("div").first() //选择第一个 div 元素
$("div").last() //选择最后一个 div 元素
$("div").filter(":even") //在div中选择索引为偶数的
$("#one").is(":empty") //判断#one是否为:empty或:paren
$("div").has(".one") //选择div中包含.one的
$("div").not('.one') //选择div中class不为one的
$("body").children("div.one") //在body中选择所有class为one的div子元素
$("body").find("div.mini") //在body中选择所有class为mini的div元素
$("#one").next("div") //#one的下一个div
$("#one").nextAll("span") //#one后面所有的span元素
$("#one").nextUntil("span") //#one和span之间的元素 
$(".one").parent() //.one的父元素
$("#two").prev("div") //#two的上一个div
$("span").prevAll("div") //span前面所有的div
$("span").prevUntil("#one") //span向前直到#one的元素
$("#two").siblings() //#two的所有兄弟元素
$("span").add("#two").add("#one") //选择所有的 span 元素和id为two的元素