ホームページ > 記事 > ウェブフロントエンド > 最も完全な JavaScript 学習の概要
最も完全な JavaScript 学習の概要
- 小云云オリジナル
- 2018-01-09 09:17:059212ブラウズ
この記事では、主に JavaScript 学習の概要を共有します (1) ECMAScript、BOM、DOM (コア、ブラウザ オブジェクト モデル、ドキュメント オブジェクト モデル) JavaScript は、解釈されて実行されるスクリプト言語であり、弱いです。 type、ECMAScript 標準に準拠した型のサポートが組み込まれたプロトタイプ言語に基づいています。そのインタプリタは JavaScript エンジンと呼ばれ、ブラウザの一部であり、主に HTML に動的関数を追加するためにクライアント側のスクリプト言語で広く使用されています。
1. JavaScript の概要
JavaScript は、ECMAScript 標準に準拠した、動的に型付けされた弱い型付けのプロトタイプベースの言語です。そのインタプリタは JavaScript エンジンと呼ばれ、ブラウザの一部であり、主に HTML に動的関数を追加するためにクライアント側のスクリプト言語で広く使用されています。
ほとんどすべての主流言語は JavaScript にコンパイルでき、すべてのプラットフォームのブラウザーで実行できます。これは、JavaScript の能力と Web 開発におけるその重要性も反映しています。 Blade: C# コードを JavaScript に変換できる Visual Studio 拡張機能、Ceylon: JavaScript にコンパイルできるモジュール式の静的型付け JVM 言語などです。
JavaScript は、フロントエンドとバックエンドの両方で実行できる言語です。たとえば、Node.js は、Chrome V8 エンジン (Java や .NET に似ています) に基づく JavaScript 実行環境です。 Node.js はイベント駆動型のノンブロッキング I/O モデルを使用するため、軽量で効率的です。
1.1. JavaScript の構成
ECMAScript は、型、操作、フロー制御、オブジェクト指向、例外などの言語の構文と基本オブジェクトを記述します。
ドキュメント オブジェクト モデル (DOM) は、Web コンテンツを処理するためのメソッドとインターフェイスを記述します。
ブラウザ オブジェクト モデル (BOM) は、ブラウザと対話するためのメソッドとインターフェイスを記述します。
JavaScript はオブジェクトで構成されており、すべてがオブジェクトです。
1.2、JavaScript スクリプト言語機能
a)、解釈されたスクリプト言語。 JavaScript は解釈されるスクリプト言語です。C や C++ などの言語は最初にコンパイルされてから実行されますが、JavaScript はプログラムの実行中に 1 行ずつ解釈されます。
オブジェクトベース。 JavaScript はオブジェクトベースのスクリプト言語であり、オブジェクトを作成するだけでなく、既存のオブジェクトを使用することもできます。
b)、簡単です。 JavaScript 言語は、弱い型指定の変数型を使用し、使用されるデータ型に厳密な要件を課しません。Java の基本的なステートメントとコントロールに基づいたスクリプト言語であり、その設計はシンプルでコンパクトです。
c)、ダイナミック。 JavaScript は、Web サーバーを経由せずにユーザー入力に応答できるイベント駆動型のスクリプト言語です。 Web ページにアクセスしているときに、マウスがクリックされたとき、上下に移動したとき、またはウィンドウ内で移動したとき、JavaScript はこれらのイベントに直接応答できます。
d)、クロスプラットフォーム。 JavaScript スクリプト言語はオペレーティング システムに依存せず、ブラウザーのサポートのみが必要です。したがって、JavaScript スクリプトを作成した後、マシン上のブラウザが JavaScript スクリプト言語をサポートしていれば、そのスクリプトを任意のマシンに持ち込んで使用できます。現在、JavaScript はほとんどのブラウザでサポートされています。
2. ECMAScript (JavaScript コアと構文)
2.1、ECMAScript 定義
1)、ECMAScript は標準 (欧州コンピューター製造者協会)、JavaScript は単なる実装であり、他の実装には ActionScript (Flash スクリプト) が含まれます
2) ECMAScript は、さまざまな種類のホスト環境にコア スクリプト プログラミング機能を提供できます。つまり、ECMAScript は特定のホスト環境にバインドされません。たとえば、JavaScript のホスト環境はブラウザーであり、AS のホスト環境は Flash です。 。 、
3)、ECMAScript は次の内容を記述します: 構文、型、ステートメント、キーワード、予約語、演算子、オブジェクトなど。
2.2. データ型
変数と変数の型を宣言するには、var キーワードを使用します。 JS に割り当てられた値 (動的型) に基づいて決定されます。 JSのデータ型は、プリミティブデータ型(5種類)と参照データ型(オブジェクト型)に分かれます。
1) 5 つのプリミティブ データ型: 未定義、Null、ブール、数値、文字列。 JS の文字列はプリミティブ データ型であることに注意してください。
2) typeof 演算子: 変数の型を確認します。変数または値に対して typeof 演算子を呼び出すと、次の値のいずれかが返されます:
- 未定義 – 変数の型が未定義の場合
- ブール型 – if変数は Boolean 型です
- 数値 – 変数が数値型の場合
- 文字列 – 変数が文字列型の場合
- オブジェクト – 変数が参照型または Null 型の場合
6) JS における型の定義: 値のセット。たとえば、ブール型には true と false の 2 つの値があります。 Unknown 型と Null 型はいずれも、値が 1 つだけあり、それぞれ未定義と null です。
Null 型には null という値が 1 つだけあり、Unknown 型にも未定義の値が 1 つだけあります。 null と unknown は両方とも、JavaScript コード内でリテラルとして直接使用できます。
null はオブジェクト参照に関連しており、空または存在しないオブジェクト参照を表します。変数が宣言されていても値が割り当てられていない場合、その値は undefine になります。
unknown の値は、次の状況で表示されます。
がオブジェクトから特定のプロパティを取得する。オブジェクトもそのプロトタイプ チェーン内のオブジェクトもそのプロパティを持たない場合、プロパティの値は未定義になります。
関数が return を通じて呼び出し元に明示的に値を返さない場合、その戻り値は未定義です。新品を使用する場合は専用のケースがございます。
JavaScript の関数は、任意の数の仮パラメーターを宣言できます。関数が実際に呼び出されるときに、渡されるパラメーターの数が宣言された仮パラメーターよりも少ない場合、追加の仮パラメーターの値は未定義になります。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//js对象
var user = {
name: "张学友",
address: "中国香港"
};
console.log(user.age); //访问对象中的属性，未定义
var i;
console.log(i); //变量未赋值
function f(n1){
console.log(n1);
}
var result=f(); //参数未赋值
console.log(result); //当函数没有返回值时为undefined
</script>
</body>
</html>結果:
null と未定義に関する興味深い機能がいくつかあります:
null 値を持つ変数に対して typeof 演算子を使用すると、結果はオブジェクトになります。
未定義の値に typeof を使用すると、結果は未定義になります。
typeof null === "object" //true; typeof undefined === "unknown" //true null == 未定義 //true ですが、null !== 未定義 //true など
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//js对象
var user = {
name: "张学友",
address: "中国香港"
};
console.log(typeof(user));
console.log(typeof(null));
console.log(typeof(undefined));
console.log(user.name);
console.log(user.age);
if(user.age){
console.log(user.age);
}else{
console.log("没有age属性");
}
//为false的情况
var i;
console.log(!!"");
console.log(!!0);
console.log(!!+0);
console.log(!!-0);
console.log(!!NaN);
console.log(!!null);
console.log(!!undefined);
console.log(typeof(i));
console.log(!!i);
console.log(false);
//是否不为数字,is Not a Number
console.log(isNaN("Five"));
console.log(isNaN("5"));
</script>
</body>
</html>結果:
7)、ブール型の特殊性
8)、== と ===
JavaScript には、値が等しいかどうかを決定する 2 つの演算子があります。 、==、===。この 2 つと比較すると、== は特定の型変換を行いますが、=== は型変換を行わず、受け入れられる等価条件はより厳密です。
=== は、比較するときに型を比較します
もちろん、対応するものは != と !==
==
console.log("5"==5); //true
console.log("5"===5); //false
console.log("5"!=5); //false
console.log("5"!==5); //true2.3、ローカル変数とグローバル変数の代わりに === を使用してみてください
関数内で宣言された変数は関数内でのみ使用でき、関数を終了するとその変数は解放されます。各ローカル変数はその関数内でのみ有効であるため、異なる関数で同じ名前の変数を使用できます。
関数の外で変数を宣言すると、ページ内のすべての関数でその変数を使用できます。グローバル変数は宣言されると有効になります。この変数は、Web ページが閉じられるまで有効期限が切れません。
注: JS 言語では、コード ブロックで宣言された変数はグローバル変数です。
JavaScript はデータ型変数に対する要件がそれほど厳しくない言語であるため、各変数の型を宣言する必要はありませんが、変数を使用する前に宣言することをお勧めします。変数の宣言は、var ステートメントを使用して行うことができます。例: var men = true; // men に格納される値はブール型です。
変数の名前付け
JavaScript は大文字と小文字を区別する言語であるため、変数に best という名前を付けることは、Best という名前を付けることと同じではありません。
さらに、変数名の長さは任意ですが、次の規則に従う必要があります:
1. 最初の文字は文字 (大文字と小文字の両方)、アンダースコア (_)、またはドルである必要があります。記号 ($)。
2. 後続の文字には、文字、数字、アンダースコア、またはドル記号を使用できます。
3. 変数名に予約語を使用することはできません。
varを使わずに変数を定義することもできますが、この方法で定義された変数はグローバル変数です。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function a(){
var n1=1;
n2=2; //声明n2时未使用var，所以n2是全局变量，尽量避免
console.log(n1+","+n2);
}
a();
console.log(n2);
console.log(window.n2);
console.log(window.n1);
console.log(n1);
</script>
</body>
</html>結果:
2.4, Array (配列)
① jsでは、配列要素の型が一致しない場合があります。
②jsでは配列の長さを動的に変更することができます。
③上記のコードに従うと、 typeof arr と arr instanceof Array はそれぞれオブジェクトと true を出力します。
console.log(typeof(names)); //object
console.log(names instanceof Array); //true
console.log("" instanceof String); //false 不是对象类型
console.log(true instanceof Boolean); //false配列オブジェクトとメソッド
Array 对数组的内部支持
Array.concat( ) 连接数组
Array.join( ) 将数组元素连接起来以构建一个字符串
Array.length 数组的大小
Array.pop( ) 删除并返回数组的最后一个元素
Array.push( ) 给数组添加元素
Array.reverse( ) 颠倒数组中元素的顺序
Array.shift( ) 将元素移出数组
Array.slice( ) 返回数组的一部分
Array.sort( ) 对数组元素进行排序
Array.splice( ) 插入、删除或替换数组的元素
Array.toLocaleString( ) 把数组转换成局部字符串
Array.toString( ) 将数组转换成一个字符串
Array.unshift( ) 在数组头部插入一个元素
2.4.1、创建
var arrayObj = new Array(); var arrayObj = new Array([size]); var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);
示例：
var array11 = new Array(); //空数组
var array12 = new Array(5); //指定长度，可越界
var array13 = new Array("a","b","c",1,2,3,true,false); //定义并赋值
var array14=[]; //空数组，语法糖
var array15=[1,2,3,"x","y"]; //定义并赋值2.4.2、访问与修改
var testGetArrValue=arrayObj[1];
arrayObj[1]= "值";
array12[8]="hello array12"; //赋值或修改
console.log(array12[8]); //取值
//遍历
for (var i = 0; i < array13.length; i++) {
console.log("arrayl3["+i+"]="+array13[i]);
}
//枚举
for(var i in array15){
console.log(i+"="+array15[i]); //此处的i是下标
}结果：
2.4.3、添加元素
将一个或多个新元素添加到数组未尾，并返回数组新长度
arrayObj. push([item1 [item2 [. . . [itemN ]]]]);
将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度
arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);
将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回被删除元素数组，deleteCount要删除的元素个数
arrayObj.splice(insertPos,deleteCount,[item1[, item2[, . . . [,itemN]]]])
示例代码：
//4.3、添加元素
var array31=[5,8];
//添加到末尾
array31.push(9);
var len=array31.push(10,11);
console.log("长度为："+len+"——"+array31);
//添加到开始
array31.unshift(4);
var len=array31.unshift(1,2,3);
console.log("长度为："+len+"——"+array31);
//添加到中间
var len=array31.splice(5,1,6,7); //从第5位开始插入，删除第5位后的1个元素，返回被删除元素
console.log("被删除："+len+"——"+array31);运行结果：
2.4.4、删除
移除最后一个元素并返回该元素值
arrayObj.pop();
移除最前一个元素并返回该元素值，数组中元素自动前移
arrayObj.shift();
删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素
arrayObj.splice(deletePos,deleteCount);
示例：
//4.4、删除
var array41=[1,2,3,4,5,6,7,8];
console.log("array41："+array41);
//删除最后一个元素，并返回
var e=array41.pop();
console.log("被删除："+e+"——"+array41);
//删除首部元素，并返回
var e=array41.shift();
console.log("被删除："+e+"——"+array41);
//删除指定位置与个数
var e=array41.splice(1,4); //从索引1开始删除4个
console.log("被删除："+e+"——"+array41);结果：
2.4.5、截取和合并
以数组的形式返回数组的一部分，注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素
arrayObj.slice(start, [end]);
将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组
arrayObj.concat([item1[, item2[, . . . [,itemN]]]]);
示例：
//4.5、截取和合并
var array51=[1,2,3,4,5,6];
var array52=[7,8,9,0,"a","b","c"];
//截取，切片
var array53=array51.slice(2); //从第3个元素开始截取到最后
console.log("被截取："+array53+"——"+array51);
var array54=array51.slice(1,4); //从第3个元素开始截取到索引号为3的元素
console.log("被截取："+array54+"——"+array51);
//合并
var array55=array51.concat(array52,["d","e"],"f","g");
console.log("合并后："+array55);结果：
2.4.6、拷贝
返回数组的拷贝数组，注意是一个新的数组，不是指向
arrayObj.slice(0);
返回数组的拷贝数组，注意是一个新的数组，不是指向
arrayObj.concat();
因为数组是引用数据类型，直接赋值并没有达到真正实现拷贝，地址引用，我们需要的是深拷贝。
2.4.7、排序
反转元素（最前的排到最后、最后的排到最前），返回数组地址
arrayObj.reverse();
对数组元素排序，返回数组地址
arrayObj.sort();
arrayObj.sort(function(obj1,obj2){});
示例：
var array71=[4,5,6,1,2,3];
array71.sort();
console.log("排序后："+array71);
var array72=[{name:"tom",age:19},{name:"jack",age:20},{name:"lucy",age:18}];
array72.sort(function(user1,user2){
return user1.age<user2.age;
});
console.log("排序后：");
for(var i in array72) console.log(array72[i].name+"，"+array72[i].age);结果：
2.4.8、合并成字符
返回字符串，这个字符串将数组的每一个元素值连接在一起，中间用 separator 隔开。
arrayObj.join(separator);
示例代码：
//4.8、合并成字符与将字符拆分成数组
var array81=[1,3,5,7,9];
var ids=array81.join(",");
console.log(ids);
//拆分成数组
var text="hello nodejs and angular";
var array82=text.split(" ");
console.log(array82);运行结果：
所有代码：
数组操作
2.5、正则表达式RegExp
RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。
RegExp对象：该对象代表正则表达式，用于字符串匹配
① 两种RegExp对象创建方式：
方式一，new 一个RegExp对象：var regExp = new RegExp(“[a-zA-Z0-9]{3,8}”);
方式二，通过字面量赋值：var regExp = /^[a-zA-Z0-9]{3,8}$/;
② 正则表达式的具体写法使用时查询文档。
③ 常用方法：test(string)，返回true或false。
直接量语法
/pattern/attributes
创建 RegExp 对象的语法：
new RegExp(pattern, attributes);
参数
パラメータパターンは、正規表現パターンまたはその他の正規表現を指定する文字列です。
パラメータ属性は、属性 "g"、"i"、および "m" を含むオプションの文字列で、それぞれグローバル マッチング、大文字と小文字を区別するマッチング、および複数行のマッチングを指定するために使用されます。 ECMAScript が標準化される前は、m 属性はサポートされていませんでした。 pattern が文字列ではなく正規表現である場合、このパラメータは省略する必要があります。
戻り値
指定されたモードとフラグを持つ新しい RegExp オブジェクト。引数のパターンが文字列ではなく正規表現の場合、RegExp() コンストラクターは、指定された RegExp と同じパターンとフラグを持つ新しい RegExp オブジェクトを作成します。
new 演算子を使用せずに RegExp() を関数として呼び出した場合、 new 演算子を使用して呼び出した場合と同じように動作しますが、パターンが正規表現の場合は、新しい演算子を作成せずにパターンのみを返す点が異なります。 1 つ目は RegExp オブジェクトです。
スロー
SyntaxError - この例外は、パターンが有効な正規表現でない場合、または属性に「g」、「i」、「m」以外の文字が含まれている場合にスローされます。
TypeError - pattern が RegExp オブジェクトであるが、attributes パラメーターが省略されていない場合、この例外がスローされます。
修飾子
| 修飾子 | 説明 |
|---|---|
| i | 大文字と小文字を区別しない一致を実行します。 |
| g | グローバルマッチングを実行します (最初の一致が見つかった後に停止するのではなく、すべての一致を検索します)。 |
| m | 複数行のマッチングを実行します。 |
角括弧
角括弧は、範囲内の文字を検索するために使用されます。
| 式 | 説明 |
|---|---|
| [abc] | 角括弧内の任意の文字を検索します。 |
| [^abc] | 角括弧の間にない文字を検索します。 |
| [0-9] | 0 から 9 までの任意の数字を見つけます。 |
| [a-z] | 小文字の a から小文字の z までの任意の文字を検索します。 |
| [A-Z] | 大文字の A から大文字の Z までの任意の文字を検索します。 |
| [A-z] | 大文字の A から小文字の z までの任意の文字を検索します。 |
| [adgk] | 指定されたセット内の任意の文字を検索します。 |
| [^adgk] | 指定されたセットの外にある文字を検索します。 |
| (赤|青|緑) | 指定されたオプションを検索します。 |
メタキャラクター
メタキャラクターは特別な意味を持つ文字です:
| メタキャラクター | 説明 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| . | 改行と行終端記号を除く単一の文字を検索します。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| w | 単語の文字を検索します。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| W | 単語以外の文字を検索します。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| d | 数字を見つけてください。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| D | 数字以外の文字を検索します。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| s | 空白文字を検索します。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| S | 空白以外の文字を検索します。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| b | 単語の境界を一致させます。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| B | 単語以外の境界と一致します。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
RegExp 对象属性
RegExp 对象方法
示例： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var reg1=/\d{2}/igm; //定义正则
var reg2=new RegExp("\D{2}","igm"); //定义正则
//验证邮政编码
var reg3=/^\d{6}$/igm;
console.log(reg3.test("519000")); //true
console.log(reg3.test("abc123")); //false
//查找同时出现3个字母的索引
var reg4=new RegExp("[A-Za-z]{3}","igm");
console.log(reg4.exec("ab1cd2efg3lw3sd032kjsdljkf23sdlk"));
//["efg", index: 6, input: "ab1cd2efg3lw3sd032kjsdljkf23sdlk"]
//身份证
//411081199004235955 41108119900423595x 41108119900423595X
//邮箱
//zhangguo123@qq.com zhangguo@sina.com.cn
</script>
</body>
</html>结果：
支持正则表达式的 String 对象的方法
示例： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var reg1=/\d{2}/igm;
console.log("kjds23sd9we23sdoi1we230we12sd".search(reg1)); //4 第一次匹配成功的索引
console.log("kjds23sd9we56sdoi1we780we98sd".match(reg1)); //["23", "56", "78", "98"]
//删除所有数字
console.log("kjds23sd9we56sdoi1we780we98sd".replace(/\d/igm,"")); //kjdssdwesdoiwewesd
//所有数字增加大括号，反向引用 $组号 括号用于分组
console.log("kjds23sd9we56sdoi1we780we98sd".replace(/(\d+)/igm,"\{$1\}")); //kjds{23}sd{9}we{56}sdoi{1}we{780}we{98}sd
//拆分
console.log("kjds23sd9we56sdoi1we780we98sd".split(/[w\d]+/)); //["kjds", "sd", "e", "sdoi", "e", "e", "sd"]
//ID (虚拟的)
//411081197104235955 411081198600423595x 41108119880423595X
//^\d{17}[xX0-9]{1}$
//Email
//zhangguo123@qq.com zhangguo@sina.com.cn
//\w+@\w+\.\w{2,5}(\.\w{2,5})?
</script>
</body>
</html>结果：
2.6、字符串对象String字符串是 JavaScript 的一种基本的数据类型。 String 对象属性
文字列オブジェクトのメソッド
2.7. 時刻と日付オブジェクト DateDate オブジェクトは日付と時刻を処理するために使用されます。 Date オブジェクトを作成するための構文:
注: Date オブジェクトは、現在の日付と時刻を初期値として自動的に保存します。 Date オブジェクトのプロパティ
Date オブジェクトのメソッド
2.8、数学对象MathMath 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。 var pi_value=Math.PI; var sqrt_value=Math.sqrt(15); Math 对象属性
Math 对象方法
2.9、JavaScript グローバル オブジェクトグローバル プロパティと関数は、すべての組み込み JavaScript オブジェクトに使用できます。 グローバル オブジェクトは、JavaScript のグローバル関数とグローバル プロパティのプレースホルダーとして機能する事前定義されたオブジェクトです。グローバル オブジェクトを使用すると、他のすべての定義済みオブジェクト、関数、プロパティにアクセスできます。グローバル オブジェクトはどのオブジェクトのプロパティでもないため、名前はありません。 トップレベル関数 (グローバル関数)
トップレベルプロパティ (グローバルプロパティ)
在 JavaScript 核心语言中，全局对象的预定义属性都是不可枚举的，所有可以用 for/in 循环列出所有隐式或显式声明的全局变量，如下所示： var variables = "";
for (var name in this)
{
variables += name + "、";
}
document.write(variables);结果：
2.10、JavaScript避免使用的语法1）、 == Javascript有两组相等运算符，一组是==和!=，另一组是===和!==。前者只比较值的相等，后者除了值以外，还比较类型是否相同。 请尽量不要使用前一组，永远只使用===和!==。因为==默认会进行类型转换，规则十分难记。如果你不相信的话，请回答下面五个判断式的值是true还是false： false == 'false' false == undefined false == null null == undefined null == '' 2）、with with的本意是减少键盘输入。比如 obj.a = obj.b; obj.c = obj.d; 可以简写成 with(obj) {
a = b;
c = d;
}但是，在实际运行时，解释器会首先判断obj.b和obj.d是否存在，如果不存在的话，再判断全局变量b和d是否存在。这样就导致了低效率，而且可能会导致意外，因此最好不要使用with语句。 3）、eval eval用来直接执行一个字符串。这条语句也是不应该使用的，因为它有性能和安全性的问题，并且使得代码更难阅读。 eval能够做到的事情，不用它也能做到。比如 eval("myValue = myObject." + myKey + ";");可以直接写成 myValue = myObject[myKey]; 至于ajax操作返回的json字符串，可以使用官方网站提供的解析器json_parse.js运行。 4）、 continue 这条命令的作用是返回到循环的头部，但是循环本来就会返回到头部。所以通过适当的构造，完全可以避免使用这条命令，使得效率得到改善。 5）、switch 贯穿 switch结构中的case语句，默认是顺序执行，除非遇到break，return和throw。有的程序员喜欢利用这个特点，比如 switch(n) {
case 1:
case 2:
break;
}这样写容易出错，而且难以发现。因此建议避免switch贯穿，凡是有case的地方，一律加上break。 switch(n) {
case 1:
break;
case 2:
break;
}6）、单行的块结构 if、while、do和for，都是块结构语句，但是也可以接受单行命令。比如 if (ok) t = true; 甚至写成 if (ok) if (ok){ 7）、 ++和-- 递增运算符++和递减运算符--，直接来自C语言，表面上可以让代码变得很紧凑，但是实际上会让代码看上去更复杂和更晦涩。因此为了代码的整洁性和易读性，不用为好。 8）、位运算符 Javascript完全套用了Java的位运算符，包括按位与&、按位或|、按位异或^、按位非~、左移93f835d6b454168ee11fe710f0a6b346>和用0补足的右移>>>。 这套运算符针对的是整数，所以对Javascript完全无用，因为Javascript内部，所有数字都保存为双精度浮点数。如果使用它们的话，Javascript不得不将运算数先转为整数，然后再进行运算，这样就降低了速度。而且"按位与运算符"&同"逻辑与运算符"&&，很容易混淆。 9）、function语句 在Javascript中定义一个函数，有两种写法： function foo() { } var foo = function () { } 10）、基本数据类型的包装对象 Javascript的基本数据类型包括字符串、数字、布尔值，它们都有对应的包装对象String、Number和Boolean。所以，有人会这样定义相关值： new String("Hello World");
new Number(2000);
new Boolean(false);这样写完全没有必要，而且非常费解，因此建议不要使用。 另外，new Object和new Array也不建议使用，可以用{}和[]代替。 11）、new语句 Javascript是世界上第一个被大量使用的支持Lambda函数的语言，本质上属于与Lisp同类的函数式编程语言。但是当前世界，90%以上的程序员都是使用面向对象编程。为了靠近主流，Javascript做出了妥协，采纳了类的概念，允许根据类生成对象。 类是这样定义的： var Cat = function (name) {
this.name = name;
this.saying = 'meow' ;
}然后，再生成一个对象 Douglas Crockford给出了一个函数： Object.beget = function (o) {
var F = function (o) {};
F.prototype = o ;
return new F;
};创建对象时就利用这个函数，对原型对象进行操作： var Cat = {
name:'',
saying:'meow'
};
var myCat = Object.beget(Cat);对象生成后，可以自行对相关属性进行赋值：
12）、void 在大多数语言中，void都是一种类型，表示没有值。但是在Javascript中，void是一个运算符，接受一个运算数，并返回undefined。 void 0; // undefined 三、BOM3.1、BOM概要BOM(Browser Object Model) 即浏览器对象模型，主要是指一些浏览器内置对象如：window、location、navigator、screen、history等对象，用于完成一些操作浏览器的特定API。 用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
BOM结构
从上图可以看出：DOM是属于BOM的一个属性。 window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。 由于window是顶层对象，因此调用它的子对象时可以不显示的指明window对象。 以下两种写法均可： document.write("www.jb51.net");
window.document.write(www.jb51.net);3.2、BOM导图BOM部分主要是针对浏览器的内容，其中常用的就是window对象和location window是全局对象很多关于浏览器的脚本设置都是通过它。 location则是与地址栏内容相关，比如想要跳转到某个页面，或者通过URL获取一定的内容。 navigator中有很多浏览器相关的内容，通常判断浏览器类型都是通过这个对象。 screen常常用来判断屏幕的高度宽度等。 history访问浏览器的历史记录，如前进、后台、跳转到指定位置。
3.3、window对象window对象在浏览器中具有双重角色：它既是ECMAscript规定的全局global对象，又是javascript访问浏览器窗口的一个接口。 moveBy() 函数 moveTo() 函数 resizeBy() 函数 resizeTo() 函数 scrollTo() 函数 scrollBy() 函数 focus() 函数 blur() 函数 open() 函数 close() 函数 opener 属性 alert() 函数 confirm() 函数 prompt() 函数 defaultStatus 属性 status 属性 setTimeout() 函数 clearTimeout() 函数 setInterval() 函数 clearInterval() 函数 1、获取窗口相对于屏幕左上角的位置 window.onresize = function() {
var leftPos = (typeof window.screenLeft === 'number') ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenLeft === 'number') ? window.screenTop : window. screenY;
document.write(leftPos+"，"+topPos);
console.log(leftPos+"，"+topPos);
}需要注意的一点是，在IE，opera中，screenTop保存的是页面可见区域距离屏幕左侧的距离，而chrome,firefox,safari中，screenTop/screenY保存的则是整个浏览器区域距离屏幕左侧的距离。也就是说，二者差了一个浏览器工具栏的像素高度。 2、移动窗口，调整窗口大小 window.moveTo(0,0) window.moveBy(20,10) window.resizeTo(100,100); window.resizeBy(100,100); 注意，这几个方法在浏览器中很可能会被禁用。 3、获得浏览器页面视口的大小 var pageWith=document.documentElement.clientWidth||document.body.clientWidth; var pageHeight=document.documentElement.clientHeight||document.body.clientHeight; 4、导航和打开窗口 window.open()既可以导航到特定的URL，也可以打开一个新的浏览器窗口，其接收四个参数，要加载的url，窗口目标（可以是关键字_self,_parent,_top,_blank）,一个特性字符串，以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。通常只需要传递第一个参数。注意，在很多浏览器中，都是阻止弹出窗口的。 5、定时器 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 code 必需，要调用的函数后要执行的 JavaScript 代码串。= millisec 必需，在执行代码前需等待的毫秒数。 clearTimeout(对象) 清除已设置的setTimeout对象 示例： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button type="button" id="btnClear">清除</button>
<script>
var btnClear=document.getElementById("btnClear");
//5秒后禁用按钮
var timer1=setTimeout(function(){
btnClear.setAttribute("disabled","disabled");
},5000);
btnClear.onclick=function(){
clearTimeout(timer1); //清除定时器
alert("定时器已停止工作，已清除");
}
//递归，不推荐
function setTitle(){
document.title+="->";
setTimeout(setTitle,500);
}
setTimeout(setTitle,500);
</script>
</body>
</html>结果：
setInterval(code,millisec[,"lang"]) setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式 millisec 必需，周期性执行或调用code之间的时间间隔，以毫秒计。 clearInterval(对象) 清除已设置的setInterval对象 6.系统对话框，这些对话框外观由操作系统/浏览器设置决定，css不起作用，所以很多时候可能需要自定义对话框 alert():带有一个确定按钮 confirm()：带有一个确定和取消按钮 prompt():显示OK和Cancel按钮之外，还会显示一个文本输入域 示例： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button type="button" id="btnClear" style="width: 100px;">清除</button>
<script>
var btnClear=document.getElementById("btnClear");
//每隔5秒后禁用按钮
var timer1=setInterval(function(){
btnClear.style.width=(parseInt(btnClear.style.width||0)+10)+"px";
},500);
btnClear.onclick=function(){
clearInterval(timer1); //清除定时器
alert("定时器已停止工作，已清除");
}
function setTitle(){
document.title+="->";
}
setInterval(setTitle,500);
</script>
</body>
</html>结果：
6、scroll系列方法 scrollHeight和scrollWidth 对象内部的实际内容的高度/宽度（不包括border） scrollTop和scrollLeft 被卷去部分的顶部/左侧 到 可视区域 顶部/左侧 的距离 onscroll事件 滚动条滚动触发的事件 页面滚动坐标: var scrollTop = window.pageYoffset || document.documentElement.scrollTop || document.body.scrollTop || 0; 3.4、document 对象请参考DOM一节的内容 write() 函数 3.5、location对象location对象提供了当前窗口加载的文档的相关信息，还提供了一些导航功能。事实上，这是一个很特殊的对象，location既是window对象的属性，又是document对象的属性。 location.hash #contents 返回url中的hash，如果不包含#后面的内容，则返回空字符串 location.host best.cnblogs.com:80 返回服务器名称和端口号 location.port 80 返回端口号 location.hostname best.cnblogs.com 返回服务器名称 location.href http://best.cnblogs.com 返回当前加载页面的完整url location.pathname /index.html 返回url中的目录和文件名 location.protocol http 返回页面使用的协议 location.search ?q=javascript 返回url中的查询字符串 改变浏览器的位置：location.href=http://www.baidu.com 如果使用location.replace('http://www.baidu.com'),不会在历史记录中生成新纪录，用户不能回到前一个页面。 location.reload()：重置当前页面，可能从缓存，也可能从服务器；如果强制从服务器取得，传入true参数 示例： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
console.log(location.href);
console.log(location.port);
console.log(location.search);
//location.href=location.href; //刷新
//location.reload(true); //强制加载，不加true则从缓存中刷新
</script>
</body>
</html>结果：
3.6、history对象history对象保存着用户上网的历史记录，使用go()实现在用户的浏览记录中跳转： history.go(-1) 等价于history.back() history.go(1) 等价于 history.forward() history.go(1) //前进两页 history.go('jb51.net') 3.7、navigator对象这个对象代表浏览器实例，其属性很多，但常用的不太多。如下： navigator.userAgent：用户代理字符串，用于浏览器监测中、 navigator.plugins:浏览器插件数组，用于插件监测 navigator.registerContentHandler 注册处理程序，如提供RSS阅读器等在线处理程序。 示例代码： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<SCRIPT>
document.write("<br/>浏览器名称");
document.write(navigator.appCodeName);
document.write("<br/>次版本信息");
document.write(navigator.appMinorVersion);
document.write("<br/>完整的浏览器名称");
document.write(navigator.appName);
document.write("<br/>浏览器版本");
document.write(navigator.appVersion);
document.write("<br/>浏览器编译版本");
document.write(navigator.buildID);
document.write("<br/>是否启用cookie");
document.write(navigator.cookieEnabled);
document.write("<br/>客户端计算机CPU类型");
document.write(navigator.cpuClass);
document.write("<br/>浏览器是否启用java");
document.write(navigator.javaEnabled());
document.write("<br/>浏览器主语言");
document.write(navigator.language);
document.write("<br/>浏览器中注册的MIME类型数组");
document.write(navigator.mimeTypes);
document.write("<br/>是否连接到网络");
document.write(navigator.onLine);
document.write("<br/>客户端计算机操作系统或者CPU");
document.write(navigator.oscpu);
document.write("<br/>浏览器所在的系统平台");
document.write(navigator.platform);
document.write("<br/>浏览器中插件信息数组");
document.write(navigator.plugins);
document.write("<br/>用户的首选项");
// document.write(navigator.preference());
document.write("<br/>产品名称");
document.write(navigator.product);
document.write("<br/>产品的次要信息");
document.write(navigator.productSub);
document.write("<br/>操作系统的语言");
document.write(navigator.systemLanguage);
document.write("<br/>浏览器的用户代理字符串");
document.write(navigator. userAgent);
document.write("<br/>操作系统默认语言");
document.write(navigator.userLanguage);
document.write("<br/>用户个人信息对象");
document.write(navigator.userProfile);
document.write("<br/>浏览器品牌");
document.write(navigator.vendor);
document.write("<br/>浏览器供应商次要信息");
document.write(navigator.vendorSub);
</SCRIPT>
</body>
</html>运行结果： /* 浏览器名称Mozilla 次版本信息undefined 完整的浏览器名称Netscape 浏览器版本5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36 浏览器编译版本undefined 是否启用cookietrue 客户端计算机CPU类型undefined 浏览器是否启用javafalse 浏览器主语言zh-CN 浏览器中注册的MIME类型数组[object MimeTypeArray] 是否连接到网络true 客户端计算机操作系统或者CPUundefined 浏览器所在的系统平台Win32 浏览器中插件信息数组[object PluginArray] 用户的首选项 产品名称Gecko 产品的次要信息20030107 操作系统的语言undefined 浏览器的用户代理字符串Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36 操作系统默认语言undefined 用户个人信息对象undefined 浏览器品牌Google Inc. 浏览器供应商次要信息 */ 四、DOMDOM（文档对象模型）是针对HTML和XML文档的一个API，通过DOM可以去改变文档。
DOM模型将整个文档（XML文档和HTML文档）看成一个树形结构，并用document对象表示该文档。 DOM规定文档中的每个成分都是一个节点（Node）： 文档节点（Document）：代表整个文档 4.1、节点类型12中节点类型都有NodeType属性来表明节点类型
示例： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<p id="p1"></p>
<script type="text/javascript">
var p1 = document.getElementById("p1");
console.log(p1.nodeType); //结点类型 1 Element 代表元素
console.log(p1.nodeName); //p 结点名称
var id = p1.getAttributeNode("id"); //获得p1的属性结点id
console.log(id.nodeType); //2 Attr 代表属性
console.log(id.nodeName); //id 结点名称
</script>
</body>
</html>结果：
4.2、节点关系
节点关系方法： hasChildNodes() 包含一个或多个节点时返回true 示例： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<p id="p1">
<p id="p1">p1</p>
<p id="p2">p2</p>
<p id="p3">p3</p>
</p>
<script type="text/javascript">
var p1 = document.getElementById("p1");
console.log(p1.firstChild); //换行
console.log(p1.firstElementChild); //p1结点
var childs=p1.childNodes; //所有子节点
for(var i=0;i<childs.length;i++){
console.log(childs[i]);
}
console.log(p1.hasChildNodes());
</script>
</body>
</html>结果：
4.3、选择器
示例： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
<style type="text/css">
.red {
color: red;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<p id="p1" class="c1 c2 red">
<p id="p1">p1</p>
<p id="p2">p2</p>
<p id="p3">p3</p>
</p>
<script type="text/javascript">
var ps = document.getElementsByTagName("p");
console.log(ps);
var p1 = document.querySelector("#p1");
console.log(p1.classList);
p1.classList.add("blue"); //增加新式
p1.classList.toggle("green"); //有就删除，没有就加
p1.classList.toggle("red");
console.log(p1.classList);
</script>
</body>
</html>结果：
4.4、样式操作方法style
代码： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
<style type="text/css">
.#p1{
background-color: red;
}
</style>
</head>
<body>
<p id="p1" class="c1 c2 red">
<p id="p1">p1</p>
<p id="p2">p2</p>
<p id="p3">p3</p>
</p>
<script type="text/javascript">
var p1=document.getElementById("p1");
p1.style.backgroundColor="lightgreen"; //background-color 去-变Camel命令
</script>
</body>
</html>结果：
4.5、元素节点ELEMENT
示例： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<script type="text/javascript">
var data = [{
id: 1,
name: "tom"
}, {
id: 2,
name: "rose"
}, {
id: 3,
name: "mark"
}, {
id: 4,
name: "jack"
}, {
id: 5,
"name": "lucy"
}];
var ul = document.createElement("ul");
for(var i = 0; i < data.length; i++) {
var li = document.createElement("li");
li.innerHTML = data[i].name;
var span=document.createElement("span");
span.innerText=" 删除";
span.setAttribute("data-id",data[i].id);
li.appendChild(span);
span.onclick=function(){
var id=this.getAttribute("data-id");
for(var i=0;i<data.length;i++){
if(data[i].id==id){
data.splice(i,1); //从data数组的第i位置开始删除1个元素
}
}
this.parentNode.parentNode.removeChild(this.parentNode);
console.log("还有："+data.length+"个对象"+JSON.stringify(data));
}
ul.appendChild(li);
}
document.body.appendChild(ul);
</script>
</body>
</html>结果：
4.6、属性节点attributes
示例： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<input id="txtName" type="text" />
<script>
var txtName=document.getElementById("txtName");
txtName.setAttribute("title","这是txtName"); //设置属性
console.log(txtName.getAttribute("title")); //获得属性
//创建一个属性
var placeholder=document.createAttribute("placeholder");
placeholder.nodeValue="请输入姓名"; //设置属性值
txtName.setAttributeNode(placeholder); //添加属性
</script>
</body>
</html>结果：
4.7、文本节点TEXT
4.8、文档节点 Document
示例： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<script type="text/javascript">
console.log("标题" + document.title);
console.log("地址" + document.URL);
console.log("域名" + document.domain);
console.log("编码" + document.charset);
document.open
</script>
</body>
</html>结果：
五、学习资料http://common.jb51.net/tag/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3JavaScript%E7%B3%BB%E5%88%97/1.htm 六、作业6.1)、尽量多的输出javascript中为false的情况 6.2)、尽量多的输出javascript中为undefined的情况 6.3)、用示例说明未定义全局变量，特别是没有使用var关键字时 6.4)、请定对照“数组”一节的内容，练习数组定义与每一个已列出的数组方法 6.5)、请使用纯JavaScript（不允许使用任何三方库，如jQuery）完成下列功能：
要求： 全选、反选、子项全部选项时父项被选择 6.6)、请写出以下两个正则表达式并使用两个文本框模拟用户提交数据时验证： //身份证 6.7)、请写一个javascript方法getQuery(key)用于根据key获得url中的参值，如果不指定参数则返回一个数组返回所有参数，如： url: http://127.0.0.1?id=1&name=tom
getQuery("id") 返回 1
getQuery() 返回[{key:id,value:1},{key:name,value:tom}]
//思考一个如果有多个想同的key时怎样处理相关推荐： | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
以上が最も完全な JavaScript 学習の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。