検索

ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryの基本構文の概要

jQueryの基本構文の概要

怪我咯
怪我咯オリジナル
2017-06-27 11:13:361777ブラウズ

jQuery 構文:

jQuery 構文は、HTML 要素を選択するためにコンパイルされ、要素に対して特定の操作を実行できます。 これが重要なポイントです。初心者は、学習したものが何に使用されるかを知る必要があります。

基本的な構文は $(selector).action() です。 すべての jQuery はこれを中心に展開し、ページ上の要素を選択し、要素に対して特定の操作を実行します。

Example

$(this).hide() - 現在の要素を非表示にする

ドキュメント準備完了関数:

は、ドキュメントが完全にロードされる (準備完了する) 前に jQuery コードを実行しないようにします。 jQuery の規則により、すべての JavaScript コードはここに配置するのが最適です。 


$(document).ready(function(){
});




jQuery 要素セレクターと属性セレクター: これらを使用すると、タグ名、属性名、またはコンテンツによって HTML 要素を選択できます。 $(selector).action()の前半に相当します。

jQuery 要素セレクター:

$("p") は e388a4556c0f65e1904146cc1a846bee 要素を選択します。

$("p.intro") は、class="intro" を持つすべての e388a4556c0f65e1904146cc1a846bee 要素を選択します。

$("p#demo") は、id="demo" を持つすべての e388a4556c0f65e1904146cc1a846bee 要素を選択します。

jQuery属性セレクター:


$("[href]") href属性を持つすべての要素を選択します。

$("[href='#']") href 値が「#」に等しいすべての要素を選択します。

$("[href!='#']") href 値が「#」に等しくないすべての要素を選択します。


$("[href$='.jpg']") は、href 値が ".jpg" で終わるすべての要素を選択します。

jQuery CSS セレクター:

$("p").css("background-color","re​​d");

完全な jQuery セレクター リファレンス マニュアル: http:// www.w3school. com.cn/jquery/jquery_ref_selectors.asp




jQueryイベント関数: $(selector).action()の後半に対応します。


イベント ハンドラーは、HTML で特定のイベントが発生したときに呼び出されるメソッドを指します。 



<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>


イベント関数 は関数を
$(document).ready(function) にバインドしますReady イベント (ドキュメントの作成時)読み込みが完了したとき)
$(selector).click(function) は、選択された要素のクリックイベントに関数をトリガーまたはバインドします
$(selector).dblclick(function) がトリガーまたはbinds 関数は選択した要素のダブルクリック イベントにバインドされます
$(selector).focus(function) 関数をトリガーするか、選択した要素のフォーカス イベントにバインドします
$(selector ).mouseover( function) 選択した要素のマウスオーバー イベントに関数をトリガーまたはバインドします

完整的jQuery事件：http://www.w3school.com.cn/jquery/jquery_ref_events.asp



约定：


  • 把所有 jQuery 代码置于事件处理函数中

  • 把所有事件处理函数置于文档就绪事件处理器中

  • 把 jQuery 代码置于单独的 .js 文件中

  • 如果存在名称冲突，则重命名 jQuery 库




jQuery 效果：对应$(selector).action()的后半部分。

隐藏、显示、切换，滑动，淡入淡出，以及动画

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

$(selector).hide(speed,callback);

$(selector).show(speed,callback);


可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。


