これらを理解した後でのみ、jQuery_jquery の機能を使い始めることができます。
由于当前jQuery如此的如雷贯耳，相信不用介绍什么是jQuery了，公司代码中广泛应用了jQuery，但我在看一些小朋友的代码时发现一个问题，小朋友们使用的仅仅是jQuery的皮毛，只是使用id选择器与attr方法，还有几个动画，如果只是如此，相比于其带来的开销，其实还不如不使用，下面介绍几个jQuery常用的方法，来让jQuery的威力发挥出来，否则只用有限的几个方法，相对于运行速度问题，真不如不用jQuery。
jQuery如此之好用，和其在获取对象时使用与CSS选择器兼容的语法有很大关系，毕竟CSS选择器大家都很熟悉（关于CSS选择器可以看看十分钟搞定CSS选择器），但其强大在兼容了CSS3的选择器，甚至多出了很多。
选择器
有了CSS选择器基础后，看jQuery的选择器就很简单了，不再详细一一说明
| 基本セレクター | ||
| $(‘*’) | ページ上のすべての要素と一致します | |
| $('#id') | ID セレクター | |
| $('.class') | クラスセレクター | |
| $('要素') | タグセレクター | |
| 構成/レベルセレクター | ||
| $('E,F') | 「,」で区切られた複数要素セレクターは、要素 E または要素 F に同時に一致します | |
| $('EF') | 子孫セレクターは、スペースで区切られ、E 要素のすべての 子孫 (サブ要素だけでなく、下位に再帰的にサブ要素) 要素 F | |
| $(E>F) | ">" で区切られた子要素セレクターは、E 要素 | |
| $('EF') | 直接隣接するセレクター。E 要素 および の兄弟 要素 F の後の の | と一致します。|
| 通常の隣接セレクター (弟セレクター)、E 要素 | の後の の兄弟 要素 F と一致します (直接隣接しているかどうかは関係ありません) | |
| クラス名に class1 と class2 の両方が含まれる要素と一致します | ||
| まずは E | ||
| すべての E の最後 | ||
| セレクターによるフィルター E | ||
| すべての E のインデックスは偶数です | ||
| $("E:eq(n)") | ||
| $("E:gt(n)") | インデックスが n より大きい E 内のすべての要素||
| $("E:ll(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 オブジェクト、または要素によってフィルターされた、一致した要素の現在のセット内の各要素の子孫 (子ノード) を取得します。
.filter(selector) 現在のコレクション内の要素をフィルタリングします
一致した要素のセットを、セレクターに一致する要素に減らすか、関数のテストに合格する要素に絞ります。
基本的な方法
.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 つ以上のオブジェクトの内容を最初のオブジェクトに結合します。
要素を取得
.eq(index) インデックス
によって jQuery オブジェクト コレクション内の特定の jQuery オブジェクトを取得します一致した要素のセットを指定されたインデックスの要素に減らします。
.eq(-index) jQuery オブジェクト コレクション内の特定の jQuery オブジェクトを逆順で取得します。インデックス
セット内の最後の要素から逆方向に数えた、要素の位置を示す整数。
.get(index) jQuery コレクション オブジェクト内の特定のインデックスの DOM オブジェクトを取得します (jQuery オブジェクトを DOM オブジェクトに自動的に変換します)
jQuery オブジェクトと一致する DOM 要素の 1 つを取得します。
.get() は、jQuery コレクション オブジェクトを DOM コレクション オブジェクトに変換し、
を返します。jQuery オブジェクトと一致する DOM 要素を取得します。
.index() / .index(selector)/ .index(element) 指定されたコレクションから特定の要素のインデックスを検索します
一致した要素の中から指定された要素を検索します。
1. パラメーターなしで最初の要素のインデックスを返します
2. パラメータが DOM オブジェクトまたは jQuery オブジェクトの場合、コレクション内のパラメータのインデックスが返されます
3. パラメータがセレクターの場合、最初に一致した要素のインデックスを返します。見つからない場合は、-1 を返します。
alert( "インデックス: " $( "li" ).index( listItem ) );
.clone([withDataAndEvents][,deepWithDataAndEvents]) は、jQuery コレクションのディープ コピーを作成します (サブ要素もコピーされます)。デフォルトでは、オブジェクトのShuju イベントとバインディング イベントはコピーされません。
一致した要素のセットのディープ コピーを作成します。
.parent([selector]) セレクター
に一致する jQuery オブジェクトの親要素を取得します一致した要素の現在のセット内の各要素の親を取得します。必要に応じてセレクターでフィルター処理します。
.parents([selector]) セレクター
に一致する jQuery オブジェクトの祖先要素を取得します一致した要素の現在のセット内の各要素の祖先を取得します。必要に応じてセレクターでフィルター処理します。
要素の挿入
.append(content[,content]) / .append(function(index,html)) コンテンツをオブジェクトの末尾に追加します
パラメータで指定されたコンテンツを、一致した要素のセット内の各要素の末尾に挿入します。
1. 複数のコンテンツを一度に追加できます。コンテンツは DOM オブジェクト、HTML 文字列、jQuery オブジェクトです
2. パラメーターが関数の場合、関数は DOM オブジェクト、HTML 文字列、または jQuery オブジェクトを返すことができます。パラメーターはコレクション内の要素の位置と元の HTML 値です。
$( "body" ).append( $newdiv1, [ newdiv2,existingdiv1 ] );
$( "p" ).append( "< ;strong>こんにちは" );
$( "p" ).append( $( "strong" ) );
$( "p" ).append( document.createTextNode( "Hello" ) );
一致した要素のセット内のすべての要素をターゲットの末尾に挿入します。
$( "
Test
" ).appendTo( ".inner" );と似ています。
パラメータで指定されたコンテンツを、一致した要素のセット内の各要素の先頭に挿入します。
と似ています。
一致した要素のセット内のすべての要素をターゲットの先頭に挿入します。
Test
" ).prependTo( ".inner" ); .before([content][,content]) / .before(function) コンテンツをオブジェクトの前に挿入します（先頭ではなく、オブジェクトの外側、オブジェクトと同じレベルにあります）。パラメータは似ています。追加する一致した要素のセット内の各要素の前に、パラメーターで指定されたコンテンツを挿入します。
$( ".container" ).before( $( "h2" ) );
$( "p" ).first().before ( newdiv1, [ newdiv2,existingdiv1 ] );
$( "p" ).before( "Hello" );
$( "p" ).before( document.createTextNode ( "こんにちは " ) );
.insertBefore(target) は、ターゲットの前にオブジェクトを挿入します (これも先頭ではなく、同じレベルです)
一致した要素のセット内のすべての要素をターゲットの前に挿入します。
.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 構造で囲みます。
.wrapAll(wrappingElement) は、一致するすべてのオブジェクトを同じ HTML 構造内でラップします
一致した要素のセット内のすべての要素を HTML 構造で囲みます。
.wrapInner(wrappingElement) / .wrapInner(function(index)) は、一致する要素のコンテンツをラップします。これは、例を見るだけで理解できます。
一致した要素のセット内の各要素のコンテンツを HTML 構造で囲みます。
.unwap() は DOM 要素の親を削除します
一致した要素のセットの親を DOM から削除し、一致した要素をその場所に残します。
属性メソッド
.val() は要素
の値を取得します一致した要素のセット内の最初の要素の現在の値を取得します。
$( "input:checkbox:checked" ).val ();
.val(value) /.val(function(index,value)) 要素の値を設定します。インデックスと値は、コレクション内の各要素に設定する場合、要素のインデックスと元の値も参照します。 🎜 >
一致した要素のセット内の各要素の値を設定します。
$( "input" ).on( "blur", function() {
$( this ).val(function( i, val ) {
return val.toUpperCase( );
});
});
一致した要素のセット内の最初の要素の属性の値を取得します。
一致した要素のセットに 1 つ以上の属性を設定します。
$( "#greatphoto" ).attr({
alt: "北京の筆売り",
title: "photo by Kelly Clark"
});
return val " - 写真提供: Kelly Clark";
});
の特定の属性の値を取得します
一致した要素のセット内の最初の要素のプロパティの値を取得します。
一致した要素のセットに対して 1 つ以上のプロパティを設定します。
$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
return !val;
});
無効: true
});
.data(key,value) / .value(json) は、HTML DOM 要素にデータを追加します。HTML5 要素にはすでに data-* 属性があります
。
$( "body" ).data( "bar", { myType: "test", count: 40 } );
$( "body" ).data( { baz : [ 1 , 2, 3 ] } );
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 を返します
一致した要素のいずれかが指定されたクラスに割り当てられているかどうかを判断します。
.addClass(className) / .addClass(function(index,currentClass)) 元のクラスを上書きするのではなく追加し、重複をチェックしません。
指定されたクラスを、一致した要素のセットのそれぞれに追加します。
$( "ul li" ).addClass(function(index ) {
return "item-"index;
});
一致した要素のセット内の各要素から、単一のクラス、複数のクラス、またはすべてのクラスを削除します。
$( "li:last" ).removeClass(function() {
return $( this ).prev().attr( "class" );
});
クラスの存在またはスイッチ引数の値に応じて、一致した要素のセット内の各要素から 1 つ以上のクラスを追加または削除します。
最初の実行
// どちらの書き方も同じ意味です
if ( addOrRemove ) {
$( "#foo" ).addClass( className );
} else {
$( "#foo" ).removeClass( className );
}
if ( $( this ).parent().is( ".bar" ) ) {
return "happy";
} else {
return "sad" ;
}
});
一致した要素のセット内の最初の要素のスタイル プロパティの値を取得します。
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 をより包括的に理解することができ、その後他の内容もスムーズに学習できるようになります。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1666
14
1425
52
1325
25
1273
29
1252
24
jQueryのリファレンスメソッドを詳しく解説：クイックスタートガイド
Feb 27, 2024 pm 06:45 PM
jQuery 参照方法の詳細説明: クイック スタート ガイド jQuery は、Web サイト開発で広く使用されている人気のある JavaScript ライブラリであり、JavaScript プログラミングを簡素化し、開発者に豊富な機能を提供します。この記事では、jQuery の参照方法を詳しく紹介し、読者がすぐに使い始めるのに役立つ具体的なコード例を示します。 jQuery の導入 まず、HTML ファイルに jQuery ライブラリを導入する必要があります。 CDN リンクを通じて導入することも、ダウンロードすることもできます
jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか?
Feb 28, 2024 pm 03:12 PM
jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエスト メソッドを使用した具体的なコード例です。まず、jQuery ライブラリ ファイルが含まれていることを確認してから、$.ajax({u
徹底した分析: jQuery の長所と短所
Feb 27, 2024 pm 05:18 PM
jQuery は、フロントエンド開発で広く使用されている高速、小型、機能豊富な JavaScript ライブラリです。 2006 年のリリース以来、jQuery は多くの開発者にとって最適なツールの 1 つとなっていますが、実際のアプリケーションでは、いくつかの利点と欠点もあります。この記事では、jQuery の長所と短所を詳しく分析し、具体的なコード例で説明します。利点: 1. 簡潔な構文 jQuery の構文設計は簡潔かつ明確であるため、コードの読みやすさと記述効率が大幅に向上します。例えば、
jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する
Feb 28, 2024 pm 09:06 PM
タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキスト コンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリ ファイルを導入し、次のコードがページに導入されていることを確認する必要があります: <
jQuery を使用してすべての a タグのテキスト コンテンツを変更する
Feb 28, 2024 pm 05:42 PM
タイトル: jQuery を使用して、すべての a タグのテキスト コンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンク タグ (タグ) のテキスト コンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。
jQueryで要素の高さ属性を削除するにはどうすればよいですか?
Feb 28, 2024 am 08:39 AM
jQueryで要素の高さ属性を削除するにはどうすればよいですか?フロントエンド開発では、要素の高さ属性を操作する必要が生じることがよくあります。要素の高さを動的に変更する必要がある場合や、要素の高さ属性を削除する必要がある場合があります。この記事では、jQuery を使用して要素の高さ属性を削除する方法と、具体的なコード例を紹介します。 jQuery を使用して高さ属性を操作する前に、まず CSS の高さ属性を理解する必要があります。 height 属性は要素の高さを設定するために使用されます
jQuery における eq の役割と応用シナリオを理解する
Feb 28, 2024 pm 01:15 PM
jQuery は、Web ページでの DOM 操作やイベント処理を処理するために広く使用されている人気のある JavaScript ライブラリです。 jQueryではeq()メソッドを利用して指定したインデックス位置の要素を選択しますが、具体的な使い方と応用シーンは以下の通りです。 jQuery では、 eq() メソッドは、指定されたインデックス位置にある要素を選択します。インデックス位置は 0 からカウントされます。つまり、最初の要素のインデックスは 0、2 番目の要素のインデックスは 1 などとなります。 eq() メソッドの構文は次のとおりです。 $("s
jQueryを使用してテーブルに新しい行を追加する方法の紹介
Feb 29, 2024 am 08:12 AM
jQuery は、Web 開発で広く使用されている人気の JavaScript ライブラリです。 Web 開発中は、JavaScript を使用してテーブルに新しい行を動的に追加することが必要になることがよくあります。この記事では、jQuery を使用してテーブルに新しい行を追加する方法を紹介し、具体的なコード例を示します。まず、jQuery ライブラリを HTML ページに導入する必要があります。 jQuery ライブラリは、次のコードを通じてタグに導入できます。
