share_jquery に役立つ JavaScript と jQuery スニペット

指定された要素に CSS クラスを追加します:

インライン スタイルを追加する代わりに CSS クラスを追加することで、要素の外観と雰囲気を変更する非常にクリーンな方法です。 jQuery を使用すると、これは簡単に実行できます:

$('#myelement').addClass('myclass');

指定された要素から CSS クラスを削除します:

CSS クラスを追加するのは素晴らしいことだと思うかもしれませんが、不要な CSS クラスを削除する方法も知る必要があります。次のコードはこれを行います:

$('#myelement').removeClass('myclass');

指定された要素に特定の CSS クラスがあるかどうかを検出します:

アプリケーションや Web サイトで特定の要素に CSS クラスを頻繁に追加または削除する必要がある場合、要素に特定の CSS クラスがあるかどうかを検出できると非常に便利です。

$(id).hasClass(class)

jQuery を使用して CSS を切り替える:

ご覧のとおり、jQuery を使用して要素に CSS スタイルを追加または削除するのは非常に簡単で便利です。しかし、CSS ファイル全体を完全に削除して、新しいスタイル ファイル (一般的なページの色の切り替えやその他の効果など) を添付したい場合はどうすればよいでしょうか?次の例に示すように、実際には非常に簡単です。

$('link[media='screen']').attr('href', 'Alternative.css');

出典: http://addyosmani.com/blog/50-jquery-snippets-for-developers/

HTML コードを要素に追加します:

要素に HTML コンテンツを追加する必要がある場合、append() メソッドを使用すると時間と労力を節約できます。

$('#lal').append('sometext');

要素が存在するかどうかを検出します:

JavaScript を使用する場合、要素が存在するかどうかを確認する必要があることがよくあります。 jQuery と length プロパティを使用すると、非常に簡単です。長さが 0 の場合、ページにはその要素がありません。それ以外の場合は、要素があります。

if ($('img').length) {  log('We found img elements on the page using "img"');} else {  log('No img elements found');}

出典: http://jqueryfordesigners.com/element-exists/

指定された要素の親要素を取得します:

DOM を操作する場合、要素の直接の親要素を知る必要がある場合があります。 close() メソッドは次のことを通知します:

var id = $("button").closest("div").attr("id");

出典: http://stackoverflow.com/questions/545978/finding-the-id-of-a-parent-div-using-jquery

要素の兄弟ノードを取得します:

要素の兄弟ノードを取得する Brothers() メソッドは、非常に便利なツールです。以下に示すように、このメソッドの使用は非常に簡単です:

$("div").siblings()

選択リストからのオプションの削除:
選択リストを使用する場合、ユーザーのアクションに基づいてコンテンツを更新する必要がある場合があります。選択リストからオプションを削除するには、次のコードを使用します:

$("#selectList option[value='2']").remove();

出典: http://calisza.wordpress.com/2009/03/29/6-jquery-snippets-you-can-use-to-manipulate-select-inputs/

リスト オプションのテキスト コンテンツを取得します:

このメソッドは、ユーザーが選択メニューから選択したオプションを素早く検出する必要がある場合に便利です。

$('#selectList :selected').text();

テーブルに「ゼブラ」効果 (1 行おきに色を変更) を適用します:

表を使用する場合、色を変えるスタイルは読みやすさを向上させるための良い解決策です。 jQuery を使用すると、追加の HTML マークアップなしでこれを簡単に実現できます。

$("tr:odd").addClass("odd");

出典: http://web.enavu.com/tutorials/top-10-jquery-snippets-含む-jquery-1-4/

要素の子ノードの数を計算します:

#foo 要素に含まれる div 子要素の数を確認したい場合は、以下のコードでわかります。シンプルなのに効果的！

$("#foo > div").length<br><p>来源：<a href="http://tympanus.net/codrops/2010/01/05/some-useful-javascript-jquery-snippets/" target="_blank">http://tympanus.net/codrops/2010/01/05/some-useful-javascript-jquery-snippets/</a></p>