Was kann jQuery?

Dieser Artikel bietet eine relevante Zusammenfassung der Verwendung von JQuery.

jQuery ist eine kleine, schnelle und leistungsstarke JavaScript-Bibliothek. Es vereinfacht viele Dinge durch einige benutzerfreundliche APIs, wie zum Beispiel: DOM-Operationen, Ereignisüberwachung, Animation, AJAX usw.
Was jQuery kann, kann natives JS, aber natives JS wird komplizierter sein, und der Zweck von jQuery besteht darin, Komplexität in Einfachheit umzuwandeln.
Weniger schreiben, mehr tun.

Was ist der Unterschied zwischen jQuery-Objekten und nativen DOM-Objekten? Wie konvertieren?

Angenommen, ein solches HTML-Fragment

Wir können die jQuery-Methode oder die native DOM-Methode verwenden Erhalten Sie diesen Elementknoten

$("#btn1");  //jQuesy方法；document.querySelector("#btn1");    //原生DOM方法；

Die durch diese beiden Methoden erhaltenen Elementobjekte sind zwei völlig unterschiedliche Objekte.
Was durch die jQuesy-Methode erhalten wird, wird als jQuesy-Objekt bezeichnet. Es verfügt über eigene Methoden und kann keine nativen DOM-Methoden verwenden DOM-natives Objekt, das auch über eine eigene jQuery-Methode verfügt

Die beiden Objekte können ineinander konvertiert werden

$("#btn1")[0]; /jQuery-Objekt wird in ein natives DOM-Objekt konvertiert. Verwenden Sie den Index, um das entsprechende Elementobjekt abzurufen. $(document.querySelector("#btn1")); 🎜>

Wie bindet man ein jQuery-Ereignis ein? Welche Funktionen haben Bind, Unbind, Delegate, Live, On und Off? Welches ist empfehlenswert? Wie verwende ich on, um Ereignisse zu binden und den Ereignis-Proxy zu verwenden?

In jQuery können wir die on()-Methode verwenden, um Ereignisse zu binden

$("#btn1").on("click",function() {  //最简单的事件绑定；
    console.log("hello world");
}）

Andere Ereignisbindungsmethoden

bind(), diese Methode wurde in Versionen nach 3.0 aufgegeben. Verwenden, verwenden on() stattdessen;

Version 1.4.3, die die folgenden Parameter akzeptiert: eventType (Ereignistyp, „Klick“ usw.), eventData (an die Ereignisverarbeitungsfunktion übergebene Daten), handler (Ereignisverarbeitungsfunktion) ) , präventBubble (ein Boolescher Wert, um Standardereignisse zu verhindern und zu verhindern, dass Ereignisse sprudeln)
Da es nur an vorhandene Elemente gebunden werden kann, werden neu hinzugefügte Elemente nicht an Ereignisse gebunden, was nicht flexibel genug ist und veraltet ist <🎜; >
unbind(), diese Methode kann die von der bind()-Methode gebundenen Ereignisse entfernen. Wenn keine Parameter übergeben werden, werden alle Ereignisse gelöscht. Durch die Übergabe von Parametern können die angegebenen Ereignisse und Ereignisverarbeitungsfunktionen gelöscht werden >Die Methode „delegate()“ war vor Version 1.7 eine häufig verwendete Event-Proxy-Methode und wurde durch „on()“ ersetzt. Akzeptiert mehrere Parameter:
selector: Selektorzeichenfolge, die zum Filtern von Elementen verwendet wird, die Ereignisse auslösen

evenType: Ereignistyp, mehrere durch Leerzeichen getrennt

eventData: an den Ereignishandler übergebene Daten

handler: Ereignishandler

live() ist auch eine Methode des Ereignis-Proxys, die einen Ereignishandler an alle vom Selektor übereinstimmenden Elemente anhängt, das Ereignis jedoch über verwandte Parameter direkt an das Dokument bindet, um zu bestimmen, ob ein Ereignis ausgelöst werden soll
events: Ereignistyp
Daten: an den Ereignishandler übergebene Daten
handler: Ereignishandler

Da live() das Ereignis an das Dokument bindet, war die Bubbling-Kette zu lang und wurde veraltet.

on() ist mittlerweile eine gängige Methode zum Binden von Ereignissen und akzeptiert mehrere Parameter
1.events: ein oder mehrere durch Leerzeichen getrennte Ereignistypen und optionale Namespaces oder nur Namen Leerzeichen, wie zum Beispiel „click“ , „keydown.myPlugin“ oder „.myPlugin“;
2.selector: eine Selektorzeichenfolge, die zum Herausfiltern untergeordneter Elemente verwendet wird, die Ereignisse zwischen den ausgewählten Elementen auslösen können. Wenn der Selektor null ist oder ignoriert wird, kann das ausgewählte Element das Ereignis immer auslösen
3.data: Wenn ein Ereignis ausgelöst wird, werden die event.data an die Event-Handler-Funktion übergeben; .handler(eventObject): Funktion, die ausgeführt wird, wenn das Ereignis ausgelöst wird. Wenn die Funktion nur returnfalse ausführen muss, kann die Parameterposition direkt als false abgekürzt werden

off()-Methode kann das durch die on()-Methode gebundene Ereignis entfernen. Wenn keine Parameter übergeben werden, werden alle Ereignisse ausgeführt Ereignisse können durch Übergeben von Parametern gelöscht werden.

JQuery-Ereignis-Proxy-Schreibmethode
HTML-Fragment annehmen

<ul id="container">
    <li>content1</li>
    <li>content2</li>
    <li>content3</li></ul>

