Zusammenfassung der grundlegenden jQuery-Syntax-js-Tutorial-php.cn

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(){
});

Nach dem Login kopieren

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

-Element aus.

$("p.intro") wählt alle

-Elemente mit class="intro" aus.

$("p#demo") wählt alle

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

Nach dem Login kopieren

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 参数是隐藏或显示完成后所执行的函数名称。

这是一个段落。

这是另一个段落。

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

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

这是一个段落。

这是另一个段落。

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

Nach dem Login kopieren

必需的 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

< !DOCTYPE html>

Klicken Sie hier, um das Bedienfeld nach unten zu schieben

Hallo Welt!

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("");
});
$("#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 Welt!< /b>
(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.

<script><br>$(document).ready(function(){<br> $("button").click(function(){<br> $("p" ).remove(".italic");<br> });<br>});<br></script>

Dies ist ein Absatz im S.

Dies ist ein weiterer Absatz im S.
Dies ist ein weiterer Absatz im p.