suchen

Heim >Web-Frontend >js-Tutorial >Zusammenfassung der grundlegenden jQuery-Syntax

Zusammenfassung der grundlegenden jQuery-Syntax

怪我咯
怪我咯Original
2017-06-27 11:13:361765Durchsuche

jQuery-Syntax:

jQuery-Syntax ist für die Auswahl von HTML-Elementen kompiliert und kann bestimmte Operationen an den Elementen ausführen. Das ist der entscheidende Punkt. Anfänger müssen wissen, wofür die Dinge, die Sie lernen, verwendet werden.

Die grundlegende Syntax ist: $(selector).action(). Alles bei jQuery dreht sich darum, Elemente auf der Seite auszuwählen und dann bestimmte Operationen an den Elementen auszuführen.

Beispiel

$(this).hide() – aktuelles Element ausblenden

Dokumentbereit-Funktion:

soll verhindern, dass jQuery-Code ausgeführt wird, bevor das Dokument vollständig geladen (bereit) ist. Aufgrund der jQuery-Konvention ist es am besten, den gesamten JavaScript-Code hier zu platzieren. 


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




jQuery-Elementselektoren und Attributselektoren: Sie ermöglichen Ihnen die Auswahl von HTML-Elementen nach Tag-Namen, Attributnamen oder Inhalt. entspricht der ersten Hälfte von $(selector).action().

jQuery-Elementselektor:

$("p") wählt das e388a4556c0f65e1904146cc1a846bee-Element aus.

$("p.intro") wählt alle e388a4556c0f65e1904146cc1a846bee-Elemente mit class="intro" aus.

$("p#demo") wählt alle e388a4556c0f65e1904146cc1a846bee-Elemente mit id="demo" aus.

jQuery-Attributselektor:


$("[href]") Wählen Sie alle mit dem href-Attribut aus des Elements.

$("[href='#']") wählt alle Elemente mit einem href-Wert gleich „#“ aus.

$("[href!='#']") wählt alle Elemente mit einem href-Wert ungleich „#“ aus.


$("[href$='.jpg']") wählt alle Elemente aus, deren href-Wert mit „.jpg“ endet.

jQuery CSS-Selektor:

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

Für das vollständige JQuery-Selektor-Referenzhandbuch: http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp




jQuery-Ereignisfunktion: entspricht der zweiten Hälfte von $(selector).action().


Ereignishandler beziehen sich auf Methoden, die aufgerufen werden, wenn bestimmte Ereignisse in HTML auftreten. 



