jQueryのいろいろな処理


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

🎳 attrpropdataの違い

attrpropdataの違いについて。

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

🤔 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() );
});

🐡 参考リンク

📚 おすすめの書籍

🖥 サーバについて

このブログでは「Cloud Garage」さんのDev Assist Program(開発者向けインスタンス無償提供制度)でお借りしたサーバで技術検証しています。 Dev Assist Programは、開発者や開発コミュニティ、スタートアップ企業の方が1GBメモリのインスタンス3台を1年間無料で借りれる心強い制度です!(有償でも1,480円/月と格安)