Javaweb Learning Notes Partage (incontournable)

Auteur：Eve Cole Date de mise à jour：2025-04-09 04:32:01

Liste personnalisée

<dl> </dl>: représente la plage de la liste

** Inside <dt> </dt>: Contenu supérieur

** Inside <dd> </dd>: Contenu inférieur

Liste commandée

<lo ol> </l>: plage de liste ordonnée

- Type d'attribut: définissez la méthode de tri, 1 (par défaut), a, i,

** Dans la balise ol <li> Contenu spécifique </li>

Liste non ordonnée

<ul> </ul>: gamme de liste non ordonnée

- Attribute Type: cercle (cercle creux), disque (cercle solide par défaut), carré (carré solide)

** Dans la balise UL <li> Contenu spécifique </li>

Tags d'image

- Attributes: SRC, largeur, hauteur, alt (le texte affiché sur l'image, déplacez la souris vers l'image, restez un certain temps pour afficher le contenu ou le texte affiché lorsque l'image est affichée de manière incorrecte, mais certains navigateurs ne l'affichent pas, et il n'y a pas d'effet)

** <img src = "page d'image" />

Introduction aux chemins

* Catégorie: deux catégories

** chemin absolu par exemple. http://www.baidu.com/b.jpg

*** Trois chemins relatifs à l'emplacement d'un fichier par rapport à un autre fichier

- Le fichier et l'image HTML sont dans le même chemin (répertoire), et le nom du fichier peut être écrit directement

- Dans le fichier HTML, utilisez le fichier A.JPG sous le dossier IMG sous le même chemin qu'il est: IMG / A.JPG

** d: /htmlstudy/code/4.html

** d: /htmlstudy/code/img/a.jpg

- L'image se trouve dans le répertoire supérieur du fichier HTML. À l'heure actuelle, la méthode d'utilisation de l'image: ../c.png ../ représente le chemin supérieur

Tags d'hyperlien

** Lien des ressources

- <a href = "Path to lien to Resource"> Contenu affiché sur la page </a>

** HREF: l'adresse de la ressource liée

** Target: Définissez la méthode d'ouverture, la valeur par défaut est à ouvrir sur la page actuelle

--_ blanc: s'ouvre dans une nouvelle fenêtre

--_ self: ouvrez la page par défaut

- <a href = "#"> Titre du lien </a>: Lorsque l'hyperlien n'a pas besoin de passer à la page, ajoutez simplement # (espace réservé) au HREF

** Ressources de localisation

- Si vous souhaitez localiser les ressources: définir un emplacement

- Back à cet endroit

- TAG TAGNE AUSSI-IS-OUTPUT: <Pre> Contenu qui doit être entré as-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is -is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is- is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is

Tags de table

* Fonction: il peut formater les données pour rendre les données afficher plus claires

* Border d'attribut (épaisseur de ligne de table) BorderColor (couleur de la ligne de table) Placement de cellule (distance de cellule) Largeur de largeur

* <Table> </ Table>: indique la plage de la table

** Dans le tableau, cela signifie une ligne <tr> </tr>

--Menez l'alignement Alignement: Centre gauche à droite

*** En tr, il indique la cellule dans une ligne <TD> </td>

** Utiliser TH peut également représenter les cellules: elle peut atteindre le centrage et le gras

* Le titre de la table est placé dans le tableau <légende> </genmed>

* Compétences en fonctionnement:

** Comptez d'abord combien de lignes y a-t-il et comptez combien de cellules y a-t-il dans chaque ligne

* Fusionner les cellules

** Rowspan: Rayon transversal (fusion verticale)

** Colspan: Cross-Coln (fusion horizontale)

<td Colspan = "3" align = "Center"> Form exercices </td>

Étiquettes de formulaire

* Par exemple, lors de l'enregistrement de Kaixin.com, vous pouvez soumettre des données au serveur de Kaixin.com. Ce processus peut être implémenté à l'aide de balises de formulaire.

* <form> </ form>: définir une portée de formulaire

*propriété:

** Action: l'adresse soumise, la soumission par défaut à la page actuelle

** Méthode: la méthode de soumission de formulaire

- Il y en a deux couramment utilisés: obtenir et publier, qui est la demande de Get par défaut

** La différence entre Get et Post

1) La barre d'adresse de la demande GET transportera les données soumises et le poste ne les portera pas (les données sont dans le corps de la demande)

2) Obtenir le niveau de sécurité de la demande est inférieur et le poste est plus élevé

3) Il y a une limite sur la taille des données de la demande GET, mais il n'y a pas de limite sur le message

** ENCTYPE: Cette propriété n'est pas requise pour les demandes, et cette propriété doit être définie lors du téléchargement de fichiers.

** Élément d'entrée: la pièce où le contenu peut être entré ou sélectionné

- La plupart des éléments d'entrée peuvent être utilisés avec <Type d'entrée = "Type d'élément d'entrée" />

********** Dans l'élément d'entrée, vous devez avoir un attribut de nom

*** Entrée normale: <Type d'entrée = "Text" />

*** Élément d'entrée de mot de passe: <entrée type = "mot de passe" />

*** Entrée à choix unique: <entrée type = "radio" />

- Le nom d'attribut est requis à l'intérieur

- Name La valeur d'attribut doit être la même

- il doit y avoir une valeur de valeur

**** Implémentez les propriétés sélectionnées par défaut

*** vérifié = "vérifié"

*** Vérifier l'entrée: <entrée type = "Checkbox" />

** Le nom d'attribut est requis à l'intérieur

** La valeur de l'attribut de nom doit être la même

** Il doit y avoir une valeur de valeur

**** Implémentez les propriétés sélectionnées par défaut

---- vérifié = "vérifié"

*** Élément d'entrée de fichier: <entrée type = "file" />

*** Élément d'entrée de traction (pas dans la balise d'entrée)

<Option Value = "0"> Veuillez sélectionner </ Option>

</lect>

**** Implémentez les propriétés sélectionnées par défaut

---- sélectionné = "sélectionné"

*** Champ de texte (tel que: Remplissez la case pour le profil des informations personnelles lors de l'enregistrement d'un compte)

*** Élément caché (non affiché sur la page, mais existe dans le code HTML)

*** Bouton Soumettre

- Address avant la soumission: c: /users/happydog/desktop/index.html

** Lorsque l'attribut de nom est écrit dans l'élément d'entrée

--file: /// c: /users/happydog/desktop/index.html? Phone = 123123 & pwd = 12321312 & sexe = homme et amour = y & love = pp & naissance = 1992 & tex = 1231245