<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>


Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(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！

Sie können die animate()-Methode verwenden, um alle CSS-Eigenschaften zu manipulieren. Eine wichtige Sache, die Sie beachten sollten: Wenn Sie animate() verwenden, müssen Sie die Camel-Notation verwenden, um alle Eigenschaftsnamen zu schreiben, zum Beispiel „You“. muss paddingLeft anstelle von padding-left, marginRight anstelle von margin-right usw. verwenden.


Es verschiebt das 242b000679e599deead5277faffe9eb9

100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
13f74617924f42bfb61a111e3dec0e99
196e5b1bb8e1ab63d69872f6ce8c96c9
$(document).ready(function(){
$("button").click(function(){
$("p ") .animate({left:'250px'});
});
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1

< ;body>
bb9345e55eb71822850ff156dfde57c8Animation starten65281c5ac262bf6d81768915a4a77ac0
2e00dd0040e8506703822d6805b3e1af
< ;/p>

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

jQuery stellt Warteschlangenfunktionen für Animationen bereit, was bedeutet, dass, wenn Sie mehrere animate() schreiben Aufrufe erstellt jQuery eine „interne“ Warteschlange, die diese Methodenaufrufe enthält. Führen Sie diese Animationsaufrufe dann nacheinander aus.

$("button").click(function(){
var p=$("p");
p.animate({height:'300px',opacity:'0.4 '},"slow");
p.animate({width:'300px',opacity:'0.8'},"slow");
p.animate({height:'100px',opacity: '0.4'},"slow");
p.animate({width:'100px',opacity:'0.8'},"slow");

});

Sie können stattdessen das folgende Format verwenden

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



jQuery stop()-Methode wird verwendet, um Animationen oder Effekte zu stoppen, bevor sie passieren abgeschlossen Machen Sie Halt.

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

Der optionale stopAll-Parameter gibt an, ob die Animationswarteschlange geleert werden soll. Der Standardwert ist „false“, wodurch nur aktive Animationen gestoppt werden und alle in der Warteschlange befindlichen Animationen rückwärts ausgeführt werden können.

Der optionale goToEnd-Parameter gibt an, ob die aktuelle Animation sofort abgeschlossen werden soll. Der Standardwert ist falsch.


8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
e77e3def01ecc49f4830089c2ebfde692cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
$("#flip").click(function( ){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$(" #panel").stop();
});
});
2cacc6d41bbb37262a98f745aa00fbf0

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

6c04bd5ca3fcae76e30b72ad730ca86d

a7a60cea450f42b2b97b16a5d74b9609Schieben stoppen65281c5ac262bf6d81768915a4a77ac0
f558f125c0943b004f5cbfcc7dd20fd7Klicken Sie hier, um das Bedienfeld nach unten zu schiebence668b4c7f53497a339ecea5354e9fd9Hallo Welt!94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e



Die Callback-Funktion wird ausgeführt, nachdem die aktuelle Animation zu 100 % abgeschlossen ist.

$(selector).hide(speed,callback)

$("p").hide(1000,function(){
alert("Der Absatz ist jetzt ausgeblendet" );

});

Vollständige Animation: http://www.w3school.com.cn/jquery/jquery_ref_effects.asp



jQuery verfügt über leistungsstarke Methoden zum Bearbeiten von HTML-Elementen und -Attributen.

jQuery DOM-Operationen:

DOM = Document Object Model, „Das W3C Document Object Model ist eine plattform- und sprachunabhängige Schnittstelle, die es Programmen und Skripten ermöglicht, dynamisch auf Dokumente zuzugreifen und diese zu aktualisieren. Inhalt.“ , Struktur und Stil. "



Drei A einfache und praktische jQuery-Methode zur DOM-Manipulation:

text() – Textinhalt des ausgewählten Elements festlegen oder zurückgeben

  • html() - Setzt den Inhalt des ausgewählten Elements (einschließlich HTML-Tags) oder gibt ihn zurück.

  • val() - Setzt den Wert des Formularfelds oder gibt ihn zurück
  • $("# btn1 ").click(function(){

    alarm("Text: " + $("#test").text());

    });

    $("#btn2"). click (function(){
    warning("HTML: " + $("#test").html());
    });

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

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

DOM-Wert festlegen:

$("#btn1").click(function(){
$("#test1") .text("Hallo Welt!");
});
$("#btn2").click(function(){
$("#test2").html("885e335d9b2079e8a3bd154d354d7df8");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");

});

Die Rückruffunktion von text(), html() und val(), Rückruffunktion hat zwei Parameter: das ausgewählte Element Der Index des aktuellen Elements in der Liste und der ursprüngliche (alte) Wert. Dann wird der Rückgabeinhalt der Funktion return als neuer Wert verwendet.

$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Alter Text: " + origText + " Neuer Text: Hallo Welt!
(index: " + i + ")";
});
});

$("#btn2").click (function(){
$("#test2").html(function(i,origText){
return "Altes HTML: " + origText + " Neues HTML: Hallo a4b561c25d9afb9ac8dc4d70affff419Welt!07aec8279184d16fedc0638ac18fa96e
(index: " + i + ")";
});

});

$("button").click(function() {
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});

}) ;



Fügen Sie einen neuen Wert zum DOM hinzu:


  • append() – Inhalt am Ende des ausgewählten Elements einfügen

  • prepend() – Inhalt am Anfang des ausgewählten Elements einfügen element

  • after() – Inhalt nach dem ausgewählten Element einfügen

  • before() – Inhalt vor dem ausgewählten Element einfügen


$("p").append("Some angehängter Text.");

$("p").prepend("Some Text vorangestellt.");

$("img").after("Ein wenig Text danach");