Wir können die Methode on() verwenden und bereitstellen Relevante Parameter, Sie können den Ereignis-Proxy vervollständigen

//Binden Sie das Ereignis an den übergeordneten Container. Nur untergeordnete Elemente, die den Filterselektor erfüllen, können das Ereignis auslösen $("#container").on("click" ,"li ",function() { //etwas tun..})

Wie zeigt/versteckt jQuery Elemente?

Elemente in jQuery über die Methode hide() ausblenden, die drei Parameter akzeptiert:

[Dauer]: Wie lange die Animation dauert
[Beschleunigung]: Gibt an, welche Beschleunigungsfunktion für den Übergang verwendet werden soll. jQuery selbst stellt „linear“ und „swing“ bereit

[vollständig]: Die Funktion

wird ausgeführt, wenn die Animation abgeschlossen ist. Wenn keine Parameter hinzugefügt werden, entspricht ihre Methode dem direkten Festlegen der Anzeige des Elements auf „Keine“. 🎜> Durch Hinzufügen von Parametern kann diese Methode den Effekt eines ausgeblendeten Elements mit Farbverlauf erzielen

$(element).hide()
--------
$(element).hide(3000,function() {
    alert("hello world")
})

In ähnlicher Weise verwendet jQuery die Methode show(), um ausgeblendete Elemente anzuzeigen. Die Verwendungsmethode ist dieselbe wie hide()

Wie verwende ich eine jQuery-Animation?

jQuery中通过hide()方法隐藏元素，其接受三个参数
[duration]：动画持续多久
[easing]：表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"
[complete]：在动画完成时执行的函数
不添加参数时，其方法等同于直接设置元素的display为none
通过添加参数，该方法可以实现一个渐变的隐藏元素的效果

$(element).hide()
--------
$(element).hide(3000,function() {
    alert("hello world")
})

同样，jQuery中使用show()方法来展示隐藏的元素，使用方法与hide()相同
hide()方法会把元素的display变为none，show()方法会还原元素的display
toggle()方法用于切换元素的隐藏/显示，参数与hide()``show()相同，它的机制就是元素如果是隐藏的，就显示该元素，如果元素是显示的，就隐藏该元素，来回切换

fadeIn()/fadeOut用调整元素透明度的方法来显示/隐藏元素，一旦透明度变为0，display将设置为none，接受参数与hide()、show()相同
不设置参数，fadeIn()/fadeOut默认会有渐进显示/隐藏的效果

$(element).fadeIn()
$(element).fadeOut()

fadeTo以动画的形式调整元素到指定的透明度，接受这几个参数：
duration, opacity [, easing ] [, complete ]
opacity为指定变化的透明度
当opacity为0时，fadeTo方法不会使元素display为none

$(element).fadeTo(1000,0.5) //在1s内透明度变化到0.5

fadeToggle会通过改变透明度的方式显示和隐藏元素，如果元素是隐藏的，则显示，显示的，则隐藏，参数与fadeIn()``fadeOut()相同
fadeToggle在元素透明度为0时，会display为none

fadeIn()/fadeOut和show()/hide()的区别：
前者通过调整元素透明度实现元素隐藏和显示，透明度为0时设置display为none。后者通过改变同时元素的width/height/opacity来显示隐藏元素

slideUp()/slideDown()通过上下滑动来实现元素的隐藏/显示，接受参数与show()/hide()相同
slideToggle()通过上下滑动的方式切换元素的隐藏/显示

animate()是自定义动画方法，接受这几个参数
properties：一个CSS属性和值的对象,动画将根据这组对象进行变化
[duration]：动画时间
[easing]：缓动函数
[complete]：完成动画后的回调函数
animate()的本质是通过动画的方式把元素的样式变为指定的样式
animate()可以通过链式调用实现多个动画

$(element).animate({//something})
          .animate({//something})
          .animate({//something})
          .animate({//something})

多个动画可以整合到一个数组中，对数组进行遍历，执行所有动画

var action = [{//action1},
              {//action2},
              {//action3},
              {//action4}]action.forEach(function(action,index) {
    ${element}.animate(action)
})

stop()方法可以停止当前动画，它接受2个参数：
[clearQueue]：一个布尔值，当为true时，当前动画停止，未执行的动画全部删除
[jumpToEnd]：为true时，当前动画将停止，但该元素上的 css属性会被立刻修改成动画的目标值
stop()不添加任何参数时，会立即结束掉元素当前动画（不完成），马上进入下一个动画（如果有的话）

如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

在原生DOM中，我们可以使用innerText操作元素文本，innerHTML操作元素内的HTML
在jQuery中提供了相同功能的方法：html()和text()
当没有传递参数时，获取元素内的innerHTML和innerText；当传递了一个string参数的时候，修改元素的innerHTM和innerText为参数值

<ul id="container">
    <li>content1</li></ul>
$("#container").html() //"<li>content1</li>"$("#container").text() //"content1"

如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？

val()方法可以用来获取和设置input的value
当没有传递参数时，获取value的值
传递一个字符串参数时，将value的值改为参数值
attr()可以获取指定属性，也可以设置属性

$(element).attr("id") //获取元素id属性值$(element).attr("id","container") //设置元素id值为container

本篇对jquery的作用进行了相关的讲解，更多相关内容请关注php中文网。

相关推荐：

关于前端跨域总结的相关知识点

前端常见跨域解决方案（全）

什么是跨域？跨域有几种实现形式？

Das obige ist der detaillierte Inhalt vonWas kann jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!