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中世界最好的语言
php中世界最好的语言original
2018-04-23 15:13:59929parcourir

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对象

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);

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);
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);
Fondu entrant et sortant

•fadeIn() fondu entrant

• fadeOut() fondu sortant

$('p').fadeIn(1000).fadeOut(1000);
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...
};

可以通过 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文件详解

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!

Déclaration:
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