$("img").before(" Vorher etwas Text);



Elemente im DOM löschen:


Wenn Sie Elemente und Inhalte löschen müssen, können Sie im Allgemeinen die folgenden zwei jQuery-Methoden verwenden:

  • remove() – löscht das ausgewählte Element ( und sein untergeordnetes Element)

  • empty() – entfernt untergeordnete Elemente aus dem ausgewählten Element

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

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


Die jQuery-Methode „remove()“ akzeptiert auch einen Parameter, der Ihnen das Löschen ermöglicht das zu filternde Element.

Dieser Parameter kann eine beliebige jQuery-Selektorsyntax sein.


100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
13f74617924f42bfb61a111e3dec0e99 2cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
$("button").click(function(){
$("p" ).remove(".italic");
});
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

e388a4556c0f65e1904146cc1a846beeDies ist ein Absatz im S.94b3e26ee717c64999d7867364b1b4a3
41ecea7ef1de651b88b36dc73203de945a8028ccc7a7e27417bff9f05adf5932Dies ist ein weiterer Absatz im S.41ecea7ef1de651b88b36dc73203de945a8028ccc7a7e27417bff9f05adf5932Dies ist ein weiterer Absatz im p.72ac96585ae54b6ae11f849d2649d9e694b3e26ee717c64999d7867364b1b4a3
bb9345e55eb71822850ff156dfde57c8Klasse löschen Alle p-Elemente für „kursiv“ jQuery verfügt über mehrere Methoden zum Ausführen von CSS-Operationen. Wir werden Folgendes lernen:

addClass() – Eine oder mehrere Klassen zum ausgewählten Element hinzufügen


removeClass() – Aus dem entfernen Ausgewähltes Element Wählen Sie ein Element aus, um eine oder mehrere Klassen zu löschen


toggleClass() – führt den Vorgang zum Hinzufügen/Löschen einer Klasse für das ausgewählte Element aus


css( ) – Stilattribute festlegen oder zurückgeben


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

4a249f0d628e2318394fd9b75b4636b1Titel 1< ;/h1>
c1a436a314ed609750bd7c7d319db4daTitel 22e9b454fa8428549ca2e64dfac4625cd
e388a4556c0f65e1904146cc1a846beeDies ist ein Absatz. 94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846beeDies ist ein weiterer Absatz. 94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846beeDas ist ein sehr wichtiger Text! 94b3e26ee717c64999d7867364b1b4a3
0c6dc11e160d3b678d68754cc175188a
bb9345e55eb71822850ff156dfde57c8Klasse zum Element hinzufügen65281c5ac262bf6d81768915a4a77ac0

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e 🎜>

Sie können in der Methode addClass() auch mehrere Klassen angeben:

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

$("#p1"). addClass( "wichtiges Blau");
});


jQuery css() Methode


css () Die Methode legt eine oder mehrere Stileigenschaften des ausgewählten Elements fest oder gibt sie zurück.

Um den Wert der angegebenen CSS-Eigenschaft zurückzugeben, verwenden Sie bitte die folgende Syntax

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

If erforderlich Um die angegebenen CSS-Eigenschaften festzulegen, verwenden Sie bitte die folgende Syntax:

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

Wenn nötig Wenn Sie mehrere CSS-Eigenschaften festlegen möchten, verwenden Sie bitte die folgende Syntax:

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



jQuery-Behandlung von Elementgrößen:

Mit jQuery ist es so einfach zu handhabende Elemente und Browserfenstergröße.


  • width()

  • height()

  • innerWidth()

  • innerHeight()

  • outerWidth()

  • outerHeight()



width()-Methode legt die Breite eines Elements fest oder gibt sie zurück (ohne Abstand, Rahmen oder Ränder). ). Die

height()-Methode legt die Höhe eines Elements fest oder gibt sie zurück (ohne Abstand, Rahmen oder Ränder).

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

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

});


Die Methode innerWidth() gibt die Breite des Elements (einschließlich Polsterung) zurück.

Die innerHeight()-Methode gibt die Höhe des Elements zurück (einschließlich Abstand).


outerWidth()-Methode gibt die Breite des Elements zurück (einschließlich Abstand und Ränder). Die Methode

outerHeight() gibt die Höhe des Elements zurück (einschließlich Abstand und Rand).


outerWidth(true)-Methode gibt die Breite des Elements zurück (einschließlich Innenabstand, Rahmen und Rand). Die Methode

outerHeight(true) gibt die Höhe des Elements zurück (einschließlich Abstand, Rand und Rand).

