Que peut faire jQuery ?-js tutoriel-php.cn

Cet article fournit un résumé pertinent de l’utilisation de jquery.

jQuery est une petite bibliothèque JavaScript rapide et puissante. Il simplifie beaucoup de choses grâce à des API faciles à utiliser, telles que : les opérations DOM, l'écoute d'événements, l'animation, AJAX, etc.
Ce que jQuery peut faire, le JS natif peut le faire, mais le JS natif sera plus compliqué, et transformer la complexité en simplicité est le but de jQuery.
Écrivez moins, faites plus.

Quelle est la différence entre les objets jQuery et les objets natifs DOM ? Comment convertir ?

Supposons un tel fragment HTML

Nous pouvons utiliser la méthode jQuery ou la méthode DOM native Obtenir ce nœud élément

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

Copier après la connexion

Les objets éléments obtenus grâce à ces deux méthodes sont deux objets complètement différents.
Ce qui est obtenu par la méthode jQuesy est appelé un objet jQuesy, qui est un objet de type tableau. Il a ses propres méthodes et ne peut pas utiliser les méthodes natives du DOM.
Ce qui est obtenu par la méthode native du DOM est appelé un ; Objet natif DOM, qui a également son propre La méthode de jQuery ne peut pas être utilisée ;

Les deux objets peuvent être convertis l'un en l'autre

$("#btn1")[0] / /L'objet jQuery est converti en un objet DOM natif, utilisez l'index pour obtenir l'objet élément correspondant ; $(document.querySelector("#btn1")); //Enveloppez l'objet élément DOM avec $ pour obtenir l'objet jQuery < ; 🎜>

Comment lier un événement jQuery ? Quelles sont les fonctions de liaison, de dissociation, de délégation, de mise en ligne, d'activation et de désactivation ? Lequel est recommandé ? Comment utiliser on pour lier des événements et utiliser un proxy d'événement ?

Dans jQuery, nous pouvons utiliser la méthode on() pour lier des événements

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

Copier après la connexion

Autres méthodes de liaison d'événements

bind(), qui a été utilisée dans les versions postérieures à 3.0 Obsolète et remplacé par on();
version 1.4.3, qui accepte plusieurs paramètres : eventType (type d'événement, "clic", etc.), eventData (données passées à la fonction de traitement d'événement), handler (fonction de gestion d'événement), PreventBubble (un booléen, empêchant les événements par défaut et empêchant les événements de bouillonner)
Puisqu'il ne peut être lié qu'à des éléments existants, les éléments nouvellement ajoutés ne seront pas liés aux événements, ce qui n'est pas assez flexible et est obsolète
;

unbind(), cette méthode peut supprimer les événements liés par la méthode bind(). Si aucun paramètre n'est transmis, tous les événements qui passent des paramètres peuvent supprimer les événements spécifiés et les fonctions de traitement des événements

. La méthode délégué() était une méthode de proxy d'événement couramment utilisée avant la version 1.7 et a été remplacée par on(). Accepte plusieurs paramètres :

selector : chaîne de sélection, utilisée pour filtrer les éléments qui déclenchent des événements
evenType : type d'événement, plusieurs séparés par des espaces
eventData : données transmises au gestionnaire d'événements
handler : gestionnaire d'événements

live() est également une méthode de proxy d'événement, attachant un gestionnaire d'événement à tous les éléments correspondant au sélecteur, mais il lie l'événement directement au document, via des paramètres associés pour déterminer s'il faut déclencher un événement

events : type d'événement
data : données transmises au gestionnaire d'événements
handler : gestionnaire d'événements
Parce que live() lie l'événement au document, cela rendait la chaîne de bulles trop longue et était obsolète.

on() est désormais une méthode courante pour lier des événements, acceptant plusieurs paramètres

1.events : un ou plusieurs types d'événements séparés par des espaces et des espaces de noms facultatifs, ou simplement des noms d'espace, tels que "clic" , "keydown.myPlugin" ou ".myPlugin" ;
2.selector : une chaîne de sélection utilisée pour filtrer les éléments descendants pouvant déclencher des événements parmi les éléments sélectionnés. Si le sélecteur est nul ou que le sélecteur est ignoré, l'élément sélectionné peut toujours déclencher l'événement ;
3.data : Lorsqu'un événement est déclenché, le event.data doit être transmis à la fonction de gestionnaire d'événement
4 ; .handler(eventObject) : fonction exécutée lorsque l'événement est déclenché. Si la fonction n'a besoin que d'exécuter returnfalse, alors la position du paramètre peut être directement abrégée en false

La méthode off() peut supprimer l'événement lié par la méthode on(). Si aucun paramètre n'est transmis, tous les événements le seront. Les événements, le passage des paramètres peuvent supprimer l'événement spécifié et la fonction de gestion des événements

Méthode d'écriture du proxy d'événement jQuery

Supposons un fragment HTML

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

Copier après la connexion

Nous pouvons utiliser la méthode on() et fournissez les paramètres pertinents, vous pouvez compléter le proxy d'événement

//Lier l'événement au conteneur parent Seuls les éléments enfants qui répondent au sélecteur de filtre peuvent déclencher l'événement $("#container").on(" click", "li",function() { //faire quelque chose..})

Comment jQuery affiche/masque les éléments ?

Masquer les éléments dans jQuery grâce à la méthode hide(), qui accepte trois paramètres :

[durée] : Combien de temps dure l'animation
[easing] : Indique quelle fonction d'assouplissement utiliser pour la transition, jQuery lui-même fournit "linear" et "swing"
[complete] : La fonction
exécutée lorsque l'animation est terminée Lorsqu'aucun paramètre n'est ajouté, sa méthode équivaut à définir directement l'affichage de l'élément sur aucun <. 🎜> En ajoutant des paramètres, cette méthode Vous pouvez obtenir l'effet d'un élément caché dégradé

De même, jQuery utilise la méthode show() pour afficher les éléments cachés. La méthode d'utilisation est la même que hide(. )

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

Copier après la connexion

Comment utiliser l'animation jQuery ?

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

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

Copier après la connexion

同样，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

Copier après la connexion

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

Copier après la connexion

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

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

Copier après la connexion

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"

Copier après la connexion

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

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

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

Copier après la connexion

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