ITメモ
JavaScript
「Javascript」の基礎知識
「Javascript」の使い方【Javascript】エラーチェックをする方法【Javascript】変数【Javascript】配列(Array)【Javascript】「DOM(Document Object Model)」の使い方【Javascript】関数 / Function【Javascript】条件分岐・繰り返し【Javascript】イベントハンドラー(Event Handler)【Javascript】文字の操作方法【Javascript】文字の検索方法【Javascript】スコープ【Javascript】ファイルの操作方法【Javascript】画像の操作方法【Javascript】情報を出力・チェックする方法【Javascript】ヒアドキュメントの使い方【Javascript】Built-in Object(ビルトインオブジェクト)【Javascript】ライブラリー / Library
Library
「Ajax」の使い方
Library「jQuery」
【jQuery】とは【jQuery】の書式【jQuery】「Javascript」にリンクさせる方法【jQuery】「Javascript」に記述する方法【jQuery】のオブジェクト【jQuery】「CSS」を参照・設定する方法【jQuery】「HTML」要素の情報を参照・設定する方法【jQuery】「HTML」タグを追加する方法【jQuery】ユーティリティ関数【jQuery】イベントアクションを設定する方法【jQuery】イベントオブジェクト「.on」の使い方【jQuery】読み込み完了してから実行する「.ready」の使い方【jQuery】「Ajax」を使う方法【jQuery】「エフェクト」「アニメーション」を使う方法
Reference
数字
【Javascrpt】計算に誤差が出る時の解決方法
ファイル読み込み
【Javascrpt】「XMLHttpRequest」コンストラクタ - サーバーのファイルを読み込む方法
イベント
【Javascrpt】ページ読み込み時に「Javascript」を実行する方法【Javascrpt】画像読み込みが完了してから、次の処理を実行する方法【Javascrpt】「addEventListener()」の使い方 - イベントが発生したのを検知して実行する方法
要素情報
【Javascrpt】HTMLタグの「class」属性値を取得、変更する方法【Javascrpt】「querySelector()」の使い方 - HTML要素の情報を参照・設定する方法【Javascrpt】「querySelectorAll()」の使い方 - 要素内の指定した子要素を参照・設定する方法【Javascrpt】「classList」プロパティ - HTMLタグ属性値「class」の情報を参照・確認・追加・削除する方法【Javascrpt】「getElementById()」の使い方 - HTML要素の情報を「ID名」で参照・設定する方法【Javascrpt】「getElemetnsByClassName()」の使い方 - HTML要素の情報を「クラス名」で参照・設定する方法【Javascrpt】「Node.Childnodes」の使い方 - 要素内の子要素を参照・設定する方法【Javascrpt】「ParentNode.children」の使い方 - 要素内の子要素を参照・設定する方法【Javascrpt】要素の配置位置を確認する方法
Style関連
スタイル属性(色・線・大きさなど)を参照・変更する方法【Javascript】「getPropertyValue」メソッド - 指定されたCSSプロパティの値などを取得する【Javascript】「getComputedStyle」メソッド - CSSを適用したスタイルを参照する
ページ関連
【Javascript】Webページのタイトルを変更する方法【Javascript】「モニター」情報を取得する方法【Javascript】「ブラウザ」情報を取得する方法【Javascript】「ページ」情報を取得する方法【Javascript】「イベント」情報を取得する方法【Javascript】「マウス」情報を取得する方法
サイズ関連
【Javascript】要素の縦・横サイズを参照・変更する方法【Javascript】「モニター」「ブラウザ」のサイズ情報を取得する方法
端末情報
【Javascript】スマートフォンからのアクセスを識別する方法





「jQuery」のオブジェクト



「jQery」は、
「オブジェクト」を操作することが得意で、
「HTML」「CSS」の要素を取得して、
値を参照・設定することが簡単にでき、
そのメソッドも豊富。

人気なのは、
「Javascript」よりも簡単な記述と、豊富な操作性。



「jQery」のオブジェクト生成方法


「jQery」のオブジェクトは、「$()」に渡すことで、
「jQery」のオブジェクトにすることができる。

「jQery」のオブジェクトにできるのは、
・DOM要素
・window
・document
・this
など。


「$()」で呼び出すことで、
「jQery」のオブジェクトが返され、
「jQery」の基本となっています。
「jQery」では、そのオブジェクトを使用して、
メソッドを駆使して、
「HTML」「CSS」などの操作をすることが可能になっている。


オブジェクトの生成方法

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

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 子要素が1つだけの子要素を選択。
: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){//イベント設定}}
});
});


Back



「jQuery」のオブジェクトを操作するメソッド


メソッド説明
.length選択している要素の数を取得
.each()選択した要素すべてに、引数で指定した関数を実行する
.get()番号で指定した要素のオブジェクトを取得する
.toArray()指定した要素の配列を作成する。
.map()指定した要素すべてに関数を実行させたりする
.index()選択した要素のインデックス番号を取得


Back