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」で「CSS」を参照・設定する方法



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

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






「jQuery」で「CSS」を参照・設定する書式


「jQuery」で「CSS」を参照・設定するには、
「セレクタ」で、
参照・設定したい「HTML」要素(タグ)を指定「$("#color_div")」し、
その後、「.css("border","1px solid green");」を加えることで、
「CSS」に値を指定することができる。

■ CSSを設定する方法
$("#color_div").css("border","1px solid green");

var color_div=$("#color_div");
color_div.css("border","1px solid red");

■ CSSを参照する方法
let Div_Color = $("#color_div").css("border");



「jQuery」で「CSS」を参照・設定する書式

ユニバーサルセレクター

$("*").css("color","red");
$("#ID名 *").css("color","red");

「#ID名 *」は、ID名内にある全ての要素を指定している。


「HTMLタグ」での指定方法

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

「ID」での指定方法

$("#color_div").css("border","1px solid green");
$("#color_div").css("border","1px solid red");
var color_div=$("#color_div");
color_div.css("border","1px solid red");

クラス名での指定方法

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

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

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



Back



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


メソッド説明
.attr() 「.attr(属性名)」 = 指定された要素の内、最初の要素の属性値を取得する。
「.attr(属性名,値)」 = 指定された要素の内、最初の要素の属性値を設定する。
「.attr(属性名:値, 属性名:値, ・・・)」 = 指定された要素の内、最初の要素に複数の属性値を設定する。

$('HTMLタグ名'). attr("属性値", function (index, attr) { return "[" + index + "]" + attr + this.alt; });

「index」=要素が何番目かの番号
「attr」=指定した属性値の値
「this.alt」=自身の「alt」属性の値
.removeAttr() 「.removeAttr("属性名")」= 指定した属性を削除する
.addClass() 選択したすべての要素にクラス名を割り当てる。
.removeClass() 選択したすべての要素のクラス名を削除する。
.toggleClass() 選択したすべての要素に、
クラス名がなければ付与し、
クラス名があれば削除する
.hasClass() 指定したクラス名を持っていれば「true」
持っていなければ「false」を返す。
.css() 選択した要素を対象に、指定したCSSの値を参照・設定する。
.width() 選択した要素の横幅を取得する。
.height() 選択した要素の縦幅を取得する。
.innerWidth() 「padding」も含む横幅を取得する。
.innerHeight() 「padding」も含む縦幅を取得する。
.outerWidth() 「border」「padding」を含む横幅を取得。
.outerHeight() 「border」「padding」を含む縦幅を取得。
.scrollTop() スクロールした後の画面最上部の位置を取得。
.scrollLeft() スクロールした後の画面左側の位置を取得。
.offset() 「HTML」ドキュメントの相対位置を取得する。
.position() 親要素からの相対的な位置情報を取得する。


Back