JavaScript jQueryオブジェクト

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

Table of Contents

  1. 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. 2 Data Storage
    1. 2.1 data
    2. 2.2 removeData
  3. 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. 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. 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. 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)

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()