**? La valeur du nom de l'élément d'entrée = la valeur de l'entrée et

** Les paramètres sont similaires à la forme de valeur clé

*** Utiliser (cliquez sur) des images à soumettre

*** Bouton de réinitialisation: retournez à l'état initial de l'élément d'entrée

*** boutons normaux (utilisés avec js)

Cas: utilisez des balises de formulaire pour implémenter la page d'inscription

Lorsque le contenu d'une cellule de table est vide, les espaces réservés ((espaces échappés)) sont généralement remplis.

Utilisation d'autres balises communes dans HTML

** b (gras) s (ligne de frappe) u (sous-trait) i (italique) pré (sortie comme c'est) sub (indice) sup (superscript) div (ligne de ligne) (affichage sur une ligne) p (étiquette de paragraphe)

Utilisation de la balise d'en-tête HTML

** HTML Deux parties composent la tête et le corps

** L'étiquette dans la tête est l'étiquette de tête

** TALLE TALE: indique le contenu affiché sur la balise

** <Taa> Tag: un contenu connexe de la page de paramètre

- <meta name = "keywords" contenu = "" />

- <méta http-equiv = "rafhes" contenu = "10; url = test_form.html" /> vitesse à la page spécifiée régulièrement

** Tag de base: Définissez les paramètres de base pour les hyperliens

- La méthode d'ouverture de l'hyperlien peut être définie uniformément <Base Target = "_ Blank" />

** Tag de lien: introduire des fichiers externes

Utilisation des balises de trame

** <FrameSet>

** rangées: diviser par rangée

<FrameSet Rows = "80, *"> Diviser en deux parties, top 80, en bas 80

** Cols: Diviser par colonne

<Frameset Cols = "80, *"> Divisez en deux parties, à gauche et à droite à 80, n'importe qui à gauche et à droite à tout moment

** <Frame> La page spécifique affichée

** <trame name = "Lower_left" src = "b.html">

* Lorsque vous utilisez des balises de trame, ils ne peuvent pas être écrits dans la tête et le corps. Si la balise de cadre est utilisée, le corps doit être retiré et écrit à l'extérieur de la tête.

* Si l'hyperlien sur la page à gauche et que le contenu soit affiché sur la page à droite, vous pouvez définir la propriété cible dans l'hyperlien et définir la valeur de la cible sur le nom dans le cadre.

** <a href = "http://www.baidu.com" Target = "droite"> baidu </a> <br/>

</ FrameSet>

Résumé des connaissances

1) Idée de fonctionnement HTML: utilisez des balises pour envelopper les données à utiliser et modifiez le style de données dans la balise en modifiant la valeur d'attribut de la balise.

2) Attribut de balise de police: plage de valeur de taille 1-7 Couleur: numéro hexadécimal #ffffff

3) TALLE TAGE <H1> </H1> ...... <h6> </h6>: De H1 à H6, la police devient de plus en plus petite, et la ligne est automatiquement modifiée

4) Commentaires

Introduction au CSS

** CSS: feuille de style en cascade

** couches: couche par calque

** Stylesheet: de nombreux attributs et valeurs d'attribut

** Afficher la page Afficher

** CSS sépare le contenu de la page Web et le style d'affichage, améliorant la fonction d'affichage

Comment combiner CSS et HTML (quatre façons de combiner)

1) Il y a un style de propriété sur chaque balise HTML, combinant CSS et HTML ensemble

- <div style = "fond-couleur: rouge; couleur: vert;" id = ""> La voie du ciel réduit l'excès et compense la carence. Par conséquent, le vide bat le réel, et celui insuffisant surmonte l'excès. </div>

2) Utilisez une balise de HTML pour implémenter la balise <style> et l'écrire dans la tête

- <style type = "text / css">

Code CSS;

</ style>

--- Implémentation du code <A-Head>

div {

Color en arrière-plan: bleu;

Couleur: rouge;

}

</ style>

</ head>

<body>

La voie du ciel réduit l'excès et compense la carence. Par conséquent, le vide surmonte le réel et le manque de carence surmonte l'excès.

</div>

</docy>

3) Utilisez des instructions dans la balise de style

@Import URL (chemin du fichier CSS);

- Étape 1: Créez un fichier CSS

--- <style type = "text / css">

@Import URL (div.css);

</ style>

4) Utilisez le lien de balise d'en-tête pour introduire le fichier CSS externe et placez-le dans <Aad> </adred>

- Étape 1: Créez un fichier CSS

- <link rel = "stylesheet" type = "text / css" href = "path of css file" />

**** L'inconvénient de la troisième méthode de combinaison: elle ne fonctionne pas dans certains navigateurs, et la quatrième méthode est généralement utilisée

**** Priorité (Général)

De haut en bas, de l'intérieur vers l'extérieur, priorité de bas à haut.

La priorité du post-charge est élevée

**** Format: Nom du sélecteur {nom d'attribut: valeur d'attribut; nom d'attribut: valeur d'attribut; ......}

Sélecteurs de base pour CSS (trois types)

** Faire fonctionner les données dans cette balise

1) Sélecteur de balises Div {Code CSS}

- Utilisez le nom de l'étiquette comme le nom du sélecteur

<adal>

div {

Color en arrière-plan: bleu;

Couleur: rouge;

}

</ style>

</ head>

<body>

<div> aaaaa </div>

</docy>

2) Sélecteur de classe. Nom {}

** Chaque balise HTML a une classe de propriété

** <A-Head>

div.test {

Color en arrière-plan: bleu;

Couleur: rouge;

}

P.Test {

Color en arrière-plan: bleu;

Couleur: rouge;

}

Il peut être abrégé comme:

.test{

Color en arrière-plan: bleu;

Couleur: rouge;

}

</ style>

</ head>

** <body>

<div> aaaaa </div>

<p> bbbbbbbbbb </p>

</docy>

3) Sélecteur d'ID #Name {}

** Chaque balise HTML a un ID d'attribut

- <div id = "test"> cccccccccccc </div>

- <adhead>

Div # test {

Color en arrière-plan: bleu;

Couleur: rouge;

}

P # test {

Color en arrière-plan: bleu;

Couleur: rouge;

}

Il peut être abrégé comme:

#test {

Color en arrière-plan: bleu;

Couleur: rouge;

}

</ style>

</ head>

- <body>

<div id = "test"> aaaaa </div>

<p id = "test"> BBBBBBBBBB </p>

</docy>

** Style de priorité> Sélecteur d'ID> Sélecteur de classe> Sélecteur de balises

Sélecteur d'extension CSS (apprendre)

1) Paramètres de styles pour les étiquettes imbriquées pour les sélecteurs d'association

** <div> <p> wwwwwwwww </p> </div>

** Définissez le style de la balise P dans la balise div et le style de la balise imbriquée

- <adhead>

div p {

Color en arrière-plan: bleu;

Couleur: rouge;

}

</ style>

</ head>

- <body>

<v> <p> wwwwwwwww </p> </div>

<p> aaaaa </p>

</docy>

2) Combinaison de différentes étiquettes Sélector définir le même style

** <div> 1111 </div>

** Définissez les balises Div et P sur le même style et définissez différentes balises sur le même style

- <adhead>

div, p {

Color en arrière-plan: bleu;

Couleur: rouge;

}

</ style>

</ head>

- <body>

</docy>

3) Pseudo (classe) Sélecteur d'éléments

** CSS fournit des styles bien définis, qui peuvent être utilisés

** Par exemple, hyperlien

** Statut des hyperliens

- après de cliquer et de cliquer sur l'état d'origine

: lien: Hover: actif: visité

Implémentation du code:

<adal>

/ * État d'origine * /

a: lien {

Color d'arrière-plan: rouge;

}

/ * Hoom Status * /

A: Hover {

Color en arrière-plan: vert;

}

/ * Cliquez sur l'état * /

a: actif {

Color en arrière-plan: bleu;

}

/ * État après le clic * /

A: visité {

Color en arrière-plan: gris;

}

</ style>

</ head>

<body>

<a href = "http://www.baidu.com"> Cliquez sur la page Web du lien vers Baidu </a>

</docy>

Le modèle de boîte de CSS (comprendre) fonctionne sur les données, vous devez mettre les données dans une zone (div)

1) Border Border: Paramètres unifiés

Vous pouvez également le régler séparément: Haute-bordure inférieure: Border-Bottom Gauche: Border-gauche à droite: Border-droite

- <adhead>

div {

Largeur: 200px;

hauteur: 100px;

Border: 2px bleu massif;

}

# div12 {

Border-Dight: 2px en jaune en pointillés;

}

</ style>

</ head>

- <body>

<div id = "div11"> aaaaaaaaaaa </div>

<div id = "div12"> bbbbbbbbb </div>

</docy>

2) Tampon de marge intérieure: Réglez la distance entre le contenu des côtés supérieur, inférieur, gauche et droit

Vous pouvez également le définir séparément: en haut, en bas, à gauche et à droite

<adal>

div {

Largeur: 200px;

hauteur: 100px;

Border: 2px bleu massif;

}

# div21 {

rembourrage: 20px;

}

# div22 {

padding-gauche: 30px;

}

</ style>

</ head>

<body>

<div id = "div21"> aaaaaaaaaaa </div>

<div id = "div22"> bbbbbbbbb </div>

</docy>

3) Marge: Réglez la distance entre la div des quatre côtés les plus à l'extérieur

Vous pouvez également le définir séparément: haut, bas, gauche et droite. . .

Float de mise en page de CSS (comprendre) Float: gauche à droite

Positionnement de la disposition CSS (comprendre)

*position

** Valeur d'attribut:

--Statique: valeur par défaut, pas de positionnement spécial

--absolu:

Faites glisser l'objet à partir du flux de document et utilisez la gauche, la droite, le haut, le bas et les autres propriétés pour la localiser absolument

- Relatif: l'objet ne sera pas traîné à partir du flux de documents. L'objet ne peut pas être empilé, mais il sera décalé dans le flux de document normal en fonction des propriétés telles que la gauche, la droite, le haut, le bas, etc.

Cas: image mixte et texte

** Les images et les textes sont affichés ensemble

Cas: signature d'image

Introduction à JavaScript: il s'agit d'un langage de script axé sur l'objet, principalement utilisé dans le client

* Basé sur des objets: de nombreux objets sont fournis, vous pouvez les utiliser directement

* Axé sur l'événement: HTML fait des effets statiques sur le site Web, les effets dynamiques JavaScript

* Client: se réfère spécifiquement au navigateur

* Caractéristiques de JS:

1) Interaction dynamique des informations interactives

2) La sécurité JS ne peut pas accéder aux fichiers sur le disque local

3) Java multiplateforme, machines virtuelles; Tant que les navigateurs qui peuvent prendre en charge JS, ils peuvent courir

* Différence entre JavaScript et Java: il n'y a pas de relation entre les deux

1) Java est Sun Company, maintenant Oracle; JS Is Netscape Company

2) Java est orienté objet, et JS est basé sur des objets

3) Java est une langue fortement dactylographiée, et JS est une langue faiblement tapée

- pour exemple: int i = "10" dans java; rapportera une erreur

--js: var i = 10; var i = "10"; Aucune erreur n'est signalée

4) JS doit seulement être analysé pour exécuter, tandis que Java doit être compilé dans un fichier bytecode, puis l'exécuter d'abord

* Composition JS (trois parties):

1) Ecmascript

- ECMA: Association informatique européenne

- js syntaxe et déclarations organisées par ECMA ...

2) bom

- Modèle d'objet Broswer: modèle d'objet du navigateur

3) Dom

- Modèle d'objet de document: modèle d'objet de document

Comment combiner JS et HTML (deux types)

1) Utilisez une balise <script type = "text / javascript"> code js; </cript>

2) Utilisez des balises de script pour introduire un fichier JS externe

- Créez un fichier JS et écrivez le code JS

- <script type = "text / javascript" src = "js path"> </ script>

Remarque: Lorsque vous utilisez la deuxième méthode, n'écrivez pas de code JS dans la balise de script, il ne sera pas exécuté.

Types primitifs de JS et variables de déclaration

* Type de données de base de Java: octet court int long flotteur double char boleen

* Js définit les variables avec le mot-clé var

* Type d'origine de JS (cinq)

- String String var str = "ABC";

- Number Type numérique var m = 123;

--boolean true et false var flag = true;

--null var date = new Date ();

** Obtenez la référence à l'objet. Null signifie que la référence de l'objet est vide et que toutes les références à l'objet sont également l'objet.

- UndIfined définit une variable, mais n'attribue pas var aa;

* typeof (nom de variable) Afficher le type de données de la variable actuelle

déclaration JS

** Les déclarations de JS

- Si la déclaration de jugement

