- communauté
- Apprendre
- Bibliothèque d'outils
- Loisirs
Maison > Questions et réponses > le corps du texte
JavaScript
1. La relation entre JS et DOM
Le navigateur a pour fonction de restituer le code html. Le code source html forme un objet DOM dans la mémoire, qui est l'objet document
Il existe un interpréteur/exécution JS. / à l'intérieur du moteur du navigateur, comme Chrome utilise le moteur v8
Nous écrivons un code JS en HTML, le code JS est exécuté par le moteur, et le résultat de l'exécution est le fonctionnement du DOM, qui est les effets spéciaux que nous voir souvent, comme des images flottantes et du texte changeant de couleur.
Lorsque le navigateur est exécuté, il restituera le code HTML lorsqu'il le rencontrera, et l'interprétera et l'exécutera lorsqu'il rencontrera js. Par conséquent, afin d'assurer l'affichage global. de la page, js est généralement écrit à la fin, c'est-à-dire que la page est rendue en premier, puis le DOM est manipulé
2 Les variables déclarent
var name = 'jquery';
Remarque :
Strictement cas. -sensible ;
Nom de variable : chiffres, lettres, traits de soulignement. Les chiffres ne peuvent pas être utilisés comme début de noms de variables. Les noms de variables peuvent également être précédés de $ Start (non recommandé)
Ne pas utiliser var polluera les variables globales ;
Ajouter var signifie déclarer une variable locale à l'intérieur de la fonction et attribuer une valeur. Sinon, il s'agit simplement d'un processus d'affectation, et la variable sera recherchée à l'extérieur.
Débogage :
Console.log(); document.write(string);
alert(string);
3. Type de variable
Trois catégories (huit types de données)
- Type traditionnel
Number (type numérique)
String (type de chaîne)
Booléen (Type booléen)
' ‐ ' s ‐ ‐ ‐ ‐ ‐ Type composite
use using off using Through off off off ' s ‐ ‐ ‐ ‐ type composite
à }
Array (type de tableau) Type de définition)
Si aucune valeur initiale n'est attribuée lors de la déclaration de la variable, le type de données de la variable n'est pas défini pour le moment. Fonction
Un morceau de code qui peut être exécuté à plusieurs reprises.
Fonction La. composition de :
1. Nom de la fonction
- Les chiffres, lettres, traits de soulignement, chiffres ne peuvent pas être utilisés comme début des noms de fonction
.- Le nom de la fonction doit être aussi significatif que possible. Il est recommandé d'utiliser la règle de dénomination en cas de chameau pour les noms de fonction
2. Paramètres (facultatif), une fonction peut avoir jusqu'à 255 paramètres. .
4. Valeur de retour (facultatif)
Déclaration de fonction
1. nom de la fonction ([paramètres...]){
Corps de la fonction ;
Valeur de retour ;
}
2.var Nom de la fonction = new Function (Paramètre ... corps de la fonction);
3. Fonction anonyme
var test = function ([paramètre ...]) {
corps de la fonction
valeur de retour
}
appel de fonction ;
1. Appelez le nom de la fonction directement dans le segment de code.
2. Appelez la fonction personnalisée sous la forme d'un lien hypertexte :
])'>Text</a>
3. Appelez custom. fonctions sous forme d'événements.
Portée des variables
Portée globale et portée locale 1. Portée globale
En dehors du corps de la fonction La portée des variables déclarées est la portée globale
2. La portée locale
La portée. les variables déclarées dans le corps de la fonction sont la portée locale.
4. Les opérations
sont divisées selon les fonctions d'opération
- Calcul arithmétique + - * / % ++ - + (positif) - (négatif)
-opération logique (JS, opération logique, la valeur renvoyée est la première valeur pouvant juger du résultat de l'expression) & && | = += -= *= /= % =
.
mais lorsque c'est vrai, exécutez exp2, sinon exécutez exp3.
5.
— not not not been » — Le corps de la boucle ne sera pas exécuté si la condition de la boucle n'est pas remplie 7. objets intégrés Tout en js peut être compris comme un objet. Lorsqu'une méthode est appelée, elle est empaquetée dans un objet à ce moment-là 1. Déclaration d'objet var o = new Object();
var o = {}; var o = {name:'tom',age:10} 2. Méthodes d'accès aux membres dans les objets Nom de l'objet (propriétés et méthodes) dans l'objet -. Objet String var s = new String(); var s = new String("hello"); var s = "hello";
Propriétés et méthodes Propriété : length Obtenez la longueur de la chaîne Méthode : Object.indexof (sous-chaîne) Fonction : Détermine la position où la sous-chaîne apparaît en premier dans l'objet From 0 Start Return: position Si la sous-chaîne n'apparaît pas dans l'objet. , return -1. Object.toUpperCase(); Fonction : Convertir l'objet en majuscule Object.toLowerCase(); Fonction : Convertir l'objet en minuscule Object.substr(start [,length] ) Fonction : Interception de chaîne. Intercepte la longueur à partir de la position de départ Le paramètre facultatif de longueur n'est pas intercepté jusqu'à la fin de la chaîne par défaut.
Object.slice(start[,end]) Fonction. : Interception de chaîne. Commencez l'interception à partir de la position de départ et interceptez jusqu'à la position de fin. Le paramètre facultatif de fin n'intercepte pas jusqu'à la fin de la chaîne par défaut.
Object.replace(str1,str2)
- Objet Array
Déclaration :
var a = new Array();
var a = [];
var a = new Array('team',1) ;
var a = ['team',1...];
var a = new Array(7); //7 est la longueur du tableau
Sortie du tableau :
document.write( nom du tableau ; :Connectez deux tableaux Object.
Renvoie : le tableau nouvellement fusionné L'ordre des éléments dans le nouveau tableau dépend de l'ordre des deux tableaux lors de la fusion.
Tableau object.pop()
. Fonction : Pop le dernier élément de l'objet tableau.
Renvoie : l'élément de tableau sauté (supprimé)
Array object.push (élément de tableau)
Fonction : Ajoute des éléments à la fin du tableau. Renvoie : la longueur du tableau après l'ajout de l'élément.
Array Object.shift()
Fonction : Pop un élément de la tête du tableau
Retour : L'élément du tableau sauté.
Array object.unshift( element name)
Fonction : Ajouter un élément en tête du tableau
Retour : La longueur du tableau après l'ajout des éléments
Array object.join(',')
Array object.split(. ',') Array object.reverse()
Array object.sort()
- Objet Date
var d = new Date()
Méthode :
Object.getFullYear()
Fonction : Obtenir les quatre -chiffre année
Objet.getMonth()
Fonction : Obtenez le mois, Mois (0~11)
Object.getDate()
Fonction : Obtenez le jour
Object.getHours()
Fonction : Obtenez les heures
Object.getMinutes()
Fonction : Obtenez les minutes
Object.getSeconds()
Fonction : Obtenez la valeur des secondes Object.getDay()
.Fonction : Obtenez la valeur de la semaine en cours (0 dimanche ~ 6 samedi)
- Objet mathématique
Pas d'instanciation, équivalent à un appel statique via le nom de classe en PHP
Attributs :
Allocation de valeur PI
Méthode :
Math.ceil (variable)
Fonction : arrondir
Math.floor (variable)
Fonction : arrondir vers le bas
Math.round (variable)
Fonction : Arrondir
Math.abs (variable)
Fonction : Prendre la valeur absolue
Math.random()
Fonction : Renvoie une valeur pseudo-aléatoire supérieure ou égale à 0 et inférieure à 1 [0,1).
Math.max( Variable. .)
Fonction : renvoie la plus grande des variables.
Math.min(Variable..)
Fonction : renvoie la plus petite des variables.
8. Objet fenêtre du navigateur
Remarque : l'objet fenêtre est un objet hôte du navigateur et n'a rien à voir avec le langage JS
Les méthodes de l'objet window :
window.alert(message);
window.confirm(message);
window.prompt();
window.open();
window.close();
window.print();
window.setInterval();
window.setTimeout();
window.clearInterval();
window .clearTimeout( ;
3.history Historique
4.objet d'écran d'écran
5.objet document (objet DOM)
6. Objet de stockage
L'API de stockage Web fournit des sessions stockage ( stockage de session) et localStorage (stockage local) deux objets de stockage pour ajouter, supprimer, modifier et interroger les données sur la page Web.
sessionStorage est utilisé pour enregistrer temporairement les données de la même fenêtre (ou onglet). Les données seront supprimées après la fermeture de la fenêtre ou de l'onglet.
LocalStorage est utilisé pour sauvegarder les données de l'ensemble du site Web pendant une longue période. Les données enregistrées n'ont pas de délai d'expiration jusqu'à ce qu'elles soient supprimées manuellement.对 à propos de 9.Opération d'objet DOM
DOM (DOCUME Object Model Document Object Model)
Document HTML/XML
XML
Langage de balisage extensible
.
. Renvoyé : un tableau composé d'objets
-. document.getElementsByName (valeur de l'attribut nom de la balise HTML)
Renvoie : tableau d'objets
- document.getElementById (valeur de l'attribut id de la balise HTML)
Renvoie : objet
- document.getElementsByClassName (attribut de classe de balise HTML. value)
Renvoie : un tableau d'objets.
Pourquoi window.document peut-il omettre la fenêtre précédente ?
Réponse : C'est toujours un problème de portée. Si vous ne le trouvez pas à l'intérieur, recherchez-le dans la couche externe. Il existe window.document globalement
Model Model
considéré comme une structure arborescente. Les nœuds sont liés. Si vous trouvez l'un des nœuds, vous pouvez trouver tous les nœuds dans le. structure arborescente.
Remarque : un espace et un commentaire sont tous deux un nœud ;
Nœud : nom du nœud (nodeName), O Type de nœud (nodetype) .
Certains nœuds ont une valeur de nœud .
Nœuds père : objet nœud.
sous-nœud :
objet nœud .Childnodes a renvoyé un tableau (y compris un nœud vide)
H Nodes objets.enfants attributs non standard, mais bien compatible, hors nœuds vierges
Objet nœud.
document.createElement (balises HTML TAG)
Fonction : Créer un nouvel objet HTML
Retour : Objet
Père. )
Fonction : Ajouter l'objet enfant à l'objet parent
Objet parent.removeChild (objet parent.lastChild)
Fonction : Supprimer le dernier. Nœud enfant de l'objet. . Lecture
Object.innerText
Object.innerHTML // Tous les codes HTML dans les balises
2. Modifier
Object.innerText = Texte modifié
Object.innerHTML = Texte modifié
innerHTML analyse les balises HTML, innerText ne le fait pas. analyser les balises HTML.
Style
1 .Read (car l'attribut style est toujours suivi d'un objet, vous devez donc utiliser . pour continuer à accéder, et vous ne pouvez lire que la valeur du style interne et ne pouvez pas lire le value in <style>)
Object. style. Nom de l'attribut ;
2. Modifier
Object.style.Attribute name = valeur de l'attribut ;
Nom de l'attribut Remarque : la couleur d'arrière-plan nécessite de supprimer le "-" et de mettre une majuscule. la première lettre du mot suivant, c'est-à-dire un petit nom d'attribut camel case
3. Modifiez les styles par lots
Object.className = nom du style de classe
Obtenez l'objet style au moment de l'exécution :
Obj.currentStyle[attr] et getComputedStyle(obj, null)[attr] sont utilisés pour obtenir
Le premier n'est pris en charge que par IE et Opera, tandis que le second est également pris en charge par IE9 et supérieur dans les navigateurs standard. est un pseudo-élément
10 .Événements
1. Sources d'événements
Toutes les balises HTML peuvent être considérées comme des sources d'événements
2. Événements
Événement de clic de souris
Événement de double-clic dblclick
survol de la souris Stroke in
Grâce à la souris. Le clavier Y Keyup se lève
Le clavier enfoncé Appuyez sur la touche du clavier Appuyez sur le document CHARGER le chargement du document
DÉCHARGER le document a fermé l'avant
Form Focus submit submit (appartient à l'élément de formulaire return false empêche la soumission)
3. Gestionnaire d'événements
- <tag on event="event handler">
Le gestionnaire d'événements peut être du code javascript ou un automatique Définir le nom de la fonction.
. effacer la méthode Timeout() Peut annuler l'opération chronométrée définie par la méthode setTimeout().
Le paramètre de la méthode clearTimeout() doit être la valeur ID renvoyée par setTimeout().
Remarque : Pour utiliser la méthode clearTimeout(), utilisez des variables globales lors de la création et de l'exécution d'opérations planifiées :
Un timer qui s'exécute toutes les n secondes
La méthode setInterval() peut être utilisée selon la période spécifiée (en millisecondes) pour appeler une fonction ou évaluer une expression.
La méthode setInterval() continuera d'appeler la fonction jusqu'à ce que clearInterval() soit appelée ou que la fenêtre soit fermée. La valeur ID renvoyée par setInterval() peut être utilisée comme argument de la méthode clearInterval().
Astuce : 1000 millisecondes = 1 seconde.
Astuce : Si vous souhaitez l'exécuter une seule fois, vous pouvez utiliser la méthode setTimeout().
