便利なjQueryメソッドまとめ

高さ系のメソッド

  • outerHeight():padding、borderまで含んだ高さを取得
  • outerHeight(true):marginまで含んだ高さを取得
  • height():純粋に高さ(height)を取得

(注)

  • 該当する要素が複数ある場合、最初の要素
  • height()に引数入れたら値をセット出来る(引数なしならgetter、引数ありならsetter)

(例)

  • $(window).height():ブラウザの高さを取得
  • $(document).height():ドキュメント(ページ全体)の高さを取得

座標系のメソッド

  • offset():ドキュメント上での表示位置(ドキュメントベースでの絶対座標)→topleftの2つを持つ
  • scrollTop():スクロール上での上位置(スクロール範囲の中での座標。相対座標)

よく使うイベント

  • scroll
  • click
  • resize

おまけ

[CSS]positionプロパティ

  • static:配置方法を指定しない。これが初期値。
  • relative:相対位置への配置。(基準位置の変更。親要素に対して用いる)
  • absolute:絶対位置への配置。
    • 親ボックスがstatic→基準はウィンドウの左上
    • 親ボックスがstatic以外→基準は親ボックスの左上
  • fixed:絶対位置への配置。(スクロールしても位置固定)
  • sticky:対応ブラウザSafari, iOS Safariのみ(2014年7月16日現在)

メソッドチェーン

メリットは、

  • $の記述1回で済む
  • 処理速度向上

シェアする

  • このエントリーをはてなブックマークに追加

フォローする