LoginSignup
31
31

More than 5 years have passed since last update.

jQueryをちゃんと学ぶ

Last updated at Posted at 2015-05-25

jQuery勉強してみたよ

実務で使うことが多いjQuery様。

core機能

readyとjQueryオブジェクトにするやつくらいしかわかりません

core.js


//===========Basic===========================

//要素contextを基点にセレクタexpで検索してマッチした要素を取得
$(exp [,context])

//指定したhtmlとプロパティ情報からjQueryオブジェクトを生成
$(html [,props])

//要素をjQueryオブジェクトに変換
$(elems)

//ページの読み込みがタイミングで関数fnを実行(readyメソッドのショートカット)
$(fn())

//readyイベントを制御(holdがtrueでイベント実行を待ち、falseで実行)
$.holdReady(hold)


//===============Access=======================

//コールバック関数fnで各要素を繰り返し処理
each(fn(index, elm))

//index+1番目の要素を取得(引数省略時はすべての要素)
get([index])

//要素のインデックス番号を取得
index(elm)

//要素の数を取得
length

//jQueryオブジェクトを要素の配列に変換
toArray()



//================cache=========================

//「キー:値」のハッシュ形式でデータを取得
data()

//キー名nameと値valueのペアでデータを設定(value省略時はキー名に対応する値を取得)
data(name[,value])

//オブジェクトでデータを取得
data(obj)

//指定されたキーlist(配列、または空白区切りの文字列)を削除
removeData(list)

//キー名nameを削除(name省略時はすべてのキーを削除)
removeData([name])



//===================plugin========================

//jQueryオブジェクトに新しいメソッドを追加($().メソッド()の形式)
$.fn.extend(obj)

//jQUeryオブジェクトに新しいメソッドを追加($.メソッド()の形式)
$.extend(obj)


セレクタ(1)

あれ・・・・
ほとんど使えないものばかりじゃないか?

selecter.js

//アニメーション実行中であるすべての要素を取得
:animated

//セレクタexpで指定した要素以外を取得
:not(exp)

//最初の要素を取得
:first

//最後の要素を取得
:last

//index番目の要素を取得
:eq(index)

//index + 1番目以上の要素を取得
:gt(index)

//index番目未満の要素を取得
:lt(index)

//h系(見出し)要素をすべて取得
:header

//指定した言語の要素すべてを取得
:lang(lang)

//ドキュメントのルート要素を取得
:root

//URLフラグメント(hoge.html#fooのfooにあたる部分)に一致するid値を持つ要素を取得
:target

//textを含む要素を取得
:contains(text)

//子要素のない要素を取得
:empty

//子要素を持つ要素を取得
:parent

//セレクタexpにマッチする子孫要素を持つ要素を取得
:has(exp)


セレクタ(2)

あれ・・・
CSS3のセレクタと似てる。

selecter.js



//指定した属性を持つ要素を取得
elm[attr]

//指定した属性がvalueで始まる値を持つ要素を取得
elm[attr^=value]

//指定した属性がvalueで終わる値を持つ要素を取得
elm[attr$=value]

//指定した属性がvalueを含む値を持つ要素を取得
elm[attr*=value]

//複数の属性フィルタすべてにマッチする要素を取得
elm[funya][hoge][panipani]

//指定した兄弟要素の中で最初の要素を取得
:first-of-type

//指定した兄弟要素の中で最後の要素を取得
:last-of-type

//1つだけ子要素を持つ要素を取得
:only-child

//他に兄弟要素を持たない要素を取得
:only-of-type

//選択状態にある要素すべてを取得
:selected

//有効な状態の要素すべてを取得
:enabled

//無効な状態の要素すべてを取得
:disabled

//非表示の要素すべてを取得
:hidden

//表示状態の要素すべてを取得
:visible



31
31
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
31
31