--witch (a) {

Cas 5: ...

casser;

Cas 6: ...

casser;

défaut:...

...........

}

** Déclaration de boucle pour tandis que

--var i = 5;

while (i> 0) {

alerte (i);

je--;

}

--for (var i = 0; i <= 5; i ++) {

alerte (i);

}

opérateur JS

** JS ne fait pas de distinction entre les entiers et les décimales

--var j = 123;

alerte (J / 1000 * 1000);

** J / 1000 * 1000 Le résultat en java est 0

** Dans JS, il n'y a pas de distinction entre les entiers et les décimales, 123/1000 * 1000 = 0,123 * 1000 = 123

** Ajouter et soustraire les opérations de chaîne

--var str = "123";

alerte (str + 1); Le résultat en Java et JS est 1231, qui est une connexion à chaîne

alerte (str - 1); Lors de la soustraction, effectuez l'opération de soustraction. Si STR n'est pas un nombre, cela invitera Nan: cela signifie que ce n'est pas un nombre

** Le type boléen peut également être utilisé

*** Si défini sur true, il équivaut à 1; S'il est défini sur false, il équivaut à 0;

** == et === Différence

** Il s'agit de porter des jugements

** == La comparaison n'est que la valeur; === La comparaison est la valeur et le type

** Les phrases qui sont directement sortis sur la page (le contenu peut être affiché sur la page) peut sortir des variables, des valeurs fixes et du code HTML sur la page. Document.Write ("") contient des citations doubles, et si vous définissez les attributs de l'étiquette, vous devez utiliser des citations simples.

- document.write ("aaaa");

- document.write ("<hr />");

*** document.write ("<Table Border = '1' BorderColor = 'Red'>");

*** document.write ("</pally>");

Exercice: mise en œuvre du tableau de multiplication 99

Array JS

* La définition du tableau dans java int [] arr = {1,2,3};

* Méthode de définition du tableau JS (trois types)

1) var arr = [1,2,3]; var arr = [1, "2", 3]; var arr = [1,2, true];

2) Utiliser l'objet de tableau d'objets intégré

var arr1 = nouveau tableau (5); // définit un tableau, la longueur du tableau est 5

Arr1 [0] = "1";

......

3) Utiliser l'objet de tableau d'objets intégrés

var arr2 = nouveau tableau (3,4,5); // Définir un tableau, les éléments du tableau sont 3,4,5

* Il y a une longueur de propriété dans le tableau: obtenez la longueur du tableau

* La longueur du tableau est variable et le tableau peut stocker les données de différents types de données.

Fonction JS (méthode)

** Définir les fonctions (méthodes) en js. Il existe trois façons de définir les fonctions. Dans la liste des fonctions des paramètres, vous n'avez pas besoin d'écrire VAR, il suffit d'écrire le nom du paramètre.

1) Utilisez une fonction de mot-clé

*** Nom de la méthode de la fonction (liste des paramètres) {

Corps de méthode;

La valeur de retour est facultative (selon les besoins réels);

}

Implémentation de code: // Créer une fonction en utilisant la première méthode

fonction test () {

alert ("qqqqqq");

}

// Méthode d'appel

test();

// définir une méthode avec des paramètres pour implémenter l'ajout de deux nombres

fonction add1 (a, b) {

var sum = a + b;

alerte (somme);

}

add1 (3,5);

fonction add2 (a, b, c) {

var sum1 = a + b + c;

retour SUM1;

}

alerte (add2 (7,8,9));

2) Fonctions anonymes

var add = fonction (liste de paramètres) {

Méthode Body and Return Value;

}

Implémentation du code: var add3 = fonction (m, n) {

alerte (m + n);

}

// Méthode d'appel

Add3 (8,9);

3) Il est également généralement appelé une fonction dynamique. Si vous l'utilisez moins, comprenez-le.

* Utilisez une fonction d'objet intégré dans JS

var add = nouvelle fonction ("Liste de paramètres", "Méthode Body and Return Value");

var add4 = nouvelle fonction ("x, y", "var sum; sum = x + y; return sum;");

alerte (add4 (9,10));

// ou le code suivant

var canShu = "x, y";

var fangfati = "var sum; sum = x + y; return sum;";

var add4 = nouvelle fonction (cansu, fangfati);

alerte (add4 (5,3));

Variables mondiales et locales de JS

** Variable globale: définissez une variable dans la balise de script, qui peut être utilisée dans la partie JS de la page

- Utilisez en dehors de la méthode, à l'intérieur de la méthode, utilisez dans une autre balise de script

** Variable locale: définissez une variable à l'intérieur d'une méthode et ne peut être utilisée que dans la méthode.

- Il ne peut être utilisé qu'à l'intérieur de la méthode. Si cette variable est appelée en dehors de la méthode, une erreur sera affichée

--ie est livré avec un outil de débogage. Dans la version de IE8 ou supérieure, F12 sur le clavier, et une barre apparaît en bas de la page pour voir l'erreur lorsque vous regardez la console.

Où devrait être placé les balises de script

** Il est recommandé de mettre des balises de script derrière </body>

** S'il y a une exigence maintenant:

- Dans JS, vous devez obtenir la valeur en entrée. Si vous mettez la balise de script dans la tête, il y aura des problèmes

- L'analyse de HTML est analysée de haut en bas. La balise de script est placée dans la tête et prend directement la valeur d'entrée. Parce que la page n'a pas encore analysé la ligne d'entrée, elle ne pourra certainement pas l'obtenir.

La surcharge JS JS n'a pas de surcharge, mais elle peut être simulée et implémentée.

Exemple: fonction add11 (a, b) {

retourner a + b;

}

fonction add11 (a, b, c) {

retourner a + b + c;

}

fonction add11 (a, b, c, d) {

retourner a + b + c + d;

}

alerte (add11 (2,2)); // nan

alerte (add11 (2,2,3)); // nan

alerte (add11 (2,2,4,5)); // 13

Objet de chaîne de JS

** Créer un objet de chaîne var str = "ABC ';

** Méthodes et propriétés (document)

- Attribute Longueur: longueur de la chaîne

--méthode

1) Méthodes liées à HTML

- Bold (): Bold FontColor (): Définissez la couleur de la chaîne Fontize (): définissez la taille du lien de police (): Affichez la chaîne comme un hyperlien

2) Méthodes similaires à Java

--Concat (): Connectez la chaîne charat (): renvoyez l'index de chaîne (): renvoyez la position de la chaîne de la chaîne Split (): tranche la chaîne dans un tableau remplacer ("", ""): remplacer le caractère de la chaîne à deux paramètres: le premier paramètre est le caractère d'origine, et le deuxième paramètre est le caractère à remplacer par substr (5,3). Commencez par le cinquième bit et interceptez trois caractères sous-chaîne à l'envers (3,5) commencent du troisième bit, y compris le troisième bit à la cinquième bit, à l'exclusion du cinquième bit [3,5)

Objet de tableau pour js

** Trois façons de créer un tableau

1) var arr1 = [1,2,3];

2) var arr1 = nouveau tableau (3); // la longueur est trois

3) var arr1 = nouveau tableau (1,2,3); // l'élément est 1,2,3

var arr = []; // Créer un tableau vide

** Longueur d'attribut: afficher la longueur du tableau

**méthode

concat (); rejoindre(); divisez le tableau en fonction des caractères spécifiés push (); Ajoutez des éléments à la fin du tableau, renvoyez la nouvelle longueur du tableau ** Si le tableau ajouté est un tableau, ajoutez le tableau en tant que chaîne entière pop (); Supprimer et retourner le dernier élément du tableau Reverse (); inverser l'ordre des éléments dans le tableau

Date Objet de JS

** Obtenez l'heure actuelle en Java

Date de date = new Date ();

// format // tolocalestring ()

** Obtenez l'heure actuelle dans JS

var date = new Date ();

// Convertir au format coutumier Date.tolocalestring ();

Fonctionnement mathématique mathématique de JS

** Tout l'intérieur est des méthodes statiques, vous pouvez utiliser les mathématiques. méthode () directement lorsque vous l'utilisez;

Fonctions globales de JS

** Parce qu'il n'appartient à aucun objet, écrivez le nom directement pour l'utiliser

** eval (); Exécuter le code JS (si la chaîne est un code JS, utilisez la méthode pour l'exécuter directement)

- var str = "alert ('1234');";

// alerte (str); // alert ('1234');

eval (str); // 1234

** .....

Surcharge des fonctions JS Qu'est-ce que la surcharge? Le nom de la méthode est le même, les paramètres sont différents

* JS n'a pas de surcharge de fonctions, et seule la dernière méthode sera appelée, mais la surcharge peut être simulée d'autres manières. La fonction JS enregistre les paramètres passés dans le tableau des arguments. Vous pouvez utiliser le jugement de la durée du tableau des arguments pour retourner différents résultats de traitement en conséquence.

Simuler la mise en œuvre du code d'effet de rechargement:

fonction add1 () {

if (arguments.length == 2) {

Arguments de retour [0] + Arguments [1];

} else if (arguments.length == 3) {

Return Arguments [0] + Arguments [1] + Arguments [2];

} else if (arguments.length == 4) {

Return Arguments [0] + Arguments [1] + Arguments [2] + Arguments [3];

} autre {

retour 0;

}

// Appel

alerte (add1 (1,2)); // 3

alerte (add1 (1,2,3)); // 6

alerte (add1 (1,2,3,4)); // 10

alerte (add1 (1,2,3,4,5)); // 0

Objet JS Bom

** Bom: Modèle d'objet Broswer: modèle d'objet du navigateur

** Quels sont les objets?

- Navigator: Obtenez des informations sur le client (informations du navigateur)

- Écran: obtenir des informations d'écran

- Emplacement: l'adresse URL demandée

*** Attribut HREF

1) Obtenez l'adresse URL demandée

--Document.Write (location.href);

2) Définissez l'adresse URL

- Un bouton est placé sur la page et un événement est lié au bouton. Lorsque vous cliquez sur ce bouton, la page peut passer à une autre page

<body>

fonction href1 () {

// alert ("aaaa");

location.href = "http://www.baidu.com";

}

</cript>

</docy>

- Histoire: l'histoire de l'URL demandée

- Créez trois pages (simulez l'effet de l'histoire de haut en bas)

1) Créez une page a.html et écrivez un hyperlien vers B.Html

2) Créez un hyperlien B.HTML à C.HTML

3) Créer C.HTML

- à la page précédente visitée

History.back ();

Histoire, Go (-1);

- Allez à la page suivante que vous avez visitée

History.Forward ();

History.go (1);

- Fenêtre (maîtrise de clé) Objet de niveau supérieur de l'objet Window (tous les objets Bom sont opérés dans la fenêtre)

**méthode

- Window.Alert (); L'abréviation est: alert (); Une fenêtre apparaît sur la page pour afficher le contenu

- Confirmer ("Afficher le contenu du message"); La boîte d'invite de confirmation a la valeur de retour true et false

-- rapide(); La boîte de dialogue d'entrée (peu de gens sont utilisés maintenant), a deux paramètres: afficher le contenu et la valeur par défaut

- Ouvrir ("Adresse d'URL", "", "fonctionnalités de fenêtre, telles que la largeur et la hauteur de la fenêtre"); Ouvrez une nouvelle fenêtre

-- fermer(); Fenêtre de fermeture (la compatibilité du navigateur est relativement médiocre)

- faire des minuteries

*** setInterval ("JS Code", millisecondes); window.setInterval ("alert ('123');", 3000); Indique que la méthode d'alerte est exécutée toutes les trois secondes

*** setTimeout ("JS Code", millisecondes); signifie qu'il est exécuté après des millisecondes, mais il ne sera exécuté qu'une seule fois.

*** ClearInterval (); Effacer la minuterie définie par setInterval

- var id1 = setInterval ("alert ('123');", 3000);

ClearInterval (id1);

*** cleartimeout (); Effacer la minuterie settimeout

Objet JS DOM

** DOM: modèle d'objet de document: type d'objet document

** Document: Document hypertexte (document tagué hypertexte) HTML, XML

** Objet: Propriétés et méthodes fournies

** Modèle: utilisez des propriétés et des méthodes pour manipuler des documents étiquetés hypertextes

*** Vous pouvez utiliser les objets fournis dans le DOM dans JS, utiliser les propriétés et les méthodes de ces objets pour fonctionner sur des documents de balisage.

*** Pour fonctionner sur un document tagué, vous devez d'abord résumer tout le contenu du document tagué dans des objets

- Vous devez encapsuler les balises, les attributs et le contenu texte dans le HTML dans les objets

*** pour fonctionner sur des documents de marqueur, analyser les documents de marqueur

*** Processus d'analyse: Selon la structure hiérarchique du HTML, une structure d'arbre sera allouée en mémoire, et chaque partie du HTML doit être encapsulée dans un objet

