JavaScript
jQuery
初心者
アウトプット
本の勉強

知識ゼロからはじめるゆっくり・ていねいJavaScriptのまとめ【Chapter6】

JavaScriptの学習の為に初心者向けの本である狩野祐東さんの「知識ゼロからはじめるゆっくり・ていねいJavaScript」のアウトプット。

今回は読んだ内容を整理する為に【Chapter6】で重要だと思った部分をまとめています。


jQuery

jQueryとはJavaScriptでよくおこなわれる処理を少ないソースコード量で簡単に書けるようにしたオープンソースのライブラリ。

DOM操作と非同期通信を元のJavaScriptを使うよりも少ない記述量でプログラミングできる。

WebサイトのUIを構築するのによく用いられる。


jQeryでできること


  1. 要素のコンテンツを取得する

  2. 要素のコンテンツを書き換える

  3. 要素に子要素を挿入したり削除したりする

  4. 選択した要素にイベントを設定する


1.要素を取得する

jQueryには簡単に予想を取得できるメソッドが用意されている。

このメソッドはCSSセレクタを使ってHTMLから特定の要素を取得できるようになっている。

$('セレクタ')

「$()」メソッドは取得した要素をjQueryオブジェクトに変換する要素を持っている。

その為、jQueryでプログラミングする際は$()メソッドで取得した要素を

jQueryオブジェクトに登録されているメッソドで操作
するのが「基本形」になる。


2.要素のコンテンツを書き換える

jQueryで要素をコンテンツを書き換えるには要素を取得してから、

textメソッドを使用する。

$('セレクタ').text('テキスト');

このプログラムを書くと取得した要素がtextメソッドで指定した「'テキスト'」に書き換わる。


3.要素に子要素を挿入したり削除する

appendメソッドを使うと、取得した要素を挿入することができる。

$('セレクタ').append('要素');


4.選択した要素にイベントを設定する

取得した要素にイベントを設定するにはonメソッドを使用する。

$('セレクタ').on('イベント名', function(){

// イベントが発生したときの処理を記述
});


jQueryでサムネイルをクリックすると画像が切り替わる処理で使用したメソッドなど

1.タグの一般的な属性をjQueryで書き換えたいときはattrメソッドを使用する。

$('セレクタ').attr('属性名','新しい値');

2.切り替える画像のパスは「data-属性」*から読み取る。

「data-」で始まる属性は開発者が自由に作れる属性で、

タグに何らかのデータを埋め込みたいときに使えるHTML5の機能の1つ。

「data-属性」はJavaScriptやjQueryにHTMLからデータを渡したいとき*によく使われる。

$('セレクタ').data('属性名');

3.イベントが発生した要素をjQueryで取得するにはeventオブジェクトの

「event.currentTarget」をjQueryオブジェクトに変化する。

$(event.currentTarget).;


jQueryでタブUIを実現するのに使用したメソッドなど

要素にクラスを追加する時はaddClassメソッドを使用する。

$().addClass('追加するクラス');

また要素にあるクラスを削除するにはremoveClassメソッドを使用する。

$().removeClass('削除するクラス');


おわり

今回は「知識ゼロからはじめるゆっくり・ていねいJavaScript」の

【Chapter6】で重要だと思った部分をまとめました。

参考文献

「知識ゼロからはじめるゆっくり・ていねいJavaScript」