Das folgende Beispiel legt die Breite und Höhe des angegebenen e388a4556c0f65e1904146cc1a846bee-Elements fest:

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




jQuery-Bewegung:

jQuery-Traversal, was „Bewegung“ bedeutet, wird verwendet, um sich basierend auf seinem Verhältnis zu anderen zu bewegen Elemente Beziehungen zum „Suchen“ (oder Auswählen) von HTML-Elementen. Beginnen Sie mit einer Auswahl und bewegen Sie sich entlang dieser Auswahl, bis Sie Ihr gewünschtes Element erreichen.

Mit der jQuery-Durchquerung in einem Stammbaum können Sie beim ausgewählten (aktuellen) Element beginnen und sich im Stammbaum problemlos nach oben (Vorfahren), nach unten (Nachkommen) und horizontal (Geschwister) bewegen. Diese Bewegung wird als Durchqueren des DOM bezeichnet.

jQuery bietet eine Vielzahl von Methoden zum Durchqueren des DOM. Die größte Kategorie von Durchquerungsmethoden ist die Baumdurchquerung.


Den DOM-Baum nach oben durchqueren


Diese jQuery-Methoden sind nützlich, um den DOM-Baum nach oben zu durchqueren:

  • parent()

  • parents()

  • parentsUntil()

    • parent()-Methode gibt das direkte übergeordnete Element des ausgewählten Elements zurück. Diese Methode durchläuft den DOM-Baum nur eine Ebene höher.

$(document).ready(function(){

$("span").parent();

});

parents() Methode gibt die ausgewählte zurück Alle Vorfahren des Elements bis hin zum Stammelement des Dokuments (100db36a723c770d327fc0aef2ce13b1).


Sie können auch optionale Argumente verwenden, um die Suche nach Vorfahrenelementen zu filtern.

Das folgende Beispiel gibt alle Vorfahren aller 45a2772a6b6107b401db3c9b82c049c2-Elemente zurück:

$(document).ready(function(){
$("span") .parents("ul");
});


parentsUntil()-Methode gibt alle Vorgängerelemente zwischen zwei gegebenen Elementen zurück, weder der Anfang noch das Ende sind enthalten .

Das folgende Beispiel gibt alle Vorgängerelemente zwischen den Elementen 45a2772a6b6107b401db3c9b82c049c2 zurück:

$(document).ready(function(){
$ ("span ").parentsUntil("p");
});


Den DOM-Baum nach unten durchlaufen


Hier sind zwei jQuery-Methoden zum Durchlaufen des DOM-Baums:

  • children()

  • find()


jQuery-Kinder()-Methode


Kinder()-Methode gibt alle ausgewählten Elemente als direktes untergeordnetes Element zurück. Diese Methode durchläuft den DOM-Baum nur eine Ebene tiefer.

Sie können auch optionale Parameter verwenden, um die Suche nach untergeordneten Elementen zu filtern.


$(document).ready(function(){

$("p").children("p.1"); // Das p-Element mit Klasse 1

});

find()-Methode gibt die Nachkommenelemente des ausgewählten Elements bis hinunter zum letzten Nachkommen zurück.

Das folgende Beispiel gibt alle 45a2772a6b6107b401db3c9b82c049c2-Elemente zurück, die Nachkommen von e388a4556c0f65e1904146cc1a846bee sind:

$(document).ready(function(){
$("p" ) .find("span");
});

Das folgende Beispiel gibt alle Nachkommen von e388a4556c0f65e1904146cc1a846bee zurück:

$(document).ready(function(){
$("p").find("*");

});


Es gibt viele nützliche Methoden, die uns dies ermöglichen Navigieren Sie durch den DOM-Baum. Führen Sie eine horizontale Durchquerung durch:

  • siblings()

  • next()

  • nextAll()

  • nextUntil()

  • prev()

  • prevAll()

  • prevUntil()

siblings()-Methode gibt alle Geschwisterelemente des ausgewählten Elements zurück. Schließt sich selbst nicht ein.

Sie können auch optionale Parameter verwenden, um die Suche nach Geschwisterelementen zu filtern.

$(document).ready(function(){
$("h2").siblings("p");
});

next() Methode Gibt das nächste gleichgeordnete Element des ausgewählten Elements zurück. Diese Methode gibt nur ein Element zurück.

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