* Un seul nœud racine

Il peut y avoir plusieurs nœuds enfants sous le nœud racine. Les nœuds sans nœuds enfants sont appelés nœuds de feuilles

- Objet de document: l'ensemble du document HTML

- Objet d'élément: objet TAG

- Objet d'attribut

- Objet texte

** Objet de nœud nœud: est l'objet parent de ces objets

DHTML: C'est l'abréviation de nombreuses technologies

** HTML: encapsuler les données

** CSS: utilisez des attributs et des valeurs d'attribut au style

** DOM: Faire fonctionner des documents HTML (documents marqués)

** javascript: se réfère spécifiquement à l'instruction de syntaxe de JS (ECMAScript)

L'objet de document représente l'intégralité du document

** Méthodes courantes

- Méthode écrite (): 1) Variables de sortie à la page 2) Sortir le code HTML à la page

- getElementById (); signifie obtenir un élément (étiquette) via ID

<body>

// Utilisez GetElementById pour obtenir l'objet de balise d'entrée

var input1 = document.getElementById ("nameId");

// Obtenez la valeur de la valeur en entrée

alerte (input1.value);

// définir une valeur dans l'entrée

input1.value = "bbbbbbbb";

</cript>

</docy>

- getElementsByName (); L'attribut de nom de la balise est digne de la balise, et le retour est une collection (tableau)

<body>

var input1 = document.getElementsByName ("name1"); // Le paramètre passé est la valeur du nom dans l'étiquette

pour (var i = 0; i <input1.length; i ++) {// via la traversée, obtenez la valeur spécifique dans chaque balise

var entrées = input1 [i]; // chaque boucle obtient l'objet d'entrée et attribue la valeur aux entrées

alerte (entrées.Value); // Obtenez la valeur de la valeur dans chaque balise d'entrée

}

</cript>

</docy>

- getElementsByTagName ("Nom of Tag"); Renvoie une collection (tableau)

<body>

var inputs1 = document.getElementsByTagName ("input"); // Le paramètre passé est le nom de la balise

pour (var i = 0; i <inputs1.length; i ++) {

var input1 = inputs1 [i];

alerte (input1.value);

}

</cript>

</docy>

**** Remarque: il n'y a qu'une seule étiquette, et cette étiquette ne peut être obtenue qu'à l'aide du nom. À l'heure actuelle, l'utilisation de GetElementsByName renvoie un tableau, mais maintenant il n'y a qu'un seul élément. À l'heure actuelle, il n'est pas nécessaire de traverser, mais vous pouvez obtenir directement la valeur via l'indice du tableau.

var input1 = document.getElementsByName ("name1") [0];

alerte (input1.value);

Case: cas pop-up de fenêtre

** Processus d'implémentation: 1) Vous devez créer une page: deux éléments d'entrée et un bouton, et il y a un événement sur le bouton, qui est une nouvelle fenêtre contextuelle

2) Créez une page contextuelle: chaque ligne de la table a un bouton, un numéro et un nom; Il y a un événement sur le bouton: attribuez le numéro et le nom actuels à la position correspondante de la première page.

** Opener de l'opération de pages: vous pouvez obtenir la fenêtre qui crée cette fenêtre, c'est-à-dire que vous pouvez obtenir la fenêtre parent

Case: ajoutez le nœud à la fin

1) Créer une étiquette Li

2) Créer du texte

3) Ajouter le texte à Li

4) Ajouter Li à UL

<body>

</ul> <br/>

fonction add1 () {

// Obtenez la balise UL

var ul1 = document.getElementById ("ulid");

// Créer des balises

var li1 = document.CreateElement ("li");

// Créer du texte

var tex1 = document.CreateTextNode ("4444");

// Ajouter du texte à Li

Li1.ApendChild (Tex1);

// Ajouter Li à UL

UL1.APPENDCHILD (LI1);

}

</cript>

</docy>

Objet d'élément (objet Element): Pour fonctionner l'élément, vous devez d'abord obtenir un élément en utilisant la méthode correspondante dans le document pour l'obtenir.

**méthode

**** Obtenez la valeur dans l'attribut getAttribute ("Nom d'attribut");

**** Définissez la valeur de l'attribut setAttribute (nom, valeur);

**** Supprimez l'attribut RemoveAtTribute ("Nom d'attribut"); la valeur ne peut pas être supprimée

// Obtenez d'abord la balise d'entrée

var input1 = document.getElementById ("inputId");

// alerte (input1.value);

alert (input1.getAttribute ("valeur")); // Obtenez la valeur dans l'attribut

alert (input1.getAttribute ("classe"));

input1.setAttribute ("classe", "haha"); // définir la valeur de l'attribut

alert (input1.getAttribute ("classe"));

input1.reMoveAtTribute ("nom");

</cript>

** Je veux obtenir le sous-titre sous la balise

** Utilisez l'attribut childNodes, mais cet attribut a une mauvaise compatibilité

** Le seul moyen efficace d'obtenir les balises sous la balise, utilisez la méthode GetelementsByTagName

<body>

<li> aaaaaa </li>

<li> BBBBBB </li>

<li> CCCCCCCC </li>

</ul>

<cript>

// Obtenez la balise UL

var ul1 = document.getElementById ("ulid1");

// Obtenez le sous-titre ci-dessous UL

// var lis = ul1.childnodes; // mauvaise compatibilité

// alerte (lis.length); // un peu afficher 3 un affichage 7

var lis = ul1.getElementsByTagName ("li");

alerte (lis.length);

</cript>

</docy>

Propriétés de l'objet nœud

** nodename

** NODETYPE

** nodevalue

** Lors de l'analyse de HTML à l'aide de DOM, les balises, les attributs et le texte dans le HTML doivent être encapsulés en objets

** La valeur correspondant au nœud de balise

NODETYPE: 1

NONENAME: Nom de la balise Caps, comme Span

nodevalue: null

** La valeur correspondant au nœud d'attribut

nodetype: 2

NODENAME: nom d'attribut

nodevalue: la valeur de la propriété

** La valeur correspondant au nœud de texte

nodetype: 3

nodename: #Text

nodevalue: contenu texte

** <body>

<span id = "SpanId"> Contenu texte </span>

// Obtenez l'objet TAG

var span1 = document.getElementById ("SpanId");

// alerte (span1.nodeType); // 1

// alert (span1.nodeName); // SAPN

// alerte (span1.nodevalue); // nul

// Attributs

var id1 = span1.getAttributeNode ("id");

