jQuery をより効果的に使用するための一般的な方法のまとめ-jsチュートリアル-php.cn

jQuery をより効果的に使用するための一般的な方法のまとめ

伊谢尔伦

リリース： 2017-06-19 14:28:31

オリジナル

1293 人が閲覧しました

jQuery が非常に使いやすいという事実は、オブジェクトを取得するときに CSS セレクターと互換性のある構文を使用するという事実と大きく関係しています (CSS セレクターについては、その方法を確認してください)。 10 分で CSS セレクターを取得する) ですが、その強みは、CSS3 セレクターと互換性があり、さらに多くの機能を備えていることです。

セレクター

CSS セレクターの基本を理解したら、jQuery セレクターを調べるのは非常に簡単です。

$('E~F')通常の隣接セレクター(弟セレクター)、E要素$('.class1.class2')クラス名に class1 と class2 の両方が含まれる要素と一致します$("E:first" ) all E$("E:last")すべての最後の E$("E:not(selector)")セレクターでフィルター E $ ("E : EVEN") すべて e のすべての INDEX は偶数です $ ("E: ODD") E のすべては奇数です $ ("E: E: eq(n)") " インデックス n を持つ E 内のすべての要素$("E:gt(n)") " " インデックス n より大きい E 内のすべての要素$("E: ll(n) ") インデックスが n 未満の E 内のすべての要素 $(":header") h1~h7 要素を選択 $("p:animated") 今すぐ選択実行する要素アニメーション効果 $('E:contains(value)')コンテンツに値が含まれる要素 $('E:empty ')要素空のコンテンツ$('E:has(F)')サブ要素に F を含む要素 $('p:has(a)'): タグ p$( 'E:parent')親要素はE, $('td:parent')の要素です:親要素はtdの要素です$( 'E:hidden')すべて非表示 E$('E:visible')すべて表示 E$('E[attr] ')E 属性 attr=value 付き$('E[attr=value]')E 属性 attr=value 付き$('E[attr !=value]')attribute属性！=value E子要素フィルターを使用します$('E:nth-child (3n+1)')$('E:nth- child(even)')$('E:nth-child(odd)')$ ('E:first-clild') の最初の子ノード $('E:last-clild')$('E: Only-clild')フォーム要素セレクター $(':checked') $('option: selected')フィルタリングメソッド子を見つけるコレクション内の各要素のノード

$(&#39;li.item-ii&#39;).find(&#39;li&#39;).css(&#39;background-color&#39;, &#39;red&#39;);

ログイン後にコピー

基本セレクター
$('*')	ページのすべての要素と一致
$('#id')	IDセレクター
$ ('.class')	クラスセレクター
$('element')	タグセレクター

構成/レベルセレクター
$( 'E,F')	複数要素セレクター、「,」で区切られ、要素 E または要素 F に同時に一致
$('E F')	子孫セレクター、使用されるスペースで区切られ、 E 要素のすべての子孫と一致します (子要素だけでなく、下向きに再帰的に子要素)要素 F
$(E>F)	子要素セレクター">" で区切られ、E 要素
$('E+F')	のすべての直接の子要素と一致し、直接隣接するセレクター、E 要素の隣接するおよび同じレベルと一致します。要素F
	の後の同じレベル要素Fと一致します(直接隣接しているかどうかは関係ありません)

基本フィルターセレクター










コンテンツフィルター




ビジュアルセレクター


属性フィルターセレクター



$('E[attr ^=value]')	属性属性は valueE で始まります
$('E[attr $=value]')	属性属性は値 E で始まりますvalue の末尾に
$('E[attr *=value]')

$('E:nth-child(n)' )E の n 番目の子ノード
インデックスが 3n+1 式に一致する子ノード
インデックスが偶数の子ノード
インデックスが奇数の子ノード
すべての E
すべての E
唯一の子ノードを持つ E の子ノード

$('E:type')特定の入力タイプ
選択されたチェックボックスまたはラジオ
選択されたオプション
	.find(selector)

.filter(selector)

コレクション内の現在の要素をフィルタリングします

$(&#39;li&#39;).filter(&#39;:even&#39;).css(&#39;background-color&#39;, &#39;red&#39;);

ログイン後にコピー

基本メソッド

.ready(handler)

windowとは異なり、ドキュメントが読み込まれた後に実行されるメソッドです。 onload

$(document).ready(function() {  // Handler for .ready() called.});

ログイン後にコピー

.each(function(index,element))

コレクション要素内の各要素を走査します

$("li" ).each(function( index ) {
  console.log( index + ": " + $(this).text() );
});

ログイン後にコピー

jQuery.extend( target [, object1 ] [, objectN ] ) オブジェクトを結合します

var object = $.extend({}, object1, object2);

ログイン後にコピー

以上がjQuery をより効果的に使用するための一般的な方法のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。