1. Grundlegende Methoden von jquery-Objekten:
(1) get(); Holen Sie sich alle passenden Elemente
(2) Holen Sie sich eines der passenden Elemente $(this) . get(0) ist äquivalent zu $(this)[0]
(3) Number index(jqueryObj); Search for sub-objects
(4) every(callback); ähnelt foreach, iteriert jedoch über das Elementarray
Zum Beispiel:
$("img".each(function(index){
this.src = "test" + index + ".jpg";
});Verwenden Sie return false; return true, um die Funktionen break und continue darzustellen.
(5) length, size(); beide geben die Gesamtzahl zurück von Elementen
(6) jQuery.noConflict(true); Setzen Sie das Standardsymbol von jquery zurück
wie:
var dom = {};
dom.query = jQuery.noConflict(true);In diesem Fall wird stattdessen dom.query verwendet von $
2. , JQuery-Selektor
(1) Basic:
* entspricht allen DOM-Elementen
.classname entspricht DOM-Elementen mit dem angegebenen Klassennamen
element (DOM Tag-Name) stimmt mit allen mit dem angegebenen Namen überein. DOM-Element
ID stimmt mit dem DOM-Element
mit der angegebenen ID überein, getrennt durch , um anzuzeigen, dass eine der Mehrfachauswahlbedingungen übereinstimmt
(2) Ebene:
Eins auswählen [Leerzeichen]Zwei auswählen bedeutet, dass alle Elemente in der Auswahl eins die Bedingung zwei erfüllen.
Eins auswählen[>]Zwei auswählen bedeutet das erste Element in der Auswahl eins, das erfüllt die Bedingung zwei
Wähle eins aus[+]Wähle zwei aus. Stellt das nächste Element dar.
, das eins unmittelbar nach der Bedingung zwei auswählt. [~] Stellt alle Elemente dar, die auf die Bedingung zwei folgen, nachdem eins ausgewählt wurde >
:eq(index) Indexposition, wie zum Beispiel: $("div:eq(1)"
:even Gerades Element
dd Ungerades Element
:first Das erste
: GT (Index) ist größer als alle Elemente des Index
: LT (Index) kleiner als alle Elemente des Index
: Header H1, H2 ... Diese Titelelemente
: Last last
: not (not (not (not (not (not (not (not (not Selector) Excludes
:contains(string) Der ausgewählte Objektinhalt enthält
:empty Der ausgewählte Objektinhalt ist leer
:has(Selector) Enthält
:parent Im Gegensatz zu empty
:first-child:last-child
:nth-child(index) Number
nly-child Das einzige untergeordnete Element
[att=value] Wie oben
[att*=value] Fuzzy-Matching
[att!=value] Kann nicht dieser Wert sein
[att$=value] Endet mit diesem Wert
[ att^=value] Beginnt mit diesem Wert
[att1][att2][att3 ]... Entspricht einer von mehreren Attributbedingungen
attr(key , fn), attr(key, value) legt einen Attributwert für alle übereinstimmenden Elemente fest . Der zweite Parameter des ersteren ist eine Funktion, und der Wert ist der Rückgabewert dieser
Funktion attr(properties ) Verwenden Sie Schlüssel-Wert-Paare, um einen oder mehrere Attributwerte für alle festzulegen passende Elemente, wie zum Beispiel: $("img".attr({ src: "test.jpg", alt: "Test Image" });
removeAttr(name) Löschen Sie den angegebenen Attributwert des passenden Elements
addClass(classname) Fügen Sie den Klassennamen hinzu, das heißt, fügen Sie das Klassenattribut hinzu
removeClass(classname)
toggleClass(classname) Schalten Sie den Klassennamen um (löschen Sie ihn, wenn er existiert, wenn er nicht existiert) und erhöhen Sie ihn dann)
html()
html(setvalue)
text()
text(setvalue)
val()
val(val) Verwenden Sie für gewöhnliche Elemente Die Methode sollte ein object.val (festgelegter Wert) sein; für select, radio usw. wird der Wert verwendet, um das Objekt anzugeben, um diesen Wert auszuwählen, wie zum Beispiel: ; Operator-Implementierung, daher werden hier nur einige spezielle Betriebsmethoden aufgeführt .
EQ (INDEX), Filter (EXPR), Hasclass (Klasse), IS (EXPR), NOT (EXPR),
Filter (Fn) Ausgewählte Elementsammlung (Fn), um mit der angegebenen zurückgegebenen Funktion übereinzustimmen Elementsammlung ( Diese Funktion berechnet intern
einmal für jedes Objekt (ähnlich wie „$.each“). Wenn die aufgerufene Funktion „false“ zurückgibt, wird das Element gelöscht, andernfalls bleibt es erhalten. )
Slice(start, [end]) Wählen Sie eine passende Teilmenge aus
map(callback) Wandeln Sie eine Menge von Elementen in andere Arrays um (unabhängig davon, ob es sich um ein Array von Elementen handelt oder nicht)
andSelf() Ausgewähltes zum aktuellen Elementsatz hinzufügen
end() Stellt den Zustand wieder her, nachdem die vorherige Auswahl zerstört wurde
3. Dokumentenverarbeitung: Einer von String, Element, jQuery, das Gleiche unten.
appendTo(content) Das Gegenteil von oben ist das Anhängen an das ausgewählte Objekt. Dies bedeutet, das ausgewählte Objekt an die Inhaltsauswahl anzuhängen
prepend(content), prependTo( content), after(content), before(content)
replaceWith(content) Ersetze das ausgewählte Element durch Content
replaceAll(selector) Ersetze das ausgewählte Objekt durch das aktuelle Objekt
leer ()
remove([expr])
clone()
clone(true) Klonen Sie das Ereignis beim Klonen zusammen
4. CSS-Verarbeitung
css (Name) Greifen Sie auf die Stileigenschaften des ersten übereinstimmenden Elements zu
css(name,value) Legen Sie in allen übereinstimmenden Elementen den Wert einer Stileigenschaft festcss(properties) Geben Sie ihm mithilfe von Schlüssel-Wert-Paaren einen Wert
offset() Ermittelt die Verschiebung des ausgewählten Elements. Der Rückgabewert ist das Objekt Object{top,left}
height(), height(val), width(), width(val )
4.
(1) ready(fn)
Ereignis Wenn DOM bereit ist, für document Das Ereignis kann abgekürzt werden als $(function(){ … });(2) bind(type,[data],fn) bindet ein Ereignis an die übereinstimmenden Daten als zusätzliches Objekt an diese Ereignisfunktion übergeben
Zum Beispiel:
$("p".bind("click", function(){
});
Funktionshandler(event) {
alarm(event.data.foo);
}
$("p".bind("click", {foo: "bar" }, handler)
(3) one(type,[data],fn) Der obige Unterschied besteht darin, dass dieses Ereignis nur einmal reagiert
(5) triggerHandler(type,[data]) löst nur die Ereignisfunktion aus, löst jedoch nicht dasselbe Ereignis im Browser aus
(6) unbind([type] ,[data]) löscht das gebundene Ereignis
(7) hover(overFn, outFn) reagiert auf das Mauspass-Ereignis
(8) toggle(fn1,fn2…) reagiert jedes Mal auf die verschiedenen Funktionen, wenn die Maus bewegt wird angeklickt
2. Feste Ereignisse
Die folgenden Ereignisse können ausgelöst und auch eingestellt werden.
blur(), change(), click(), dblclick(), error(), focus(), keydown(), keypress(), keyup(), select(), subscribe()
Die folgenden Ereignisse können nur durch JS festgelegt und nicht ausgelöst werden:
load(fn), Mousedown(fn), Mousemove(fn), Mouseout(fn), Mouseover (fn), Mouseup(fn), resize(fn), scroll(fn), unload(fn)
5. Effekt
hide()
hide(speed,[callback]) Mit Animation ausblenden, Callback Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist
show()
show(speed,[callback])
toggle() Switch state
slideDown(speed,[callback]) Zeigt dynamisch alle übereinstimmenden Elemente durch Höhenänderungen an (zunehmend nach unten) und löst optional danach eine
Callback-Funktion aus Die Anzeige ist abgeschlossen. slideUp(speed,[callback]) Versteckt alle übereinstimmenden Elemente dynamisch durch Ändern der Höhe (Abnehmen nach oben) und löst optional eine Rückruffunktion aus, nachdem das Ausblenden abgeschlossen ist.
slideToggle(speed,[callback]) Schaltet die Sichtbarkeit aller übereinstimmenden Elemente durch Höhenänderungen um und löst optional eine Rückruffunktion aus, nachdem der Wechsel abgeschlossen ist.
fadeIn(speed,[callback]) Implementiert den Einblendeffekt aller passenden Elemente durch Änderungen der Deckkraft und löst optional eine Rückruffunktion aus, nachdem die Animation abgeschlossen ist.
fadeOut(speed,[callback]) Realisiert den Ausblendeffekt aller passenden Elemente durch Änderungen der Deckkraft und löst optional eine Rückruffunktion aus, nachdem die Animation abgeschlossen ist.
fadeTo(speed,opacity,[callback]) Passt die Deckkraft aller passenden Elemente schrittweise an die angegebene Deckkraft an und löst optional eine Rückruffunktion aus, nachdem die Animation abgeschlossen ist.
animate(params,options) Funktion zum Erstellen benutzerdefinierter Animationen.
params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合
options (Options) : 一组包含动画选项的值的集合。
animate(params[,duration[,easing[,callback]]])
duration、 easing 是预设的动画动作
duration (String,Number) : (可选) 三种预定速度之一的字符串(“slow”, “normal”, or > “fast”或表示动画时长的毫秒数值(如：1000)
easing (String) : (可选) 要使用的擦除效果的名称(需要插件支持).> 默认jQuery提供”linear” 和 “swing”.
dequeue() 从动画队列中移除一个队列函数
queue() 返回指向第一个匹配元素的队列(将是一个函数数组)
queue(callback) 在匹配的元素的动画队列中添加一个函数
queue(queue) 将匹配元素的动画队列用新的一个队列来代替(函数数组)
stop()
六、AJAX
1、jQuery.ajax(options) 通过 HTTP 请求加载远程数据。
参数列表：
(1) async (Boolean) : (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
(2) beforeSend (Function) : 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 是Function的唯一参数
(3) cache (Boolean) : (默认: true,dataType为script时默认为false) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。
(4) complete (Function) : 请求完成后回调函数 (请求成功或失败时均调用)。
(5) contentType (String) : (默认: “application/x-www-form-urlencoded” 发送信息至服务器时内容编码类型。
(6) data (Object,String) : 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为
Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1″, “bar2″]} 转换为 ‘&foo=bar1&foo=bar2’。
(7) dataFilter (Function) :给Ajax返回的原始数据的进行预处理的函数。
(8) dataType (String) : 预期服务器返回的数据类型，”xml”、”html”、”script”、”json”、”jsonp”、”text”。
(9) error (Function) : (默认: 自动判断 (xml 或 html)) 请求失败时调用时间。
(10) global (Boolean) : (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件
(11) ifModified (Boolean) : (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
(12) jsonp (String) : 在一个jsonp请求中重写回调函数的名字。
(13) password (String) : 用于响应HTTP访问认证请求的密码
(20) username (String) : 用于响应HTTP访问认证请求的用户名
(14) processData (Boolean) : (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 “application/x-www-form-urlencoded”。如
果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
(15) scriptCharset (String) : 只有当请求时dataType为”jsonp”或”script”，并且type是”GET”才会用于强制修改charset。通常在本地和远程的内容编码不同时使用。
(16) success (Function) : 请求成功后回调函数。参数：服务器返回数据，数据格式。 Ajax 事件。
(17) timeout (Number) : 设置请求超时时间（毫秒），此设置将覆盖全局设置。
(18) type (String) : (默认: “GET” 请求方式 (“POST” 或 “GET”)， 默认为 “GET”。
(19) url (String) : (默认: 当前页地址) 发送请求的地址。
参数用 : 分开，如：
$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("#results").append(html);
}
});2、封装好的简易方法(callback是成功时执行的函数，参数是返回的数据)
jQuery.get(url,[data],[callback])
jQuery.getJSON(url,[data],[callback])
jQuery.getScript(url,[callback]) 载入远程JS并执行
jQuery.post(url,[data],[callback])
load(url,[data],[callback]) 把远程的HTML载入当前选中的DOM中
3、事件(事件参数为event, XMLHttpRequest, ajaxOptions, thrownError)
ajaxError(callback) Führen Sie die Funktion aus, wenn in der AJAX-Anfrage ein Fehler auftritt.
ajaxSend(callback) Führen Sie die Funktion aus, bevor die AJAX-Anfrage gesendet wird
ajaxComplete(callback) Führen Sie die Funktion aus, wenn die AJAX-Anfrage abgeschlossen ist
ajaxStart(callback) Führen Sie die Funktion aus, wenn die AJAX-Anfrage beginnt
ajaxStop(callback) Wenn die AJAX-Anfrage endet, führen Sie die Funktion
ajaxSuccess(callback) aus. Wenn die AJAX-Anfrage erfolgreich ist, führen Sie die Funktion
jQuery.ajaxSetup(options) aus. Legen Sie den globalen Standardwert von Ajax fest
serialize( ) Der Inhalt des Sequenzformulars ist eine Zeichenfolge
serializeArray() Sequenztabellenelemente (ähnlich der Methode '.serialize()') geben JSON-Datenstrukturdaten zurück
7. Häufig verwendete statische Elemente Methoden
jQuery.boxModel Ob der Browser Standardboxen auf der aktuellen Seite verwendet Modell-Rendering-Seite
jQuery.browser Browser-Kernel-ID. Hängt von navigator.userAgent ab.
Verfügbarer Wert: Safari Opera Msie Mozilla
jquery.Browser.Version Versionsnummer der Browser-Rendering-Engine.
jQuery.each(obj,callback) ist eine allgemeine Iterationsmethode, die zum Iterieren von Objekten und Arrays verwendet werden kann.
jQuery.inArray(value,array) bestimmt die Position des ersten Parameters im Array (gibt -1 zurück, wenn er nicht gefunden wird).
jQuery.map(array,callback) Konvertiert ein Array-ähnliches Objekt in ein Array-Objekt. Der Rückruf kann das alte Array einzeln verarbeiten das Array.
Das obige ist der detaillierte Inhalt vonFassen Sie die gängigen Methoden von JQuery DOM zusammen. 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)
