青色プログラム。

日々楽しくプログラミングを学ぶ

jQueryに触れる

jQuery

JavaScriptのコードを使いやすく簡単にまとめたコード集(ライブラリ)

・クリックすると画像を大きく表示される
・文字にマウスを乗せると色が変わる
・スライドショーを作ることができる
他にもWebページに様々な動きをつけることができる。


jQueryを使うには2つの方法がある(今回は1)
1、ネット上のjQueryファイルを読み込んで使用
2、jQueryファイルをダウンロードして使用


使う準備
HTML、CSSJavaScriptファイルを作成
HTMLファイルにjQueryを読み込ませる
JavaScriptファイルにjQueryコードを記載


基本的な記述方法

$function(){
 $( "セレクタ" ).メソッド(引数);
});


イベント
イベントとは、○○をクリックした時
マイスのカーソルを載せたと時など

基本的な記述方法

$(function(){
   $(“セレクタ1”).イベント(function{
       $(“セレクタ2”).メソッド(引数);
    });
});




hoverイベント
mouseoverとmouseoutの2つを組み合わせたような処理ができるイベント

基本的な記述方法

$(function () {
  $(“セレクタ”).hover(function () {}, function () {});
});

1つめのfunctionにマウスを載せたときの処理
2つめにマウスを外した時の処理



Thisとは、イベント発生時(クリックした時など)にそのセレクタ(クリックされたセレクタ)のみに処理を適用するもの

$(function () {
  $(“h2 ").click(function{
    $(this).css("color", "red");
  });
});

くりっくした時、赤に変わる
This部分をpにすればp要素全てが赤に変わる




スライドショー
プラグインを使う、無料のツールを使用するのが一般的でスライドショー用のプラグインは複数ある
bxSliderなど



bxSliderのコードをHTMLに貼り付ける
HTMLにHTMLコードを書く
HTML上にJavaScriptを書く

Googleで調べ公式ページからインストールでコードをHTMLファイルのヘッダー要素とボディ要素にコピー
値を変更し完成する



パパッと1つ実践してみた感じは知ってると便利そう、
シンプルなので実際に使う場合や関わってきそうになったり興味が出た場合に、
再度戻って学習する感じがいいかなと思ったので軽くにどんなのか記事で残しておく。