jQuery

jQueryとは JavaScript のライブラリです。jQueryを利用することにより、HTML のDOM操作やAjaxの処理を簡潔に記述できます。

目次

  1. 1 HTML
    1. 1.1 <script>
  3. 2 グローバル・オブジェクト
    1. 2.1 window.jQuery
  5. 3 グローバル・メソッド
    1. 3.1 window.jQuery()
  7. 4 jQueryオブジェクト
    1. 4.1 Attributes
      1. 4.1.1 addClass
      2. 4.1.2 attr
      3. 4.1.3 hasClass
      4. 4.1.4 html
      5. 4.1.5 prop
      6. 4.1.6 removeAttr
      7. 4.1.7 removeClass
      8. 4.1.8 removeProp
      9. 4.1.9 toggleClass
      10. 4.1.10 val
    3. 4.2 Data Storage
      1. 4.2.1 data
      2. 4.2.2 removeData
    5. 4.3 Effects
      1. 4.3.1 animate
      2. 4.3.2 clearQueue
      3. 4.3.3 delay
      4. 4.3.4 dequeue
      5. 4.3.5 fadeIn
      6. 4.3.6 fadeOut
      7. 4.3.7 fadeTo
      8. 4.3.8 fadeToggle
      9. 4.3.9 finish
      10. 4.3.10 hide
      11. 4.3.11 queue
      12. 4.3.12 show
      13. 4.3.13 slideDown
      14. 4.3.14 slideToggle
      15. 4.3.15 slideUp
      16. 4.3.16 stop
    7. 4.4 Events
      1. 4.4.1 bind
      2. 4.4.2 blur
      3. 4.4.3 change
      4. 4.4.4 click
      5. 4.4.5 contextmenu
      6. 4.4.6 dblclick
      7. 4.4.7 focus
      8. 4.4.8 focusin
      9. 4.4.9 focusout
      10. 4.4.10 hover
      11. 4.4.11 keydown
      12. 4.4.12 keypress
      13. 4.4.13 keyup
      14. 4.4.14 load
      15. 4.4.15 mousedown
      16. 4.4.16 mouseenter
      17. 4.4.17 mouseleave
      18. 4.4.18 mousemove
      19. 4.4.19 mouseout
      20. 4.4.20 mouseover
      21. 4.4.21 mouseup
      22. 4.4.22 off
      23. 4.4.23 on
      24. 4.4.24 one
      25. 4.4.25 ready
      26. 4.4.26 resize
      27. 4.4.27 scroll
      28. 4.4.28 select
      29. 4.4.29 submit
      30. 4.4.30 trigger
      31. 4.4.31 triggerHandler
    9. 4.5 Manipulation
      1. 4.5.1 addClass
      2. 4.5.2 after
      3. 4.5.3 append
      4. 4.5.4 appendTo
      5. 4.5.5 attr
      6. 4.5.6 before
      7. 4.5.7 clone
      8. 4.5.8 css
      9. 4.5.9 detach
      10. 4.5.10 empty
      11. 4.5.11 hasClass
      12. 4.5.12 height
      13. 4.5.13 html
      14. 4.5.14 innerHeight
      15. 4.5.15 innerWidth
      16. 4.5.16 insertAfter
      17. 4.5.17 insertBefore
      18. 4.5.18 offset
      19. 4.5.19 outerHeight
      20. 4.5.20 outerWidth
      21. 4.5.21 position
      22. 4.5.22 prepend
      23. 4.5.23 prependTo
      24. 4.5.24 prop
      25. 4.5.25 remove
      26. 4.5.26 removeAttr
      27. 4.5.27 removeClass
      28. 4.5.28 removeProp
      29. 4.5.29 replaceAll
      30. 4.5.30 replaceWith
      31. 4.5.31 scrollLeft
      32. 4.5.32 scrollTop
      33. 4.5.33 text
      34. 4.5.34 toggleClass
      35. 4.5.35 unwrap
      36. 4.5.36 val
      37. 4.5.37 width
      38. 4.5.38 wrap
      39. 4.5.39 wrapAll
      40. 4.5.40 wrapInner
    11. 4.6 Traversing
      1. 4.6.1 add
      2. 4.6.2 addBack
      3. 4.6.3 children
      4. 4.6.4 closest
      5. 4.6.5 contents
      6. 4.6.6 each
      7. 4.6.7 end
      8. 4.6.8 eq
      9. 4.6.9 even
      10. 4.6.10 filter
      11. 4.6.11 find
      12. 4.6.12 first
      13. 4.6.13 has
      14. 4.6.14 is
      15. 4.6.15 last
      16. 4.6.16 map
      17. 4.6.17 next
      18. 4.6.18 nextAll
      19. 4.6.19 nextUntil
      20. 4.6.20 not
      21. 4.6.21 odd
      22. 4.6.22 offsetParent
      23. 4.6.23 parent
      24. 4.6.24 parents
      25. 4.6.25 parentsUntil
      26. 4.6.26 prev
      27. 4.6.27 prevAll
      28. 4.6.28 prevUntil
      29. 4.6.29 siblings
      30. 4.6.30 slice
  9. 5 ライブラリ
    1. 5.1 jQuery Raty
    2. 5.2 jQuery UI

