jQueryのいろいろな処理


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

🚕 attrpropdataの違い

attrpropdataの違いについて。

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

🎂 attrpropsで取得するものが異なる点

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

  • 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>foo</li>
<li>bar</li>
</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のヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります!

📚 おすすめの書籍