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





【Javascript + jQuery】「jQuery」で「HTML」要素の情報を参照・設定する方法

【Javascript + jQuery】
「jQuery」で「HTML」要素の情報を参照・設定する方法




「jQuery」では、「Javascript」同様に、
HTMLタグを指定して情報を取得することができる。

「Javascript」とは、書式が異なり、記述がシンプル。
「HTML」タグと「CSS」の各設定にアクセスすることもでき、
値の参照や設定なども可能。








「jQuery」で「HTML」を操作するメソッド




「HTML」タグを操作する「jQery」メソッド

メソッド説明
.html()指定要素のHTMLコードを「HTML」タグを含めたすべてを取得する。
.prop() 「HTML」要素の属性・プロパティを変更する
$('#ID名').prop('属性名・プロパティ名', 値);
$('#ID名').prop('checked', true);
.attr()
「HTML」要素の属性・プロパティを変更する
$('#ID名').attr("属性・プロパティ名", 値);
$('#ID名').attr("checked", true);
.data() 指定した要素に情報を加える
$('#ID名').data("キー名", "値");
$('#ID名').data("id", "ID名");
let Get_ID = $('#ID名').data("id");
.removeData()指定した要素の情報を削除する
.text()指定した要素の中にあるテキストを取得する。
.val()フォーム要素の値を参照・設定する
.append()指定要素に新規に生成した要素を一番最後に加える。
.prepend()指定要素に新規に生成した要素を一番最初に加える。
.before()指定要素の直前に新規に生成した要素を加える。
.after()指定要素の直後に新規に生成した要素を加える。
.appendTo()指定要素に新規に生成した要素を一番最後に加える。
.prependTo()指定要素に新規に生成した要素を一番最初に加える。
.insertBefore()指定要素の直前に新規に生成した要素を加える。
.insertAfter()指定要素の直後に新規に生成した要素を加える。
.wrap()指定した要素を指定したHTMLタグで包み込む
.wrapAll()指定した要素すべてを指定したHTMLタグで包み込む
.wrapInner()指定した要素の中身を指定したHTMLタグで包み込む
.unwrap()指定した要素から親要素を取り除く
.replaceWith()指定した要素を指定した要素に置き換える。
.replaceAll()指定した要素を指定した要素に置き換える。
.remove()指定した要素を削除する
.empty()指定した要素の中身をすべて削除する
.clone()指定した要素のコピーを作成し、「jQuery」オブジェクトにして返す。
.first()複数の要素から最初の要素を指定する
.last()複数の要素から最後の要素を指定する
.eq()複数の指定要素から指定した番号の要素を指定する
.filter()指定した条件の要素を指定する
.not()指定した要素以外の要素をすべて指定する
.find()指定した要素の子要素を検索し選択する
.prev()選択した要素の前に存在する兄弟要素を選択する。
.siblings()選択した要素の兄弟要素をすべて選択する
.end()
.andSelf()(.addBack())


Back