jQueryとは
jQueryはJavaScriptで作られたオープンソースのライブラリ。
JavaScriptで頻繁に行う処理をm少ない記述で実現できるようになっている。
jQueryはJavaScriptプログラミングの難しいところや面倒なところ、毎回行う処理を開発者の代わりにしてくれるツール。
理解の深め方
下記2点を理解しているとJavaScriptだけでなくjQeryそのもの理解が深まる
- ブラウザとJavaScriptの関係、表示されているHTMLとJavaScriptで操作できること
- その操作がの結果はブラウザに反映されること
JavaScriptの基本
Webページの内容をサーバーにリクエストしないで書き換えることができる。この処理をDOM操作という。
そして下記4つ処理を総称してDOM操作という。
- 表示されているHTMLに含まれる特定の要素(タグ)を取得して、その内容を書き換える
- 表示されているHTMLに含まれる特定の要素を取得して、その属性を書き換える
- 表示されているHTMLに含まれる特定の要素を取得してCSSのプロパティ値を変更する
- 表示されているHTMLにに含まれる特定の要素を取得して、テキストを変更したり、前後に新たな要素を挿入・削除したりする
DOMとは
DOM(ドム:Document Object Model)とは、HTMLをJavaScriptなどの言語からあくせすして、操作する機能。
ブラウザはHTMLのドキュメントをダウンロードしながら各要素の親子関係を解析し、階層化されたツリー状の文書構造を作る(DOMツリー)を作る。DOMツリーの構成要素である、HTMLに含まれるタグやその内容になるテキストなど、すべて要素はノードとよばれる。各ノードはタグ属性やCSSのスタイル情報などが含まれている。JavaScript、jQueryはそのDOMにアクセスし、属性値やプロパティを変更したり、DOMツリーに新たなDOMを追加する。
jQueryの特徴
jQueryはブラウザ同士の互換性の問題を吸収し、より簡単にスクリプトを記述することはできる。
文法が単純でプログラミングの経験がないWebデザイナーやHTMKマークアップエンジニアでも理解しやすい。
jQueryの7つの機能
- セレクタ
HTMLドキュメント内の要素を取得する機能の一つ。CSSのセレクタとほぼ同じ記述で要素を取得できる。 - トラバース
トラバースもHTMLドキュメント内の要素を取得する機能の1つ。すでにセレクタで取得した要素からみて「親要素」「子要素」「兄弟要素」など、相対的な関係で要素を取得できる。 - イベント
ある要素に対してイベントが発生したとき、その処理を定義するための機能。取得した要素が「クリックされたとき」や「キー入力があったとき」に、テキストや画像を差し替えたり、アニメーションさせたり、ブラウザに具体的な処理をさせるための機能。 - マニピュレーション
HTMLドキュメントに新たな要素を追加したり、すでにある要素を削除したり「するものから、HTML属性、CSSプロパティを変更する機能。 - アニメーション
CSSプロパティ操作やマニピュレーションを実行してHTMLの状態が変化したときに、その状態変化したときに、その状態変化をいきなりなめらかにつながるようにアニメーションしながら見せる機能。 - Ajax
サーバーからなんらかのデータを取得して、表示されているHTMLにそれを反映させる機能、。 - その他の機能
Ajaxを除き、ここに上げた機能はすべてDOM操作と呼ばれる処理。jQueryにはそれ以外に、プラグインを作成する機能などが備わっている。
jQueryの基本的な処理の流れと記述パターン
要素を取得→イベントを設定→具体的な処理
$('selector').on('event',function(){ //処理 })
コメント