Was sind die Hauptfunktionen von jquery?

藏色散人
Freigeben: 2023-03-25 11:24:47
Original
5089 Leute haben es durchsucht

Die Hauptfunktionen von jquery sind: 1. Auf Teile des Seitenrahmens zugreifen; 3. Auf Ereignisse reagieren; 6. Asynchrone Interaktion mit dem Server 7. Vereinfachen Sie gängige JavaScript-Vorgänge.

Was sind die Hauptfunktionen von jquery?

Die Betriebsumgebung dieses Tutorials: Windows 10-System, jquery3.2.1, Dell G3-Computer.

Was sind die Hauptfunktionen von jquery?

Die Hauptfunktionen von jQuery

1: Auf einen Teil des Seitenrahmens zugreifen

jQuery vereinfacht die feste Methode des DOM, einen Knoten oder einen bestimmten Knotentyp auf der Seite zu erhalten, erheblich;

2: Ändern Sie die Leistung der Seite

Da jeder Browser den CSS3-Standard unterschiedlich unterstützt und viele CSS3-Stile nicht gut wiedergegeben werden. Das Aufkommen von jQuery löst dieses Problem sehr gut. Es kapselt JavaScript-Code, sodass verschiedene Browser den CSS3-Standard gut nutzen können.

3: Den Inhalt der Seite ändern

Durch die leistungsstarke und umfassende API kann jQuery problemlos den Inhalt der Seite und sogar den Rahmen der gesamten Seite ändern.

4: Auf Ereignisse reagieren

Keine Notwendigkeit Berücksichtigen Sie Browserkompatibilitätsprobleme und können Ereignisse einfacher verarbeiten.

5: Fügen Sie der Seite Animationen hinzu.

Die Bibliothek von jQuery bietet eine große Anzahl von Animationseffekten mit anpassbaren Parametern Eine Reihe von Ajax-bezogenen Operationen erleichtert die Entwicklung und Verwendung asynchroner Interaktionen erheblich.

7: Vereinfachen Sie häufig verwendete JavaScript-Operationen.

jQuery bietet viele zusätzliche Funktionen zur Vereinfachung gängiger JavaScript-Operationen, z. B. Array-Operationen, iterative Operationen usw.;

jQuery Die Grundfunktionen von

jQuery kapseln DOM-Funktionen, wodurch die Verwendung von DOM-Funktionen sehr einfach und bequem ist. Ob es sich um den Erwerb von Webseitenelementen oder um „Hinzufügen, Löschen, Ändern und Abfragen“ handelt, es wurde auf humanere Weise gekapselt. Werfen wir einen kurzen Blick auf die Grundfunktionen von jQuery und die Exzellenz des jQuery-Designs.元 1. Rufen Sie das Webseitenelement ab.
JQUERYs Ergebnis ist ein Objekt.

einige grundlegende Methoden des DIV

$(document); // 选择整个文档对象
$("#myId"); // 选择id = 'myId' 的元素
$(".myClass"); // 选择class = 'myClass' 的元素
$("div.myClass"); // 选择class = 'myClass' 的div元素
$("input[name=first]"); // 选择name = 'first' 的 input 元素
Nach dem Login kopieren

  • Wählen Sie andere Elemente über div aus.

  • $("a:first"); // 选择网页中第一个a元素
    $("tr:odd"); // 选择表格中的奇数行
    $("#myFrom:input"); // 选择表单中的id='myFrom'的input元素
    $("div:visible"); // 选择可见的div元素
    $("div:gt(2)"); // 选择所有的div元素,除了前3个
    $("div:animated"); // 选择当前处于动画状态的div元素
    Nach dem Login kopieren
    in Betrieb ist Dies ist die bequemste Funktion von jQuery, da der Rückgabewert jedes Mal, wenn jQuery eine Funktionsoperation ausführt, immer noch das jQuery-Objekt der ursprünglichen Operation ist, sodass Sie die Operation später direkt fortsetzen können.
    .end()-Methode
  • .end()-Methode gibt den Rückgabewert an das vorherige jQuery-Objekt zurück

  • Beispiel:
