【プログラミング】jQueryで出来ること

はじめに

うちの現場ではjQueryを使っている（らしい）。

jQueryとは？どの部分がjQueryなん？って感じなので、
具体的にどんなことをしてくれるのかまとめました。

jQueryとは？

Javascriptライブラリの一つ。（最も有名）
Javascriptを使うと、
WEBサイトの写真をスライドさせたり、
画面上（HTML内）の要素に色をつけたり、
マウスカーソルを合わせると色を変えるようにしたり出来る。
だが、それらを一からプログラミングするとなると時間が掛かってしまう。
（作成したWEBサイト以外でも、そのコードを使いたい時等）
これを解決するために、
よく使用する機能や効果、動きをあらかじめコーディングしておき、
再利用できる形にまとめておく。（このまとまりをjavascriptライブラリという）

こんなことができる

クリック時に要素の色を変える

change color

html

<div id="sample_change">change color</div>

javascript

  $('#sample_change').on('click', function(){
    $(this).css('color', 'red');
  })

画像をスライドイン/スライドアウトさせる

ここを押して

html

<div>
  <div id="slide_area" class="on"></div>
  <div id="sample_img"></div>
</div>

css

div#slide_area {
  background-color:blue;
  width:100px;
  height:20px;
}

div#sample_img {
  background-color:red;
  width:100px;
  height:100px;
}

javascript

$(function(){

  // クリック時に実行
  $('#slide_area').on('click', function(){
    if($(this).hasClass('on')){
        // スライドアウト
        $('#sample_img').animate({'marginLeft':'-120px'},1000);
        $(this).removeClass('on').addClass('off');
    } else {
        // スライドイン
        $('#sample_img').animate({'marginLeft':'0px'},1000);
        $(this).removeClass('off').addClass('on');
    }
  })
});

終わりに

実はjQuery結構使ってるじゃん！と感じました。笑