Maison > interface Web > js tutoriel > Résumé de ce que vous devez savoir pour démarrer avec jQuery

Résumé de ce que vous devez savoir pour démarrer avec jQuery

php中世界最好的语言
Libérer: 2018-04-23 15:13:59
original
887 Les gens l'ont consulté

Cette fois, je vais vous apporter un résumé des instructions de démarrage de jQuery. Quelles sont les précautions pour démarrer avec jQuery Voici des cas pratiques, jetons un coup d'œil.

Objet jQuery

• L'objet jQuery est un objet généré en encapsulant un objet DOM avec jQuery.

•Les objets jQuery sont uniques à jQuery.

•Seuls les objets jQuery peuvent utiliser les méthodes jQuery. Aucune méthode des objets DOM ne peut être utilisée dans les objets jQuery, et inversement, les objets DOM ne peuvent utiliser aucune méthode jQuery.

•Convention : Si vous obtenez un objet jQuery, ajoutez $

devant la variable.•L'objet jQuery encapsule plusieurs objets DOM et l'objet jQuery est un objet de type tableau

•La différence entre les tableaux et les objets de type tableau

1 Le type de tableau est Tableau

.

2. Le type d'objet de type tableau est Objet

Objet DOM vers objet jQuery

• Utilisez $() pour convertir le DOM Une fois l'objet empaqueté, il peut être converti en un objet jQuery

var item = document.getElementsByTagName('ul')[0], // DOM对象
  $item = $(item); // jQuery对象
Copier après la connexion

objet jQuery en un objet DOM

Objet jQuery via la fonction get fournie par la méthode jQuery (index), obtenez l'objet DOM correspondant

var $ul = $('ul'),
  ul = $ul.get(0);
Copier après la connexion

L'objet jQuery est un objet de type tableau, vous pouvez obtenir l'objet DOM correspondant via [ ] méthode.

Objet de type tableau

Un objet de type tableau est essentiellement un objet, mais sa méthode de stockage est similaire à la structure d'un tableau

•Objet arguments----accepte le nombre d'arguments de fonction
•Objet jQuery----la couche inférieure est l'objet dom

attributs

•attribut length (longueur du tableau | nombre d'éléments)

méthode

•get (index) : mettre selon l'index Renvoie l'objet dom correspondant
•eq(index) : Renvoie l'objet jQuery correspondant selon l'index
•index() : Trouve la valeur d'index de l'élément

Différences prêtes et chargées

prêt

1. A l'abréviation
2. Permet plusieurs
. pour apparaître dans une page HTML3 Exécuter après le chargement de la structure DOM
4 Exécution rapide

onload

1 Il n'y a pas d'abréviation
2. Dans une page HTML, utilisez uniquement un
3. Vous devez attendre que toutes les ressources de la page soient chargées avant d'exécuter
4. La vitesse d'exécution est plus lente que prête

Animation jQuery

Effets de masquage et d'affichage de base

•show()/hide()

$('p').show(1000).hide(1000);
Copier après la connexion
Si utilisé sur le même objet jQuery , des opérations en chaîne peuvent être utilisées.

Effet d'animation coulissant

•slideDown()/slideUp()

$('p').slideUp(1000).slideDown(1000);
Copier après la connexion
Fondu entrant et sortant

•fadeIn() fondu entrant

• fadeOut() fondu sortant

$('p').fadeIn(1000).fadeOut(1000);
Copier après la connexion
Effets de concurrence et de file d'attente

•Effet simultané : définir plusieurs animations à exécuter en même temps

•Effet de file d'attente : définir plusieurs animations et exécutez-les dans l'ordre

Plug-in jQuery

La fonction du plug-in jQuery

•Développer les fonctions de jQuery

•Présenter les fonctionnalités des composants

Plug-in Date - Plug-in layDate

•Utilisation préliminaire de layDate

1. Présentez laydate.js
2.laydate (options)

Plug-in de développement

Global function

Fonction globale, réelle Ce qui précède est la méthode de jQuery elle-même.

Certaines fonctions intégrées de jQuery sont implémentées via des fonctions globales.

•比如$.ajax()就是典型的全局函数

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

$.globalFunction = function(){
  // todo...
};
Copier après la connexion

可以通过 jQuery.globalFunction()或者 $.globalFunction()来调用

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

$.extend({
  functionOne: function(){
    // todo...
  },
  functionTwo: function(){
    // todo...
  }
});
Copier après la connexion

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

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

$.plugins = function(){
  functionOne: function(){
    // todo...
  },
  functionTwo: function(){
    // todo...
  }
};
Copier après la connexion

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

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

$.plugins.functionOne();
$.plugins.functionTwo();
Copier après la connexion

添加 jQuery 实例对象的方法

$.fn.method = function(){};对象方法的环境
Copier après la connexion

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

方法连缀

通过 return this 来实现链式操作

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

推荐阅读:

jquery上传表单样式

jQuery解析xml文件详解

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal