Einführung in Jquery und seine detaillierte Verwendung

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.

2. Funktionen von jQuery

a. Umfangreiche Anwendung, Ereignisverarbeitung, AJAXd -browser (Browserkompatibilität wird nicht mehr berücksichtigt) e. Implizite Iteration g zur Einführung von jQuery

路径引入
<script src=&#39;文件路径&#39;></script>
引入在线资源
<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>

Eingabefunktion

$(document).ready(function(){    
//类似于原生js的window.onload
});
//简写
$(function(){   });

und window.onload Unterschiede

Unterschied 1: Unterschiedliche Schreibnummern

Die Js-Eingabefunktion kann nur einmal erscheinen. Wenn sie mehrmals erscheint, liegt ein Problem mit der Ereignisabdeckung vor.

Die Eingabefunktion von jQuery kann ohne Ereignisabdeckung beliebig oft vorkommen.

Unterschied 2: Unterschiedliche Ausführungszeitpunkte

Die Js-Eingabefunktion wird ausgeführt, nachdem alle Dateiressourcen geladen wurden. Zu diesen Dateiressourcen gehören: Seitendokumente, externe JS-Dateien, externe CSS-Dateien, Bilder usw.

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:

jQuery-Selektor ruft das DOM ab Das Objekt wird dann gekapselt, wodurch es zu einem jQuery-Objekt mit jQuery-Methoden wird. Vereinfacht gesagt handelt es sich um eine Neuverpackung des DOM-Objekts.

JQuery-Objekt in DOM-Objekt konvertieren

Erster Weg:

var btn1 = $btn[0];

// Dabei Gleichzeitig wird das jQuery-Objekt $btn in das DOM-Objekt btn1 konvertiert (diese Methode wird empfohlen). >

Verwenden Sie das $(domObject)-Paket, um es in ein jQuery-Objekt zu packen

jQuery-Selektor

Der jQuery-Selektor ist die Stärke von jQuery bietet eine Reihe von Methoden, die es uns erleichtern, die Elemente auf der Seite abzurufen. Die Syntax stimmt mit CSS-Selektoren überein.

Basisauswahl

"#"

ID-Auswahl

--Beispiel

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"

Hierarchischer Selektor (Nachkommenselektor)

--Beispiel

$(“li”).css(“color”, “red”);

Wählen Sie alle Nachkommenelemente des Elements mit der ID j_wrap li aus

">"

Kinderauswahl

-- Beispiel

$(“#j_wrap li”).css(“color”, “red”);

Alle untergeordneten Elemente des Elements mit der ID j_wrap auswählen. Alle untergeordneten Elemente von ul li

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!