JavaScript jQueryオブジェクト

JavaScriptのjQueryオブジェクトは、パターンにマッチするHTML要素をオブジェクト化したものである。

1 Attributes
1. 1.1 addClass
2. 1.2 attr
3. 1.3 hasClass
4. 1.4 html
5. 1.5 prop
6. 1.6 removeAttr
7. 1.7 removeClass
8. 1.8 removeProp
9. 1.9 toggleClass
10. 1.10 val
2 Data Storage
1. 2.1 data
2. 2.2 removeData
3 Effects
1. 3.1 animate
2. 3.2 clearQueue
3. 3.3 delay
4. 3.4 dequeue
5. 3.5 fadeIn
6. 3.6 fadeOut
7. 3.7 fadeTo
8. 3.8 fadeToggle
9. 3.9 finish
10. 3.10 hide
11. 3.11 queue
12. 3.12 show
13. 3.13 slideDown
14. 3.14 slideToggle
15. 3.15 slideUp
16. 3.16 stop
4 Events
1. 4.1 bind
2. 4.2 blur
3. 4.3 change
4. 4.4 click
5. 4.5 contextmenu
6. 4.6 dblclick
7. 4.7 focus
8. 4.8 focusin
9. 4.9 focusout
10. 4.10 hover
11. 4.11 keydown
12. 4.12 keypress
13. 4.13 keyup
14. 4.14 load
15. 4.15 mousedown
16. 4.16 mouseenter
17. 4.17 mouseleave
18. 4.18 mousemove
19. 4.19 mouseout
20. 4.20 mouseover
21. 4.21 mouseup
22. 4.22 off
23. 4.23 on
24. 4.24 one
25. 4.25 ready
26. 4.26 resize
27. 4.27 scroll
28. 4.28 select
29. 4.29 submit
30. 4.30 trigger
31. 4.31 triggerHandler
5 Manipulation
1. 5.1 addClass
2. 5.2 after
3. 5.3 append
4. 5.4 appendTo
5. 5.5 attr
6. 5.6 before
7. 5.7 clone
8. 5.8 css
9. 5.9 detach
10. 5.10 empty
11. 5.11 hasClass
12. 5.12 height
13. 5.13 html
14. 5.14 innerHeight
15. 5.15 innerWidth
16. 5.16 insertAfter
17. 5.17 insertBefore
18. 5.18 offset
19. 5.19 outerHeight
20. 5.20 outerWidth
21. 5.21 position
22. 5.22 prepend
23. 5.23 prependTo
24. 5.24 prop
25. 5.25 remove
26. 5.26 removeAttr
27. 5.27 removeClass
28. 5.28 removeProp
29. 5.29 replaceAll
30. 5.30 replaceWith
31. 5.31 scrollLeft
32. 5.32 scrollTop
33. 5.33 text
34. 5.34 toggleClass
35. 5.35 unwrap
36. 5.36 val
37. 5.27 width
38. 5.38 wrap
39. 5.39 wrapAll
40. 5.40 wrapInner
6 Traversing
1. 6.1 add
2. 6.2 addBack
3. 6.3 children
4. 6.4 closest
5. 6.5 contents
6. 6.6 each
7. 6.7 end
8. 6.8 eq
9. 6.9 even
10. 6.10 filter
11. 6.11 find
12. 6.12 first
13. 6.13 has
14. 6.14 is
15. 6.15 last
16. 6.16 map
17. 6.17 next
18. 6.18 nextAll
19. 6.19 nextUntil
20. 6.20 not
21. 6.21 odd
22. 6.22 offsetParent
23. 6.23 parent
24. 6.24 parents
25. 6.25 parentsUntil
26. 6.26 prev
27. 6.27 prevAll
28. 6.28 prevUntil
29. 6.29 siblings
30. 6.30 slice

add()

一致した要素の集合に要素を追加した新しいjQueryオブジェクトを作成する。

add(selector)

add(elements)

add(html)

add(selection)

add(selector, context)

before()

マッチする要素の前にコンテンツを追加する。

jQueryObject.before(content[,content])

jQueryObject.before(function(index){
  /* script */
})

jQueryObject: jQueryオブジェクト
content: 挿入するコンテンツ(HTML文字列、DOM要素、要素の配列又はjQueryオブジェクト)
function: HTML文字列、DOM要素又はjQueryオブジェクトを返す関数を指定する。
index: マッチした要素のインデックス番号(0始まり)

beforeの使用例を次に示す。

<div id="div4">div4</div>
<div id="div5">div5</div>
<div id="div6">div6</div>

<script>
  $("#div5").before("<p>Inserted</p>");
</script>

上記の実行結果を示す。

div4

Inserted

div5

div6

children()

マッチする要素の子要素を取得する。マッチする要素の直下にある子要素のみ取得し、子孫要素は取得しない。

jQueryObject.children([selector]){
  /* script */
})

jQueryObject: jQueryオブジェクト
selector: 取得する子要素をフィルタするためのセレクタを指定する。セレクタにマッチする子要素だけが取得される。
引数を省略した場合、無条件にすべての子要素を取得する。

hasClass()

一致した要素のいずれかに、指定されたクラスが割り当てられているかどうかを判定する。

hasClass(className)

innerHeight()

コンテンツにパディングを含めた要素の高さを取得または設定する。

jQueryObject.innerHeight()

jQueryObject.innerHeight(value)

jQueryObject.innerHeight(function)

高さの違い
	コンテンツ	パディング	ボーダー	マージン
`jQueryObject.height()`	含む	含まない	含まない	含まない
`jQueryObject.innerHeight()`	含む	含む	含まない	含まない
`jQueryObject.outerHeight()`	含む	含む	含む	含まない
`jQueryObject.outerHeight(true)`	含む	含む	含む	含む

innerWidth()

コンテンツにパディングを含めた要素の幅を取得または設定する。

jQueryObject.innerWidth()

jQueryObject.innerWidth(value)

jQueryObject.innerWidth(function)

幅の違い
	コンテンツ	パディング	ボーダー	マージン
`jQueryObject.width()`	含む	含まない	含まない	含まない
`jQueryObject.innerWidth()`	含む	含む	含まない	含まない
`jQueryObject.outerWidth()`	含む	含む	含む	含まない
`jQueryObject.outerWidth(true)`	含む	含む	含む	含む

outerHeight()

コンテンツにパディングおよびボーダーを含めた要素の高さを取得または設定する。マージンを含めるかどうかは引数で指定する。

jQueryObject.outerHeight()

jQueryObject.outerHeight(boolean)

jQueryObject.outerHeight(value)

jQueryObject.outerHeight(value, boolean)

jQueryObject.outerHeight(function)

outerWidth()

コンテンツにパディングおよびボーダーを含めた要素の幅を取得または設定する。マージンを含めるかどうかは引数で指定する。

jQueryObject.outerWidth()

jQueryObject.outerWidth(boolean)

jQueryObject.outerWidth(value)

jQueryObject.outerWidth(value, boolean)

jQueryObject.outerWidth(function)

removeAttr

一致した要素の集合内の各要素から属性を削除する。

removeAttr(attributeName)

removeProp

一致した要素の集合のプロパティを削除する。

removeProp(propertyName)

toggleClass

クラスの存在またはstate引数の値に応じて、一致した要素の集合内の各要素から1つ以上のクラスを追加または削除する。

toggleClass(className)

toggleClass(className, state)

toggleClass(classNames)

toggleClass(classNames, state)

toggleClass(function)

toggleClass(function, state)

val()

一致した要素の集合内の最初の要素の現在の値を取得するか、一致したすべての要素の値を設定する。

val()