これらを理解した後でのみ、jQuery_jquery の機能を使い始めることができます。-jsチュートリアル-php.cn

由于当前jQuery如此的如雷贯耳，相信不用介绍什么是jQuery了，公司代码中广泛应用了jQuery，但我在看一些小朋友的代码时发现一个问题，小朋友们使用的仅仅是jQuery的皮毛，只是使用id选择器与attr方法，还有几个动画，如果只是如此，相比于其带来的开销，其实还不如不使用，下面介绍几个jQuery常用的方法，来让jQuery的威力发挥出来，否则只用有限的几个方法，相对于运行速度问题，真不如不用jQuery。

jQuery如此之好用，和其在获取对象时使用与CSS选择器兼容的语法有很大关系，毕竟CSS选择器大家都很熟悉（关于CSS选择器可以看看十分钟搞定CSS选择器），但其强大在兼容了CSS3的选择器，甚至多出了很多。

选择器

有了CSS选择器基础后，看jQuery的选择器就很简单了，不再详细一一说明

と一致します。のすべての直接の子要素と一致します。と一致します。 $('E~F') 通常の隣接セレクター (弟セレクター)、E 要素 $('.class1.class2')基本フィルターセレクター$("E:first")$("E:last")$("E:not(セレクター)")$("E:even") $("E:odd") すべての E のインデックスは奇数です$("E:eq(n)") E 内のインデックス n を持つすべての要素インデックスが n より大きい E 内のすべての要素$("E:ll(n)") コンテンツフィルターが含まれる要素ビジュアルセレクター属性フィルターセレクター

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

構成/レベルセレクター
$('E,F')	「,」で区切られた複数要素セレクターは、要素 E または要素 F に同時に一致します
$('EF')	子孫セレクターは、スペースで区切られ、E 要素のすべての子孫 (サブ要素だけでなく、下位に再帰的にサブ要素) 要素 F
$(E>F)	">" で区切られた子要素セレクターは、E 要素
$('EF')	直接隣接するセレクター。E 要素およびの兄弟要素 F の後のの
	の後のの兄弟要素 F と一致します (直接隣接しているかどうかは関係ありません)
クラス名に class1 と class2 の両方が含まれる要素と一致します

まずは E
すべての E の最後
セレクターによるフィルター E
すべての E のインデックスは偶数です

	$("E:gt(n)")
	インデックスが n より小さい E 内のすべての要素
$(":header")	h1~h7要素を選択
$("div:animated")	アニメーション効果を実行している要素を選択します

$('E:contains(value)')	コンテンツに値
$('E:empty')	コンテンツが空の要素
$('E:has(F)')	子要素に F を持つ要素、$('div:has(a)'): タグを含む div
$('E: 親')	親要素は E, $('td:parent') の要素です: 親要素は td の要素です

$('E:hidden')	すべて非表示 E
$('E:visible')	すべて表示されている E