8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
df5a3115abdb1f2bf4df02d4bbbd84872cacc6d41bbb37262a98f745aa00fbf0
5cd6e472395e766622bc5d31b556eb7a
$(document).ready(function(){
  $("button#yincang").click(function(){
  $("p#id").hide(1000,function(){alert('bye')});
  });
});
$(document).ready(function(){
  $("button#xian").click(function(){

  $("p#id").show(function(){1000,alert('hello')});

  });
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
d3259590dd7a1c44081cbc652a12289e显示65281c5ac262bf6d81768915a4a77ac0
c67eb663ef3bebc02acf98265a3b6c6c隐藏65281c5ac262bf6d81768915a4a77ac0
61fff9001bdd35ddad63ed11e0534569这是一个段落。94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee这是另一个段落。94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

可以使用 toggle() 方法来切换 hide() 和 show() 方法。

$(selector).toggle(speed,callback);


8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
df5a3115abdb1f2bf4df02d4bbbd84872cacc6d41bbb37262a98f745aa00fbf0
5cd6e472395e766622bc5d31b556eb7a
$(document).ready(function(){
  $("button").click(function(){
  $("p").toggle();
  });
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
a73a95372d4794d0f15522f518a543e9切换65281c5ac262bf6d81768915a4a77ac0
e388a4556c0f65e1904146cc1a846bee这是一个段落。94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee这是另一个段落。94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e





jQuery 淡入淡出方法

通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

  • fadeIn()

  • fadeOut()

  • fadeToggle()       jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

  • fadeTo()           fadeTo() 方法允许渐变的最终结果为给定的不透明度（值介于 0 与 1 之间，0为透明，1为不透明）。




jQuery 滑动方法


通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

  • slideDown()

  • slideUp()

  • slideToggle()




jQuery 动画 - animate() 方法


jQuery animate() 方法用于创建自定义动画。


$(selector).animate({params},speed,callback);


必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。


可选的 callback 参数是动画完成后所执行的函数名称。

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

すべての CSS プロパティを操作するには、animate() メソッドを使用できます。 覚えておくべき重要な点が 1 つあります。animate() を使用する場合、すべてのプロパティ名を記述するには、padding の代わりに paddingLeft を使用する必要があります。 . -left、margin-right の代わりに marginRight を使用するなど。


left 属性が 250 ピクセルになるまで

要素を左に移動します:

8b05045a5be5764f313ed5b9168a17e6

100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e
0eb03d9751814e8456ceb258138fad15
2cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
$("button").click( function(){

$("p").animate({left:'250px'}); });
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1

62ef6d824a76074507d446202a0343c3アニメーション開始65281c5ac262bf6d81768915a4a77ac0
2e00dd0040e8506703822d6805b3e1af
94b3e26ee717c64999d7867364b1b4a3

36ee39b1999ac4db75d50d34aa46df27

73a6ac4ed44ffec12cee46588e518a5e

jQuery はアニメーション用のキュー機能を提供します。つまり、複数の animate() 呼び出しを次々に記述すると、jQuery はそれらのメソッド呼び出しを含む「内部」キューを作成します。次に、これらのアニメーション呼び出しを 1 つずつ実行します。

$("button").click(function(){

var p=$("p");
p.animate({height:'300px',opacity:'0.4'},"slow");
p.animate({幅:'300px',不透明度:'0.8'},"遅い");
p.animate({高さ:'100px',不透明度:'0.4'},"遅い");
p .animate({width:'100px',opacity:'0.8'},"slow");

});

は次の形式で置き換えることができます

p.animate({height:'300px',opacity :'0.4'},"slow").animate({width:'300px',opacity:'0.8'},"slow");



jQuery stop() メソッドはアニメーションで使用されますまたは、効果が完了する前に停止します。

$(selector).stop(stopAll,goToEnd);

オプションの stopAll パラメーターは、アニメーション キューをクリアするかどうかを指定します。デフォルトは false で、アクティブなアニメーションのみを停止し、キューに入れられたアニメーションを逆方向に実行できます。

オプションの goToEnd パラメーターは、現在のアニメーションをすぐに完了するかどうかを指定します。デフォルトは false です。


8b05045a5be5764f313ed5b9168a17e6

100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
13f74617924f42bfb61a111e3dec0e992cacc6d41bbb37262a98f745aa00fbf0
e914a3ca3d6f3d3ba29bc63eacfc88aa
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$ ("#stop").click(function(){

$("#panel").stop(); });
});
2cacc6d41bbb37262a98f745aa00fbf0

a9b5adada4adb751d03664f4f63ec0e1
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

a7a60cea450f42b2b97b16a5d74b9609スライドを停止65281c5ac262bf6d81768915a4a77ac0
< ; p id="flip">ここをクリックしてパネルを下にスライドさせます94b3e26ee717c64999d7867364b1b4a3
55a50214d3a0454ac595f64158e13d7eHello world!94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

< ;/ html>



コールバック関数は、現在のアニメーションが 100% 完了した後に実行されます。

$(selector).hide(speed,callback)

$("p").hide(1000,function(){

alert("段落が非表示になりました");

});

完全なアニメーション: http://www.w3school.com.cn/jquery/jquery_ref_Effects.asp



jQuery には、HTML 要素と属性を操作するための強力なメソッドがあります。

jQuery DOM 操作:

DOM = ドキュメント オブジェクト モデル、「W3C ドキュメント オブジェクト モデルは、プログラムとスクリプトがドキュメントのコンテンツ、構造、スタイルに動的にアクセスして更新できるようにする、プラットフォームおよび言語に依存しないインターフェイスです。」



dom の値を取得します:

DOM 操作用の 3 つのシンプルで実用的な jQuery メソッド:

  • text() - 選択された要素のテキスト コンテンツを設定または返します

  • html() - 選択した要素のコンテンツ (HTML タグを含む) を設定または返します

  • val() - フォームフィールドの値を設定または返します

    $("#btn1").click(function() {

    alert("Text: " + $("#test").text());
    });
    $("#btn2").click(function(){
    alert("HTML: " + $ (" #テスト").html());
    });

    $("#btn1").click(function(){
    alert("Value: " + $("#test").val());
    });

    $("button").click (function(){
    alert($("#w3s").attr("href"));
    });

DOM値を設定します:

$("#btn1")。 click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2" ).html("a4b561c25d9afb9ac8dc4d70affff419Hello world!0d36329ec37a2cc24d42c7229b69747a");
});
$("#btn3").click(function(){
$("#test3").val( "Dolly Duck");

});

