jQueryの基本1

2020.02.07

jQueryとは

jQueryはJavaScriptで作られたオープンソースのライブラリ。
JavaScriptで頻繁に行う処理をｍ少ない記述で実現できるようになっている。
jQueryはJavaScriptプログラミングの難しいところや面倒なところ、毎回行う処理を開発者の代わりにしてくれるツール。

理解の深め方

下記２点を理解しているとJavaScriptだけでなくjQeryそのもの理解が深まる

  • ブラウザとJavaScriptの関係、表示されているHTMLとJavaScriptで操作できること
  • その操作がの結果はブラウザに反映されること

JavaScriptの基本

Webページの内容をサーバーにリクエストしないで書き換えることができる。この処理をDOM操作という。

そして下記４つ処理を総称して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ドキュメント内の要素を取得する機能の１つ。すでにセレクタで取得した要素からみて「親要素」「子要素」「兄弟要素」など、相対的な関係で要素を取得できる。
  • イベント
    ある要素に対してイベントが発生したとき、その処理を定義するための機能。取得した要素が「クリックされたとき」や「キー入力があったとき」に、テキストや画像を差し替えたり、アニメーションさせたり、ブラウザに具体的な処理をさせるための機能。
  • マニピュレーション
    HTMLドキュメントに新たな要素を追加したり、すでにある要素を削除したり「するものから、HTML属性、CSSプロパティを変更する機能。
  • アニメーション
    CSSプロパティ操作やマニピュレーションを実行してHTMLの状態が変化したときに、その状態変化したときに、その状態変化をいきなりなめらかにつながるようにアニメーションしながら見せる機能。
  • Ajax
    サーバーからなんらかのデータを取得して、表示されているHTMLにそれを反映させる機能、。
  • その他の機能
    Ajaxを除き、ここに上げた機能はすべてDOM操作と呼ばれる処理。jQueryにはそれ以外に、プラグインを作成する機能などが備わっている。

jQueryの基本的な処理の流れと記述パターン

要素を取得→イベントを設定→具体的な処理

$('selector').on('event',function(){
  //処理
})

 

コメント