Aus welchen Teilen besteht die JQuery-Syntaxstruktur?

Die jquery-Syntaxstruktur besteht aus 3 Teilen: 1. Factory-Funktion „$()“, die Elemente im HTML-Dokument basierend auf den Parametern in „()“ sucht und auswählt und das jquery-Objekt zurückgibt, das die Elemente enthält 2 .Selektor, das heißt die Parameter in der Werksfunktion „()“ 3. Integrierte Methoden (Funktionen), die zum Betrieb der ausgewählten Funktion verwendet werden.

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.

Die jQuery-Anweisung besteht hauptsächlich aus drei Teilen: $(), document und action() werden als Factory-Funktion, Selektor bzw. Methode bezeichnet.

Syntax:

 $(selector).action();

• selector selector

$（selector）

• Methode. action()

jQuery对象.addClass（[样式名]）

$() in jQuery

in jQuery $ bedeutet Erwerb, was äquivalent zu document.getElemenById("id name") ist, natürlich auch äquivalent zu document.getElementsByClassName("class name") Es macht den gleichen Sinn. $代表获取的意思，相当于document.getElemenById("id名")；当然，也相当于document.getElementsByClassName("class名")等等同上道理。

$符号主要是用于获得元素对象，通过获取对象，才能使用jquery方法对其进行操作。

$其实就是jQuery的别称，指的就是jQuery对象，而jQuery就是jQuery库提供的一个函数

这个函数的作用是根据 () 里的参数进行查找和选择html文档中的元素， 函数作用之一就是GetElementByID的代替，但()内不仅可以是ID，还可以是各类选择器

比如：

$(document)

$-Symbol wird hauptsächlich zum Abrufen von Elementobjekten verwendet. Durch das Abrufen der Objekte können Sie JQuery-Methoden verwenden, um sie zu bearbeiten.

$ ist eigentlich ein anderer Name für jQuery, der sich auf das jQuery-Objekt bezieht, und jQuery ist eine von der jQuery-Bibliothek bereitgestellte Funktion.

Die Funktion dieser Funktion besteht darin, Elemente im HTML-Dokument basierend auf den Parametern in zu suchen und auszuwählen (). Die Funktionen der Funktion One sind das Ersetzen von GetElementByID, aber () kann nicht nur ID, sondern auch verschiedene Selektoren sein

Zum Beispiel:

$(document) ist die Auswahl gesamtes Dokumentobjekt

Ist das nur? Sie können stattdessen $ verwenden, nein. Um Namenskonflikte zu vermeiden, stellt die jQuery-Bibliothek zusätzliche Mechanismen bereit, um jQuery-Funktionen zusätzliche Aliase zu geben. Zum Beispiel:

var jq = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

Sie können jq anstelle von jQuery und $ im Code verwenden.

Einfach ausgedrückt ist $ das JQuery-Objekt, $() ist JQuery(), Sie können darin Parameter übergeben und seine Funktion besteht darin, Elemente abzurufen.

Selektoren in jquery

jQuery-Selektoren ermöglichen Operationen an Gruppen von HTML-Elementen oder einzelnen Elementen.

jQuery-Selektoren „suchen“ (oder wählen) HTML-Elemente basierend auf der ID, Klasse, dem Typ, den Attributen, Attributwerten usw. des Elements aus. Es basiert auf vorhandenen CSS-Selektoren sowie einigen benutzerdefinierten Selektoren.

1.Basis-Selektor

$("#test")             　　　　   选择id值为test的元素，id值是唯一的所以返回单个元素。
$("div")               　　　　   选择所有的div标签元素，返回div元素数组 
$(".myclass")          　　　　   选择使用myclass类的css的所有元素 
$("*")                 　　　　   选取所有元素。
$("#test,div,.myclass")  　　    选取多个元素。

2.Hierarchischer Selektor

$("div span") 　　　　　　　　　　  选取<div>里的所有<span>元素
$("div >span")   　　　　　　　　  选取<div>元素下元素名是<span>的子元素
$("#one +div")   　　　　　　　　  选取id为one的元素的下一个<div>同辈元素    　　　　等同于$("#one").next("div")
$("#one~div")    　　　　　　　　  选取id为one的元素的元素后面的所有<div>同辈元素    等同于$("#one").nextAll("div")
$("#one").siblings("div") 　　   获取id为one的元素的所有<div>同辈元素（不管前后）
$("#one").prev("div") 　　 　　 　获取id为one的元素的前面紧邻的同辈<div>元素

所以 获取元素范围大小顺序依次为：
$("#one").siblings("div")>$("#one~div")>$("#one +div")  
或是
$("#one").siblings("div")>$("#one").nextAll("div")>$("#one").next("div")

3.Basis-Filter-Selektor

$("div:first")               　　选取所有<div>元素中第1个<div>元素
$("div:last")                   选取所有<div>元素中最后一个<div>元素
$("input:not(.myClass)")        选取class不是myClass的<input>元素 
$("input:even")                 选取索引是偶数的<input>元素(索引从0开始) 
$("input:odd")                  选取索引是基数的<input>元素(索引从0开始) 
$("input:eq(2)")                选取索引等于2的<input>元素 
$("input:gt(4)")                选取索引大于4的<input>元素
$("input:lt(4)")                选取索引小于4的<input>元素
$(":header")                    过滤掉所有标题元素，例如：h1、h2、h3等
$("div:animated")               选取正在执行动画的<div>元素  
$(":focus")                     选取当前获取焦点的元素

