jQuery

jQueryの基本構造はDOMをセレクタによって指定し、jQuery Objectとして取得することで、便利なメソッドを利用できるライブラリです。

1. Selector

Selectorは指定したDOMをjQuery Objectに変換します。

var element = $('#hoge'); // idがhogeの要素を取得
var elements = $('.fuga'); // fugaクラスの要素を取得

1.1. Attributes:DOMの属性を操作する

オプション 説明
.hasClass(クラス名) クラス名が存在する場合はtrue、ない場合はfalseを返します
.addClass(追加するクラス) 指定したクラスを追加します
.removeClass(追加するクラス) 指定したクラスを追加します
.attr(属性, 値) 属性値の取得、設定を行います
.removeAttr(属性) 指定した属性を削除します

1.2. CSS: CSSの操作を行う

オプション 説明
css(プロパティ、値) cssプロパティの値を取得、設定します
.height() 高さを取得します(paddingの内側)
.innerHeight() 高さを取得します(paddingの外側)
.outerHeight([true]) trueをつけるとmarginの外の高さ、つけないとboarderの外の高さ
.width() 横幅を取得します(paddingの内側)
.innerWidth() 横幅を取得します(paddingの外側)
.outerWidth([true]) trueをつけるとmarginの外の横幅、つけないとboarderの外の横幅
.position() 親要素絡みた、相対位置(左上)を取得します
.scrollTop(数値) 要素のスクロール位置を取得、設定します

1.3. Event: 入力イベントに関する処理

マウスやキーボード、フォーム、ブラウザ操作、ロードなどのイベントに関する処理です。マウスやキーボードに関するイベントでは.onを使うようにしましょう。 .on(イベント名、function)はセレクタで指定した要素に、イベントが発生したときに実行するfunctionを設定します。

$('.btn').on('click', function(e) {
    // 処理
})

.onを実行するときに、DOMがあらかじめ存在する必要があります。また、引数で渡されるオブジェクトeは次のような特性があります。

  • e.preventDefault():クリックした対象のイベントをキャンセルできます
  • e.currentTargetonバインドされたDOMを指します。thisと同義です
  • e.target:直接クリックされた対象のDOMを指します

2. 補足:DOMとは

DOMとは「Document Object Model」のことでHTML/XMLを扱うための仕様です。 JavaScriptはこのDOMを使って、HTMLを操作できます。

3. 参考リンク

results matching ""

    No results matching ""