<script>

jQuery のライブラリをインポートする HTML の基本テンプレートを次に示す。

<!DOCTYPE html>
<html>
  <head>
    <script src="/js/jquery.min.js"></script>
  </head>
  <body>
  <!-- content -->
  </body>
</html>

CDN

CDNは「Content Delivery Network」の略で、ウェブコンテンツを高速かつ効率的にユーザーに配信するための仕組みである。ユーザーが地理的に近いサーバーからデータを受け取れるため、通信の遅延（レイテンシ）が減り、ページの読み込み速度が向上する。

CDN を通じて jQuery のライブラリをインポートすることができる。

uncompressed

uncompressed は jQuery の非圧縮版であり、jQuery が提供する全ての機能を含んでいる。コードにコメントやインデント、改行がそのまま残されており、人間が読みやすい形式である。主に開発時やデバッグ時に、コードの内容を確認したり、エラーを追跡したりするために使用される。本番環境での使用には適していない。

<script
  src="https://code.jquery.com/jquery-3.7.1.js"
  integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
  crossorigin="anonymous"></script>

minified

minified は jQuery の圧縮版であり、jQuery が提供する全ての機能を含んでいる。コードからコメント、改行、余分な空白文字を削除し、変数名を短縮するなどして、ファイルサイズを最小限に抑えている。本番環境での使用に最適である。通信量を削減し、ロード時間を短縮する。これが最も一般的な標準の jQuery バージョンである。

<script
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous"></script>

slim

slim は uncompressed 版よりファイルサイズが小さいバージョンであるが、コードは圧縮されていない。以下の機能が意図的に除外されている。

主に DOM 操作やイベント処理のみを目的とし、AJAX やアニメーションはネイティブ JavaScript (Fetch API, CSS Transition) や他のライブラリで実装する場合の開発時に使用される。

<script
  src="https://code.jquery.com/jquery-3.7.1.slim.js"
  integrity="sha256-UgvvN8vBkgO0luPSUl2s8TIlOSYRoGFAX4jlCIm9Adc="
  crossorigin="anonymous"></script>

slim minified

slim minified は slim 版と同じ限定された機能セットを持っている（AJAX やエフェクトなし）。ファイルサイズが最も小さく、本番環境での使用に最適である。slim 版と同じ用途（DOM/イベント処理のみ）で、パフォーマンスを最優先する本番環境で使用される。

<script
  src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
  integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
  crossorigin="anonymous"></script>

参考文献

OpenJS Foundation (2022) jQuery