usagi web

Web制作に関して学んだことを書いていきます。

jQueryの基礎

今までほとんどコピペで使用していたjQueryの基本的なことを調べてみました。
コードを理解したうえでのコピペや、自分で1から実装できたら良いなと思います。

jQuery概要

JavaScriptのライブラリで、下記などの動きの部分が少ない記述で実装できる。

  • モーダルウィンドウ
  • プルダウンメニュー
  • カルーセル

Ajax(非同期通信)やフォームの値チェックもできる。

簡単な実装をしてみる。

クリックしたら要素を右に移動させる

See the Pen wQvgdo by choco (@tamagon_web) on CodePen.

1行目の$(function()$(document).ready(function()と同じで、ドキュメント(HTML)が読み込まれたら処理を実行する。

2行目の$('p').click(function(){はpタグがクリックされたら処理を実行する。

3行目の$(this).animate({'right':'200px'});は(this)は自身(pタグ)のことで、アニメーションしながらright:200pxの位置に移動する。

クリックしたらclassを追加・削除する

See the Pen vQEbgp by choco (@tamagon_web) on CodePen.

1行目、2行目は要素を動かすのと同じで、2行目、$(this).toggleClass('hoge02');は自身(.hoge)にclassを追加・削除する。(‘hoge02’)のところ、スペースを入れることで複数のclassを指定できる。

とりあえず、簡単そうな実装を2つやってみました。
次はモーダルウィンドウを作ってみようと思います。手を動かすって大事ですね。