Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

自分のためのjQuery学習コース1メモ

More than 1 year has passed since last update.

jQueryのProgate学習コース1をメモ。

jQueryの書き方

基本はJavaScriptなので、jsファイルに記述する。

基本の書き方.js
// 基本の書き方
$('セレクタ').メソッド名(引数);

// 例:
$('h1').hide();

$('セレクタ') の部分をjQueryオブジェクト、.メソッド名(引数) をメソッドという。

主なメソッド1

.hide 要素を隠す
.show 要素を現す(CSSでdisplay: none;と指定したものなど)
.fadeOut フェードアウトして隠す
.fadeIn フェードイン
.slideUp 下のほうから消えていく
.slideDown 上のほうから現れる

セレクタの指定方法

HTML内に記述した要素をセレクタにする。CSSと基本的に一緒と思えばOK。

  • HTMLタグ
    • タグ名をそのまま指定(例:$('h1')
  • class
    • クラス名にドットをつけて指定(例:$('.class')
    • ページ内で複数設定できる
  • id
    • id名に#をつけて指定(例:$('#id')
    • ページ内で重複させないので、jQueryの処理早くなるので推奨

イベントを使う

発動するタイミングをコントロールする方法。

イベントの書き方.js
$('セレクタ').イベント名(function(){
  // 実行する処理
});

// クリックしたらそのセレクタ部分を隠す
$('#button1').click(function(){
  $(this).hide();
});

// クリックしたら別のセレクタ部分を隠す
$('#button2').click(function(){
  $('#text').hide();
});

主なメソッド2

.css('プロパティ','値') CSSを変更する
.text('文字列') セレクタ内を文字列で置き換える
.html('HTMLソース') セレクタ内をHTMLで置き換える

thisの使い方

ソース.html
<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>
ソース.js
$('li').click(function(){
  $(this).css('color','red');
});

thisはそのイベントが発生した要素を取得できる。上記のように書くと、クリックしたリストの行だけが赤くなる。

省略・高速化

変数やメソッドチェーンを利用することで、コードの省略ができる。また処理速度の高速化にもつながる。

変数

script.js
const $div = $('div');
// と宣言することで、
$div.hide();
// のようにjQueryオブジェクトを変数化することができる。

変数の宣言は、主にconstを使用する。constは再代入できないので、後から変更する必要がある場合はletを使う。varもあるが現在は多くの場合、推奨されていない。

参考:
JavaScript var/let/constによる変数宣言 - Qiita
var/let/constの使い分けのメモ - Qiita
など

メソッドチェーン

script.js
$('#method').css('color','red').text('テキスト');

のように . ドットでつなげることで、ひとつのjQueryオブジェクトに複数のメソッドが使える。

findメソッド

script.js
$('#method').find('a').css('color','red');

で、#method のすべての配下のうち a セレクタを持つ要素を取得できる。

childrenメソッド

script.js
$('#method').children('a').css('color','red');

で、#method のひとつ下の階層から a セレクタを持つ要素を取得できる。

hoverイベント

script.js
$('div').hover(
  function(){
  // マウスポインターをのせたときの処理
  },
  function(){
  // マウスポインターを外したときの処理
  }
);

引数となる関数は2つ。

tao829
エンジニアの入り口に立ちました。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away