カスタムリスト
<dl> </dl>：リストの範囲を表します
**内部<dt> </dt>：上部コンテンツ
**内部<dd> </dd>：コンテンツが低い
注文リスト
<ol> </ol>：注文リストの範囲
-Attribute Type：ソートメソッド、1（デフォルト）、a、i、
** OLタグ<li>特定のコンテンツ</li>
順序付けられていないリスト
<ul> </ul>：順序付けられていないリストの範囲
- アトリブタイプ：円（中空円）、ディスク（デフォルトの固体円）、正方形（ソリッドスクエア）
** ULタグ<li>特定のコンテンツ</li>
画像タグ
- アトリビュート：SRC、幅、高さ、ALT（写真に表示されるテキスト、マウスを写真に移動し、しばらくの間滞在して、画像が誤って表示されたときに表示されるテキストを表示しますが、一部のブラウザはそれを表示しません。効果はありません）
** <img src = "picture of picture"/>
パスの紹介
*カテゴリ：2つのカテゴリ
**絶対パスEG。 http://www.baidu.com/b.jpg
*** 3つの相対パス別のファイルに対する1つのファイルの位置
-HTMLファイルと画像は同じパス（ディレクトリ）にあり、ファイル名は直接書き込むことができます
- HTMLファイルで、IMG/A.JPGと同じパスの下のIMGフォルダーの下のA.JPGファイルを使用します
** D：/htmlstudy/code/4.html
** D：/htmlstudy/code/img/a.jpg
- 写真はHTMLファイルの上部ディレクトリにあります。この時点で、画像使用方法：../c.png ../上部パスを表します
ハイパーリンクタグ
**リソースをリンクします
- <a href = "リソースへのリンクへのパス">ページに表示されるコンテンツ</a>
** HREF：リンクされたリソースのアドレス
**ターゲット：開く方法を設定します。デフォルトは現在のページで開くことです
-_空白：新しいウィンドウで開きます
-_ self：デフォルトページを開きます
- <a href = "＃">リンクタイトル</a>：ハイパーリンクがページにジャンプする必要がない場合は、hrefに＃（プレースホルダー）を追加するだけです
**ロケーションリソース
- リソースを見つけたい場合：場所を定義します
<a name = "top"> top </a>
- この場所へのバック
<a href = "＃top">トップに戻る</a>
-is-is-outputタグ：入力する必要がある<pre>コンテンツas-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-i s-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
テーブルタグ
*関数：データをフォーマットしてデータをより明確にすることができます
*属性ボーダー（テーブルラインの厚さ）ボーダーカラー（テーブルラインの色）セルペーシング（セル距離）幅の高さ
*<表> </表>：テーブルの範囲を示します
**テーブルでは、線<tr> </tr>を意味します
- アライメントアライメントを設定します：左の中央の左
*** TRでは、それは連続してセルを示します<td> </td>
** THを使用することもセルを表すことができます：それは中心と太字を達成することができます
*テーブルのタイトルはテーブルに配置されています<キャプション> </キャプション>
*操作スキル：
**最初にカウントする行はいくつあり、各行にいくつのセルがあるかを数えます
*セルをマージします
** rowspan：交差列（垂直マージ）
<td rowspan = "3" align = "center"> 13 </td>
** colspan：クロスコラム（水平マージ）
<td colspan = "3" align = "center">フォームエクササイズ</td>
フォームタグ
*たとえば、kaixin.comを登録する場合、Kaixin.comのサーバーにデータを送信できます。このプロセスは、フォームタグを使用して実装できます。
* <form> </form>：フォームスコープを定義します
*財産：
**アクション：提出されたアドレス、現在のページへのデフォルトの送信
**方法：フォーム送信方法
- 一般的に使用される2つのものがあります：取得と投稿、これはデフォルトのGETリクエストです
** GetとPostの違い
1）Get Request Address Barには提出されたデータが搭載され、投稿はそれを運びません（データはリクエスト本文にあります）
2）リクエストを取得するセキュリティレベルは低く、投稿が高くなります
3）Get Requestのデータサイズに制限がありますが、投稿に制限はありません
** enctype：このプロパティはリクエストには必要ありません。ファイルをアップロードするときにこのプロパティを設定する必要があります。
**入力アイテム：コンテンツを入力または選択できる部分
- ほとんどの入力項目は<input type = "入力アイテムタイプ"/>で使用できます
**********入力項目では、名前属性が必要です
***通常の入力：<入力型= "text"/>
***パスワード入力項目：<入力タイプ= "パスワード"/>
***単一選択入力：<入力型= "Radio"/>
- 内部にアトリブ名が必要です
- 名前の属性値は同じでなければなりません
- 値値が必要です
****デフォルトの選択されたプロパティを実装します
*** checked = "checked"
***入力を確認：<入力型= "チェックボックス"/>
**属性名は内部です
**名前属性値は同じでなければなりません
**値値が必要です
****デフォルトの選択されたプロパティを実装します
----チェック= "checked"
***ファイル入力項目：<入力タイプ= "ファイル"/>
***プルダウン入力アイテム（入力タグにはありません）
<name = "Birth">を選択します
<オプション値= "0"> </option>を選択してください
<オプション値= "1991"> 1991 </option>
<オプション値= "1992"> 1992 </option>
<オプション値= "1993"> 1993 </option>
</select>
****デフォルトの選択されたプロパティを実装します
----選択= "selected"
***テキストフィールド（など：アカウントを登録するときに個人情報のプロフィールについてボックスに入力）
<textarea cols = "5" rows = "20"> </textarea>
***非表示アイテム（ページに表示されていませんが、HTMLコードに存在します）
<入力型= "hidden"/>
***ボタンを送信します
<入力型= "submit"/>
<入力型= "submit" value = "ボタンタイトル"/>
- 提出前のアドレス：c：/users/happydog/desktop/index.html
**名前属性が入力項目に記述されている場合
---file：/// c：/users/happydog/desktop/index.html？電話= 123123＆pwd = 12321312＆sex = man＆love = y＆love = pp＆birth = 1992＆tex = 1231245
**？入力アイテム名の値=入力の値＆
**パラメーターは、キー値形式に似ています
***送信する画像を使用します（クリック）
<入力型= "画像" src = "イメージパス"/>
***リセットボタン：入力アイテムの初期状態に戻る
<入力型= "reset"/>
<input type = "reset" value = "ボタンタイトル"/>
***通常のボタン（JSで使用）
<入力型= "button" value = ""/>
ケース：フォームタグを使用して登録ページを実装します
テーブルセルの内容が空の場合、プレースホルダー（（脱出されたスペース））が一般的に満たされます。
HTMLでの他の一般的なタグの使用
** B（BOLD）S（ストライクライン）U（下線）I（イタリック）PRE（出力のASの出力）Sub（subscript）Sup（SuperScript）Div（Line Lap）Span（1つのラインに表示）P（パラグラフラベル）
HTMLヘッダータグの使用
** HTML 2つの部分が頭と体を構成します
**頭のラベルはヘッドラベルです
**タイトルタグ：タグに表示されるコンテンツを示します
** <Meta>タグ：設定ページのいくつかの関連コンテンツ
- <Meta name = "keywords" content = "" />
- <Meta http-equiv = "reffery" content = "10; url = test_form.html" />指定されたページに定期的に速度
**ベースタグ：ハイパーリンクの基本設定を設定します
- ハイパーリンクの開く方法は均一に設定できます<ベースターゲット= "_ blank" />
**リンクタグ：外部ファイルを紹介します
フレームタグの使用
** <フレームセット>
**行：列ごとに分割します
<フレームセットrows = "80、*"> 2つの部分、トップ80、ボトム80に分割
** cols：列で割る
<フレームセットcols = "80、*"> 80で左と右、左と右にいつでも2つの部分に分割します
** <frame>表示された特定のページ
** <フレーム名= "lower_left" src = "b.html">
*フレームタグを使用する場合、頭と体に書くことはできません。フレームタグを使用する場合、体を取り外して頭の外側に書く必要があります。
*左側のページのハイパーリンクがあり、右側のページにコンテンツを表示したい場合は、ターゲットプロパティをハイパーリンクに設定し、ターゲットの値をフレーム内の名前に設定できます。
** <a href = "http://www.baidu.com"ターゲット= "right"> baidu </a> <br/>
<フレームセットrows = "80、*">
<frame name = "top" src = "a.html">
<フレームセットcols = "120、*">
<frame name = "left" src = "b.html">
<フレーム名= "right" src = "http://www.baidu.com">
</frameset>
</frameset>
知識の概要
1）HTML操作のアイデア：タグを使用して操作するデータをラップし、タグの属性値を変更してタグのデータスタイルを変更します。
2）フォントタグ属性：サイズ値範囲1〜7色：16進数#ffffff
3）タイトルタグ<h1> </h1> ...... <h6> </h6>：H1からH6まで、フォントはますます小さくなり、ラインが自動的に変更されます
4）コメント
CSSの紹介
** CSS：カスケードスタイルシート
**レイヤー：レイヤーごと
** StyleSheet：多くの属性と属性値
**ページの表示を改善します
** CSSはWebページのコンテンツと表示スタイルを分離し、表示機能を改善します
CSSとHTMLを結合する方法（組み合わせた4つの方法）
1）各HTMLタグにプロパティスタイルがあり、CSSとHTMLを組み合わせる
- <div style = "background-color：red; color：green;" id = "">天国の道は過剰を減らし、不足を補う。したがって、空虚は現実を打ち負かし、不十分なものは過剰を克服します。 </div>
2）HTMLのタグを使用して<style>タグを実装し、頭に書き込みます
- <style type = "text/css">
CSSコード;
</style>
---コード実装<head>
<style type = "text/css">
div {
背景色：青;
色：赤;
}
</style>
</head>
<body>
<div id = "">
天国の道は過剰を減らし、不足を補います。したがって、空虚は現実を克服し、不足の欠如は過剰を克服します。
</div>
</body>
3）スタイルタグでステートメントを使用します
@import URL（CSSファイルのパス）;
- ステップ1：CSSファイルを作成します
--- <style type = "text/css">
@import url（div.css）;
</style>
4）ヘッダータグリンクを使用して外部CSSファイルを導入し、<head> </head>に配置します
- ステップ1：CSSファイルを作成します
- <link rel = "styleSheet" type = "text/css" href = "css file"/>のパス
**** 3番目の組み合わせ方法の欠点：一部のブラウザでは機能せず、4番目の方法が一般的に使用されます
****優先度（一般）
上から下へ、内側から外側へ、優先度が低いものから高へ。
ポストロードの優先順位は高いです
****フォーマット：selector name {属性名：属性値;属性名：属性値; ......}
CSSの基本的なセレクター（3つのタイプ）
**そのタグでデータを操作します
1）タグセレクターdiv {cssコード}
- ラベル名をセレクターの名前として使用します
<head>
<style type = "text/css">
div {
背景色：青;
色：赤;
}
</style>
</head>
<body>
<div> aaaaa </div>
</body>
2）クラスセレクター。名前 {}
**各HTMLタグにはプロパティクラスがあります
** <head>
<style type = "text/css">
div.test {
背景色：青;
色：赤;
}
p.test {
背景色：青;
色：赤;
}
それは次のように省略することができます
。テスト{
背景色：青;
色：赤;
}
</style>
</head>
** <body>
<div> aaaaa </div>
<p> bbbbbbbbbbb </p>
</body>
3）id selector #name {}
**各HTMLタグには属性IDがあります
- <div id = "test"> ccccccccccccc </div>
- <head>
<style type = "text/css">
div＃test {
背景色：青;
色：赤;
}
P＃テスト{
背景色：青;
色：赤;
}
それは次のように省略することができます
＃テスト {
背景色：青;
色：赤;
}
</style>
</head>
- <body>
<div id = "test"> aaaaa </div>
<p id = "test"> bbbbbbbbbbb </p>
</body>
**優先スタイル> IDセレクター>クラスセレクター>タグセレクター
CSS拡張セレクター（学習）
1）アソシエーションセレクター用のネストされたラベルのスタイルの設定
** <div> <p> wwwwwwww </p> </div>
** DivタグにPタグのスタイルを設定し、ネストされたタグのスタイルを設定します
- <head>
<style type = "text/css">
div p {
背景色：青;
色：赤;
}
</style>
</head>
- <body>
<div> <p> wwwwwwww </p> </div>
<p> aaaaa </p>
</body>
2）セレクターを組み合わせて、同じスタイルを設定します
** <div> 1111 </div>
<p> 2222 </p>
** DivとPタグを同じスタイルに設定し、同じスタイルに異なるタグを設定します
- <head>
<style type = "text/css">
div、p {
背景色：青;
色：赤;
}
</style>
</head>
- <body>
<div> 1111 </div>
<p> 2222 </p>
</body>
3）擬似（クラス）要素セレクター
** CSSはいくつかの明確に定義されたスタイルを提供します。
**たとえば、ハイパーリンク
**ハイパーリンクのステータス
- 元の状態をクリックしてクリックした後
：リンク：ホバー：アクティブ：訪問
コード実装：
<head>
<style type = "text/css">
/*元の状態*/
A：link {
背景色：赤;
}
/*Hoom Status*/
A：ホバー{
背景色：緑;
}
/*[ステータス]をクリック*/
A：Active {
背景色：青;
}
/*クリック後のステータス*/
A：訪問{
背景色：灰色;
}
</style>
</head>
<body>
<a href = "http://www.baidu.com"> Baidu Webページへのリンクをクリックしてください</a>
</body>
CSSのボックスモデル（理解）データを操作するには、データをエリア（DIV）に配置する必要があります
1）国境の境界：統一された設定
別々に設定することもできます：上部ボーダートップ下：ボーダーボトム左：境界左右：境界線右
- <head>
<style type = "text/css">
div {
幅：200px;
高さ：100px;
ボーダー：2pxソリッドブルー;
}
＃div12 {
境界線：2pxダッシュイエロー。
}
</style>
</head>
- <body>
<div id = "div11"> aaaaaaaaaa </div>
<div id = "div12"> bbbbbbbbbb </div>
</body>
2）内側のマージンパディング：上、下、左、右側からコンテンツ間の距離を設定します
別々に設定することもできます：上、下、左と右
<head>
<style type = "text/css">
div {
幅：200px;
高さ：100px;
ボーダー：2pxソリッドブルー;
}
＃div21 {
パディング：20px;
}
＃div22 {
パディング左：30px;
}
</style>
</head>
<body>
<div id = "div21"> aaaaaaaaaa </div>
<div id = "div22"> bbbbbbbbbb </div>
</body>
3）マージン：Div間の距離を最も外側の4つの辺から設定します
また、別々に設定することもできます：上、下、左、右。 。 。
CSSのレイアウトフロート（理解）フロート：左右
CSSレイアウトの配置（理解）
*位置
**属性値：
- スタティック：デフォルト値、特別なポジショニングなし
- 絶対：
ドキュメントストリームからオブジェクトをドラッグし、左、右、上、下部、その他のプロパティを使用して絶対に見つけます
- 関係：オブジェクトはドキュメントストリームからドラッグされません。オブジェクトは積み重ねることはできませんが、左、右、上、下部などのプロパティに基づいて、通常のドキュメントストリームでオフセットされます。
ケース：画像とテキストが混在しています
**写真とテキストが一緒に表示されます
ケース：画像署名
JavaScriptの紹介：それは主にクライアントで使用されているオブジェクト駆動型スクリプト言語です
*オブジェクトベース：多くのオブジェクトが提供され、それらを直接使用できます
*イベント駆動型：HTMLはWebサイトの静的効果、JavaScriptの動的効果を作成します
*クライアント：特にブラウザを指します
* JSの機能：
1）インタラクティブ情報の動的な相互作用
2）セキュリティJSはローカルディスク上のファイルにアクセスできません
3）クロスプラットフォームJava、仮想マシン。 JSをサポートできるブラウザである限り、それらは実行できます
*JavaScriptとJavaの違い：2つの間に関係はありません
1）JavaはSun Company、現在はOracleです。 JSはNetscape Companyです
2）Javaはオブジェクト指向であり、JSはオブジェクトベースです
3）Javaは強くタイプされた言語であり、JSは弱く型付け言語です
- 例：int i = "10" in java;エラーが報告されます
-js：var i = 10; var i = "10";エラーは報告されていません
4）JSは実行するために解析するだけで、Javaは最初にByteCodeファイルにコンパイルしてから実行する必要があります。
*JS構成（3つの部分）：
1）ECMascript
-ECMA：欧州コンピューター協会
-js ecmaが主催した構文とステートメント...
2）BOM
-BROSWERオブジェクトモデル：ブラウザオブジェクトモデル
3）DOM
- ドキュメントオブジェクトモデル：ドキュメントオブジェクトモデル
JSとHTMLを結合する方法（2つのタイプ）
1）タグを使用<スクリプトタイプ= "text/javascript"> js code; </script>
2）スクリプトタグを使用して、外部JSファイルを導入する
-JSファイルを作成し、JSコードを書き込みます
- <script type = "text/javascript" src = "js path"> </script>
注：2番目のメソッドを使用する場合、スクリプトタグにJSコードを記述しないでください。実行されません。
JSのプリミティブタイプと宣言変数
*Javaの基本データ型：Byte Short int long float double char bolean
*JSは、キーワードvarを使用して変数を定義します
*JSのオリジナルタイプ（5）
- ストリング文字列var str = "abc";
-Number数値タイプvar m = 123;
-boolean true and false var flag = true;
-null var date = new date（）;
**オブジェクトへの参照を取得します。 nullとは、オブジェクト参照が空であることを意味し、オブジェクトへのすべての参照もオブジェクトです。
-Undifinedは変数を定義しますが、var aaを割り当てません。
* typeof（変数名）現在の変数のデータ型を表示
JSステートメント
** javaの判断（ "="は割り当てを意味します; "=="に等しい、判断を意味する）の声明。
** JSの声明
- 判断声明の場合
- スイッチ（a）{
ケース5：...
壊す;
ケース6：...
壊す;
デフォルト：...
...........
}
** LOOPステートメントの場合は、
-var i = 5;
while（i> 0）{
アラート（i）;
私 - ;
}
- -for（var i = 0; i <= 5; i ++）{
アラート（i）;
}
JSオペレーター
** JSは、整数と小数を区別しません
-Var J = 123;
アラート（J/1000*1000）;
** J/1000*1000 Javaの結果は0です
** JSでは、整数と小数、123/1000*1000 = 0.123*1000 = 123の区別はありません。
**文字列操作を追加および減算します
-var str = "123";
アラート（str + 1）; JavaとJSの結果は1231であり、これは文字列接続です
アラート（str -1）;減算するときは、減算操作を実行します。 strが数字でない場合、それはナンを促します：それはそれが数ではないことを意味します
**ボーランタイプも操作できます
*** trueに設定すると、1に相当します。 falseに設定すると、0に相当します。
** ==および===違い
**それはすべて判断をすることです
** ==比較は値のみです。 ===比較は値とタイプです
**ページに直接出力される文（コンテンツはページに表示できます）をページに出力変数、固定値、HTMLコードをページに出力できます。 document.write（ ""）には二重引用符が含まれており、ラベルの属性を設定する場合は、単一の引用を使用する必要があります。
-document.write（ "aaaa"）;
-document.write（ "<hr/>"）;
*** document.write（ "<table border = '1' bordercolor = 'red'>"）;
*** document.write（ "</table>"）;
演習：99の乗算テーブルの実装
JSアレイ
*Java int [] arr = {1,2,3}の配列定義;
*JSアレイ定義方法（3つのタイプ）
1）var arr = [1,2,3]; var arr = [1、 "2"、3]; var arr = [1,2、true];
2）組み込みのオブジェクト配列オブジェクトを使用します
var arr1 = new Array（5）; //配列を定義する、配列の長さは5です
arr1 [0] = "1";
......
3）組み込みのオブジェクト配列オブジェクトを使用します
var arr2 = new Array（3,4,5）; //配列を定義すると、配列内の要素は3,4,5です
*配列にプロパティの長さがあります：配列の長さを取得します
*配列の長さは可変であり、アレイはさまざまなデータ型のデータを保存できます。
JS関数（方法）
** JSで関数（メソッド）を定義します。関数を定義するには3つの方法があります。関数のパラメーターリストでは、varを記述する必要はありません。パラメーター名を記述するだけです。
1）キーワード関数を使用します
***関数メソッド名（パラメーターリスト）{
メソッドボディ;
返品値はオプションです（実際のニーズに応じて）。
}
コード実装：//最初の方法を使用して関数を作成します
function test（）{
alert（ "qqqqqq"）;
}
//メソッドを呼び出します
テスト（）;
//パラメーターを使用してメソッドを定義して、2つの数値を追加することを実装します
関数add1（a、b）{
var sum = a+b;
アラート（合計）;
}
add1（3,5）;
関数add2（a、b、c）{
var sum1 = a+b+c;
sum1を返します。
}
アラート（add2（7,8,9））;
2）匿名関数
var add = function（パラメーターリスト）{
メソッドボディとリターン値。
}
コード実装：var add3 = function（m、n）{
アラート（M+N）;
}
//メソッドを呼び出します
add3（8,9）;
3）通常、動的関数とも呼ばれます。使用する方が少ない場合は、理解してください。
*JSで組み込みオブジェクト関数を使用します
var add = new function（ "parameter list"、 "メソッドボディと戻り値"）;
var add4 = new function（ "x、y"、 "var sum; sum = x+y; return sum;"）;
アラート（add4（9,10））;
//または次のコード
var canshu = "x、y";
var fangfati = "var sum; sum = x+y; return sum;";
var add4 = new function（canshu、fangfati）;
アラート（add4（5,3））;
JSのグローバルおよびローカル変数
**グローバル変数：ページのJS部分で使用できるスクリプトタグの変数を定義します
- メソッド内でメソッドの外側を使用して、別のスクリプトタグで使用します
**ローカル変数：メソッド内の変数を定義し、メソッド内でのみ使用できます。
- メソッド内でのみ使用できます。この変数がメソッドの外部で呼び出されると、エラーが表示されます
-ieにはデバッグツールが付属しています。 IE8以降のバージョンでは、キーボード上のF12とバーがページの下部に表示され、コンソールを見るとエラーが表示されます。
スクリプトタグをどこに配置する必要がありますか
**スクリプトタグを後ろに配置することをお勧めします</body>
**今要件がある場合：
- JSでは、入力で値を取得する必要があります。スクリプトタグを頭に入れると、問題が発生します
-HTML解析は上から下まで解析されます。スクリプトタグは頭に配置され、入力値を直接取得します。ページはまだ入力ラインに解析されていないため、間違いなくそれを取得することはできません。
JSオーバーロードJSには過負荷はありませんが、シミュレートおよび実装できます。
例：関数add11（a、b）{
a+bを返します。
}
関数add11（a、b、c）{
a+b+cを返します。
}
関数add11（a、b、c、d）{{
a+b+c+dを返します。
}
アラート（add11（2,2））; // nan
アラート（add11（2,2,3））; // nan
アラート（add11（2,2,4,5））; // 13
JSの文字列オブジェクト
**文字列オブジェクトvar str = "abc ';
**メソッドとプロパティ（ドキュメント）
- アトリブの長さ：文字列の長さ
- 方法
1）HTMLに関連する方法
-bold（）：bold fontcolor（）：文字列fontsize（）の色を設定します：font link（）のサイズを設定：文字列をハイパーリンクとして表示します
2）Javaと同様の方法
-CONCAT（）：文字列charat（）を接続：文字列indexOf（）：string split（）の文字列位置を返します：文字列を配列置換（ "" "、" "）にスライスします：文字列パス2つのパラメーターを置き換えます。最初のパラメーターは元の文字であり、2番目のパラメーターはsubst（5,3）に置き換える文字です。 5番目のビットから始めて、3つのビットから5番目のビットエンドまでの3つのビットから5番目のビット[3,5]を除く3つのビット（3,5）の後ろ向きのサブストリング（3,5）をインターセプトします[3,5]
JSの配列オブジェクト
**配列を作成する3つの方法
1）var arr1 = [1,2,3];
2）var arr1 = new Array（3）; //長さは3です
3）var arr1 = new Array（1,2,3）; //要素は1,2,3です
var arr = []; //空の配列を作成します
**属性の長さ：配列の長さを表示します
**方法
concat（）;参加する（）;指定された文字Push（）に従って配列を分割します。配列の端に要素を追加し、配列の新しい長さを返します**追加された配列が配列の場合は、string pop（）全体として配列を追加します。配列の最後の要素を削除して返します（）;配列内の要素の順序を逆にします
JSの日付オブジェクト
** Javaで現在の時間を取得します
日付date = new date（）;
// format // tolocalestring（）
** JSで現在の時間を取得します
var date = new Date（）;
// customary format date.tolocalestring（）に変換します。
JSの数学オブジェクト数学操作
**内部はすべて静的な方法で、数学を使用できます。 method（）それを使用するときは直接;
JSのグローバル機能
**それはどのオブジェクトに属していないので、それを使用するために直接名前を書きます
** eval（）; JSコードを実行します（文字列がJSコードの場合、メソッドを使用して直接実行します）
-var str = "alert（ '1234'）;";
// alert（str）; // alert（ '1234'）;
eval（str）; // 1234
** .....
JS関数の過負荷オーバーロードとは何ですか？メソッド名は同じで、パラメーターは異なります
*JSには関数の過負荷はなく、最後の方法のみが呼び出されますが、過負荷は他の方法でシミュレートできます。 JS関数は、渡されたパラメーターを引数配列に保存します。引数配列の長さの判断を使用して、それに応じて異なる処理結果を返すことができます。
リロード効果コードの実装をシミュレート：
関数add1（）{
if（arguments.length == 2）{
引数[0] +引数[1]を返します。
} else if（arguments.length == 3）{
引数[0] +引数[1] +引数[2];
} else if（arguments.length == 4）{
引数[0] +引数[1] +引数[2] +引数[3];
} それ以外 {
0を返します。
}
}
// 電話
アラート（add1（1,2））; // 3
アラート（add1（1,2,3））; // 6
アラート（add1（1,2,3,4））; // 10
アラート（add1（1,2,3,4,5））; // 0
JS BOMオブジェクト
** BOM：Broswer Object Model：ブラウザオブジェクトモデル
**オブジェクトは何ですか？
- ナビゲーター：クライアント情報（ブラウザ情報）を取得する
- 画面：画面情報を取得します
- 場所：要求されたURLアドレス
*** href属性
1）要求されたURLアドレスを取得します
-document.write（location.href）;
2）URLアドレスを設定します
- ページにボタンが配置され、イベントがボタンにバインドされています。このボタンをクリックすると、ページは別のページにジャンプできます
<body>
<入力型= "button" value = "jumpbaidu" onclick = "href1（）;"/>
<script type = "text/javascript">
関数href1（）{
// alert（ "aaaa"）;
location.href = "http://www.baidu.com";
}
</script>
</body>
- 歴史：要求されたURLの履歴
- 3ページを作成します（上下の履歴の効果をシミュレートします）
1）ページを作成し、b.htmlにハイパーリンクを書きます
2）c.htmlにb.htmlハイパーリンクを作成します
3）C.htmlを作成します
- 訪問した前のページに
history.back（）;
歴史、go（-1）;
- 訪問した次のページに移動します
history.forward（）;
history.go（1）;
- ウィンドウ（キーマスタリー）ウィンドウオブジェクトのトップレベルオブジェクト（すべてのBOMオブジェクトはウィンドウで動作します）
**方法
-Window.Alert（）;略語は次のとおりです。Alert（）;ページにウィンドウがポップアップしてコンテンツを表示します
- 確認（ "メッセージコンテンツの表示"）;確認プロンプトボックスには、返品値がtrueとfalseを持っています
- プロンプト（）;入力ダイアログボックス（現在使用されているものは多くありません）には、コンテンツの表示とデフォルト値の2つのパラメーターがあります。
-open（ "URLアドレス"、 ""、 "ウィンドウの幅や高さなどのウィンドウ機能"）;新しいウィンドウを開きます
- 近い（）;クローズウィンドウ（ブラウザの互換性は比較的貧弱です）
- いくつかのタイマーを作ります
*** SetInterval（ "JS Code"、milliseconds）; window.setInterval（ "alert（ '123'）;"、3000）;アラートメソッドが3秒ごとに実行されることを示します
*** Settimeout（ "JS Code"、Milliseconds）;それはミリ秒後に実行されることを意味しますが、それは一度しか実行されません。
*** ClearInterval（）; SetIntervalによって設定されたタイマーをクリアします
-var id1 = setInterval（ "alert（ '123'）;"、3000）;
ClearInterval（ID1）;
*** ClearTimeout（）;タイマーのsettimeoutをクリアします
JS DOMオブジェクト
** dom：ドキュメントオブジェクトモデル：ドキュメントオブジェクトタイプ
**ドキュメント：HyperText Document（HyperText Tagged Document）HTML、XML
**オブジェクト：プロパティとメソッドを提供します
**モデル：プロパティと方法を使用して、ハイパーテキストタグ付きドキュメントを操作する
*** JSのDOMで提供されるオブジェクトを使用して、これらのオブジェクトのプロパティとメソッドを使用して、マークアップドキュメントで動作します。
***タグ付きドキュメントで動作するには、まずタグ付きドキュメントのすべてのコンテンツをオブジェクトにカプセル化する必要があります
- HTMLのタグ、属性、およびテキストコンテンツをオブジェクトにカプセル化する必要があります
***マーカードキュメントで操作するには、マーカードキュメントを解析します
***解析プロセス：HTMLの階層構造に従って、ツリー構造がメモリに割り当てられ、HTMLの各部分をオブジェクトにカプセル化する必要があります
*1つのルートノードのみ
ルートノードの下に複数の子ノードがある場合があります。子ノードのないノードは、葉のノードと呼ばれます
- ドキュメントオブジェクト：HTMLドキュメント全体
- 要素オブジェクト：タグオブジェクト
- 属性オブジェクト
- テキストオブジェクト
**ノードノードオブジェクト：これらのオブジェクトの親オブジェクトは
DHTML：それは多くのテクノロジーの略語です
** HTML：データをカプセル化します
** CSS：属性と属性値をスタイルに使用します
** dom：HTMLドキュメントを操作する（マーク付きドキュメント）
** JavaScript：具体的にはJSの構文ステートメント（ECMAScript）を指します
ドキュメントオブジェクトは、ドキュメント全体を表します
**一般的な方法
- 書き込み（）メソッド：1）ページへの出力変数2）HTMLコードをページに出力します
-GetElementByID（）; IDを介して要素（ラベル）を取得することを意味します
<body>
<入力型= "text" id = "nameId" value = "aaaaa"/> <br/>
<script type = "text/javascript">
// getElementByIDを使用して、入力タグオブジェクトを取得します
var input1 = document.getElementById（ "nameId"）;
//入力で値値を取得します
alert（input1.value）;
//入力に値を設定します
input1.value = "bbbbbbbbb";
</script>
</body>
-GetElementsByName（）;タグの名前属性はタグに値し、返品はコレクション（配列）です
<body>
<入力型= "text" name = "name1" value = "aaaaa"/> <br/>
<入力型= "text" name = "name1" value = "bbbb"/> <br/>
<入力型= "text" name = "name1" value = "cccccc"/> <br/>
<script type = "text/javascript">
var input1 = document.getElementsbyname（ "name1"）; //渡されたパラメーターは、ラベルの名前の値です
for（var i = 0; i <input1.length; i ++）{//トラバーサルを通じて、各タグで特定の値を取得します
var inputs = input1 [i]; //各ループは入力オブジェクトを取得し、入力に値を割り当てます
アラート（inputs.value）; //各入力タグで値値を取得します
}
</script>
</body>
-GetElementsByTagname（ "Tag of Tag"）;コレクション（配列）を返します
<body>
<入力型= "text" name = "name1" value = "aaaaa"/> <br/>
<入力型= "text" name = "name1" value = "bbbb"/> <br/>
<入力型= "text" name = "name1" value = "cccccc"/> <br/>
<script type = "text/javascript">
var inputs1 = document.getElementsByTagname（ "入力"）; //渡されたパラメーターはタグの名前です
for（var i = 0; i <inputs1.length; i ++）{
var input1 = inputs1 [i];
alert（input1.value）;
}
</script>
</body>
****注：ラベルは1つだけで、このラベルは名前のみを使用して取得できます。この時点で、getelementsbynameを使用すると配列が返されますが、現在は1つの要素しかありません。現時点では、トラバースする必要はありませんが、配列の添え字を介して値を直接取得できます。
<入力型= "text" name = "name1" value = "aaaaa"/>
var input1 = document.getElementsbyname（ "name1"）[0];
alert（input1.value）;
ケース：ウィンドウポップアップケース
**実装プロセス：1）ページを作成する必要があります：2つの入力アイテムとボタン、そしてボタンにイベントがあります。これは新しいウィンドウポップアップです
2）ポップアップページを作成する：テーブルの各行には、ボタン、番号、名前があります。ボタンにイベントがあります。現在の番号と名前を最初のページの対応する位置に割り当てます。
**クロスページ操作オープナー：このウィンドウを作成するウィンドウを取得できます。つまり、親ウィンドウを取得できます
ケース：最後にノードを追加します
1）LIタグを作成します
2）テキストを作成します
3）Liにテキストを追加します
4）liをULに追加します
<body>
<ul id = "ulid">
<li> 1111 </li>
<li> 2222 </li>
<li> 3333 </li>
</ul> <br/>
<入力型= "ボタン"値= "add" onclick = "add1（）;"/>
<script type = "text/javascript">
関数add1（）{
// ULタグを取得します
var ul1 = document.getElementById（ "ulid"）;
//タグを作成します
var li1 = document.createelement（ "li"）;
//テキストを作成します
var tex1 = document.createTextNode（ "4444"）;
// liにテキストを追加します
Li1.AppendChild（TEX1）;
// liをULに追加します
UL1.AppendChild（LI1）;
}
</script>
</body>
要素オブジェクト（要素オブジェクト）：要素を操作するには、最初にドキュメント内の対応するメソッドを使用して要素を取得して取得する必要があります。
**方法
****属性getattribute（ "属性名"）の値を取得します。
****属性setAttribute（name、value）の値を設定します。
****属性removeattribute（ "属性名"）を削除します。値を削除することはできません
<input type = "text" name = "name1" id = "inputId" value = "aaaa"/>
<script type = "text/javascript">
//最初に入力タグを取得します
var input1 = document.getElementById（ "inputId"）;
// alert（input1.value）;
alert（input1.getattribute（ "value"））; //属性の値を取得します
alert（input1.getattribute（ "class"））;
input1.setattribute（ "class"、 "haha"）; //属性の値を設定します
alert（input1.getattribute（ "class"））;
input1.removeattribute（ "name"）;
</script>
**タグの下に字幕を取得したい
**属性チャイルドノードを使用しますが、この属性は互換性が低いです
**タグの下でタグを取得する唯一の効果的な方法、getelementsByTagnameメソッドを使用してください
<body>
<ul id = "ulid1">
<li> aaaaaa </li>
<li> bbbbbbb </li>
<li> CCCCCCCC </li>
</ul>
<スクリプト>
// ULタグを取得します
var ul1 = document.getElementById（ "ulid1"）;
// ULの下のサブタイトルを取得します
// var lis = ul1.childnodes; //互換性が低い
// alert（lis.length）; //一部の表示3ディスプレイ7
var lis = ul1.getelementsbytagname（ "li"）;
アラート（lis.length）;
</script>
</body>
ノードオブジェクトのプロパティ
** nodename
** nodeType
** nodevalue
** DOMを使用してHTMLを解析する場合、HTMLのタグ、属性、およびテキストをオブジェクトにカプセル化する必要があります
**タグノードに対応する値
nodeType：1
nodename：spanなどのキャップタグ名
nodevalue：null
**属性ノードに対応する値
NodeType：2
nodename：属性名
Nodevalue：プロパティの価値
**テキストノードに対応する値
nodeType：3
nodename：＃text
Nodevalue：テキストコンテンツ
** <body>
<span id = "spanid">テキストコンテンツ</span>
<script type = "text/javascript">
//タグオブジェクトを取得します
var span1 = document.getElementById（ "spanid"）;
// alert（span1.nodetype）; // 1
// alert（span1.nodename）; // sapn
// alert（span1.nodevalue）; // null
//属性
var id1 = span1.getattributenode（ "id"）;
// alert（id1.nodetype）; // 2
// alert（id1.nodename）; // id
// alert（id1.nodevalue）; // spanid
//テキストを取得します
var text1 = span1.getFirstchild;
// alert（text1.nodetype）; // 3
// alert（text1.nodename）; //＃文章
// alert（text1.nodevalue）; //テキストコンテンツ
</script>
</body>
ノードオブジェクトのプロパティ2
<ul>
<li> aaaaaa </li>
<li> bbbbbbb </li>
</ul>
**親ノードULはLiの親ノードです
*** parentNode ：父节点
**子节点li是ul的子节点
*** childNodes : 得到所有子节点，但是兼容性很差
*** firstChild : 获取第一个子节点
*** lastChild : 获取最后一个子节点
**同辈节点li与li之间是同辈节点
**nextSibling : 返回一个给定节点的下一个兄弟节点
**previousSibling : 返回一个给定节点的上一个兄弟节点
<body>
<ul id="ulid">
<li id="li1">aaaaa</li>
<li id="li2">bbbbb</li>
<li id="li3">ccccc</li>
<li id="li4">ddddd</li>
</ul>
<script type = "text/javascript">
/* // 得到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);
</script>
</body>
操作dom树
** appendChild方法：
*** 添加子节点到末尾
*** 特点：类似于剪切粘贴的效果
** insertBefore(newNode,oldNode);
*** 在某个节点之前插入一个新的节点通过父节点添加
*** 两个参数1）要插入的节点2)在谁之前插入
*** 插入一个节点，节点不存在，创建
1）创建标签
2）创建文本
3）把文本添加到标签下面
**代码实现：（在<li>貂蝉</li>之前添加<li>董小宛</li>）
<body>
<ul id="ulid21">
<li id="li11">西施</li>
<li id="li12">王昭君</li>
<li id="li13">貂蝉</li>
<li id="li14">杨玉环</li>
</ul>
<input type="button" value="insert" onclick="insert1();"/>
<script type = "text/javascript">
// 在<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);
}
</script>
</body>
**removeChild方法：删除节点
***通过父节点删除，不能自己删除自己
**代码实现: 删除<li id="li24">杨玉环</li>
<body>
<ul id="ulid31">
<li id="li21">西施</li>
<li id="li22">王昭君</li>
<li id="li23">貂蝉</li>
<li id="li24">杨玉环</li>
</ul>
<input type="button" value="remove" onclick="remove1();"/>
<script type = "text/javascript">
// 删除<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);
}
</script>
</body>
** replaceChild(newNode,oldNode); 替换节点
***两个参数：1）新的节点（替换成的节点） 2）旧的节点（被替换的节点）
***不能自己替换自己，通过父节点替换
** cloneNode(boolean) : 复制节点
**代码实现：把ul列表复制到另外一个div里面
<body>
<ul id="ulid41">
<li id="li31">西施</li>
<li id="li32">王昭君</li>
<li id="li33">貂蝉</li>
<li id="li34">杨玉环</li>
</ul>
<div id="divv">
</div>
<input type="button" value="clone" onclick="clone1();"/>
<script type = "text/javascript">
// 把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);
}
</script>
</body>
**操作dom总结：
**获取节点使用方法
getElementById() : 通过节点的id属性，查找对应节点
getElementsByName() : 通过节点的name属性，查找对应节点
getElementsByTagName() : 通过节点名称，查找对应节点
**插入节点的方法
insertBefore方法: 在某个节点之前插入
appendChild方法: 在末尾添加，类似于剪贴粘贴
**删除节点的方法
removeChild方法: 通过父节点删除
**替换节点的方法
replaceChild方法: 通过父节点替换
innerHTML属性（重点）
** 这个属性不是dom的组成部分，但是大多数浏览器都支持的属性
** 第一个作用：获取文本内容
var span1 = document.getElementById("sid");
alert(span1.innerHTML);
** 第二个作用：向标签里面设置内容（可以是html代码）
<body>
<span id="sid">测试文本</span>
<div id="div11">
</div>
<script type = "text/javascript">
// 获取span标签
var span1 = document.getElementById("sid");
//alert(span1.innerHTML); // 测试文本
// 向div里面设置内容<h1>AAAAA</h1>
// 获取div
var div11 = document.getElementById("div11");
div11.innerHTML = "<h1>AAAAA</h1>"; // 设置内容
</script>
</body>
** 练习：向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 id="times">
</div>
<script type = "text/javascript">
function getD1() {
// 当前时间
var date = new Date();
// 格式化
var d1 = date.toLocaleString();
// 获取div
var div1 = document.getElementById("times");
div1.innerHTML = d1;
}
// 使用定时器实现每一秒写一次时间
setInterval("getD1();",1000);
</script>
</body>
案例：全选练习
** 使用复选框上面一个属性判断是否选中
** 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/>
<input type="button" value="全选" onclick="selAll();"/>
<input type="button" value="全不选" onclick="selNo();"/>
<input type="button" value="反选" onclick="selOther();"/>
<script type = "text/javascript">
// 实现全选操作
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;
}
それ以外 {
love1.checked = true;
}
}
}
function selAllNo() { // 一个多选框实现全选全不选切换
/*
1、得到上边的复选框通过id来获取
2、判断该复选框是否选中if条件checked == true
3、如果是选中，下面是全选
4、如果不是选中，下面是全不选
*/
var box1 = document.getElementById("boxid");
if(box1.checked == true) {
selAll();
}
それ以外 {
selNo();
}
}
</script>
</body>
案例：下拉列表左右选择
** 下拉选择框
<select>
<option>111</option>
<option>111</option>
</select>
** 创建一个页面
** 两个下拉框设置属性multiple
** 四个按钮， 都有事件
** 代码实现：
<body>
<div id="s1" style="float:left;">
<div>
<select id="select1" multiple="multiple">
<option>1111111</option>
<option>22222222</option>
<option>33333333</option>
<option>444444444</option>
</select>
</div>
<div>
<input type="button" value="选中添加到右边" onclick="selToRight();"/><br/>
<input type="button" value="全部添加到右边" onclick="allToRight();"/>
</div>
</div>
<div id="s2">
<div>
<select id="select2" multiple="multiple">
<option>AAAAAAAA</option>
<option>BBBBBBBB</option>
</select>
</div>
<div>
<input type="button" value="选中添加到左边" onclick="selToLeft();"/><br/>
<input type="button" value="全部添加到左边" onclick="allToLeft();"/>
</div>
</div>
<script type = "text/javascript">
// 实现选中添加到右边
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);
私 - ; // 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);
私 - ;
}
}
// 右边的添加到左边的操作类似
</script>
</body>
案例：下拉框联动效果(省市联动)
** 创建一个页面，有两个下拉选择框
** 在第一个下拉框里面有一个事件：改变事件onchange事件
** 方法add1(this.value); 表示当前改变的option 里面的value值
** 创建一个二维数组，存储数据
** 每个数组中第一个元素是国家名称，后面的元素是国家里面的城市
**代码实现：
<body>
<select id="countryid" onchange="add1(this.value);">
<option value="0">--请选择--</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="德国">德国</option>
<option value="日本">日本</option>
</select>
<select id="cityid">
<option value="" selected>
<option value="">
</select>
<script type = "text/javascript">
// 创建一个数组存储数据
// 使用二维数组
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);
}
}
}
}
</script>
</body>
以上这篇JavaWeb学习笔记分享(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。