jQueryのいろいろな処理


ここではjQueryのデータ処理やループなどいくつかの機能を紹介します。

🚜 attr、prop、dataの違い

attr、prop、dataの違いについて。

メソッド 説明 JavaScriptのコード
attr DOM要素の属性(attribute)を取得、設定する element.getAttribute(name)
prop DOM要素のプロパティ値を取得、設定する element[name]
data DOM要素のHTML5カスタムデータ属性(“data-“で始まる属性)を取得、設定する。キャッシュが効いたり、余計な変換をする場合があり、使わない方がよい

🍄 attr、propsで取得するものが異なる点

attr、propsで取得するものが異なる点は注意が必要です。

  • attr
    • 属性における値を取得
    • HTMLの属性を取得するのに使う
  • propsはプロパティの真偽値を取得
    • input関連の値を取得する
// チェックされている場合
console.log($('#checkbox_id').attr('checked')); // => checked
console.log($('#checkbox_id').prop('checked')); // => true

// チェックされていない場合
console.log($('#checkbox_id').attr('checked')); // => undefined
console.log($('#checkbox_id').prop('checked')); // => false

🎉 HTMLタグのdata属性の取得：.data

jQueryの.data()はHTMLタグのdata-xxxといったdata属性を取得するメソッドです。

// data-foo に値をセット
$("body").data("foo", 7);

// data-fooに設定された値を取得
$("body").data("foo"); //=> 7

🐠 ループ処理：each

eachメソッドでDOMのループを作成できます。

<ul>
  <li>fooli>
  <li>barli>
ul>
$( "li" ).each(function(index) {
  console.log( index + ": " + $( this ).text() );
});

🐰 フォームのvalueをリセットする

$('input').val('');

😸 フォームの要素をdisableにする

$('input').disable(true); //=> disableにする
$('input').disable(false); //=> disableを解除する

🐞 参考リンク

🖥 VULTRおすすめ

「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！

📚 おすすめの書籍