由于当前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 " ).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 をより包括的に理解することができ、その後他の内容もスムーズに学習できるようになります。
jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM实现方法：1、用“$("img").delay(毫秒数).fadeOut()”语句，delay()设置延迟秒数；2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句，通过定时器来延迟。
axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM区别：1、axios是一个异步请求框架，用于封装底层的XMLHttpRequest，而jquery是一个JavaScript库，只是顺便封装了dom操作；2、axios是基于承诺对象的，可以用承诺对象中的方法，而jquery不基于承诺对象。
jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM修改方法：1、用css()设置新样式，语法“$(元素).css("min-height","新值")”；2、用attr()，通过设置style属性来添加新样式，语法“$(元素).attr("style","min-height:新值")”。
jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM增加元素的方法：1、用append()，语法“$("body").append(新元素)”，可向body内部的末尾处增加元素；2、用prepend()，语法“$("body").prepend(新元素)”，可向body内部的开始处增加元素。
jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM删除方法：1、用empty()，语法“$("div").empty();”，可删除所有子节点和内容；2、用children()和remove()，语法“$("div").children().remove();”，只删除子元素，不删除内容。
jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM在jquery中，apply()方法用于改变this指向，使用另一个对象替换当前对象，是应用某一对象的一个方法，语法为“apply(thisobj,[argarray])”；参数argarray表示的是以数组的形式进行传递。
jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM去掉方法：1、用“$(selector).removeAttr("readonly")”语句删除readonly属性；2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。
jquery on()有几个参数Apr 21, 2022 am 11:29 AMon()方法有4个参数：1、第一个参数不可省略，规定要从被选元素添加的一个或多个事件或命名空间；2、第二个参数可省略，规定元素的事件处理程序；3、第三个参数可省略，规定传递到函数的额外数据；4、第四个参数可省略，规定当事件发生时运行的函数。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
Dreamweaver Mac版
ビジュアル Web 開発ツール
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
SublimeText3 中国語版
中国語版、とても使いやすい
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