text()、html()、および val() コールバック関数、 コールバック関数には 2 つのパラメータがあります: 選択された要素リスト内の現在の要素の添え字と、元の要素の添え字(古い) 値。その後、関数 return の戻り内容が新しい値として使用されます。

$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "古いテキスト: " + origText + " 新しいテキスト: Hello world !
(index: " + i + ")";
});
});

$("#btn2").click(function(){
$("#test2").html(function( i,origText){
return "古い html: " + origText + " 新しい html: Hello a4b561c25d9afb9ac8dc4d70affff419world!0d36329ec37a2cc24d42c7229b69747a
(index: " + i + ")";
});

} );

$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
} ; pend () - 選択した要素の先頭にコンテンツを挿入します

after() - 選択した要素の後にコンテンツを挿入します

before() - 選択した要素の前にコンテンツを挿入します

$ ( "p").append("追加されたテキスト。");

$("p").prepend("先頭に追加されたテキスト。");
  • $("img").after("後のテキスト" ; 、通常、次の 2 つの jQuery メソッドを使用できます:

  • remove() - 選択した要素 (およびそのサブ要素) を削除します。

  • empty() - 選択した要素からサブ要素を削除します

  • $( "#p1").remove();

    $("#p1").empty();


jQueryのremove()メソッドはパラメータも受け入れ、削除されたものをフィルタリングすることができます要素。

このパラメーターには、任意の jQuery セレクター構文を使用できます。



100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e

13f74617924f42bfb61a111e3dec0e992cacc6d41bbb37262a98f745aa00fbf0

3f1c4e4b6b16bbbd69b2ee476dc4f83a

$(ドキュメント).ready(function(){
$("button").click(function(){

$("p").remove(".italic");
});

});
3fa3f474cbb4b6d948eebecb1be5dde4

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

e388a4556c0f65e1904146cc1a846beeこれは p の段落です。94b3e26ee717c64999d7867364b1b4a3

41ecea7ef1de651b88b36dc73203de945a8028ccc7a7e27417bff9f05adf5932これはページ内の別の段落です。94b3e26ee717c64999d7867364b1b4a3
41ecea7ef1de651b88b36dc73203de945a8028ccc7a7e27417bff9f05adf5932これはページ内の別の段落です。94b3e26ee717c64999d7867364b1b4a3

bb9345e55eb71822850ff156dfde57c8class="italic" を持つすべての p 要素を削除します65281c5ac262bf6d81768915a4a77ac0

36cc49f0c466276486e50c850b7e4956
  • 73a6ac4ed44ffec12cee46588e518a5e

jQuery 操作 CSS


jQuery には、CSS 操作を実行するためのメソッドがいくつかあります。以下のことを学習します:


addClass() - 選択した要素に 1 つ以上のクラスを追加します



removeClass() - 選択した要素から 1 つ以上のクラスを削除します



toggleClass() - Add/選択した要素のクラス切り替え操作を削除します



css() - スタイル属性を設定または返します





8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
13f74617924f42bfb61a111e3dec0e992cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("p" ).addClass("重要");
});
});
2cacc6d41bbb37262a98f745aa00fbf0
080b747a20f9163200dd0a7d304ba388
. important
{
font-weight:bold;
font -size:xx-large;
}
.blue
{
color:blue;
}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

4a249f0d628e2318394fd9b75b4636b1title1473f0a7621bec819994bb5020d29372a c1a436a314ed609750bd7c7d319db4da見出し 22e9b454fa8428549ca2e64dfac4625cd
e388a4556c0f65e1904146cc1a846beeこれは段落です。 94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846beeこれは別の段落です。 94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846beeこれは非常に重要なテキストです。 94b3e26ee717c64999d7867364b1b4a3
0c6dc11e160d3b678d68754cc175188a
bb9345e55eb71822850ff156dfde57c8要素にクラスを追加65281c5ac262bf6d81768915a4a77ac0

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