$(‘E[attr]')	含有属性attr的E
$(‘E[attr=value]')	属性attr=value的E
$(‘E[attr !=value]')	属性attr！=value的E
$(‘E[attr ^=value]')	属性attr以value开头的E
$(‘E[attr $=value]')	属性attr以value结尾的E
$(‘E[attr *=value]')	属性attr包含value的E
$(‘E[attr][attr *=value]')	可以连用
子元素过滤器
$(‘E:nth-child(n)')	E的第n个子节点
$(‘E:nth-child(3n+1)')	E的index符合3n+1表达式的子节点
$(‘E:nth-child(even)')	E的index为偶数的子节点
$(‘E:nth-child(odd)')	E的index为奇数的子节点
$(‘E:first-clild')	所有E的第一个子节点
$(‘E:last-clild')	所有E的最后一个子节点
$(‘E:only-clild')	只有唯一子节点的E的子节点
表单元素选择器
$(‘E:type')	特定类型的input
$(‘:checked')	被选中的checkbox或radio
$(‘option: selected')	被选中的option

フィルタリング方法

.find(selector) は、コレクション内の各要素の子ノードを検索します

セレクター、jQuery オブジェクト、または要素によってフィルターされた、一致した要素の現在のセット内の各要素の子孫 (子ノード) を取得します。

コードをコピーコードは次のとおりです:

$('li.item-ii').find ('li ').css('background-color', 'red');

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

一致した要素のセットを、セレクターに一致する要素に減らすか、関数のテストに合格する要素に絞ります。

コードをコピーコードは次のとおりです。

$('li').filter(':even ').css('背景色', '赤');

基本的な方法

.ready(handler) メソッドは、window.onload

とは異なり、ドキュメントの読み込み完了後に実行されます。

DOM が完全にロードされたときに実行する関数を指定します。

コードをコピーコードは次のとおりです。

$(document).ready(function( ) {
 // .ready() のハンドラーが呼び出されます。
});

.each(function(index,element)) は、コレクション

内の各要素を走査します。

jQuery オブジェクトを反復処理し、一致した要素ごとに関数を実行します。

コードをコピーコードは次のとおりです。

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

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

2 つ以上のオブジェクトの内容を最初のオブジェクトに結合します。

コードをコピーコードは次のとおりです。

var object = $.extend({}, object1,オブジェクト 2);

要素を取得

.eq(index) インデックス

によって jQuery オブジェクトコレクション内の特定の jQuery オブジェクトを取得します

一致した要素のセットを指定されたインデックスの要素に減らします。

.eq(-index) jQuery オブジェクトコレクション内の特定の jQuery オブジェクトを逆順で取得します。インデックス

セット内の最後の要素から逆方向に数えた、要素の位置を示す整数。

コードをコピーしますコードは次のとおりです:

$( "li" ).eq( 2 )。 css( " 背景色", "赤" );

.get(index) jQuery コレクションオブジェクト内の特定のインデックスの DOM オブジェクトを取得します (jQuery オブジェクトを DOM オブジェクトに自動的に変換します)

jQuery オブジェクトと一致する DOM 要素の 1 つを取得します。

コードをコピーコードは次のとおりです。

console.log( $( "li" ).get ( -1 ) );

.get() は、jQuery コレクションオブジェクトを DOM コレクションオブジェクトに変換し、

を返します。

jQuery オブジェクトと一致する DOM 要素を取得します。

コードをコピーコードは次のとおりです。

console.log( $( "li" ).get () ) ;

.index() / .index(selector)/ .index(element) 指定されたコレクションから特定の要素のインデックスを検索します

一致した要素の中から指定された要素を検索します。

1. パラメーターなしで最初の要素のインデックスを返します

2. パラメータが DOM オブジェクトまたは jQuery オブジェクトの場合、コレクション内のパラメータのインデックスが返されます

3. パラメータがセレクターの場合、最初に一致した要素のインデックスを返します。見つからない場合は、-1 を返します。

コードをコピーコードは次のとおりです。

var listItem = $( "#bar" );
alert( "インデックス: " $( "li" ).index( listItem ) );

.clone([withDataAndEvents][,deepWithDataAndEvents]) は、jQuery コレクションのディープコピーを作成します (サブ要素もコピーされます)。デフォルトでは、オブジェクトのShuju イベントとバインディングイベントはコピーされません。

一致した要素のセットのディープコピーを作成します。

コードをコピーコードは次のとおりです:

$( ".hello" ).clone()。 appendTo( " .goodbye" );

.parent([selector]) セレクター

に一致する jQuery オブジェクトの親要素を取得します

一致した要素の現在のセット内の各要素の親を取得します。必要に応じてセレクターでフィルター処理します。

コードをコピーコードは次のとおりです:

$( "li.item-a" ).parent ('ul ').css( "背景色", "赤" );

.parents([selector]) セレクター

に一致する jQuery オブジェクトの祖先要素を取得します

一致した要素の現在のセット内の各要素の祖先を取得します。必要に応じてセレクターでフィルター処理します。

コードをコピーしますコードは次のとおりです。

$( "span.selected" ) .parents( " div" ) .css( "border", "2px 赤ベタ" )

要素の挿入

.append(content[,content]) / .append(function(index,html)) コンテンツをオブジェクトの末尾に追加します

パラメータで指定されたコンテンツを、一致した要素のセット内の各要素の末尾に挿入します。

1. 複数のコンテンツを一度に追加できます。コンテンツは DOM オブジェクト、HTML 文字列、jQuery オブジェクトです

2. パラメーターが関数の場合、関数は DOM オブジェクト、HTML 文字列、または jQuery オブジェクトを返すことができます。パラメーターはコレクション内の要素の位置と元の HTML 値です。

コードをコピーコードは次のとおりです:

$( ".inner" ).append ( "< ;p>テスト

" );
$( "body" ).append( $newdiv1, [ newdiv2,existingdiv1 ] );
$( "p" ).append( "< ;strong>こんにちは" );
$( "p" ).append( $( "strong" ) );
$( "p" ).append( document.createTextNode( "Hello" ) );

.appendTo(target) は、ターゲット要素の末尾にオブジェクトを挿入します。ターゲット要素には、セレクター、DOM オブジェクト、HTML 文字列、要素コレクション、jQuery オブジェクトを指定できます。

一致した要素のセット内のすべての要素をターゲットの末尾に挿入します。

コードをコピーコードは次のとおりです。

$( "h2" ).appendTo( $( " .container" ) );
$( "

Test

" ).appendTo( ".inner" );

.prepend(content[,content]) / .prepend(function(index,html)) オブジェクトの先頭にコンテンツを追加します。使い方は append

と似ています。

パラメータで指定されたコンテンツを、一致した要素のセット内の各要素の先頭に挿入します。

コードをコピーコードは次のとおりです。

$( ".inner" ).prepend( "< ;p>テスト

" );

.prependTo(target) はオブジェクトをターゲット要素の先頭に挿入します。使用法は prepend

と似ています。

一致した要素のセット内のすべての要素をターゲットの先頭に挿入します。

コードをコピーコードは次のとおりです。

$( "

Test

" ).prependTo( ".inner" );

.before([content][,content]) / .before(function) コンテンツをオブジェクトの前に挿入します（先頭ではなく、オブジェクトの外側、オブジェクトと同じレベルにあります）。パラメータは似ています。追加する

一致した要素のセット内の各要素の前に、パラメーターで指定されたコンテンツを挿入します。

コードをコピーコードは次のとおりです。

$( ".inner" ).before ( "< ;p>テスト

" );
$( ".container" ).before( $( "h2" ) );
$( "p" ).first().before ( newdiv1, [ newdiv2,existingdiv1 ] );
$( "p" ).before( "Hello" );
$( "p" ).before( document.createTextNode ( "こんにちは " ) );

.insertBefore(target) は、ターゲットの前にオブジェクトを挿入します (これも先頭ではなく、同じレベルです)

一致した要素のセット内のすべての要素をターゲットの前に挿入します。

コードをコピーコードは次のとおりです。

$( "h2" ).insertBefore( $( " .container" ) );

.after([content][,content]) / .after(function(index)) 前とは逆に、コンテンツ、パラメータを挿入し、オブジェクトの後に追加します（末尾ではなく外側、同じレベルにあります）。オブジェクト)

に類似

一致した要素のセット内の各要素の後に、パラメーターで指定されたコンテンツを挿入します。

コードをコピーコードは次のとおりです。

$( ".inner" ).after ( "< ;p>テスト

" );
$( "p" ).after( document.createTextNode( "Hello" ) );

.insertAfter(target) は insertBefore の逆で、ターゲットの後にオブジェクトを挿入します (これも末尾ではなく、同じレベルにあります)

一致した要素のセット内のすべての要素をターゲットの後に挿入します。

コードをコピーコードは次のとおりです。

$( "

Test< /p> " ).insertAfter( ".inner" );
$( "p" ).insertAfter( "#foo" );

要素のラッピング

.wrap(wrappingElement) / .wrap(function(index)) は、セレクター、要素、HTML 文字列、jQuery オブジェクトなどの各オブジェクトの HTML 構造をラップします

一致した要素のセット内の各要素を HTML 構造で囲みます。

コードをコピーコードは次のとおりです:

こんにちは

さようなら

$( ".inner " ).wrap( "

" );

こんにちは

さようなら< ;/div>

.wrapAll(wrappingElement) は、一致するすべてのオブジェクトを同じ HTML 構造内でラップします

一致した要素のセット内のすべての要素を HTML 構造で囲みます。

コードをコピーコードは次のとおりです:

こんにちは

さようなら

$( ".inner " ).wrapAll( "

");

こんにちは

さようなら

.wrapInner(wrappingElement) / .wrapInner(function(index)) は、一致する要素のコンテンツをラップします。これは、例を見るだけで理解できます。

一致した要素のセット内の各要素のコンテンツを HTML 構造で囲みます。

コードをコピーコードは次のとおりです:

こんにちは

さようなら

$( ".inner " ).wrapInner( "

");

こんにちは

さようなら< ;/div>

.unwap() は DOM 要素の親を削除します

一致した要素のセットの親を DOM から削除し、一致した要素をその場所に残します。

コードをコピーコードは次のとおりです。

pTags = $( "p" ).unwrap() ;

属性メソッド

.val() は要素

の値を取得します

一致した要素のセット内の最初の要素の現在の値を取得します。

コードをコピーコードは次のとおりです。

$( "input:checkbox:checked" ).val ();

.val(value) /.val(function(index,value)) 要素の値を設定します。インデックスと値は、コレクション内の各要素に設定する場合、要素のインデックスと元の値も参照します。 🎜 >

一致した要素のセット内の各要素の値を設定します。

コードをコピーコードは次のとおりです。

$( "input" ).val( 'hello' );
$( "input" ).on( "blur", function() {
 $( this ).val(function( i, val ) {
 return val.toUpperCase( );
 });
});

.attr(attributeName) は要素の特定の属性の値を取得します

一致した要素のセット内の最初の要素の属性の値を取得します。

コードをコピーコードは次のとおりです。

var title = $( "em" ) .attr( "タイトル" );

.attr(attributeName,value) / .attr(attributesJson) / .attr(attributeName, function(index, attr) ) 要素の属性に値を割り当てます

一致した要素のセットに 1 つ以上の属性を設定します。

コードをコピーコードは次のとおりです:

$( "#greatphoto" ).attr ( "alt ", "北京の筆売り" );
$( "#greatphoto" ).attr({

alt: "北京の筆売り",
title: "photo by Kelly Clark"
});

$( "#greatphoto" ).attr( "title", function( i, val ) {

return val " - 写真提供: Kelly Clark";
});

.prop( propertyName ) 要素

の特定の属性の値を取得します

一致した要素のセット内の最初の要素のプロパティの値を取得します。

コードをコピーコードは次のとおりです。

$( elem ).prop( "checked " )

.prop(propertyName,value) / .prop(propertiesJson) / .prop(propertyName,function(index,oldPropertyValue)) 要素のプロパティに値を割り当てます

一致した要素のセットに対して 1 つ以上のプロパティを設定します。

コードをコピーコードは次のとおりです。

$( "input" ).prop( "チェック済み" 、 true );
$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {

return !val;
});

$( "input[type='checkbox']" ).prop({

無効: true
});

属性とプロパティの違いについては、jQuery の attr と prop を参照してください

.data(key,value) / .value(json) は、HTML DOM 要素にデータを追加します。HTML5 要素にはすでに data-* 属性があります
。

一致した要素に関連付けられた任意のデータを保存します。.data() メソッドを使用すると、循環参照やメモリリークから安全な方法で、任意の型のデータを DOM 要素に添付できます。

コードをコピーコードは次のとおりです。

$( "body" ).data( "foo" , 52 );
$( "body" ).data( "bar", { myType: "test", count: 40 } );
$( "body" ).data( { baz : [ 1 , 2, 3 ] } );

.data(key) / .data() data で設定されたデータ、または HTML5 の data-* 属性のデータを取得します

data(name, value) または HTML5 data-* 属性によって設定された、jQuery コレクションの最初の要素の名前付きデータストアの値を返します。

コードをコピーコードは次のとおりです:

alert( $( "body" ).data( "foo" ) );
alert( $( "body" ).data() );

alert( $( "body" ).data( "foo" ) ); // 未定義
$( "body" ).data( "bar", "foobar" );
alert( $ ( "body" ).data( "bar" ) ); // foobar

CSS メソッド
.hasClass(calssName) は、要素に特定のクラスが含まれているかどうかを確認し、true/false を返します

一致した要素のいずれかが指定されたクラスに割り当てられているかどうかを判断します。

コードをコピーコードは次のとおりです:

$( "#mydiv" ).hasClass( "foo " )

.addClass(className) / .addClass(function(index,currentClass)) 元のクラスを上書きするのではなく追加し、重複をチェックしません。

指定されたクラスを、一致した要素のセットのそれぞれに追加します。

コードをコピーコードは次のとおりです。

$( "p" ).addClass( "myClass yourClass " );
$( "ul li" ).addClass(function(index ) {

return "item-"index;
});

removeClass([className]) / ,removeClass(function(index,class)) は単一/複数/すべてのクラスを削除します

一致した要素のセット内の各要素から、単一のクラス、複数のクラス、またはすべてのクラスを削除します。

コードをコピーコードは次のとおりです。

$( "p" ).removeClass( "myClass yourClass " );
$( "li:last" ).removeClass(function() {
 return $( this ).prev().attr( "class" );
}); 
 

.toggleClass(className) /.toggleClass(className,switch) / .toggleClass([switch]) / .toggleClass( function(index, class, switch) [, switch ] ) toggle はスイッチを意味し、メソッドが使用されますSwitch、switch は bool 型の値です。例を見ると理解できます

クラスの存在またはスイッチ引数の値に応じて、一致した要素のセット内の各要素から 1 つ以上のクラスを追加または削除します。

一部のテキスト。

最初の実行

コードをコピーコードは次のとおりです。

$( "div .tumble" ).toggleClass( "bounce" )

テキスト。

2 回目の実行

コードをコピーコードは次のとおりです:

$( "div.tumble" )。 toggleClass( " bounce" )
テキスト。

コードをコピーコードは次のとおりです:

$( "#foo" ).toggleClass ( className, addOrRemove );
// どちらの書き方も同じ意味です

if ( addOrRemove ) {

$( "#foo" ).addClass( className );
} else {
$( "#foo" ).removeClass( className );
}

コードをコピーコードは次のとおりです:

$( "div.foo" )。 toggleClass(function () {
 if ( $( this ).parent().is( ".bar" ) ) {
 return "happy";
 } else {
 return "sad" ;
 }
});

.css(propertyName) / .css(propertyNames) 要素スタイルの特定のプロパティの値を取得します

一致した要素のセット内の最初の要素のスタイルプロパティの値を取得します。

コードをコピーコードは次のとおりです:

var color = $( this ).css ( "背景色" );
var styleProps = $( this ).css([

"width", "height", "color", "background-color"
]);

.css(propertyName,value) / .css( propertyName, function(index, value) ) / .css(propertiesJson ) 要素スタイルの特定のプロパティの値を設定します

一致した要素のセットに対して 1 つ以上の CSS プロパティを設定します。

コードをコピーコードは次のとおりです:

$( "div.example" )。 css( " width", function(index ) {
return Index * 50;
});

$( this ).css( "width", " =200" );

$( this ).css( "background-color", " yellow" );

$( this ).css({
"背景色": "黄色",
"フォントの太さ": "太字"
});

イベントメソッド

.bind(eventType [,eventData],handler(eventObject) ) バインドイベントハンドラー、これはよく使われますが、あまり説明はありません

要素のイベントにハンドラーをアタッチします。

コードをコピーコードは次のとおりです:

$( "#foo" ).bind ( "クリック ", function() {
alert( "ユーザーが「foo」をクリックしました。" );
});

.delegate( selector,eventType,handler(eventObject) ) この

についての公式の説明を見てみましょう。

現在または将来、ルート要素の特定のセットに基づいて、セレクターに一致するすべての要素の 1 つ以上のイベントにハンドラーをアタッチします。

コードをコピーコードは次のとおりです。

$( "table" ).on( "click" , "td", function() {//次のように td のクリック イベント ハンドラーをテーブルに結び付けます 
 $( this ).toggleClass( "chosen" );
});
 

.on( events [, selector ] [, data ], handler(eventObject) ) 1.7 以降推奨、bind、live、delegate を置き換えます

1 つ以上のイベントのイベントハンドラー関数を選択した要素にアタッチします。

コードをコピーコードは次のとおりです:

$( "#dataTable tbody" )。 on( " click", "tr", function() {
alert( $( this ).text() );
});

bind、live、delegate、および on の違いについては、jQuery の 3 つのイベントバインディングメソッド、bind()、.live()、.delegate()

を参照してください。

.trigger(eventType [, extraParameters ] ) JavaScript トリガー要素バインディングイベント

指定されたイベントタイプの一致した要素に関連付けられたすべてのハンドラーと動作を実行します。

コードをコピーコードは次のとおりです:

$( "#foo" ).trigger ( "クリック " );

.toggle( [duration ] [, complete ] ) / .toggle( options ) 要素の表示または非表示

一致した要素を表示または非表示にします。

コードをコピーコードは次のとおりです:

$( ".target" ).toggle (); $( "#clickme" ).click(function() {
 $( "#book" ).toggle( "slow", function() {
 // アニメーションが完了しました。
 } );
});

アニメーション/Ajax
これら 2 つの部分には多くの内容が含まれており、単なる関数ではありません。これらの使用方法については、jQuery API を参照してください。アニメーション ajax、または jQuery アニメーション処理の概要、ASP.NET は Ajax アニメーションを使用します

キュー/デキュー/クリアキュー

遅延/停止

フェードイン/フェードアウト/フェードトゥ/フェードトグル

スライドアップ/スライドダウン/スライドトグル

表示/非表示

アヤックス

$.ajax

$.load

$.get

ついに

上記の内容を理解すると、Web 開発で jQuery を使用する際に jQuery の威力を体験できます。この記事は jQuery の学習ガイドではありません。jQuery を学びたい場合に最適な教材は、すべて jQuery API。また、記事内で紹介している内容は jQuery のすべてとは程遠いですが、まずはこれらをマスターすることで jQuery をより包括的に理解することができ、その後他の内容もスムーズに学習できるようになります。