【Javascript + jQuery】「jQuery」のオブジェクト

オブジェクトを生成する書式

jQuery("セレクタ");
$("セレクタ");

ユニバーサルセレクター

$("*"); //すべての要素を選択。
$("#ID名 *"); //ID名内のすべての要素を選択。

グループセレクターで指定する方法

$("h1,h2,h3").css("color","red");
$("h1,.man,#taro").css("color","red");

ID名で指定する方法

$("#name")
$("#addr1,#addr2") //カンマ区切りで複数選択。

クラス名での指定方法

$(".man").css("color","red");

「HTMLタグ」での指定方法

$("p a") //「p」要素内の「a」要素（リンク）を全て選択。
$("h2") //「h2」タグを選択。
$("a[href$='pdf']") //リンク先がpdfで終わる「a」要素を全て選択。

属性での指定方法

$("img[title]")//「img」タグの「title」属性を持つすべての要素を指定。
$("a[target ='_blank']") //「a」タグの「target」属性が「_blank」の要素をすべて指定
$("a[target!='_blank']") //「a」タグの「target」属性が「_blank」でない要素をすべて指定
$("input[name*='sample']") //「name」属性の一部が「sample」と一致したすべての要素を指定
$("input[name~='cat']") //「name」属性のスペースで区切られた単語が、単語「sample」と一致するすべての要素を指定
$("a[href^='http://']") //値と前方一致した属性を持つ要素を指定。
$("a[href^='http://'], a[href^='https://']") //どちらか一方の条件と前方一致した属性を持つ要素を指定。
$("a[href $='.pdf']") //値と後方一致した属性を持つ要素を指定。
$(" a[ href ^=' http://'][ target ='_ blank']") //すべての条件に一致したものだけ選択。

第二引数を使った範囲指定の方法

セレクタの第2引数は、範囲を指定する引数。
$(" span", "#ID名"). css(" color", "red"); //「ID名」ないの「span」要素を選択。「$("# taro span")」と同等。

階層構造のセレクター

$("h1 strong") //「h1」要素の中にある「strong」要素をすべて選択。
$("div.クラス名 a") //「クラス名」のついた「div」要素内にある「a」要素をすべて選択。
$("body > h2") //「body」要素の直下にある「h2」要素をすべて選択。
$("h2 + p") //「h2」要素に隣接するすぐ後ろの「p」要素を選択。
$("h2 ~ p") //「h2」要素の後ろにある兄弟要素「p」要素を選択

「jQuery」独自の子要素フィルター

$(" タグ名:first")
$(" タグ名:first-child");

フィルターの種類

CSSフィルター
:first	マッチした要素の中から、最初の要素を選択
:last	マッチした要素の中から、最後の要素を選択
:even	偶数番目（even）の要素を選択。
:odd	奇数番目（odd）の要素を選択。
:eq()	「:eq(n)」 = n番目の要素を選択。
:gt()	「:gt(n)」 = n番目以降の要素を選択。
:lt()	「:lt(n)」 = n-1番目までの要素を選択。
:not()	セレクターの条件にマッチしない要素のみを選択。
:header	「h1～h6」までのヘッダー要素を選択。
:animated	セレクターを実行したタイミングで、 アニメーションが動作中のものを選択。
CSSフィルター
:first-child	親要素の最初の子要素を選択
:last-child	親要素の最後の子要素を選択
:nth-child()	指定番数の要素を選択。 :nth-child(3)　→ 3番目を取得 :nth-child(even)　→ 各親から偶数番目を取得 :nth-child(odd)　→ 各親から奇数番目を取得 :nth-child(3n)　→ 3個おきに取得 :nth-child(3n + 1)　→ 3で割った時に1余る番目を取得
:only-child	子要素が１つだけの子要素を選択。
:nth-of-type
:first-of-type
:last-of-type
:nth-last-child
:nth-last-of-type
:only-of-type
:target
:root

コンテントフィルター

$("div:contains('文字')")

コンテントフィルター
:contains()	「:contains("text")」=「text」という文字が含まれている要素を指定。
:has()	「:has("HTMLタグ")」＝ 指定したHTMLタグを含む要素を指定。
:empty	子要素を持たない要素を選択。
:parent	何かしらの子要素を持つ要素を選択。

フォーム系フィルター

フォーム系フィルター
:button
:checkbox
:file
:image
:input
:password
:radio
:reset
:submit
:text
:checked
:selected
:disabled
:enabled
:visible
:hidden

「.is()」フィルター

let Value_IsCheck = $("div"). is(".man"); //「div」要素の中に、クラス名「man」があれば「true」が返される
let Value_IsCheck = $("#ID名"). is(":checked"); //「ID名」にチェックされているものがあれば「true」が返される。

新規に作成するオブジェクト生成

$(" html", attributes )
$("加えたいHTMLタグ名", {属性:値, 属性:値, 属性:値, ・・・})

属性も指定したい時は、
第2引数を利用する。
第2引数に「属性名:"値", 属性名:"値", ・・・・・」と記述することで設定可能。
「Javascript」の予約語に「class」があるため、「"class"」と「"」で取り囲む必要がある。


jQuery(function($){
$("<タグ名>テキスト</タグ名>").appendTo("#ID名");
});

jQuery(function($){
$("<ahref='bar.html'></a>",{target:"_blank"});
$("<a></a>",{href:"abc.html",target:"_blank","class":"myClass"});
});



jQuery(function($){
$("<div></div>",{
width:100,
height:100,
css:{border:"5pxsolidgray"},
addClass:"mydiv",
on:{ click:function(event){//イベント設定}}
});
});