Dieser Artikel bietet Ihnen eine Einführung in Jquery und seine detaillierte Verwendung. Freunde in Not können darauf verweisen.
1. Einführung in Jquery
Jquery ist ein ausgezeichnetes Javascript-Framework. Es handelt sich um eine leichte JS-Bibliothek (nur 21 KB nach der Komprimierung). Sie ist mit CSS3 und verschiedenen Browsern (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+) kompatibel. Die Anwendung von Jquery auf unsere Projekte kann Programmierer vom Entwerfen und Schreiben komplexer JS-Anwendungen befreien und ihre Aufmerksamkeit auf funktionale Anforderungen statt auf Implementierungsdetails richten, wodurch die Entwicklungsgeschwindigkeit des Projekts erhöht wird. Es hilft, die JavaScript- und Ajax-Programmierung zu vereinfachen. Es ermöglicht Ihnen, Dokumente einfach zu bearbeiten, Ereignisse zu verarbeiten, Spezialeffekte zu implementieren und Ajax-Interaktion zu Webseiten auf Ihren Webseiten hinzuzufügen.
a. Umfangreiche Anwendung, Ereignisverarbeitung, AJAXd -browser (Browserkompatibilität wird nicht mehr berücksichtigt) e. Implizite Iteration g zur Einführung von jQuery
路径引入 <script src='文件路径'></script> 引入在线资源 <script src = "https://code.jquery.com/jquery-1.12.4.js"></script>
Eingabefunktion $(document).ready(function(){
//类似于原生js的window.onload
});
//简写
$(function(){ });
Unterschied 1: Unterschiedliche Schreibnummern
Unterschied 2: Unterschiedliche Ausführungszeitpunkte
Die Eingabefunktion von jQuery wird ausgeführt, nachdem das Dokument geladen wurde. Der Abschluss des Dokumentladens bedeutet: Nachdem der DOM-Baum geladen wurde, können Sie das DOM bedienen, ohne auf das Laden aller externen Ressourcen warten zu müssen.
DOM-Objekt und jQuery-Objekt
JQuery-Objekt in DOM-Objekt konvertieren
var btn1 = $btn[0];
Verwenden Sie das $(domObject)-Paket, um es in ein jQuery-Objekt zu packen
jQuery-Selektor
Basisauswahl
ID-Auswahl
var btn2 = $btn.get(0);// 此时就把jQuery对象$btn转换成了DOM对象btn2
Wählen Sie ein Element mit der ID btnShow aus (der Rückgabewert ist ein jQuery-Objekt)
"."
Klassenauswahl
--Beispiel
$(“#btnShow”).css(“color”, “red”);
Auswahl enthält alle Elemente der Klasse liItem
"element"
Tag-Selektor
-- Beispiel
$(“.liItem”).css(“color”, “red”);
Wählen Sie alle Elemente mit dem Tag-Namen li
"space"
< aus 🎜>Hierarchischer Selektor (Nachkommenselektor)
--Beispiel
$(“li”).css(“color”, “red”);
">"
Kinderauswahl
-- Beispiel
$(“#j_wrap li”).css(“color”, “red”);
Grundlegende Filterauswahl
":eq(index)"
选择匹配到的元素中索引号为index的一个元素，index从0开始
--示例
$(“li:eq(2)”).css(“color”, ”red”);
选择li元素中索引号为2的一个元素
":odd"
选择匹配到的元素中索引号为奇数的所有元素，index从0开始
--示例
$(“li:odd”).css(“color”, “red”);
选择li元素中索引号为奇数的所有元素
":even"
选择匹配到的元素中索引号为偶数的所有元素，index从0开始
--示例
$(“li:odd”).css(“color”, “red”);
选择li元素中索引号为偶数的所有元素
find(selector)
查找指定元素的所有后代元素（子子孙孙）
--示例
$(“#j_wrap”).find(“li”).css(“color”, “red”);
选择id为j_wrap的所有后代元素li
children()
查找指定元素的直接子元素（亲儿子元素）
--示例
$(“#j_wrap”).children(“ul”).css(“color”, “red”);
选择id为j_wrap的所有子代元素ul
siblings()
查找所有兄弟元素（不包括自己）
--示例
$(“#j_liItem”).siblings().css(“color”, “red”);
选择id为j_liItem的所有兄弟元素
parent()
查找父元素（亲的）
--示例
$(“#j_liItem”).parent(“ul”).css(“color”, “red”);
选择id为j_liItem的父元素
eq(index)
查找指定元素的第index个元素，index是索引号，从0开始
--示例
$(“li”).eq(2).css(“color”, “red”);
选择所有li元素中的第二个
jQuery各大版本的引用
官网jquery压缩版引用地址: <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> jquery-3.0.0 官网jquery压缩版引用地址: <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> jquery-2.1.4 百度压缩版引用地址: <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> 微软压缩版引用地址: <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script> 官网jquery压缩版引用地址: <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> jquery-2.1.1 百度压缩版引用地址: <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> 微软压缩版引用地址: <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script> 官网jquery压缩版引用地址: <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> jquery-2.0.0 百度压缩版引用地址: <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 微软压缩版引用地址: <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script> 官网jquery压缩版引用地址: <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> jquery-1.11.3 百度压缩版引用地址: <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> 微软压缩版引用地址: <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script> 官网jquery压缩版引用地址: <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> jquery-1.11.1 百度压缩版引用地址: <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> 微软压缩版引用地址: <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.1.min.js"></script> 官网jquery压缩版引用地址: <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> jquery-1.10.2 百度压缩版引用地址: <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> 微软压缩版引用地址: <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.min.js"></script> 官网jquery压缩版引用地址: <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> jquery-1.9.1 百度压缩版引用地址: <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> 微软压缩版引用地址: <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script> 官网jquery压缩版引用地址: <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> jquery-1.8.3 百度压缩版引用地址: <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> 微软压缩版引用地址: <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.min.js"></script> 官网jquery压缩版引用地址: <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> jquery-1.7.2 百度压缩版引用地址: <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> 微软压缩版引用地址: <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js"></script> 官网jquery压缩版引用地址: <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> jquery-1.6.4 百度压缩版引用地址: <script src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js"></script> 微软压缩版引用地址: <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.4.min.js"></script> 官网jquery压缩版引用地址: <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> jquery-1.5.2 百度压缩版引用地址: <script src="http://libs.baidu.com/jquery/1.5.2/jquery.min.js"></script> 微软压缩版引用地址: <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.2.min.js"></script> 官网jquery压缩版引用地址: <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> jquery-1.4.4 百度压缩版引用地址: <script src="http://libs.baidu.com/jquery/1.4.4/jquery.min.js"></script> 微软压缩版引用地址: <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.min.js"></script> 官网jquery压缩版引用地址: <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> jquery-1.4.2 百度压缩版引用地址: <script src="http://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script> 微软压缩版引用地址: <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.2.min.js"></script> 官网jquery压缩版引用地址: <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> jquery-1.3.2 百度压缩版引用地址: <script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script> 微软压缩版引用地址: <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.3.2.min.js"></script> 官网jquery压缩版引用地址: <script src="http://code.jquery.com/jquery-1.3.2.min.js"></script> jquery-1.2.3 百度压缩版引用地址: <script src="http://libs.baidu.com/jquery/1.2.3/jquery.min.js"></script> 微软压缩版引用地址: <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.2.3.min.js"></script> 官网jquery压缩版引用地址: <script src="http://code.jquery.com/jquery-1.2.3.min.js"></script>
Das obige ist der detaillierte Inhalt vonEinführung in Jquery und seine detaillierte Verwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
