Was ist jQuery und was kann es für uns tun? Wenn Sie ein Webentwickler sind und JavaScript-Programme geschrieben haben, verwenden Sie wahrscheinlich jQuery. Wenn Sie es noch nicht ausprobiert haben, haben Sie zumindest davon gehört. Tatsächlich kann man sagen, dass jQuery derzeit die beliebteste JavaScript-Bibliothek ist Bühne. Laut Statistiken relevanter Abteilungen verwenden etwa 28 % der Websites weltweit jQuery. Diese Zahl ist vielleicht etwas übertrieben, zeigt aber die Beliebtheit von jQuery. Dieser Artikel gibt nur eine kurze Einführung in die Verwendung von jQuery und dient als Einführungstutorial.
Laden Sie den jQuery-Code herunter und laden Sie ihn auf die Seite
Zuerst müssen Sie den neuesten jQuery-Code von der offiziellen jQuery-Website herunterladen. jQuery bietet offiziell zwei Versionen, eine ist komprimiert und die andere ist nicht komprimiert Für den jQuery-Quellcode wird empfohlen, die komprimierte Version herunterzuladen, da diese kleiner ist. Nachdem der Download abgeschlossen ist, laden Sie ihn in Ihren HTML-Code. Die Lademethode ist wie folgt:
<html> <head> <title>jQuery tutorial</title> <script type="text/javascript" src="jquery-1.4.4.min.js"></script> </head> <body> jQuery tutorial </body> </html>
Aufgrund der aktuellen Beliebtheit von jQuery bieten viele Websites natürlich auch eine Online-jQuery-API an, beispielsweise die Google-API, sodass wir jQuery über die folgenden Methoden laden können:
Wenn Sie lernen, jQuery-Code zu schreiben, müssen Sie sich als Erstes mit dem Mechanismus zur Verarbeitung von dokumentbereiten Ereignissen befassen. Fast Ihr gesamter jQuery-Code muss in diesem Ereignis geschrieben werden. Dieses Ding hat zwei Hauptfunktionen:
Stellen Sie sicher, dass der jQuery-Code erst ausgeführt wird, nachdem die Webseite vollständig geladen ist. Denn wenn DOM-Elemente auf der Webseite vorhanden sind, die nicht vollständig geladen wurden, führt die Verwendung von jQuery-Code zum Zugreifen auf oder Bearbeiten von DOM-Elementen zu einem Fehler.
Unterscheiden Sie jQuery-Code bis zu einem gewissen Grad von anderem Code.
Der Code wird im Allgemeinen wie folgt geschrieben:
<script type="text/javascript">
$(document).ready(function() {
// 所有的 jQuery 代码都写在这里
});
</script>
DOM-Elemente mit jQuery-Selektoren auswählen
jQuery kapselt eine Funktion $(""), die es uns ermöglicht, DOM-Elemente in HTML-Dokumenten bequem auszuwählen. Hier sind ein paar einfache Möglichkeiten, sie zu verwenden.
$("div"); // 选择当前 HTML 文档中的所有 DIV 元素
$("#myElement"); // 选择当前 HTML 文档中 ID 为 "myElement" 的元素
$(".myClass"); // 选择当前 HTML 文档中 class 为 "myClass" 的元素
$("p#myElement"); // 选择当前 HTML 中 ID 为 "myElement" 的段落 P 标签元素
$("ul li a.navigation"); // 选择列表元素中 class 为 "navigation" 的超链接
jQuery unterstützt fast alle CSS-Auswahlmethoden
$("p > a"); // 选择所有 P 标签中的超链接 A 元素
$("input[type=text]"); // 选择 input 元素中 type 为 text 的元素
$("a:first"); // 选择当前页面中的第一个超链接 A 元素
$("p:odd"); // 选择当前页面中序数为奇数的段落 P 元素
$("li:first-child"); // 选择列表中的第一个元素
jQuery selbst definiert auch einige Auswahlmethoden. Hier einige Beispiele:
$(":animated"); // 选择所有正在执行动画效果的元素
$(":button"); // 选择所有按钮元素 （input 或 button）
$(":radio"); // 选择所有单选框元素
$(":checkbox"); // 选择所有复选框元素
$(":checked"); // 选择所有已经在 选定状态 的单选框和复选框
$(":header"); // 选择所有标题元素 （h1, h2, h3, h4 ...）
Klassennamen in CSS bearbeiten und darauf zugreifen
Mit jQuery können Sie Klassennamen für DOM-Elemente hinzufügen und entfernen, was sehr praktisch ist. Hier sind einige typische Verwendungsmethoden:
$("div").addClass("content"); // 为所有 <div> 元素添加名为 "content" 的类
$("div").removeClass("content"); // 移除所有 <div> 元素中，名为 "content" 的类
$("div").toggleClass("content"); // 交替所有 <div> 元素中，名为 "content" 的类 （如果该元素中不存在这个类，则为它加上这个类；如存在，则移除之）
Natürlich können Sie jQuery auch verwenden, um zu erkennen, ob eine bestimmte Klasse in einem Element verwendet wird. Der Code lautet wie folgt
if ($("#myElement").hasClass("content")) {
alert("存在名为 content 的类！");
}
else {
alert("不存在名为 content 的类！");
}
Verwenden Sie jQuery, um Stile in CSS zu bearbeiten
Mit jQuery können Sie ganz einfach CSS-Stile zu DOM-Elementen hinzufügen. Hier sind einige Beispiele:
$("p").css("width", "400px"); // 为所有段落添加一个宽度
$("#myElement").css("color", "blue") // 将所有 ID 为 #myElement 的元素中文本颜色变为蓝色
$("ul").css("border", "solid 1px #ccc") // 为所有无序列表添加实线边框，且边框颜色为 #ccc
DOM-Elemente oder Inhalte zu Webseiten hinzufügen, entfernen und anhängen
jQuery bietet auch viele Methoden zum Bearbeiten von DOM-Elementen, z. B. zum Ändern des Textes im Operations-Tag. . . Einige Beispiele sind wie folgt:
var myElementHTML = $("#myElement").html();
// 获取 ID 为 myElement 的元素中的所有内容，包括文本和 HTML 标签
// 这种方法类似于传统 JavaScript 中的 innerHTML
var myElementHTML = $("#myElement").text();
// 获取 ID 为 myElement 的元素中的文本，仅包括文本，HTML 标签除外
Ähnlich wie bei den beiden oben genannten Methoden können Sie auch den HTML-Code oder Text im DOM-Element ändern:
$("#myElement").html("<p>This is the new content.</p>");
// #myElement 中的内容将被这个段落替换掉
$("#myElement").text("This is the new content.");
// #myElement 中的内容将被这行文本替换掉
Inhalt innerhalb des Elements anhängen:
$("#myElement").append("<p>This is the new content.</p>");
// 保留标签内原有内容，并在末尾处追加新内容
Zum Anhängen von Inhalten an Elemente verfügt jQuery über mehrere andere Verwendungsmöglichkeiten, wie zum Beispiel: appendTo(), prepend(), prependTo(), before(), insertBefore(), after(), insertAfter(), jede hat ihre eigene Seine Eigenschaften, aber seine Verwendung ähneln append().
jQuery-Ereignisbehandlung
Einige spezifische Ereignishandler können mit den folgenden Methoden implementiert werden:
$("a").click(function() {
// 可以在这里写一些代码
// 当超链接被点击的时候这里的代码将被执行
});
Wenn auf den Hyperlink geklickt wird, wird der Code in function() ausgeführt. Es gibt andere Ereignisse, die auf die gleiche Weise verwendet werden können, wie zum Beispiel: Unschärfe, Fokus, Hover, Tastendruck, Laden, Mausbewegung, Größenänderung, Scrollen, Senden, Auswählen.
Elemente mit jQuery ausblenden oder anzeigen
jQuery kann auch sehr bequem DOM-Elemente ein- oder ausblenden. Der Beispielcode lautet wie folgt:
$("#myElement").hide("slow", function() {
// 这里可以写一些代码，当元素被隐藏后，这里的代码将被执行
});
$("#myElement").show("fast", function() {
// 这里可以写一些代码，当元素被隐藏后，这里的代码将被执行
});
$("#myElement").toggle(1000, function() {
// 这里可以写一些代码，当元素被隐藏/显示后，这里的代码将被执行
});
可以看到，当元素显示或隐藏的时候，是慢慢的渐渐变化的，这是因为上面用到了几个速度参数，如 slow，fast，除此之外还有 normal，数字 1000 表示毫秒数，可以自定义。如果没有设置速度参数，那么元素将直接显示或隐藏，一闪而过，没有任何动画效果。后面的第二个参数是一个 function，用来当显示/隐藏完毕后，再执行一些需要的代码，如果不需要，可省略此参数。
另外还有一种“渐隐渐显”的方法，也是动画效果，使用方法如下：
$("#myElement").fadeOut("slow", function() {
// 这里的代码在 fade out 完成后执行
});
$("#myElement").fadeIn("slow", function() {
// 这里的代码在 fade in 完成后执行
});
调整元素的透明度：
$("#myElement").fadeTo(2000, 0.4, function() {
// 这里的代码在在调整透明度完成后执行
});
其中第一个参数是仍然是速度参数，第二个参数是透明度，但三个参数是一个匿名回调函数，当渐变完成后执行。
jQuery 之动画效果
jQuery 可以为 DOM 元素添加上下滑动效果：
$("#myElement").slideDown("fast", function() {
// .......
});
$("#myElement").slideUp("slow", function() {
// .......
});
$("#myElement").slideToggle(1000, function() {
// .......
});
jQuery 的动画效果还可以应用在改变 DOM 元素样式的时候，使改变样式的过程以平滑过渡的方式进行，而且可以选择需要速度，示例如下：
$("#myElement").animate({
opacity: 0.3,
width: "500px",
height: "700px"
},
1000,
function() {
// ......
});
总的来说，jQuery 的动画效果很强大，但是也有其怪癖（例如要改变颜色的话，可能需要其它特定的插件）。jQuery 还有其它许多动画效果需要不断地去深入学习和挖掘。
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
