Le génial Jquery - conversion mutuelle entre les objets Jquery et DOM et trois opérations de DOM_jquery

Seuls les objets jQuery peuvent appeler diverses fonctions de la bibliothèque de classes jQuery. De même, certaines propriétés et méthodes des objets dom ne peuvent pas être appelées sur jQuery, mais fondamentalement, les fonctions fournies par la bibliothèque de classes jQuery incluent toutes les opérations dom. Cela nous oblige à savoir comment convertir des objets jQuery vers et depuis le DOM.

1. L'objet jQuery est un objet généré en encapsulant l'objet DOM via jQuery.

2. Conversion entre objets jQuery et objets DOM.

Bon style d'écriture :

Copier le code Le code est le suivant :

var $input=$("input")

L'objet obtenu par jQuery ajoute $ devant la variable.

<1>Convertir l'objet jQUery en objet DOM, deux méthodes : [index] et get(index)

a:var $cr=$("#cr") //objet jQuery
var cr=$cr[0] //Objet DOM
b:var $cr=$("#cr") //Objet jQuery
var cr=$cr.get(0); //Objet DOM

<2>Convertir un objet DOM en objet jQuery

var cr=document.getElementById("cr"); //Objet DOM
var $cr=$(cr);

3. Résoudre les conflits avec d'autres bibliothèques

jQuery.noConflict().
jQuery utilise $ comme son propre raccourci.

4. Avantages de l'utilisation de jQuery

<1>Écriture concise
<2> Prise en charge de CC1 à CCS3
<3>Mécanisme de traitement parfait

Exécutez le code ci-dessus et le navigateur signalera une erreur !
Mais si tu l'écris comme ça :

Copier le code Le code est le suivant :

$('#tt').css("color","rouge");

Le navigateur ne signalera pas d'erreur car un tel élément n'existe pas !

Sélecteur 5.jQuery

Le sélecteur jQuery est la priorité absolue de jQuery !

Les sélecteurs de filtre jQuery sont similaires aux sélecteurs de pseudo-classe en CSS.

<1> Sélecteurs pairs et impairs

Nombre pair : $("tr:even")
Nombre impair : $("tr:impair")

<2>Sélecteur de pseudo-classe CSS3 nombres pairs et impairs

Copier le code Le code est le suivant :

p:ntième-enfant (impair)
{
arrière-plan :#ff0000;
>
p: nième enfant (pair)
{
arrière-plan :#0000ff;
>

<2>Sélecteur de type de formulaire

<3>Sélecteurs d'échappement pour éviter les erreurs

Classification des opérations 6.DOM (1 : DOM Core 2.HTML-DOM 3.CSS-DOM)

1.DOM Core

DOM Core n'est pas exclusif à JavaScript, tout langage de programmation prenant en charge DOM peut l'utiliser. Ses utilisations ne se limitent pas au traitement des pages Web. Il peut également être utilisé pour traiter n'importe quel document écrit dans un langage de balisage, tel que XML.

2.HTML_DOM

Lors de l'écriture de scripts pour des fichiers HTML à l'aide de JavaScript et du DOM, il existe de nombreux attributs spécifiques au HTML-DOM.
HTML_DOM fournit des notations plus concises pour décrire les attributs de divers éléments HTML.
Tel que :

Copier le code Le code est le suivant :

document.forms
élément.src

Uniquement pour le WEB

3.CSS_DOM

CSS_DOM est une opération pour CSS. Principalement pour obtenir et définir diverses propriétés de l'objet de style.
En modifiant diverses propriétés de l'objet de style. Changez différents effets.

Copier le code Le code est le suivant :

element.style.color="rouge";

7. Traverser les nœuds

1.enfants()
2.suivant()
3.prev()
4.frères et sœurs()
5.le plus proche()

8.jquey css

<1> Vous pouvez utiliser l'opacité pour définir la transparence, et jQuery a déjà résolu le problème de compatibilité.

$("p").css("opacité","0.5");

<2>$("p").height(100) //L'unité par défaut de 100 est px Si vous souhaitez utiliser d'autres unités, vous devez utiliser une chaîne
.

<3>méthode offset()

Renvoie le décalage par rapport à la fenêtre

Copier le code Le code est le suivant :

var offset=$("p").offset();
var left=offset.left;
var top=offset.top;

<4>position()

Copier le code Le code est le suivant :

//Renvoie le décalage par rapport au style de position le plus récent.
var position=$("p").position();
var left=position.left;
var top=position.top;

<5>scrollTop() et scrollLeft()

Copier le code Le code est le suivant :

//Renvoie la distance entre le haut et le côté gauche de la barre de défilement.
var $p=$("p");
var top=$p.scrollTop();
var left=$p.scrollLeft();
//Vous pouvez également définir le défilement vers une position spécifiée :
$("ab").scrollTop(300);

<6>pageX et pageY, récupèrent la position de la souris sur la page

Copier le code Le code est le suivant :

$(document).mousemove(function(e){
$("span").text("X: " e.pageX ", Y: " e.pageY);
});