nextAll() Methode gibt die ausgewählte zurück Alle folgenden Geschwisterelemente des Elements. Gibt alle nachfolgenden Elemente zurück. Die Methode

nextUntil() gibt alle folgenden Geschwisterelemente zwischen den beiden angegebenen Parametern zurück. Schließt Elemente an beiden Enden aus. Die Methoden

prev(), prevAll() und prevUntil() funktionieren ähnlich wie die oben genannten Methoden, jedoch in der entgegengesetzten Richtung: Sie geben das vorherige Geschwisterelement zurück (entlang der Geschwisterelemente im DOM-Baum rückwärts durchlaufen). nicht weiterleiten).



Die drei grundlegendsten Filtermethoden sind: first(), last() und eq(), die Ihnen ermöglichen Wählen Sie ein bestimmtes Element basierend auf seiner Position innerhalb einer Reihe von Elementen aus. Mit anderen Filtermethoden wie filter() und not() können Sie Elemente auswählen, die einem bestimmten Kriterium entsprechen oder nicht. Die Methode

first() gibt das erste Element des ausgewählten Elements zurück.


8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
e77e3def01ecc49f4830089c2ebfde69
2cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
$("p p").first( ).css("background-color","gelb");
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

4a249f0d628e2318394fd9b75b4636b1Willkommen auf meiner Homepage473f0a7621bec819994bb5020d29372a

e388a4556c0f65e1904146cc1a846bee

e388a4556c0f65e1904146cc1a846beeDies ist ein Absatz in S. 94b3e26ee717c64999d7867364b1b4a3 eines anderen Absatzes. 94b3e26ee717c64999d7867364b1b4a3

94b3e26ee717c64999d7867364b1b4a3


e388a4556c0f65e1904146cc1a846beeDies ist auch ein Absatz. 94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

eq()-Methode gibt das Element mit der angegebenen Indexnummer unter den ausgewählten Elementen zurück. Indexnummern beginnen bei 0, daher hat das erste Element die Indexnummer 0 statt 1. Das folgende Beispiel wählt das zweite e388a4556c0f65e1904146cc1a846bee-Element (Indexnummer 1):

100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e

0eb03d9751814e8456ceb258138fad15
2cacc6d41bbb37262a98f745aa00fbf0

3f1c4e4b6b16bbbd69b2ee476dc4f83a

$(document).ready(function(){
$ ("p").eq(1).css("background-color","gelb");
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
< ;body>

4a249f0d628e2318394fd9b75b4636b1Willkommen auf meiner Homepage473f0a7621bec819994bb5020d29372a

e388a4556c0f65e1904146cc1a846beeIch bin Donald Duck (Index 0). 94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846beeDonald Duck (Index 1).

94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846beeMein bester Freund ist Mickey Mouse (Index 3). 94b3e26ee717c64999d7867364b1b4a3


36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

Mit der filter()-Methode können Sie ein Kriterium angeben. Elemente, die diesem Kriterium nicht entsprechen, werden aus der Sammlung entfernt und übereinstimmende Elemente werden zurückgegeben.


100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e

13f74617924f42bfb61a111e3dec0e99
2cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
$("p").filter(".intro").css(" Hintergrundfarbe, „Gelb“);
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

4a249f0d628e2318394fd9b75b4636b1Willkommen Komm auf meine Homepage473f0a7621bec819994bb5020d29372a
e388a4556c0f65e1904146cc1a846beeIch bin Donald Duck. 94b3e26ee717c64999d7867364b1b4a3
03c914392195facb4bb03ef129401e65Ich lebe in Entenhausen. 94b3e26ee717c64999d7867364b1b4a3
03c914392195facb4bb03ef129401e65Ich liebe Entenhausen. 94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846beeMein bester Freund ist Mickey. 94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

not()-Methode gibt alle Elemente zurück, die nicht den Kriterien entsprechen. Tipp: Die Methode not() ist das Gegenteil von filter().

Das obige ist der detaillierte Inhalt vonZusammenfassung der grundlegenden jQuery-Syntax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Anatomie des verzögerten JQuery-ObjektsNächster Artikel：Anatomie des verzögerten JQuery-Objekts

In Verbindung stehende Artikel

Mehr sehen