0
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

jQueryの基本を簡単にまとめる

Posted at

##ライブラリを利用する理由

  • クロスブラウザ対応が簡単にできる。
  • 利用しているプロパティなどがブラウザごとで利用できないといったことを避けることができる

###jQueryの特徴

  1. メソッドチェーンを利用できる
  2. CSS3セレクタや独自セレクタによる要素の取得
  3. プラグインによる拡張性の高さ

#####1. メソッドチェーンを利用できる

js
$('#foo').find('.foo-child').text('hello');

ドット演算子でつなぐことができ、処理を順番通りに実行することができる。理由は、メソッドの返り値がjQueryオブジェクトであるから。返り値のjQueryオブジェクトに対して、さらにメソッドを利用することができる。

##jQueryでよく使うメソッド一覧

####要素を選択

メソッド 説明
css(prop, value)
addClass
removeClass
toggleClass
offset()
scrollTop()

####要素を操作

メソッド 説明
css(prop, value)
addClass
removeClass
toggleClass
offset()
scrollTop()

####スタイルの操作

メソッド 説明
css(prop, value) cssを変更
addClass クラスを追加
removeClass クラスを削除
toggleClass('class', 'content') クラスがあればcontent追加、なければ削除
offset() 位置を取得
scrollTop() スクロール位置を取得

####アニメーション
アニメーションメソッドは以下の引数を取る

  • duration・・・アニメーション完了までの時間を表す
  • easing・・・アニメーションで変化させる値の変化量を設定する
  • callback・・・アニメーション完了時に実行されるコールバック関数を設定
メソッド 説明
css(prop, value) cssを変更
addClass クラスを追加
removeClass クラスを削除
toggleClass('class', 'content') クラスがあればcontent追加、なければ削除
offset() 位置を取得
scrollTop() スクロール位置を取得
0
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?