ProgateでjQueryを学習

この記事は3分で読めます

自分用メモ

随時追記していく

※参考:Progateとは?魅力や欠点、学習の順序や心得など

jQueryとは?


Webブラウザ用のJavaScriptコードをより容易に記述できるようにしたJavaScriptライブラリ。
煩雑なプログラムの記述を、より少ない記述で実現する事が可能になる。
利用する為には、開発しているHTMLの中にjQueryを読み込む必要がある。

※参考:クリエイティブ、プログラミング用語まとめ

学習コース jQuery 初級編


jQueryを使うと、Webページにアニメーションや効果を付ける事や
ユーザーの行動に応じたインタラクティブなデザインを実現できる

①jQueryの基礎

jQueryに触れてみよう
メソッドを使ってみよう
アニメーションを使おう
classとid
要素を表示しよう

★jQueryとは
JavaScriptのライブラリの1つ
ユーザーのクリックに反応して表示されるフォームやアニメーションなど
HTMLとCSSだけでは実現できない様々な動きを実現できる

★jQueryの書き方

$(‘セレクタ’).メソッド(引数);

セレクタ:何を
メソッド:どうするか

「S(‘セレクタ’)」で、jQueryオブジェクトを作成する
「.’メソッド(引数)’」で、メソッドの呼び出しを行う
→セレクタの周りはクォーテーション()が必要
→メソッドの周りはクォーテーションは不要。

jQueryはJavaScriptなので、文末にはセミコロン(;)を忘れずに
コメントもJavaScriptと同様に「//」を用いる

jQueryの使い方は、以下の2つが基本となる
①jQueryオブジェクトを作成する
②そのjQueryオブジェクトに対してメソッド(機能)を呼び出す

ーーーーーーーーーーーーーーーーーー

★アニメーションを使おう

$(‘セレクタ’).fadeOut();
//要素を隠す際に、徐々に消えていくアニメーションを追加

$(‘セレクタ’).fadeOut(1500);
//引数でアニメーションの速度を1500ミリ秒(1.5秒)に指定

fadeOutメソッドを用いると、要素を隠す際に、
アニメーションを付ける事ができる
fadeOutメソッドは、後ろの()内に引数として、
アニメーションの速度を指定できる
ミリ秒での指定や、文字列での指定が可能

$(‘セレクタ’).slideUp();
//要素を隠す際に、下から上へスライドするアニメーションを追加

$(‘セレクタ’).slideUp(1500);

ーーーーーーーーーーーーーーーーーー

★classとid
idは箇所しか使えないが、classは何箇所でも使える
より上の構造でidを、より下の構造でclassを使うべき?

  • リスト1
  • リスト2

ーーーーーーーーーーーーーーーーーー
★classとidをセレクタにする
idには最初に「#」を、classには最初に「.」を付ける

【stylesheet.css】
ーーーーーーーーーーーーーーーーーー
#list {
margin: 10px;
}
//idセレクタ(#)

.list-item {
color.blue;
}
//クラスセレクタ(.)

【script.js】
ーーーーーーーーーーーーーーーーーー
$(‘#list’).css(‘margin’, ’20px’);
//idセレクタ(#)
$(‘.list-item’).css(‘color’, ‘red’);
//クラスセレクタ(.)

jQueryで操作対象のHTMLを選択するには、jQueryメソッドを使う
jQueryメソッドは利用頻度が多いので、「$()」と省略して記述できる
「$()」と「jQuery()」は同じ意味
()の中には、HTML要素を特定するための「セレクタ」を指定する
セレクタの指定方法は、CSSと同じものが一通り使える
id属性には「#」を、class属性には「.」を最初に付ける

ーーーーーーーーーーーーーーーーーー
★演習問題
slideUpやfadeOutは、jQueryの表示・非表示に関するメソッド

$(function() {
// slideUpメソッドを用いて、「#title」の要素を隠してください
$(‘#title’).slideUp();

// fadeOutメソッドを用いて、「.lesson-item」の要素を隠してください
$(‘.lesson-item’).fadeOut();

});

jQueryでよく使うメソッドは以下を参照



②イベントを使おう

clickイベント
cssメソッド
textメソッドとhtmlメソッド
this
変数とメソッドチェーン

③要素の取得

find・children
hoverイベント

学習コース jQuery 中級編


Webページを作ろう

jQueryの準備

モーダルを表示しよう

モーダルを隠そう

hover機能の準備

addClass・removeClass

アコーディオンの準備

アコーディオンを完成しよう


学習コース jQuery 上級編


スライドを作ろう

eqメソッド
表示するスライドを切り替えよう
indexメソッド
prevとnext
ボタンの表示/非表示
関数を使おう
lengthメソッド

フォームを操作しよう

要素の値を取得しよう
入力欄の値を取得しよう
選択ボックスの値を取得しよう
フォームの入力チェックをしよう
入力欄への自動入力
選択ボックスの自動選択

ページ内を移動しよう

アニメーションをつけよう
ページ内リンクを作ろう
スクロールにアニメーションをつけよう
ナビゲーションをつくろう



  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

管理人紹介


21世紀、より良い人生を歩むための個人事業主による備忘録メモです。固定観念にとらわれず、日本や世界の深淵に触れ、自由快適な人生を歩んでいく事を大切にしています。