4.Inhaltsfilterung.-Selektor

$("div:contains(&#39;Name&#39;)")       选取所有<div>中含有&#39;Name&#39;文本的元素 
　　
$("div:empty")                  选取不包含子元素（包括文本元素）的<div>空元素 

$("div:has(p)")                 选取所有含有<p>元素的<div>元素 

$("div:parent")                 选取拥有子元素的（包括文本元素）<div>元素

5.Sichtbarkeitsfilterauswahl

　　　　$("div:hidden")                 选取所有不可见的<div>元素 

　　　　$("div:visible")                选取所有可见的<div>元素

6. Attributfilterauswahl

$("div[id]")              　　　　选取所有拥有属性id的元素
$("input[name=&#39;test&#39;]")     　　 选取所有的name属性等于&#39;test&#39;的<input>元素 
 
$("input[name!=&#39;test&#39;]")  　　　　选取所有的name属性不等于&#39;test&#39;的<input>元素 
 
$("input[name^=&#39;news&#39;]")        选取所有的name属性以&#39;news&#39;开头的<input>元素 
$("input[name$=&#39;news&#39;]")        选取所有的name属性以&#39;news&#39;结尾的<input>元素 
$("input[name*=&#39;news&#39;]")        选取所有的name属性包含&#39;news&#39;的<input>元素 
$("div[title|=&#39;en&#39;]")           选取属性title等于&#39;en&#39;或以&#39;en&#39;为前缀(该字符串后跟一个连字符&#39;-&#39;)的<div>元素
$("div[title~=&#39;en&#39;]")           选取属性title用空格分隔的值中包含字符en的<div>元素

$("div[id][title$=&#39;test&#39;]")     选取拥有属性id,并且属性title以&#39;test&#39;结束的<div>元素

7. Formularobjekt-Attributfilterauswahl

$("div .one:nth-child(2)")       选取class为&#39;one&#39;的<div>父元素下的第2个子元素

$("div span:first-child")        选取每个<div>中的第1个<span>元素 

$("div span:last-child")         选取每个<div>中的最后一个<span>元素 

$("div button:only-child")       在<div>中选取是唯一子元素的<button>元素

Methoden in jquery

InjQuery integrierte Methoden (Funktionen), die zum Bearbeiten ausgewählter Funktionen verwendet werden

Zum Beispiel:

Methoden zum direkten Bedienen von Elementstilen

CSS-EigenschaftenBeschreibungcss() Legt das Stilattribut des übereinstimmenden Elements fest oder gibt es zurück. height()Setzt die Höhe des passenden Elements oder gibt sie zurück. offset()Gibt die Position des ersten übereinstimmenden Elements relativ zum Dokument zurück. position()Gibt die Position des ersten passenden Elements relativ zum übergeordneten Element zurück. scrollLeft()Legt den Versatz des passenden Elements relativ zur linken Seite der Bildlaufleiste fest oder gibt ihn zurück. scrollTop()Legen Sie den Versatz des passenden Elements relativ zum oberen Rand der Bildlaufleiste fest oder geben Sie ihn zurück. width()Legt die Breite des passenden Elements fest oder gibt sie zurück.

Methoden zur indirekten Manipulation von Elementstilen

In JQuery können Sie Elementstile indirekt manipulieren, indem Sie Elementattribute manipulieren. Methode Beschreibung addClass()Fügt den angegebenen Klassennamen zum übereinstimmenden Element hinzu. attr()Legen Sie die Attribute und Werte des passenden Elements fest oder geben Sie sie zurück. prop()Setzen Sie das Attribut/den Wert des ausgewählten Elements ein oder geben Sie es zurück. removeAttr()Entfernen Sie das angegebene Attribut aus allen übereinstimmenden Elementen. removeClass()Entferne alle oder angegebene Klassen aus allen übereinstimmenden Elementen. toggleClass()Eine Klasse zum übereinstimmenden Element hinzufügen oder daraus entfernen. 🎜

Erweiterte Kenntnisse:

DOM-Modell

Es gibt viele verschiedene Arten von Knoten im DOM, die normalerweise in drei Typen unterteilt sind: Elementknoten, Textknoten und Attributknoten.

DOM-Objekt

In JavaScript können Sie getElementsByTagName() oder getElementsById() verwenden, um Elementknoten abzurufen. Das Ergebnis ist ein DOM-Objekt, das Methoden in JavaScript verwenden kann.

jQuery-Objekt

Das durch Umschließen des DOM-Objekts mit jQuery generierte Objekt kann die Methoden in jQuery verwenden.

Beispiel: $("#title").html(); //Den HTML-Code innerhalb des Elements mit der ID von title abrufen

[Äquivalent zu document.getElementsById("title").innerHTML]

jQuery Objekt und gegenseitige Konvertierung von DOM-Objekten

1) Konvertierung von jQuery-Objekten in DOM-Objekte

①jQuery-Objekt ist ein Array-ähnliches Objekt, und das entsprechende DOM-Objekt kann über die Methode [index] abgerufen werden.

②Rufen Sie das entsprechende DOM-Objekt über die Methode get(index) ab.

2) DOM-Objekt in jQuery-Objekt konvertieren

Sie müssen die Funktion $() verwenden, um das DOM-Objekt zu umschließen, um ein jQuery-Objekt zu erhalten.

【Empfohlenes Lernen: jQuery-Video-Tutorial, Web-Frontend-Video】

Das obige ist der detaillierte Inhalt vonAus welchen Teilen besteht die JQuery-Syntaxstruktur?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!