addClass()メソッドで指定することもできます 複数のクラス:

$("button").click(function(){

$("#p1").addClass("重要な青");
});


jQuery css() メソッド


css() メソッドは、選択された要素の 1 つ以上のスタイル属性を設定または返します。

指定した CSS プロパティの値を返す必要がある場合は、次の構文を使用してください

$("p").css("background-color");

指定した CSS プロパティを設定する必要がある場合は、次の構文を使用してください:

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

複数の CSS プロパティを設定する必要がある場合は、次の構文を使用してください:

$(" p").css({"background -color":" yellow","font-size":"200%"});



jQueryの要素サイズの処理:

jQueryの場合、要素とブラウザウィンドウのサイズを処理するのが簡単です。


  • 幅()

  • 高さ()

  • innerWidth()

  • innerHeight()

  • outerWidth()

  • outerHeight()



width() メソッドは、要素の幅 (パディング、ボーダー、またはマージンは含まない) を設定または返します。

height() メソッドは、要素の高さを設定または返します (パディング、境界線、またはマージンは含まれません)。

$("button").click(function(){

var txt="";
txt+="幅: " + $("#p1").width() + "0b9f73f8e206867bd1f5dc5957dbcb38";
txt+="Height: " + $("#p1").height();
$("#p1").html(txt);

});


innerWidth() メソッドは、要素 幅 (パディングを含む)。

innerHeight() メソッドは、要素の高さ (パディングを含む) を返します。


outerWidth() メソッドは、要素の幅 (パディングとボーダーを含む) を返します。

outerHeight() メソッドは、要素 (パディングとボーダーを含む) の高さを返します。


outerWidth(true) メソッドは、要素の幅 (パディング、ボーダー、マージンを含む) を返します。

outerHeight(true) メソッドは、要素 (パディング、ボーダー、マージンを含む) の高さを返します。

次の例では、指定された e388a4556c0f65e1904146cc1a846bee 要素の幅と高さを設定します:

$("button").click(function(){ $("#p1").width(500) . height(500) });



jQuery の移動:

jQuery トラバーサルは、他の要素との関係に基づいて要素を移動するために使用されます。 . HTML 要素を「検索」（または選択）します。選択範囲から開始し、目的の要素に到達するまでこの選択範囲に沿って移動します。 家系図で jQuery トラバーサルを使用すると、選択した (現在の) 要素から開始して、家系図内を上 (祖先)、下 (子孫)、および水平 (兄弟) に簡単に移動できます。この移動は DOM のトラバースと呼ばれます。

jQuery は、DOM を走査するための複数のメソッドを提供します。トラバーサル手法の最大のカテゴリはツリー トラバーサルです。

DOM ツリーを上に移動する


これらの jQuery メソッドは、DOM ツリーを上に移動するのに便利です


parent()

  • parents()

  • 親sまで()

  • parent() メソッドは、選択した要素の直接の親要素を返します。このメソッドは、DOM ツリーの 1 つ上のレベルのみを走査します。

    • $(document).ready(function(){
$("span").parent();

});

parents() メソッドは、選択された要素のすべての祖先要素を返します。ドキュメント ルート要素 (100db36a723c770d327fc0aef2ce13b1)。

オプションのパラメータを使用して、祖先要素の検索をフィルタリングすることもできます。

次の例は、ff6d136ddc5fdfeffaf53ff6ee95f185 要素であるすべての 45a2772a6b6107b401db3c9b82c049c2 要素のすべての祖先を返します。

});



parentsUntil() メソッドは、先頭と末尾を含まない、指定された 2 つの要素間のすべての祖先要素を返します。

次の例は、45a2772a6b6107b401db3c9b82c049c2 要素と e388a4556c0f65e1904146cc1a846bee 要素の間にあるすべての祖先要素を返します。

});


DOM ツリーを下位にトラバースします


DOM ツリーを下位にトラバースするための 2 つの jQuery メソッドを次に示します。


jQuery Children() メソッド

  • children() メソッドは、選択された要素のすべての直接の子要素を返します。このメソッドは、DOM ツリーを 1 つ下のレベルまでのみ走査します。

    • オプションのパラメータを使用して、子要素の検索をフィルタリングすることもできます。

$(document).ready(function(){


$("p").children("p.1"); //クラス 1 の p 要素

});

find () メソッドは、選択した要素の子孫要素を最後の子孫まで返します。

