Zusammenfassung dessen, was Sie über den Einstieg in jQuery wissen müssen

Dieses Mal werde ich Ihnen eine Zusammenfassung der jQuery-Erste-Schritte-Anleitung geben. Was sind die Vorsichtsmaßnahmen für den Einstieg in jQuery? Hier sind praktische Beispiele.

jQuery-Objekt

•jQuery-Objekt ist ein Objekt, das durch Umschließen eines DOM-Objekts mit jQuery generiert wird.

•jQuery-Objekte sind einzigartig für jQuery.

•Nur jQuery-Objekte können jQuery-Methoden verwenden. In jQuery-Objekten können keine Methoden von DOM-Objekten verwendet werden, und umgekehrt können DOM-Objekte keine jQuery-Methoden verwenden.

•Konvention: Wenn Sie ein jQuery-Objekt erhalten, fügen Sie $

vor der Variablen hinzu.•Das jQuery-Objekt kapselt mehrere DOM-Objekte und das jQuery-Objekt ist ein Array-ähnliches Objekt

•Der Unterschied zwischen Arrays und arrayähnlichen Objekten

1. Der Array-Typ ist Array

2. Der Typ des Array-ähnlichen Objekts ist Object

DOM-Objekt zu jQuery-Objekt

• Verwenden Sie $() zum Konvertieren von DOM. Nachdem das Objekt gepackt wurde, kann es in ein jQuery-Objekt

var item = document.getElementsByTagName('ul')[0], // DOM对象
  $item = $(item); // jQuery对象

jQuery-Objekt in ein DOM-Objekt

jQuery-Objekt über die von der jQuery-Methode (Index) bereitgestellte Get-Funktion, um das entsprechende DOM-Objekt abzurufen

var $ul = $('ul'),
  ul = $ul.get(0);

jQuery-Objekt ist ein Array-ähnliches Objekt, Sie können das entsprechende DOM-Objekt über [ abrufen ]-Methode.

Array-ähnliches Objekt

Ein array-ähnliches Objekt ist im Wesentlichen ein Objekt, aber seine Speichermethode ähnelt der Struktur eines Arrays

•arguments-Objekt----akzeptiert die Anzahl der Funktionsargumente

•jQuery-Objekt----die unterste Ebene ist das Dom-Objekt

Attribute

•length-Attribut (Länge des Arrays | Anzahl der Elemente)

Methode

•get (Index): gemäß Index einfügen Geben Sie das entsprechende Dom-Objekt zurück

•eq(index): Geben Sie das entsprechende jQuery-Objekt gemäß Index zurück
•index(): Finden Sie den Indexwert des Elements

ready and onlaod Unterschiede

ready

1. Hat die Abkürzung

2. Ermöglicht mehrere
um in einer HTML-Seite zu erscheinen3. Nach dem Laden der DOM-Struktur ausführen

onload

Es gibt keine Abkürzung

2. Verwenden Sie in einer HTML-Seite nur einen

3. Sie müssen warten, bis alle Ressourcen der Seite geladen sind, bevor Sie
4 ausführen. Die Ausführungsgeschwindigkeit ist langsamer als bereit

jQuery-Animation Grundlegende Ausblend- und Anzeigeeffekte

•show()/hide()

Bei Verwendung für dasselbe jQuery-Objekt , Kettenoperationen können verwendet werden.

$('p').show(1000).hide(1000);

Gleitender Animationseffekt

•slideDown()/slideUp()

Ein- und Ausblenden

$('p').slideUp(1000).slideDown(1000);

•fadeIn() einblenden

• fadeOut() ausblenden

Gleichzeitigkeits- und Warteschlangeneffekte

$('p').fadeIn(1000).fadeOut(1000);

•Gleichzeitiger Effekt: Legen Sie mehrere Animationen fest, die gleichzeitig ausgeführt werden sollen

•Warteschlangeneffekt: Legen Sie mehrere Animationen fest und führen Sie sie nacheinander aus

jQuery-Plug-in

Die Funktion des jQuery-Plug-ins

•Erweitern Sie die Funktionen von jQuery

•Präsentieren Sie komponentenbasierte Funktionen

Datums-Plug-in – LayDate-Plug-in

•Vorläufige Verwendung vonlayDate

1. Laydate.js vorstellen

2.laydate (Optionen)

Plug-in entwickeln

Global Funktion Globale Funktion, aktuell Das Obige ist die Methode von jQuery selbst.

Einige der integrierten Funktionen von jQuery werden durch globale Funktionen implementiert.

•比如$.ajax（）就是典型的全局函数

向 jQuery 命名空间添加一个函数，只需要将这个新函数指定为 jQuery 本身的一个属性

$.globalFunction = function(){
  // todo...
};

可以通过 jQuery.globalFunction（）或者 $.globalFunction（）来调用

当需要添加多个函数可以使用$.extend（）函数

$.extend({
  functionOne: function(){
    // todo...
  },
  functionTwo: function(){
    // todo...
  }
});

通过上述代码可以添加全局函数，但是代码存在有关命名空间的风险

我们可以把属于一个插件的所有全局函数封装到一个对象

$.plugins = function(){
  functionOne: function(){
    // todo...
  },
  functionTwo: function(){
    // todo...
  }
};

通过上述代码，其实是为全局函数创建了另一个方法 --- plugins

functionOne 和 functionTwo 已经成为 plugins 对象的属性。

$.plugins.functionOne();
$.plugins.functionTwo();

添加 jQuery 实例对象的方法

$.fn.method = function(){};对象方法的环境

在任何插件方法内部，关键字 this 引用的都是当前调用方法的 jQuery对象，因此可以在 this 上面调用任何内置的 jQuery 方法。

方法连缀

通过 return this 来实现链式操作

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jquery上传表单样式

jQuery解析xml文件详解

Das obige ist der detaillierte Inhalt vonZusammenfassung dessen, was Sie über den Einstieg in jQuery wissen müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!