Wondershare EdrawMind
Galerie de cartes mentales Carte mentale récapitulative du résumé des connaissances liées au HTML5
- 8
Carte mentale récapitulative du résumé des connaissances liées au HTML5
Qu’est-ce que HTML5 ? Comment étudier? HTML5 est une méthode de description de langage permettant de structurer le contenu Web. HTML5 est la norme de nouvelle génération d'Internet et une méthode linguistique pour construire et présenter du contenu Internet. Elle est considérée comme l’une des technologies de base d’Internet. HTML a été créé en 1990 et HTML4 est devenu un standard Internet en 1997 et est largement utilisé dans le développement d'applications Internet. La carte suivante résume les connaissances liées à HTML5 pour votre référence et votre étude.
Modifié à 2018-12-19 12:05:18
- bacteria
This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
- Plant asexual reproduction
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
- Reproductive development of animals
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.
Carte mentale récapitulative du résumé des connaissances liées au HTML5
- bacteria
This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
- Plant asexual reproduction
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
- Reproductive development of animals
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.
- Recommandé pour vous
- Contour
HTML5
<body>Contenu de l'URL
propriétés du corps :
bgcolor : couleur d’arrière-plan Arrière-plan : image d'arrière-plan Texte : couleur de la police onload : appelé lors du chargement
ligne horizontale
<hr>
Opérations sur les polices
Caractère gras
<b>
police italique
<je>
Souligner
<u>
barré
<supprimer>
Police de caractère
<police> : Couleur : couleur de la police Taille : taille de police 1 à 7
<mark>Surligner</mark>
balise de titre
<h1>~<h6> Rendre la police en gras, plus grande et sur sa propre ligne
balises de paragraphe
<p> Séparer les paragraphes
nouvelle ligne
<br>
espace
Lien hypertexte
lien ordinaire
<a href="adresse">nom du lien</a>
lien d'ancrage
Définissez d'abord la balise de localisation : <a name="ding"></a> Utilisez ensuite un lien hypertexte pour accéder à un emplacement prédéfini : <a href="#ding">Retour en haut</a>
connexion fonctionnelle
Fenêtre pop-up QQ : ce qu'on appelle l'interface de discussion à distance de Tencent <a href="tencent://message/?uin=10001&Menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=1:615050000:10"/></a>
Balises d'image
<img src="Chemin de ressource image" width="Largeur de l'image (px pixels ou %)" title="Texte d'invite de survol" alt="Fichier d'invite en cas d'échec de chargement" border="Bordure 1 Oui 0 Non" />
liste
Liste ordonnée :
<ol type="valeur"> <li>Banane</li> <li>Pomme de terre</li> <li>Yali</li> </ol>
Liste non ordonnée:
<ul type="valeur"> <li>Pékin</li> <li>Shanghai</li> <li>Guangzhou</li> </ul>
Création rapide
touche de tabulation ul>li*4
feuille
propriétés du tableau
border : bordure du tableau, la valeur est de type int, plus la valeur est grande, plus la ligne est épaisse, 0 signifie aucun bordercolor : couleur du cadre de la table cellpacing : la distance entre les cellules width : largeur du tableau, pixels ou pourcentages height : hauteur du tableau, pixels ou pourcentage bgcolor : couleur de fond du tableau ou de la cellule (applicable au tableau, tr, td) arrière-plan : image d'arrière-plan
Création rapide
tableau>tr*2>td*3
<tableau> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table>
tr représente la ligne td représente la colonne
Fusionner des cellules
colspan : fusionner horizontalement avec parallèle (direction horizontale/gauche-droite) rowspan : fusionner les lignes (direction verticale/direction haut et bas) fusionner verticalement Remarque : La fusion signifie que plusieurs éléments ne font plus qu'un, donc tout excédent doit être supprimé !
formulaire
<formulaire></formulaire>
attributs du formulaire :
- action : la destination de la soumission du formulaire - méthode : méthode de soumission du formulaire pour obtenir du texte brut (par défaut)/un texte chiffré - enctype : méthode d'encodage (il y a des éléments spéciaux dans le formulaire : utilisé uniquement lors du téléchargement d'images) onsubmit : soumission d'un événement
saisir
<input type="x" name="y" placeholder="" désactivé="disabled"> tapez: tapez name : nom de la zone de saisie espace réservé ; zone de saisie rapide désactivé: désactivé
La valeur du type : texte : zone de saisie de texte (valeur par défaut) mot de passe : zone de saisie du mot de passe checkbox : case à cocher/case à sélection multiple <-checked sélectionne l'élément sélectionné radio : bouton radio submit : bouton Soumettre (vous pouvez utiliser la valeur pour remplacer le nom du bouton par défaut) réinitialiser : bouton de réinitialisation (vous pouvez utiliser la valeur pour remplacer le nom du bouton par défaut) bouton : bouton -Sous forme : équivalent au bouton Soumettre - Hors formulaire : bouton ordinaire couleur : palette de couleurs date:calendrier mois:calendrier mensuel semaine calendrier hebdomadaire numéro:champ numérique -min valeur minimale -valeur maximale maximale -les sauts de pas en fonction des multiples d'entrée plage : diapositive rechercher champ de recherche
<sélectionner> <option>Menu déroulant</option> ... </sélectionner>
barre de défilement
<progrès></progrès>
Boîte de saisie Lenovo
Être cohérent
Zone de contenu extensible
cadre
Références à d'autres pages (avec liens hypertextes)
<a href="Ouvrir la page ou l'image" target="xy">Chapitre 1</a> <br /><br /> <a href="Ouvrir la page ou l'image" target="xy">Chapitre 2</a> <br /><br /> <a href="Ouvrir la page ou l'image" target="xy">Chapitre 3</a> <br /><br /> <iframe name="xy" width="400px" height="300px"></iframe>
target : La cible de l'ouverture de la page Web est la position xy
étiquette média
<vidéo>vidéo
<audio>Musique
Afficher les commandes de lecture
contrôles
Lecture automatique
lecture automatique
cycle automatique
boucle
chemin
src
balise de structure div
Dérivez de nombreux éléments enfants div basés sur div, et ils peuvent être utilisés comme divs Chaque élément enfant possède son propre nom pour compléter la description « sémantique » du div. Sémanticisation : similaire à "connaître la signification en voyant le nom" dans la spécification de dénomination des variables Java
<section>
zone de contenu dans la page Web
<article>
article
<à part>
Contenu en dehors de l'article
<hgroupe>
Combinaison de contenu et de titre
<navigation>
la navigation
<figure>
Images et textes
<en-tête>
En-tête de la page Web
<pied de page>
bas de la page
flotteur clair : des deux côtés
clarifier les deux;
<style>style CSS
Utilisez trois méthodes :
styles en ligne
écrit à l'intérieur de la balise d'ouverture
<p style="color:red;">HTML</p>
style interne
Écrit entre </head><body>
<style></style>
feuille de style externe
Créez un fichier .css et écrivez-y
Définition :<link href="css/01.css" rel="stylesheet"/>
priorité CSS
Le principe de proximité
Sélecteur
sélecteur d'élément
Format : h2{}
Utiliser le nom de la balise comme cible de modification
classe de sélecteur de classe
Format : .nom de classe{}
Filtrer davantage le sélecteur d'élément
ID du sélecteur d'ID
Format : #id nom{}
Pousser les sélecteurs de classe un peu plus loin
groupe de sélection
Format :h1,h2,h3{}
sélecteur dérivé
Sélecteur descendant (sélectionner tout)
Format :divp{}
Sélecteur descendant(sélecteur)
Format : div>p{}
Sélecteur de pseudo-classe
Pas cliqué
Format : a:lien{}
Après avoir cliqué
Format :a :visité{}
flotter
Format : a:survol{}
Cliquez et maintenez
Format :a :actif{}
Les quatre pseudo-classes doivent être dans un certain ordre, sinon elles seront invalides lvha
arrière-plan
Couleur de l'arrière plan
couleur d'arrière-plan : rouge ;
Image d'arrière-plan
image d'arrière-plan:url(img/1.jpg);
carrelage de fond
Par défaut, l'image d'arrière-plan est "en mosaïque" sur les axes x et y. Utilisez background-repeat pour contrôler le fonctionnement de la mosaïque :
répéter : valeur par défaut, mosaïque dans les directions x et y
répéter-x : carrelage dans la direction x
répéter-y : carrelage dans la direction y
no-repeat : pas de carrelage
panoramique de fond
défilement d'arrière-plan
background-attachment : défilement ; défilement d'arrière-plan (valeur par défaut)
background-attachment : corrigé ; l'arrière-plan ne bouge pas
taille de l'arrière-plan
contain : Zoom sur la taille de la zone d'arrière-plan (l'image d'arrière-plan est entièrement affichée) cover : mettre à l'échelle pour couvrir complètement la zone d'arrière-plan (ne laisser aucun espace vide)
position d'arrière-plan
origine de fond :
bordure-boîte ;
padding-box : (par défaut)
boîte de contenu :
recadrage d'arrière-plan
clip d'arrière-plan :
bordure-boîte ;
padding-box : (par défaut)
boîte de contenu :
Coupé sur quatre côtés
cadre
Quatre côtés, définis en même temps : border:3px rouge uni ;
Gestion des débordements de texte
auto : Adaptatif, si elle dépasse la limite, des barres de défilement seront ajoutées, sinon aucune barre de défilement ne sera ajoutée.
masqué : masqué si dépassé
Couleur RVB
http://tool.oschina.net/commons?type=3
modèle de boîte
marge marge
en haut
rembourrage
gauchegauche
style de texte
Police de caractère
famille de polices : « Microsoft Yahei » ;
taille de police
taille de police : 50 px ;
couleur de la police
couleur : orange rouge ;
Alignement du texte (gauche, centre, droite)
alignement du texte : centre ;
Caractère gras
poids de la police : gras ;
Ligne centrale (supprimer la ligne)
décoration de texte : passage en ligne ;
Surligner
décoration du texte : surlignage ;
Couleur de l'arrière plan
fond : marron ;
Hauteur (hauteur de la maison)
hauteur : 150px ;
Hauteur de ligne du texte (hauteur humaine)
hauteur de ligne : 150 px ;
échancrure
retrait du texte : 30 px ;
style de tableau
Fusionner les bordures des cellules
border-collapse : effondrement ;
style de liste
retirer
type de style de liste : aucun ;
nombre
type de style de liste : décimal ;
romain minuscule
list-style-type : bas-romain ;
Capitale romaine
type de style de liste : supérieur-romain ;
points noirs
type de style de liste : disque ;
bloc
type de style de liste : carré ;
cercle
type de style de liste : cercle ;
Remplacer les balises des éléments de liste par des images
image-style-liste : url(img/1.png);
Passage à l'orientation paysage via le positionnement flottant
Style de souris
le curseur:
par défaut : pointeur
pointeur : doigt
réticule : croix
texte : focus
attendre attendre
style de positionnement
Classification des éléments
Toutes les balises d'élément ont leur propre classification, niveau de bloc ou niveau de ligne
Éléments de niveau bloc :
h1 ~ h6, p, div, etc...
Orientation descendante, verticale (retour à la ligne) : la largeur et la hauteur peuvent être modifiées
éléments en ligne
a,b,envergure etc...
De gauche à droite, orientation horizontale (pas de retour à la ligne) : impossible de modifier la largeur et la hauteur
Éléments de bloc en ligne :
entrée, image, etc...
De gauche à droite, direction horizontale (retour à la ligne) : la largeur et la hauteur peuvent être modifiées
Ciblage par défaut
Affichage des éléments au niveau du bloc
bloc de visualisation;
Affichage par défaut
Affichage des éléments en ligne
affichage:en ligne;
Impossible de modifier la largeur et la hauteur
Affichage des éléments de bloc en ligne
display:bloc en ligne ;
Peut changer de largeur et de hauteur
positionnement flottant
Un élément flottant peut être déplacé vers la gauche ou la droite jusqu'à ce que son bord extérieur touche l'élément parent. pixel ou la bordure d'une autre boîte flottante Les éléments flottants sont toujours situés dans l'élément parent
flotter à gauche
flottant:gauche
Flotter à droite
Flotter à droite
positionnement relatif
La distance entre cet élément et les éléments adjacents
position : relative
positionnement absolu
La distance entre cet élément et l'élément grand-père
position : absolue
Positionnement fixe
Conserver la position de l'élément inchangée
position : fixe ;
Axe z (affichage superposé)
Plus la valeur est grande, plus le visage est proche (plus proche du visage)
z-index : valeur numérique
Texte masqué
affichage : aucun ;
Texte masqué
Fonction
Supprimer le soulignement du lien hypertexte
décoration de texte : aucune ;
<style>style CSS3
coins arrondis
rayon de bordure : 50 % ;/*bordure coins arrondis 50 %*/(cercle)
border-radius : px supérieur gauche, px supérieur droit, px inférieur droit, px inférieur gauche ;
border-radius : coin supérieur gauche (en haut à droite) px coin supérieur droit (en bas à gauche) px ;
ombre
boîte ombre
box-shadow : décalage horizontal px décalage vertical px taille du flou px taille de l'ombre px couleur de l'ombre ;
ombre de texte
text-shadow : couleur de l'ombre, direction horizontale px, direction verticale px, taille du flou px ;
Pente
gradient linéaire
background:linear-gradient (liste de couleurs [vers la direction]);
gradient radial
background:radial-gradient (liste de couleurs) ;
La liste de couleurs peut avoir N numéros
animation
animation de transition
Vous ne pouvez contrôler que le début et la fin, mais pas le processus intermédiaire.
transition : attribut css de transition ou de simulation d'animation, temps utilisé pour terminer la transition, fonction de transition [délai de début de transition] ;
Tous les attributs ne prennent pas en charge la transition, CSS3 ne développe que certains attributs
Fonction de transition :
facilité
Par défaut. Rapide à lent.
linéaire
Vitesse uniforme
facilité dans
accélérer
facilité
ralentir
facilité d'entrée et de sortie
Accélérez d'abord, puis ralentissez
animation
D’un état à un autre, chaque instant du processus peut être contrôlé.
Définir l'animation :
Nom de l'animation @keyframes{ partir de {couleur, forme, distance...} pour{couleur, forme, distance...} terminer }
Nom de l'animation @keyframes{ 0%{couleur, forme, distance...} ... 100 %{couleur, forme, distance...} }
Lier une animation
sélecteur d'élément { animation : nom de l'animation, temps d'exécution, fonction de transition, nombre d'exécutions [exécution aller-retour alternative] ; }
infini
Temps d'exécution sans fil
<JavaScript>
JS est une technologie de programmation Web utilisée pour ajouter comportement interactif
js est un langage interprété (de script). Le navigateur interprète et exécute le code sans prétraitement. Compiler.
Utilisez trois façons
Au sein de l'industrie
<input type="button" value="Frère, cliquez sur moi" onclick="alert('嘤嘤嘤')";
sur clic
Événement contraignant
alerte()
Fenêtres contextuelles
interne
<script> alerte("Bonjour le monde !") </script>
externe
Créez un fichier avec le suffixe ".js"
Définition :<script src="01.js"></script>
Priorité : qui est au sommet ? Qui doit être exécuté en premier ?
variable
JavaScript étant un langage faiblement typé, lors de la définition de variables, tous les types de données sont déclarés à l'aide de var ;
Type numérique : nombre
String : la chaîne utilise des guillemets doubles ou des guillemets simples
Type booléen : true=1 | false=0 (converti en 1 et 0 pendant le fonctionnement)
conversion de type automatique
chaîne numérique = chaîne
Nombre booléen = nombre
chaîne booléenne = chaîne
booléen booléen = nombre
fonction de conversion
Convertir n'importe quel type en chaîne
x.toSring();
Convertir une chaîne en entier
analyserInt(x)
Convertir une chaîne en décimal
analyserFloat(x)
Interroger (juger) le type actuel de valeur
type de (x)
Impossible de convertir renvoie NaN
Boîte de sortie d'invite
rapide()
Zone de saisie rapide
alerte()
Fenêtres contextuelles
console.info()
sortie console
document.write()
Afficher le contenu de la page
Opérateur/Contrôle de débit
Opérations arithmétiques
opérations relationnelles
Strictement égal
===Même type et même valeur
pas strictement égal
!==
opération logique
arithmétique ternaire
Structure de boucle
Jugement conditionnel
Objets communs
Chaîne
Créer un objet chaîne
var str="bonjour le monde";
var str=new String("helloworld");
Méthodes couramment utilisées :
TableauTableau
Quel que soit le type de données, il s'agit d'un tableau
Trois façons d'initialiser un tableau
var arr1 = nouveau tableau (); arr1[0] = 10 ; arr1[1] = 20 ; arr1[2] = 30 ; console.info( arr1 );
var arr2 = nouveau tableau (10, 'a', true); console.info( arr2 );
var arr3 = [5,'b',faux]; console.info( arr3 );
Tableau bidimensionnel
Les éléments du tableau sont un tableau.
Méthodes couramment utilisées pour les tableaux :
Mathématiques numériques
http://www.w3school.com.cn/jsref/jsref_obj_math.asp
Math.round(x)
Arrondir au nombre entier
Math.étage(x)
Arrondi
Math.random();
Renvoie un nombre aléatoire compris entre 0 et 1.
max(x,y) renvoie la valeur la plus élevée entre x et y. min(x,y) renvoie la valeur la plus basse entre x et y.
Classe d'encapsulation de nombres
données var = 23,56789 ; alerte(data.toFixed(2));//23.57
Convertir une valeur numérique en chaîne et conserver un certain nombre de chiffres après la virgule décimale
DateDate
Expression RegExregular
Méthodes courantes
RegExp.test (chaîne)
Renvoie vrai si la chaîne contient du texte qui correspond à RegExp , sinon renvoie faux
nul et indéfini
nudéfini
Il y a un objet, mais il ne vaut rien
nul
Pas de cible
Fonction (comme la méthode Java)
définition de fonction
Défini par fonction mot-clé
Les règles de définition des noms de fonctions sont cohérentes avec les identifiants et sont sensibles à la casse.
Vous pouvez utiliser des variables, des constantes ou des expressions comme arguments pour les appels de fonction
La valeur de retour doit utiliser return
fonction nom de la fonction (paramètre) { corps fonctionnel; retourner la valeur de retour ; }
fonction sans paramètres
fonction abc(){ pour(var je = 1;i<=5;i){ console.info(i); } }
fonction avec paramètres
fonction il(a,b){ alerte (un b); }
Pour les fonctions avec paramètres, n'ajoutez pas de types de données lors de leur définition.
fonction avec valeur de retour
objet paramètre arguments
fonction il(a,b){ alerte (un b); console.info( arguments.length ); //Nombre de paramètres console.info( arguments[0] ) ;//La valeur de b }
arguments.length obtient le nombre de listes de paramètres arguments[indice] obtient les paramètres à une certaine position
fonction anonyme
Une fonction sans nom ne peut être exécutée que cette fois (similaire à la classe interne anonyme de Java)
fonction globale
Ils sont tous prédéfinis et js les prépare pour nous. Référencez-le simplement directement avec le nom de la méthode.
commun
parseInt() | parseFloat()
isNaN() détermine s'il contient des caractères
eval() : utilisé pour convertir les opérations en chaînes
encodeURI()
codage
décoderURI()
décodage
Objet DOM
Les éléments sont un mécanisme interne à JavaScript qui convertit tous les éléments d'une page HTML en objets. Ce mécanisme est "DOM" Chaque document est un objet document.
Comment trouver les nœuds d'éléments :
Obtenez l'objet unique via la valeur id
document.getElementById (valeur id)
Obtenez plusieurs objets correspondants via la valeur de l'attribut name
document.getElementsByName (valeur du nom)
Obtenez plusieurs objets correspondants via les noms de balises
document.getElementsByTagName (nom de la balise)
Cas : Vérification de la connexion
Cas : changement de couleur entrelacé
Cas : Sélectionnez tous les effets
Modifier le style du nœud :
Format : élément object.style.css nom d'attribut="valeur d'attribut" ;
Par exemple: node.style.color = "rouge" ; node.style.fontSize = "10em"; Modifiez plusieurs styles en même temps : className = "class name";
Cas : attributs de classe
Noeud de recherche hiérarchique
Comme il y a un nœud vide entre les balises div et p à analyser, #text apparaîtra, qui appartient au nœud de texte. supprimer l'espace blanc
Type de nœud :
opération de sélection d'élément
objet élément de table table
Créer un nœud
supprimer et remplacer
supprimer
remplacer
Objet du navigateur de nomenclature
fenêtre objet fenêtre
alerte (message rapide)
Boîte de dialogue d'invite
confirmer (message rapide)
Si la boîte de dialogue renvoie le type booléen
invite(message d'invite,[contenu])
boîte de dialogue de saisie
fenêtre.close()
Fermer la fenêtre actuelle du navigateur
window.open (adresse de la page Web ouverte, nom de la fenêtre, [paramètres])
Ouvrir une nouvelle fenêtre de navigateur
paramètre:
minuterie de fenêtre
setTnterval(1,2); 1 : Actions répétées (fonctions) 2 : Intervalle de temps (millisecondes)
minuterie périodique
clearInterval (objet timer)
Arrêter les tâches planifiées
setTimeout(1,2) 1. Fonction à exécuter 2, intervalle (millisecondes)
Minuterie unique, similaire à l'effet de retard
objet d'écran
écran.largeur écran.hauteur
Obtenir la résolution de l'écran
objets de traces historiques
histoire.go(num)
Retour au précédent
Si num est positif, cela signifie avancer Si num est négatif, cela signifie revenir en arrière
histoire.retour()
Retourner à la page précédente
objet de localisation
location.href=La destination du saut de page
Saut de page du cas
événementévénement
événements de souris
événement de clic de souris
sur clic
Événement de double-clic de souris
ondblcliquez
événement de survol de la souris
au survol de la souris
événement de congé de souris
onmouseout
Événements de clavier
événement de presse au clavier
onkeydown
Événement de sortie du clavier
sur la touche
événement de statut
se concentrer
se concentrer
le flou
perdre la concentration
sur le changement
Déclenché lors d'un changement
Cas : Effets en cascade provinciaux et municipaux
Le mécanisme par défaut pour les événements
La séquence déclenchante des événements s’effectue de l’intérieur vers l’extérieur, ce qui constitue le mécanisme de bouillonnement.
Si deux boutons se rejoignent, les deux clics seront déclenchés par défaut.
Annulez le mécanisme de bouillonnement :
event.stopPropagation();
Choc électrique de la souris, coordonnées x et y
événement.chintX
événement.chintY
event.target.nodeName
se produire cible
Bases orientées objet
Trois façons de créer des objets
utiliser un objet
Utiliser le constructeur
Utiliser des littéraux (objets JSNO)
Objet JSNO
Créer un objet jsno
Créer un tableau jsno
objet complexe json
Cadre JQuery
Introduction
1. jquery est développé par js, donc jquery lui-même est javascript
environnement de développement jquery-3.3.1.js jquery-3.3.1.min.js pour l'environnement de production
Changement de couleur entrelacé simple
<script src="js/jquery-3.3.1.js"></script> <script> $(fonction(){ $("tr:impair").css("background","bleu"); $("tr:even").css("background","red"); }); </script>
Sélecteur puissant
sélecteur de base
sélecteur de balises
$("p")
sélecteur d'identifiant
$("#er")
sélecteur de classe
$(".si")
Sélecteur 1, Sélecteur 2. . .
$("#er,.si")
sélecteur de niveau
sélecteur de descendants
$("#d2p")
p1 p2
sélecteur de descendants
$("#d2>p")
p1
frères voisins
$("#d2p")
ensuite
tous les frères derrière
$("#d2~p")
Tous les p sont après
Sélecteur de filtre de base
premier élément
$("p:premier")
dernier élément
$("p:dernier")
Ne contient pas d'éléments dans not (filtrage)
$("p:pas(.si)")
Éléments avec des indices impairs
$("p:impair")
Éléments avec des indices pairs
$("p:pair")
Éléments avec des indices égaux
$("p:eq(2)")
élément supérieur à l'indice
$("p:gt(2)")
Éléments plus petits que l'indice
$("p:lt(2)")
Sélecteur de filtre de contenu
Contenu de requête flou Le contenu de l'élément contient tous les p éléments de is
$("p:contient(est)")
Sélectionnez des éléments avec un contenu vide
$(":vide")
sélecteur de visibilité
(Secondes) Afficher le texte caché de l'élément p
$("p:caché").show(1000);
sélecteur de formulaire
:input sélectionne toutes les zones de saisie :text sélectionne toutes les zones de texte : mot de passe sélectionne toutes les cases de mot de passe : la radio sélectionne tous les boutons radio : case à cocher cocher toutes les cases :submit sélectionne tous les boutons de soumission : réinitialiser sélectionne tous les boutons de réinitialisation : le bouton sélectionne tous les boutons : le fichier sélectionne tous les champs du fichier : masqué sélectionne tous les champs masqués
sélecteur d'attribut
Les attributs commencent à contenir xx
$("a[href^=xx]")
La fin de l'attribut contient xx
$("a[href$=xx]")
L'attribut contient xx
$("a[href*=xx]")
filtre de formulaire
Sélectionnez tous les éléments désactivés
:désactivé
Sélectionnez tous les éléments disponibles
:activé
Sélectionnez les éléments sélectionnés
:vérifié
Fonction d'attribut :
Obtenir
$("img").attr("titre");
Obtenez la valeur de l'attribut title de img
$("entrée").val();
Obtenez la valeur de la zone de saisie
$("div").text();
Obtenez le contenu en texte brut à l'intérieur du div
$("div").html();
Obtenez tout le contenu du div (valeur du texte de la balise HTML)
installation
$("img").attr("titre","xxx");
Définir la valeur de l'attribut titre de img
$("entrée").val("xxxx");
Définir la valeur de la zone de saisie
$("div").text("xxxx");
Définir le contenu du texte brut à l'intérieur du div
$("div").html("xxxx");
Définir tout le contenu à l'intérieur du div (valeur du texte de la balise HTML)
Retirer
$("img").removeAttr("titre");
Supprimer la valeur de l'attribut title de img
fonction de style
$("p").addClass("style de classe");
Ajouter des styles de classe aux éléments
$("p").removeClass("style de classe");
Supprimer le style de classe de l'élément
$("p").toggleClass("style de classe");
Changer de style (oui->non, non->oui)
$("p").css("attribut css")
Obtenez la valeur de l'attribut CSS de l'élément p
$("p").css("propriété","valeur")
Définir la valeur de l'attribut CSS de l'élément p
$("p").css({"width": "150px",...});
Définir les valeurs de plusieurs attributs CSS de l'élément p (jsno)
$("div").width()
Obtenez la largeur de l'élément
$("div").hauteur()
Obtenez la hauteur de l'élément
$("div").width(valeur)
Définir la largeur d'un élément
$("div").hauteur(valeur)
Définir la hauteur d'un élément
La différence entre h5 et h4
Déclaration documentaire
Conception de l'encodage des caractères
Insensible à la casse
attribut booléen
Citations omises
balise de fin omise