おしゃれでリッチなWEBサイトには、jqueryが必ずと言っていいほど使用されています。
ただ近年では、古いと言われるかもしれませんが、
今でも、WEBサイトにjqueryは利用されていますので、こちらの説明をしたいと思います。
WEB表示までの流れ
jQueryはHTMLの中身を操作します。
そのため、HTMLの読み込みが完了してからjQueryによる操作が開始されます
HTMLの読み込み → CSSで装飾 → jQuery でCSSなど制御 → WEB表示
どこに jQuery は記述（宣言）する
jQueryの処理は下記の2通りの記述方法があります。
$(document).ready(function(){
});
$(function(){
});
jQuery はどこの場所で読み込むするか
jQuery を含めた<script>はCSSファイルの読み込みのように<head>タグの中にも書けます。
しかし、 <head>タグの中 に 記述（宣言）する よりも、</body>の直前に書くことで、WEBページの表示速度をより早めることが出来ます。
HTMLで表示しているHTMLを変更する
HTML
<div id="id"><strong>アイウエオ</strong></div>
jquery
$(#id).html("<b>アイウエオ</b>");
結果
<div id="id"><b>アイウエオ</b></div>
HTMLで表示しているHTMLを取得する
HTML
<div id="id"><b>アイウエオ</b></div>
jquery
result = $(#id).html();
結果
result = "<b>アイウエオ</b>";
HTMLで表示しているテキストを変更する
HTML
<div id=”id”>アイウエオ</div>
jquery
$(#id).text(“変更後のテキスト”);
結果
<div id=”id”>変更後のテキスト</div>
HTMLで表示しているテキストを取得する
HTML
<div id=”id”>アイウエオ</div>
jquery
result = $(#id).text();
結果
result = “アイウエオ”;
◆エジェクト操作
| show | 時間をかけて表示する |
| hide | 時間を指定して非表示にする |
| fadeIn | 時間を指定してフェードインする |
| fadeOut | 時間を指定してフェードアウトする |
| slideDown | 時間を指定してスライドダウンする |
| slideUp | 時間を指定してスライドアップする |
（display属性をnoneにする）
指定のセレクタにクラスを追加する
addClass
指定のセレクタのクラスを削除する
removeClass
◆HTMLを挿入（追加）する
テキスト要素の先頭に挿入（追加）する
prepend
テキスト要素の最後に挿入（追加）する
append
HTML要素の先頭に挿入（追加）する
before
HTML要素の最後に挿入（追加）する
after
コメント