$("div").has("p"); // 选择包含p元素的div元素
$("div").not(".myClass"); //选择class != 'myClass' 的div元素
$("div").filter(".myClass"); // 选择class = 'myClass' 的div元素
$("div").first(); // 选择第1个div元素
$("div").eq(5); // 选择第6个div元素
Nach dem Login kopieren
  • 3. Hinzufügen, löschen, ändern und prüfen

  • Hinzufügen
    Erstellen Sie ein neues Element: Übergeben Sie direkt eine Zeichenfolge, die dem HTML-Format entspricht, an jQuery. und Textknoten
  • 2 Parameter:

  • withDataAndEvents Ob die Daten und Bindungsereignisse des Elements gleichzeitig kopiert werden sollen, der Standardwert ist false

deepWithDataAndEvents Ob die Daten und Bindungsereignisse aller Unterelemente des Elements kopiert werden sollen Element gleichzeitig ist der Standardwert der Wert des ersten Parameters (withDataAndEvents) 2. Elemente löschen

$("div").next("p"); // 选择div元素后面的第1个p元素
$("div").parent(); // 选择div元素的父元素
$("div").closest("from"); // 选择离div最近的from父元素
$("div").children(); // 选择div的所有子元素
$("div").siblings(); // 选择div同级的其他兄弟元素(不包括自己)
Nach dem Login kopieren

3. Ändern

Elemente einfügen/verschieben

$("div").find("p").addClass("first").removeClass("second").html("third");
// 分解
$("div") // 找到div元素
  .find("p") // 选择其中的p元素
  .addClass("first") // 添加一个class = 'first'
  .removeClass("second") // 删除一个class = 'second'
  .text("third"); // 将文本改为 third
Nach dem Login kopieren

Die beiden oben genannten Methoden haben das Gleiche Wirkung

Aber ihre Rückgabewerte sind unterschiedlich, nämlich $('div') und $('p'), daher müssen Sie entsprechend den nachfolgenden Operationen auswählen

Die anderen beiden Methoden zum Einfügen/Verschieben von Elementen

$("div") // 找到div元素
  .find("p") // 选择其中的p元素
  .addClass("first")
  .removeClass("second")
  .text("third")
  .end() // 将jQuery对象从p退回到div
  .addClass("myDiv"); // 给div添加一个class = 'myDiv'
Nach dem Login kopieren

4. Ändern Sie die Prüfung in einen Getter/Setter

Die gleiche Funktion, indem Sie verschiedene Parameter übergeben, um die Änderungs-/Prüffunktion zu implementieren

let $myDiv = $("<div class=&#39;myDiv&#39;><p>Derek</p></div>"); // 创建新的元素,用变量$myDiv储存
$("body").append($myDiv); // 把$myDiv储存的新元素插入到body中
$("ul").append("<li>list</li>"); // 把新创建的li插入到ul中
Nach dem Login kopieren

JQuery-Funktion für allgemeine Werte/Zuweisungen.html() HTML-Inhalt prüfen/ändern

.text() Textinhalt prüfen/ändern

.attr() einen bestimmten Wert des Attributs prüfen/ändern

.width() Breite eines Elements prüfen/ändern

.heigth() Höhe prüfen/ändern eines Elements

.val() Überprüfen/ändern Sie den Wert eines Formularelements

Hinweis:

Wenn das Ergebnisobjekt mehrere Elemente enthält, werden beim Zuweisen allen Elementen Werte zugewiesen Wert, nur der Wert des ersten Elements wird herausgenommen. Die Ausnahme ist text(), das den Textinhalt aller Elemente herausnimmt.

Empfohlenes Lernen: „

jQuery-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonWas sind die Hauptfunktionen von jquery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage