jQuery基礎_導入方法、メソッドまとめ

jQueryとは

javascriptのライブラリ

---

jQueryの導入方法

〇方法1：jQueryのファイルをダウンロードし読み込む
実際の開発では、こちらが主流。方法2の場合、更新が入った時に不具合が発生するケースがあるため。
〇方法2：ネット上のファイルを読み込む

//ネットから読み込む場合は、headタグ内に下記のように記述し読み込む等
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

---

要素の取得とテキストノードの書き換え

idで要素取得

$('#id名');

classで要素取得

$('.class名');

テキストメソッド

テキストノードの取得、書き換えができる機能。

$(要素).text();

---

DOMとjQueryの違い

DOMでは煩雑だった書き方もjQueryを使用する事で簡単にできる。下記サンプルコードでは、テキストの書き換えを行っている。

//DOM
test = document.getElementById('test_id');//id取得し変数へ代入
test.textContent = '書き換え後の文';//テキストノードの指定と内容の書き換え

//jQuery
$('#test_id').text('書き換え後の文');//id取得と書き換え

---

valメソッド

value属性の取得、変更ができる。

$('#test_id').val();

---

attrメソッド

HTML要素の属性について取得、変更ができる。
〇取得

//attr()の第一引数に'id'と指定することで、idを取得できる。
let test = $('test_id').attr('id');
console.log(test);//id名であるtest_idと表示される。

〇変更

test = $('#test_id').attr('id','test_new_id');
console.log(test.attr('id'));//変更されたidであるtest_new_idが表示される。

---

イベント

JavaScriptにおける「イベント」とは、ウェブページ上で発生するあらゆるアクションの総称です。例えば、ボタンのクリック、フォームへの入力、ページの読み込み、マウスポインタを要素の上に合わせるなど、様々な出来事がページ上で発生します。
※参考サイト

---

イベントハンドラ

ボタンクリック等のイベントが発生した際に処理を行う仕組みの事を指す。例として、onメソッドを使ったサンプルコードを下記に記述する。

$(セレクタ).on('イベント名','対象要素',function(){
実行する処理
});

$('#test_button').on('click',function(){
    alert('クリック');
});

---

onメソッド、clickメソッド

onメソッド：複数のイベント処理ができる。後から新しく追加された要素に対応可能。
clickメソッド：1つのイベント処理しかできない。初期読み込みした要素にのみ対応。

//onメソッド
$('#test_id').on({
    'click': function() {
        console.log('クリック');
    },
    'mouseleave': function() {
        console.log('id名：test_idの要素からカーソルが離れました。');
    }
})

//clickメソッド
$('#test_id').on('click mouseleave',function(){
    console.log('イベント発火');
});

※参考サイト

---

HTMLの要素にイベント属性を付与する方法

要素にonclick属性を指定し、特定の関数が実行されるように設定できる。
サンプルコードではid名：test_idの要素がクリックされた際に、自身で定義したtest関数が実行される。

<button id="test_id" onclick="test()">テストボタン</button>

<script>
function test(){
    console.log('押されました。');
}
</script>

---

cssメソッド

要素のCSSスタイルを取得、変更できるメソッド

//スタイルの取得
$('セレクタ').css('スタイル名');

//スタイルの変更
$('セレクタ').css('color','red');//第2引数に値を指定する事で変更可

---

クラスの追加、削除、切り替えに関するメソッド

addClassメソッド

引数のクラスをセレクタで指定した要素に追加する。

$("セレクタ").addClass("testClass");

removeClassメソッド

引数のクラスをセレクタで指定した要素から削除する。

$("セレクタ").removeClass("testClass");

toggleClassメソッド

引数のクラスをセレクタで指定した要素になければ追加し、あれば削除する。切り替えできる機能。

$("セレクタ").toggleClass("testClass");

---

フォームに関するイベント

フォーム系のイベントは指定した要素に対してアクションをとった際にイベントを発火させる。

focus_フォーカスイベント

要素にフォーカスを充てるとイベント発火

$('#test').on('focus', function () {
    console.log('フォーカスされました。');
});

blur_ブラーイベント

要素からフォーカスが外れるとイベント客家

$('#test').on('blur', function () {
    console.log('フォーカスが外れました。');
});

focus,focusinとblur,focusoutの挙動の違い

focus,focusinとblur,focusoutはそれぞれ似た動きをするが、focusinとfocusoutは子要素にも反応するため、挙動が異なる。

change_チェンジイベント

フォーカスした要素の値の修正が完了した際にイベント発火。

<input type="text" id="test_id">

<script>
    $('#test_id').on('change', function () {
        console.log('フォーム内容が変更された');
    })
</script>

---

ページ読み込み時に発火するイベント

原則、HTMLは上から順に読み込まれる。

1,HTML(DOM)の読み込み
2,readyイベントの処理を実行
3,画像などの読み込み
4,loadイベントの処理を実行

下記メソッドのように「$(document)」に対してready()メソッドを実行することでHTMLの構造が組み立てられたあとに処理を実行できる。

readyメソッド

HTMLを全て読み込んだ後、処理を実行するメソッド

$(document).ready(function(){処理});

loadイベント

画像を含めたすべての読み込みが終わってから処理を実行するメソッド

$(document).load(function(){処理});

scroll、scrollTop、scrollLeftメソッド

画面変化時に発火するイベント

---

要素の取得応用

取得条件を設定した時に条件を満たさなかった場合、取得しない点には注意。

nextメソッド

指定した要素の次の兄弟要素を取得

$("セレクタ").next("取得要素の条件");

nextAllメソッド

指定要素の後の兄弟要をすべて取得する

$("セレクタ").nextAll("取得要素の条件");

findメソッド

指定した要素より下層の全要素を取得できる。

//test_groupクラスより下層にあるtestクラス
$(".test_group").find(".test").css("color");

※参考サイト

cloneメソッド

指定要素をコピーするメソッド。append等と一緒に使う事が多い。

$("セレクタ").clone(論理値);

append、appendToメソッド

$('挿入先').append('追加要素')
$('追加要素').appendto('挿入先')

removeメソッド

指定した要素を削除する事ができるメソッド

$("セレクタ").remove();

---

thisについて

呼び出した場所や方法によって中身が変化する特別な変数。使用感的には呼び出した直前のもの自体を指すイメージ。便利な面もあるが、挙動が結構えぐいので、できるだけ使わない書き方ができるならそちらを推奨。jQueryのthisとJavaScriptのthisが別に存在する。
※参考サイト

---