// alert (id1.nodeType); // 2

// alert(id1.nodeName); //identifiant

// alert(id1.nodeValue); // spanid

//获取文本

var text1 = span1.getfirstChild;

// alert(text1.nodeType); // 3

// alert(text1.nodeName); //#texte

// alert(text1.nodeValue); // 文本内容

</cript>

</docy>

Node对象的属性二

<ul>

<li>aaaaaa</li>

<li>bbbbb</li>

</ul>

**父节点ul是li的父节点

*** parentNode ：父节点

**子节点li是ul的子节点

*** childNodes : 得到所有子节点，但是兼容性很差

*** firstChild : 获取第一个子节点

*** lastChild : 获取最后一个子节点

**同辈节点li与li之间是同辈节点

**nextSibling : 返回一个给定节点的下一个兄弟节点

**previousSibling : 返回一个给定节点的上一个兄弟节点

<body>

<li id="li1">aaaaa</li>

<li id="li2">bbbbb</li>

<li id="li3">ccccc</li>

<li id="li4">ddddd</li>

</ul>

/* // 得到li1

var li1 = document.getElementById("li1");

// 得到ul

var ul1 = li1.parentNode;

alert(ul1.id); * /

/* // 获取ul的第一个子节点

// 得到ul

var ul1 = document.getElementById("ulid");

// 第一个子节点

var li1 = ul1.firstChild;

alert(li1.id);

var li4 = ul1.lastChild;

alert(li4.id); * /

//获取li的id是li3的上一个和下一个兄弟节点

var li3 = document.getElementById("li3");

var li4 = li3.nextSibling;

var li2 = li3.previousSibling;

alert(li4.id);

alert(li2.id);

</cript>

</docy>

操作dom树

** appendChild方法：

*** 添加子节点到末尾

*** 特点：类似于剪切粘贴的效果

** insertBefore(newNode,oldNode);

*** 在某个节点之前插入一个新的节点通过父节点添加

*** 两个参数1）要插入的节点2)在谁之前插入

*** 插入一个节点，节点不存在，创建

1）创建标签

2）创建文本

3）把文本添加到标签下面

**代码实现：（在<li>貂蝉</li>之前添加<li>董小宛</li>）

<body>

</ul>

// 在<li>貂蝉</li>之前添加<li>董小宛</li>

function insert1() {

// 1、获取到li13标签

var li13 = document.getElementById("li13");

// 2、创建li

var li15 = document.createElement("li");

// 3、创建文本

var text15 = document.createTextNode("董小宛");

// 4、把文本添加到li下面

li15.appendChild(text15);

// 5、获取ul

var ul21 = document.getElementById("ulid21");

// 6、把li添加到ul下面（在<li>貂蝉</li>之前添加<li>董小宛</li>）

ul21.insertBefore(li15,li13);

}

</cript>

</docy>

**removeChild方法：删除节点

***通过父节点删除，不能自己删除自己

**代码实现: 删除<li id="li24">杨玉环</li>

<body>

</ul>

// 删除<li id="li24">杨玉环</li>

function remove1() {

// 1、获取到li24标签

var li24 = document.getElementById("li24");

// 2、获取父节点ul标签

// 有两种方式1）通过id获取2）通过属性parentNode获取

var ul31 = document.getElementById("ulid31");

// 3、执行删除（通过父节点删除）

ul31.removeChild(li24);

}

</cript>

</docy>

** replaceChild(newNode,oldNode); 替换节点

***两个参数：1）新的节点（替换成的节点） 2）旧的节点（被替换的节点）

***不能自己替换自己，通过父节点替换

** cloneNode(boolean) : 复制节点

**代码实现：把ul列表复制到另外一个div里面

<body>

</ul>

</div>

// 把ul列表复制到另外一个div里面

/ *

1、获取到ul

2、执行复制方法cloneNode方法复制参数true

3、把复制之后的内容放到div里面去

** 获取到div

** appendChild方法

* /

function clone1() {

// 1、获取ul

var ul41 = document.getElementById("ulid41");

// 2、复制ul，放到类似剪切板里面

var ulcopy = ul41.cloneNode(true);

// 3、获取到div

var divv = document.getElementById("divv");

// 4、把副本放到div里面去

divv.appendChild(ulcopy);

}

</cript>

</docy>

**操作dom总结：

**获取节点使用方法

getElementById() : 通过节点的id属性，查找对应节点

getElementsByName() : 通过节点的name属性，查找对应节点

getElementsByTagName() : 通过节点名称，查找对应节点

**插入节点的方法

insertBefore方法: 在某个节点之前插入

appendChild方法: 在末尾添加，类似于剪贴粘贴

**删除节点的方法

removeChild方法: 通过父节点删除

**替换节点的方法

replaceChild方法: 通过父节点替换

innerHTML属性（重点）

** 这个属性不是dom的组成部分，但是大多数浏览器都支持的属性

** 第一个作用：获取文本内容

var span1 = document.getElementById("sid");

alert(span1.innerHTML);

** 第二个作用：向标签里面设置内容（可以是html代码）

<body>

</div>

// 获取span标签

var span1 = document.getElementById("sid");

//alert(span1.innerHTML); // 测试文本

// 向div里面设置内容<h1>AAAAA</h1>

// 获取div

var div11 = document.getElementById("div11");

div11.innerHTML = "<h1>AAAAA</h1>"; // 设置内容

</cript>

</docy>

** 练习：向div里面添加一个表格

var tab = "<table border='1'><tr><td>aaaaa</td></tr><tr><td>bbbb</td></tr></table>";

div11.innerHTML = tab;

案例：动态显示时间

** 得到当前时间

var date = new Date();

var d1 = date.toLocaleString();

** 需要让页面每一秒获取时间

setInterval方法定时器

** 显示到页面上

每一秒向div里面写一次时间使用innerHTML属性

** 代码实现动态显示时间

<body>

</div>

function getD1() {

// 当前时间

var date = new Date();

// 格式化

var d1 = date.toLocaleString();

// 获取div

var div1 = document.getElementById("times");

div1.innerHTML = d1;

}

// 使用定时器实现每一秒写一次时间

setInterval("getD1();",1000);

</cript>

</docy>

案例：全选练习

** 使用复选框上面一个属性判断是否选中

** checked 属性

** checked = true; 选中

** checked = false; 未选中

** 创建一个页面

** 复选框和按钮

***四个复选框表示爱好

***还有一个复选框操作全选和全不选有一个事件

***三个按钮全选全不选反选每个按键都分别有事件

**代码实现

<body>

<input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/全不选

<br/>

<input type="checkbox" name="love"/>篮球

<input type="checkbox" name="love"/>排球

<input type="checkbox" name="love"/>羽毛球

<input type="checkbox" name="love"/>乒乓球

<br/>

// 实现全选操作

function selAll() {

/ *

1、获取要操作的复选框使用getElementsByName();

2、返回的是数组

**属性checked 判断复选框是否选中

** checked = true; // 表示选中

** checked = false; // 表示未选中

**遍历数组，得到的是每一个checkbox

** 把每一个checkbox属性设置为true 即checked = true;

* /

// 获取要操作的复选框

var loves = document.getElementsByName("love");

// 遍历数组，得到每一个复选框

for(var i=0;i<loves.length;i++) {

var love1 = loves[i]; // 得到每一个复选框

love1.checked = true; // 设置属性为true

}

// 实现全不选操作

function selNo() {

/ *

1、获取到要操作的复选框

2、返回的是数组，遍历数组

3、得到每一个复选框

4、设置复选框的属性checked = false;

* /

// 获取要操作的复选框

var loves = document.getElementsByName("love");

// 遍历数组，得到每一个复选框

for(var i=0;i<loves.length;i++) {

var love1 = loves[i]; // 得到每一个复选框

love1.checked = false; // 设置属性为true

}

function selOther() { // 实现反选

var loves = document.getElementsByName("love");

// 遍历数组，得到每一个复选框

for(var i=0;i<loves.length;i++) {

var love1 = loves[i]; // 得到每一个复选框

if(love1.checked == true) {

love1.checked = false;

}

autre {

love1.checked = true;

}

function selAllNo() { // 一个多选框实现全选全不选切换

/ *

1、得到上边的复选框通过id来获取

2、判断该复选框是否选中if条件checked == true

3、如果是选中，下面是全选

4、如果不是选中，下面是全不选

* /

var box1 = document.getElementById("boxid");

if(box1.checked == true) {

selAll();

}

autre {

selNo();

}

</cript>

</docy>

案例：下拉列表左右选择

** 下拉选择框

</lect>

** 创建一个页面

** 两个下拉框设置属性multiple

** 四个按钮，都有事件

** 代码实现：

<body>

<div>

</lect>

</div>

<div>

</div>

<div>

<option>AAAAAAAA</option>

<option>BBBBBBBB</option>

</lect>

</div>

<div>

</div>

// 实现选中添加到右边

function selToRight() {

/ *

1、获取select1 里面的option

* 使用getElementsByTagName(); 返回的是数组

* 遍历数组，得到每一个option

2、判断option是否被选中

* 属性selected ，判断是否被选中

** selected = true; 选中

** selected = false;未选中

3、如果选中，把选择的添加到右边去

4、得到select2

5、添加选择的部分

* appendChild 方法

* /

// 获取到select1 里面的option

// 得到select1

var select1 = document.getElementById("select1");

// 得到select2

var select2 = document.getElementById("select2");

// 得到option

var options1 = select1.getElementsByTagName("option");

// 遍历数组

for(var i=0;i<options1.length;i++) {

// 第一次循环i=0 length:5

// 第二次循环i=1 length:4

// 第三次循环i=2 length:3

// 再往后就不满足条件了后边的都循环不到了

var option1 = options1[i]; // 得到每一个option对象

// 判断是否被选中

if(option1.selected == true) {

// 添加到select2 里面

select2.appendChild(option1);

je--; // Pay attention to this point, if you don’t write it, you will have problems

}

// 全部添加到右边

function allToRight() {

var select2 = document.getElementById("select2");

var select1 = document.getElementById("select1");

var options1 = select1.getElementsByTagName("option");

for(var i=0;i<options1.length;i++) {

var option1 = options1[i];

select2.appendChild(option1);

je--;

}

// 右边的添加到左边的操作类似

</cript>

</docy>

案例：下拉框联动效果(省市联动)

** 创建一个页面，有两个下拉选择框

** 在第一个下拉框里面有一个事件：改变事件onchange事件

** 方法add1(this.value); 表示当前改变的option 里面的value值

** 创建一个二维数组，存储数据

** 每个数组中第一个元素是国家名称，后面的元素是国家里面的城市

**代码实现：

<body>

</lect>

</lect>

// 创建一个数组存储数据

// 使用二维数组

var arr = new Array(4);

arr[0] = ["中国","南京","抚州","临洮","日喀则","哈密"];

arr[1] = ["美国","华盛顿","底特律","休斯顿","纽约"];

arr[2] = ["德国","慕尼黑","柏林","法兰克福","狼堡"];

arr[3] = ["日本","东京","北海道","大阪","广岛","长崎"];

function add1(val) {

/* 实现步骤：

1、遍历二维数组

2、得到的也是一个数组（国家对应关系）

3、拿到数组中的第一个值和传递过来开的值作比较

4、如果相同，获取到第一个值后面的元素

5、得到city 的select

6、添加过去使用appendChild 方法

** 需要创建option （三步操作）

* /

// 由于每次都要向city里面添加option，第二次添加，前边第一次的会保留，追加

// 所以每次添加之前，判断一下city里面是否有option，如果有，删除

// 获取city 的select

var city1 = document.getElementById("cityid");

// 得到city 里面的option

var options1 = city1.getElementsByTagName("option");

// 遍历数组

for(var k=0;k<options1.length;k++) {

// 得到每一个option

var op = options1[k];

// 删除这个option 通过父节点删除

city1.removeChild(op);

k--;// 每次删除长度都会减一k都会增加一不执行此操作会出错

}

// 遍历二维数组

for(var i=0;i<arr.length;i++) {

// 得到二维数组里面的每一个数组

var arr1 = arr[i];

// 得到遍历之后的数组的第一个值

var firstvalue = arr1[0];

// 判断传递过来的值和第一个值是否相同

if(firstvalue == val) { // 相同

// 得到第一个值后面的元素

// 遍历数组arr1

for(var j=1;j<arr1.length;j++) {

var value1 = arr1[j]; // 得到国家之后城市的名称

// alert(value1);

// 创建option

var option1 = document.createElement("option");

// 创建文本

var text1 = document.createTextNode(value1);

// 把文本添加到option里面

option1.appendChild(text1);

// 添加值到city 的select 里面

city1.appendChild(option1);

}

</cript>

</docy>

以上这篇JavaWeb学习笔记分享(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。