Toute conversion entre objets jquery et objets DOM

Toute conversion entre objets jquery et objets DOM_jquery

WBOY

Libérer： 2016-05-16 15:14:40

original

1115 Les gens l'ont consulté

Qu'est-ce qu'un objet jQuery ?
---C'est l'objet généré en encapsulant l'objet DOM via jQuery. L'objet jQuery est unique à jQuery et peut utiliser des méthodes dans jQuery.
Par exemple :
$("#test").html() signifie : récupérer le code html dans l'élément avec l'ID test. Parmi eux, html() est une méthode dans jQuery
Ce code équivaut à utiliser DOM pour implémenter le code :

document.getElementById("id").innerHTML;

Copier après la connexion

Bien que les objets jQuery soient générés en encapsulant des objets DOM, jQuery ne peut utiliser aucune méthode d'objets DOM. De même, les objets DOM ne peuvent pas utiliser de méthodes dans jQuery. S'ils sont utilisés sans discernement, une erreur sera signalée. Par exemple : $("#test").innerHTML, document.getElementById("id").html() et d'autres méthodes d'écriture sont erronées.
Une autre chose à noter est que l'objet jQuery obtenu en utilisant #id comme sélecteur et l'objet DOM obtenu par document.getElementById("id") ne sont pas équivalents. Veuillez voir la conversion entre les deux ci-dessous.
Étant donné que jQuery est différent mais également lié, les objets jQuery et les objets DOM peuvent également être convertis les uns aux autres. Avant de convertir les deux, nous faisons d'abord une convention : si un objet jQuery est obtenu, alors nous ajoutons $ devant la variable, comme : var $variab = objet jQuery ; si un objet DOM est obtenu, c'est la même chose que habituel. : var variab = objet DOM ; cette convention est uniquement destinée à faciliter l'explication et la distinction, et n'est pas stipulée dans l'utilisation réelle.

Avant de discuter de la conversion mutuelle entre les objets jquery et les objets DOM, convenez d'abord du style de définition des variables. Si vous obtenez un objet jquery, ajoutez $ devant la variable, par exemple

var $variable = objet jquery

Si l'objet DOM est obtenu, il est défini comme suit :

var variable = objet DOM

1. Convertir l'objet jquery en objet DOM :

Les objets Jquery ne peuvent pas utiliser de méthodes dans le DOM, mais si vous n'êtes pas familier avec les méthodes fournies par les objets jquery, ou si jquery ne souhaite encapsuler aucune méthode, vous devez utiliser les objets DOM, à savoir [index] et get[ indice].

(1) L'objet jquery est un objet tableau et l'objet DOM correspondant peut être obtenu via la méthode [index].

Le code jquery est le suivant

<body>
  <p>my</p>
  <p>my</p>
<script src="jquery-2.1.4.min.js"></script>
<script>
  var $cr = $("p");  //jquery对象
  var cr = $cr[1];  //dom对象
  var ct = $cr.get(0)  //第二种转换为DOM对象的方式
  cr.innerHTML = "you"  //检测是否转换成功，可以用DOM方法 输出结果为第二个my改成了you
  ct.innerHTML = 'fuck'  //输出结果第一个my改成了fuck
</script>
</body>

Copier après la connexion

(2).Objet DOM converti en objet jquery :

Pour un objet DOM, il vous suffit d'envelopper l'objet DOM avec $(), et vous pouvez ensuite obtenir un objet jquery. La méthode est $(objet DOM).

Le code jquery est le suivant :

<body>
  <p>my</p>
  <p>my</p>
<script src="jquery-2.1.4.min.js"></script>
<script>
  var cr = document.getElementsByTagName("p") //DOM对象
  var $cr = $(cr);   //jquery对象
  $cr.eq(0).("fuck"); //检测是否转换成功，可以用jquery方法 输出结果为第二个my改成了fuck
  $cr.eq(1).html("you"); //输出结果为my改成you
</script>
</body>

Copier après la connexion

Après la conversion, vous pouvez utiliser les méthodes jquery de manière arbitraire.

Grâce aux méthodes ci-dessus, les objets jquery et les objets DOM peuvent être convertis les uns dans les autres arbitrairement.

Enfin, il est à nouveau souligné que seuls les objets DOM peuvent utiliser les méthodes DOM. Les objets jquery ne peuvent pas utiliser les méthodes dans le DOM, mais les objets jquery fournissent un ensemble d'outils plus complet pour faire fonctionner le DOM.

J'espère que vous aimerez tous cet article.