次の例は、e388a4556c0f65e1904146cc1a846bee の子孫であるすべての 45a2772a6b6107b401db3c9b82c049c2 要素を返します:

$(document).ready(function(){

$("p").find("span");

} );


次の例は、e388a4556c0f65e1904146cc1a846bee のすべての子孫を返します:

$(document).ready(function(){

$("p").find("*");

});

DOM ツリーを水平方向にトラバースできる便利なメソッドがたくさんあります:



siblings()

next()

nextAll()


nextUntil()

  • prev()

  • prevAll()

  • prevUntil()

  • siblings() メソッドは、選択された要素のすべての兄弟要素を返します。それ自体は含まれません。

    • オプションのパラメータを使用して、兄弟要素の検索をフィルタリングすることもできます。

  • $(document).ready(function(){

    $("h2").siblings("p");
    • });

  • next() メソッドは、選択した要素の次の兄弟要素を返します。このメソッドは 1 つの要素のみを返します。

    • $(document).ready(function(){
  • $("h2").next();

    });

    • nextAll() メソッドは、選択した要素の後続のすべての兄弟要素を返します。後続の要素をすべて返します。

nextUntil() メソッドは、指定された 2 つのパラメーター間の後続の兄弟要素をすべて返します。両端の要素を除きます。

prev()、prevAll()、および prevUntil() メソッドは、上記のメソッドと同様に機能しますが、方向は逆です。前の兄弟要素を返します (DOM ツリー内の兄弟要素に沿って前方ではなく後方にトラバースします)。 。




3 つの最も基本的なフィルタリング メソッドは、first()、last()、および eq() です。これらを使用すると、一連の要素内の位置に基づいて特定の要素を選択できます。 filter() や not() などの他のフィルタリング メソッドを使用すると、指定した基準に一致する要素または一致しない要素を選択できます。

first() メソッドは、選択された要素の最初の要素を返します。

8b05045a5be5764f313ed5b9168a17e6

100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e
13f74617924f42bfb61a111e3dec0e99

2cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a

$(document).ready(function(){
$("p p").first().css("background-color"," yellow");

});

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

4a249f0d628e2318394fd9b75b4636b1私のホームページへようこそ473f0a7621bec819994bb5020d29372a

e388a4556c0f65e1904146cc1a846bee


e388a4556c0f65e1904146cc1a846beeこれは、p. の段落です。 ＆lt;/p＆gt; 94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846beeこれも段落です。 94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

eq() メソッドは、選択された要素の中から指定されたインデックス番号を持つ要素を返します。インデックス番号は 0 から始まるため、最初の要素のインデックス番号は 1 ではなく 0 になります。次の例では、2 番目の e388a4556c0f65e1904146cc1a846bee 要素 (インデックス番号 1) を選択します。 ">
2cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){

$("p").eq(1).css("background-color"," yellow " );

});

2cacc6d41bbb37262a98f745aa00fbf0

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d


4a249f0d628e2318394fd9b75b4636b1私のホームページへようこそ473f0a7621bec819994bb5020d29372a

e388a4556c0f65e1904146cc1a846bee私は唐老鴨です(index) 0)。 94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846beeドナルドダック (インデックス 1)。

94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846bee私の親友はミッキーマウス (インデックス 3) です。 94b3e26ee717c64999d7867364b1b4a3


36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

filter() メソッドを使用すると、基準を指定できます。この基準に一致しない要素はコレクションから削除され、一致する要素が返されます。


100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e

13f74617924f42bfb61a111e3dec0e99
2cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$( document).ready(function(){
$("p").filter(".intro").css("background-color"," yellow");
});
2cacc6d41bbb37262a98f745aa00fbf0
32430b0b676ec71e6e019f1d47e1b1c6
6c04bd5ca3fcae76e30b72ad730ca86d

4a249f0d628e2318394fd9b75b4636b1私のホームページへようこそ473f0a7621bec819994bb5020d29372a
e388a4556c0f65e1904146cc1a846bee私はドナルドダックです。 94b3e26ee717c64999d7867364b1b4a3
03c914392195facb4bb03ef129401e65私はダックバーグに住んでいます。 94b3e26ee717c64999d7867364b1b4a3
03c914392195facb4bb03ef129401e65ダックバーグが大好きです。 94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee私の親友はミッキーです。 94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

not() メソッドは、条件に一致しないすべての要素を返します。ヒント: not() メソッドは filter() の逆です。

以上がjQueryの基本構文の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JQuery 遅延オブジェクトの構造次の記事：JQuery 遅延オブジェクトの構造

関連記事

続きを見る