最も完全な JavaScript 学習の概要-jsチュートリアル-php.cn

この記事では、主に 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 型の場合

3) instanceof 演算子を通じて参照型判定問題を解決します

4) null はオブジェクトのプレースホルダーとみなされ、typeof 演算子は null 値に対して「object」を返します。

5) プリミティブデータ型と参照データ型の変数は次のようにメモリに保存されます:

memory of datatype in js

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); //true

ログイン後にコピー

2.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 对象属性

属性	描述	FF	IE
global	RegExp 对象是否具有标志 g。	1	4
ignoreCase	RegExp 对象是否具有标志 i。	1	4
lastIndex	一个整数，标示开始下一次匹配的字符位置。	1	4
multiline	RegExp 对象是否具有标志 m。	1	4
source	正则表达式的源文本。	1	4

RegExp 对象方法

方法	描述	FF	IE
compile	编译正则表达式。	1	4
exec	检索字符串中指定的值。返回找到的值，并确定其位置。	1	4
test	检索字符串中指定的值。返回 true 或 false。	1	4

示例：

<!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 对象的方法

方法	描述	FF	IE
search	检索与正则表达式相匹配的值。	1	4
match	找到一个或多个正则表达式的匹配。	1	4
replace	替换与正则表达式匹配的子串。	1	4
split	把字符串分割为字符串数组。	1	4

示例：

<!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 对象的 length 属性声明了该字符串中的字符数。
String 类定义了大量操作字符串的方法，例如从字符串中提取字符或子串，或者检索字符或子串。
需要注意的是，JavaScript 的字符串是不可变的（immutable），String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法，返回的是全新的字符串，而不是修改原始字符串。

String 对象属性

属性	描述
constructor	对创建该对象的函数的引用
length	字符串的长度
prototype	允许您向对象添加属性和方法

文字列オブジェクトのメソッド

メソッド	説明
anchor()	HTMLアンカーを作成します。
big()	文字列を大きなフォントで表示します。
blink()	点滅する文字列を表示します。
bold()	文字列を表示するには太字を使用します。
charAt()	指定された位置の文字を返します。
charCodeAt()	指定された位置にある文字の Unicode エンコードを返します。
concat()	接続文字列。
fixed()	文字列をタイプライターテキストとして表示します。
fontcolor()	指定された色を使用して文字列を表示します。
fontsize()	指定されたサイズを使用して文字列を表示します。
fromCharCode()	文字エンコーディングから文字列を作成します。
indexOf()	文字列を取得します。
italics()	文字列を表示するには斜体を使用します。
lastIndexOf()	文字列を後ろから前に検索します。
link()	文字列をリンクとして表示します。
localeCompare()	2 つの文字列をロケール固有の順序で比較します。
match()	1 つ以上の正規表現に一致するものを検索します。
replace()	正規表現に一致する部分文字列を置換します。
search()	正規表現に一致する値を取得します。
slice()	文字列のフラグメントを抽出し、抽出された部分を新しい文字列で返します。
small()	文字列を表示するには小さなフォントサイズを使用します。
split()	文字列を文字列の配列に分割します。
strike()	文字列を表示するには取り消し線を使用します。
sub()	文字列を添え字として表示します。
substr()	文字列から開始インデックス番号から指定された数の文字を抽出します。
substring()	文字列内の指定された 2 つのインデックス番号の間にある文字を抽出します。
sup()	文字列を上付き文字として表示します。
toLocaleLowerCase()	文字列を小文字に変換します。
toLocaleUpperCase()	文字列を大文字に変換します。
toLowerCase()	文字列を小文字に変換します。
toUpperCase()	文字列を大文字に変換します。
toSource()	はオブジェクトのソースコードを表します。
toString()	は文字列を返します。
valueOf()	文字列オブジェクトの元の値を返します。

2.7. 時刻と日付オブジェクト Date

Date オブジェクトは日付と時刻を処理するために使用されます。

Date オブジェクトを作成するための構文:

var myDate=new Date();

注: Date オブジェクトは、現在の日付と時刻を初期値として自動的に保存します。

Date オブジェクトのプロパティ

Property	Description
constructor	このオブジェクトを作成した Date 関数への参照を返します。
prototype	を使用すると、オブジェクトにプロパティとメソッドを追加できます。

Date オブジェクトのメソッド

Method	Description
Date()	現在の日の日付と時刻を返します。
getDate()	Date オブジェクトから日付 (1 ～ 31) を返します。
getDay()	Dateオブジェクトから曜日(0~6)を返します。
getMonth()	Date オブジェクトから月 (0 ～ 11) を返します。
getFull Year()	Date オブジェクトから年を 4 桁の数値として返します。
get Year()	代わりに getFull Year() メソッドを使用してください。
getHours()	Date オブジェクトの時間 (0 ～ 23) を返します。
getMinutes()	Date オブジェクトの分 (0 ~ 59) を返します。
getSeconds()	Date オブジェクトの秒数 (0 ~ 59) を返します。
getMilliseconds()	Date オブジェクトのミリ秒 (0 ～ 999) を返します。
getTime()	1970 年 1 月 1 日からのミリ秒数を返します。
getTimezoneOffset()	現地時間とグリニッジ標準時 (GMT) の間の分の差を返します。
getUTCDate()	世界時に基づいて Date オブジェクトから月の日 (1 ～ 31) を返します。
getUTCDay()	世界時に基づいて Date オブジェクトから曜日 (0 ~ 6) を返します。
getUTCMonth()	世界時に従ってDateオブジェクトから月(0〜11)を返します。
getUTCFul Year()	世界時に基づいて Date オブジェクトから 4 桁の年を返します。
getUTCHours()	世界時に従って Date オブジェクトの時間 (0 ~ 23) を返します。
getUTCMinutes()	世界時に従って Date オブジェクトの分 (0 ~ 59) を返します。
getUTCSeconds()	世界時に従って Date オブジェクトの秒 (0 ~ 59) を返します。
getUTCMilliseconds()	世界時に従って Date オブジェクトのミリ秒 (0 ～ 999) を返します。
parse()	1970 年 1 月 1 日の午前 0 時から指定された日付 (文字列) までのミリ秒数を返します。
setDate()	Date オブジェクトに月の特定の日 (1 ～ 31) を設定します。
setMonth()	Dateオブジェクトに月(0〜11)を設定します。
setFull Year()	Dateオブジェクトに年(4桁)を設定します。
set Year()	代わりに setFull Year() メソッドを使用してください。
setHours()	Dateオブジェクトに時間(0〜23)を設定します。
setMinutes()	Dateオブジェクトに分(0〜59)を設定します。
setSeconds()	Dateオブジェクトに秒(0〜59)を設定します。
setMilliseconds()	Dateオブジェクトにミリ秒(0〜999)を設定します。
setTime()	Date オブジェクトをミリ秒単位で設定します。
setUTCDate()	Date オブジェクトに世界時に従って日付 (1 ～ 31) を設定します。
setUTCMonth()	Date オブジェクトに世界時に従って月 (0 ～ 11) を設定します。
setUTCFul Year()	Date オブジェクトに世界時に従って年 (4 桁) を設定します。
setUTCHours()	世界時に従ってDateオブジェクトの時間(0〜23)を設定します。
setUTCMinutes()	Date オブジェクトに世界時に従って分 (0 ~ 59) を設定します。
setUTCSeconds()	Date オブジェクトの秒 (0 ~ 59) を世界時に従って設定します。
setUTCMilliseconds()	Date オブジェクトのミリ秒 (0 ~ 999) を世界時に従って設定します。
toSource()	このオブジェクトのソースコードを返します。
toString()	Date オブジェクトを文字列に変換します。
toTimeString()	Date オブジェクトの時刻部分を文字列に変換します。
toDateString()	Date オブジェクトの日付部分を文字列に変換します。
toGMTString()	代わりに toUTCString() メソッドを使用してください。
toUTCString()	世界時に従ってDateオブジェクトを文字列に変換します。
toLocaleString()	現地時間形式に従って Date オブジェクトを文字列に変換します。
toLocaleTimeString()	Date オブジェクトの時刻部分を現地時間形式に従って文字列に変換します。
toLocaleDateString()	Date オブジェクトの日付部分を現地時間形式に従って文字列に変換します。
UTC()	世界時に従って、1970 年 1 月 1 日から指定された日付までのミリ秒数を返します。
valueOf()	Date オブジェクトの元の値を返します。

2.8、数学对象Math

Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。

var pi_value=Math.PI;
var sqrt_value=Math.sqrt(15);

ログイン後にコピー

Math 对象属性

属性	描述
E	返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2	返回 2 的自然对数（约等于0.693）。
LN10	返回 10 的自然对数（约等于2.302）。
LOG2E	返回以 2 为底的 e 的对数（约等于 1.414）。
LOG10E	返回以 10 为底的 e 的对数（约等于0.434）。
PI	返回圆周率（约等于3.14159）。
SQRT1_2	返回返回 2 的平方根的倒数（约等于 0.707）。
SQRT2	返回 2 的平方根（约等于 1.414）。

Math 对象方法

方法	描述
abs(x)	返回数的绝对值。
acos(x)	返回数的反余弦值。
asin(x)	返回数的反正弦值。
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x)	对数进行上舍入。
cos(x)	返回数的余弦。
exp(x)	返回 e 的指数。
floor(x)	对数进行下舍入。
log(x)	返回数的自然对数（底为e）。
max(x,y)	返回 x 和 y 中的最高值。
min(x,y)	返回 x 和 y 中的最低值。
pow(x,y)	返回 x 的 y 次幂。
random()	返回 0 ~ 1 之间的随机数。
round(x)	把数四舍五入为最接近的整数。
sin(x)	返回数的正弦。
sqrt(x)	返回数的平方根。
tan(x)	返回角的正切。
toSource()	返回该对象的源代码。
valueOf()	返回 Math 对象的原始值。

2.9、JavaScript グローバルオブジェクト

グローバルプロパティと関数は、すべての組み込み JavaScript オブジェクトに使用できます。

グローバルオブジェクトは、JavaScript のグローバル関数とグローバルプロパティのプレースホルダーとして機能する事前定義されたオブジェクトです。グローバルオブジェクトを使用すると、他のすべての定義済みオブジェクト、関数、プロパティにアクセスできます。グローバルオブジェクトはどのオブジェクトのプロパティでもないため、名前はありません。
トップレベルの JavaScript コードでは、キーワード this を使用してグローバルオブジェクトを参照できます。ただし、グローバルオブジェクトはスコープチェーンの先頭にあるため、通常はこの方法でグローバルオブジェクトを参照する必要はありません。つまり、修飾されていない変数名と関数名はすべてオブジェクトのプロパティとしてクエリされることになります。たとえば、JavaScript コードが parseInt() 関数を参照する場合、グローバルオブジェクトの parseInt プロパティを参照します。グローバルオブジェクトはスコープチェーンの先頭です。これは、トップレベルの JavaScript コードで宣言されたすべての変数がグローバルオブジェクトのプロパティになることも意味します。
グローバルオブジェクトは単なるオブジェクトであり、クラスではありません。コンストラクターも、新しいグローバルオブジェクトをインスタンス化する機能もありません。
JavaScript コードが特殊な環境に埋め込まれている場合、グローバルオブジェクトは通常、環境固有のプロパティを持ちます。実際、ECMAScript 標準では、グローバルオブジェクトのタイプを指定していません。JavaScript 実装または埋め込み JavaScript は、オブジェクトがここにリストされている基本プロパティと関数を定義している限り、あらゆるタイプのオブジェクトをグローバルオブジェクトとして扱うことができます。たとえば、LiveConnect または関連テクノロジを通じて Java をスクリプト化できるようにする JavaScript 実装では、グローバルオブジェクトには、ここにリストされている java プロパティと Package プロパティ、および getClass() メソッドが与えられます。クライアント側 JavaScript では、グローバルオブジェクトは Window オブジェクトであり、JavaScript コードを使用できる Web ブラウザウィンドウを表します。

トップレベル関数 (グローバル関数)

関数	説明
decodeURI()	エンコードされた URI をデコードします。
decodeURIComponent()	エンコードされた URI コンポーネントをデコードします。
encodeURI()	文字列をURIにエンコードします。
encodeURIComponent()	文字列を URI コンポーネントにエンコードします。
escape()	文字列をエンコードします。
eval()	JavaScript文字列を計算し、スクリプトコードとして実行します。
getClass()	JavaObject の JavaClass を返します。
isFinite()	値が有限数かどうかをチェックします。
isNaN()	値が数値かどうかを確認します。
Number()	オブジェクトの値を数値に変換します。
parseFloat()	文字列を解析し、float を返します。
parseInt()	文字列を解析し、整数を返します。
String()	オブジェクトの値を文字列に変換します。
unescape()	scape()でエンコードされた文字列をデコードします。

トップレベルプロパティ (グローバルプロパティ)

メソッド	説明
Infinity	は、正の無限大の値を表します。
java	は、java.* パッケージレベルの JavaPackage を表します。
NaN	は、値が数値かどうかを示します。
Packages	ルート JavaPackage オブジェクト。
未定義	は未定義の値を示します。

在 JavaScript 核心语言中，全局对象的预定义属性都是不可枚举的，所有可以用 for/in 循环列出所有隐式或显式声明的全局变量，如下所示：

var variables = "";
for (var name in this) 
{
variables += name + "、";
}
document.write(variables);

ログイン後にコピー

结果：

2.10、JavaScript避免使用的语法

1）、 ==

Javascript有两组相等运算符，一组是==和!=，另一组是===和!==。前者只比较值的相等，后者除了值以外，还比较类型是否相同。

请尽量不要使用前一组，永远只使用===和!==。因为==默认会进行类型转换，规则十分难记。如果你不相信的话，请回答下面五个判断式的值是true还是false：

false == &#39;false&#39;
false == undefined
false == null
null == undefined
null == &#39;&#39;

ログイン後にコピー

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)
　　　　t = true;
这样不利于阅读代码，而且将来添加语句时非常容易出错。建议不管是否只有一行命令，都一律加上大括号。

　　if (ok){
　　　　t = true;
　　}

7）、 ++和--

递增运算符++和递减运算符--，直接来自C语言，表面上可以让代码变得很紧凑，但是实际上会让代码看上去更复杂和更晦涩。因此为了代码的整洁性和易读性，不用为好。

8）、位运算符

Javascript完全套用了Java的位运算符，包括按位与&、按位或|、按位异或^、按位非~、左移<<、带符号的右移>>和用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 = &#39;meow&#39; ;
　　}

ログイン後にコピー

然后，再生成一个对象

　　var myCat = new Cat('mimi');
这种利用函数生成类、利用new生成对象的语法，其实非常奇怪，一点都不符合直觉。而且，使用的时候，很容易忘记加上new，就会变成执行函数，然后莫名其妙多出几个全局变量。所以，建议不要这样创建对象，而采用一种变通方法。

Douglas Crockford给出了一个函数：

Object.beget = function (o) {
　　　　var F = function (o) {};
　　　　F.prototype = o ;
　　　　return new F;
　　};

ログイン後にコピー

创建对象时就利用这个函数，对原型对象进行操作：

var Cat = {
　　　　name:&#39;&#39;,
　　　　saying:&#39;meow&#39;
　　};

　　var myCat = Object.beget(Cat);

ログイン後にコピー

对象生成后，可以自行对相关属性进行赋值：

　　myCat.name = 'mimi';

12）、void

在大多数语言中，void都是一种类型，表示没有值。但是在Javascript中，void是一个运算符，接受一个运算数，并返回undefined。

　void 0; // undefined
这个命令没什么用，而且很令人困惑，建议避免使用。

三、BOM

3.1、BOM概要

BOM(Browser Object Model) 即浏览器对象模型，主要是指一些浏览器内置对象如：window、location、navigator、screen、history等对象，用于完成一些操作浏览器的特定API。

用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

BOM是browser object model的缩写，简称浏览器对象模型
BOM提供了独立于内容而与浏览器窗口进行交互的对象
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C
BOM最初是Netscape浏览器标准的一部分

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 === &#39;number&#39;) ? window.screenLeft : window.screenX;
        var topPos = (typeof window.screenLeft === &#39;number&#39;) ? 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() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式
code 必需，要调用的函数或要执行的代码串。

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() 函数
writeln() 函数
document.open() 函数
document.close() 函数

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(&#39;jb51.net&#39;)

ログイン後にコピー

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.
浏览器供应商次要信息
*/

ログイン後にコピー

四、DOM

DOM（文档对象模型）是针对HTML和XML文档的一个API，通过DOM可以去改变文档。

DOM模型将整个文档（XML文档和HTML文档）看成一个树形结构，并用document对象表示该文档。

DOM规定文档中的每个成分都是一个节点（Node）：

文档节点（Document）：代表整个文档
元素节点（Element）：文档中的一个标记
文本节点（Text）：标记中的文本
属性节点（Attr）：代表一个属性，元素才有属性

4.1、节点类型

12中节点类型都有NodeType属性来表明节点类型

节点类型		描述
1	Element	代表元素
2	Attr	代表属性
3	Text	代表元素或属性中的文本内容。
4	CDATASection	代表文档中的 CDATA 部分（不会由解析器解析的文本）。
5	EntityReference	代表实体引用。
6	Entity	代表实体。
7	ProcessingInstruction	代表处理指令。
8	Comment	代表注释。
9	Document	代表整个文档（DOM 树的根节点）。
10	DocumentType	向为文档定义的实体提供接口
11	DocumentFragment	代表轻量级的 Document 对象，能够容纳文档的某个部分
12	Notation	代表 DTD 中声明的符号。

示例：

<!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、节点关系

nodeType	返回节点类型的数字值（1~12）
nodeName	元素节点:标签名称(大写)、属性节点:属性名称、文本节点:#text、文档节点:#document
nodeValue	文本节点:包含文本、属性节点:包含属性、元素节点和文档节点:null
parentNode	父节点
parentElement	父节点标签元素
childNodes	所有子节点
children	第一层子节点
firstChild	第一个子节点，Node 对象形式
firstElementChild	第一个子标签元素
lastChild	最后一个子节点
lastElementChild	最后一个子标签元素
previousSibling	上一个兄弟节点
previousElementSibling	上一个兄弟标签元素
nextSibling	下一个兄弟节点
nextElementSibling	下一个兄弟标签元素
childElementCount	第一层子元素的个数(不包括文本节点和注释)
ownerDocument	指向整个文档的文档节点

节点关系方法：

hasChildNodes() 包含一个或多个节点时返回true
contains() 如果是后代节点返回true
isSameNode()、isEqualNode() 传入节点与引用节点的引用为同一个对象返回true
compareDocumentPostion() 确定节点之间的各种关系

示例：

<!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、选择器

getElementById()	一个参数:元素标签的ID
getElementsByTagName()	一个参数:元素标签名
getElementsByName()	一个参数:name属性名
getElementsByClassName()	一个参数:包含一个或多个类名的字符串
classList	返回所有类名的数组 add （添加） contains （存在返回true,否则返回false） remove（删除） toggle（存在则删除，否则添加）
querySelector()	接收CSS选择符，返回匹配到的第一个元素，没有则null
querySelectorAll()	接收CSS选择符，返回一个数组，没有则返回[]

示例：

<!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

style.cssText	可对style中的代码进行读写
style.item()	返回给定位置的CSS属性的名称
style.length	style代码块中参数个数
style.getPropertyValue()	返回给定属性的字符串值
style.getPropertyPriority()	检测给定属性是否设置了!important，设置了返回"important";否则返回空字符串
style.removeProperty()	删除指定属性
style.setProperty()	设置属性，可三个参数:设置属性名，设置属性值，是否设置为"important"(可不写或写"")

代码：

<!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

nodeName	访问元素的标签名
tagName	访问元素的标签名
createElement()	创建节点
appendChild()	末尾添加节点，并返回新增节点
insertBefore()	参照节点之前插入节点，两个参数：要插入的节点和参照节点
insertAfter()	参照节点之后插入节点，两个参数：要插入的节点和参照节点
replaceChild()	替换节点，两个参数：要插入的节点和要替换的节点(被移除)
removeChild()	移除节点
cloneNode()	克隆，一个布尔值参数，true为深拷贝，false为浅拷贝
importNode()	从文档中复制一个节点，两个参数：要复制的节点和布尔值(是否复制子节点)
insertAdjacentHTML()	插入文本，两个参数：插入的位置和要插入文本 "beforebegin",在该元素前插入 "afterbegin",在该元素第一个子元素前插入 "beforeend",在该元素最后一个子元素后面插入 "afterend",在该元素后插入

示例：

<!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

attributes	获取所有标签属性
getAttribute()	获取指定标签属性
setAttribute()	设置指定标签属
removeAttribute()	移除指定标签属
var s = document.createAttribute("age") s.nodeValue = "18"	创建age属性设置属性值为18

示例：

<!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

innerText	所有的纯文本内容，包括子标签中的文本
outerText	与innerText类似
innerHTML	所有子节点(包括元素、注释和文本节点)
outerHTML	返回自身节点与所有子节点
textContent	与innerText类似，返回的内容带样式
data	文本内容
length	文本长度
createTextNode()	创建文本
normalize()	删除文本与文本之间的空白
splitText()	分割
appendData()	追加
deleteData(offset,count)	从offset指定的位置开始删除count个字符
insertData(offset,text)	在offset指定的位置插入text
replaceData(offset,count,text)	替换，从offset开始到offscount处的文本被text替换
substringData(offset,count)	提取从ffset开始到offscount处的文本

4.8、文档节点 Document

document.documentElement	代表页面中的元素
document.body	代表页面中的元素
document.doctype	代表标签
document.head	代表页面中的元素
document.title	代表元素的文本，可修改</td></tr><tr><td>document.URL</td><td>当前页面的URL地址</td></tr><tr><td>document.domain</td><td>当前页面的域名</td></tr><tr><td>document.charset</td><td>当前页面使用的字符集</td></tr><tr><td>document.defaultView</td><td>返回当前 document对象所关联的 window 对象，没有返回 null</td></tr><tr><td>document.anchors</td><td>文档中所有带name属性的<a>元素</td></tr><tr><td>document.links</td><td>文档中所有带href属性的<a>元素</td></tr><tr><td>document.forms</td><td>文档中所有的<form>元素</td></tr><tr><td>document.images</td><td>文档中所有的<img>元素</td></tr><tr><td>document.readyState</td><td>两个值:loading(正在加载文档)、complete(已经加载完文档)</td></tr><tr><td>document.compatMode</td><td><p>两个值：BackCompat：标准兼容模式关闭、CSS1Compat：标准兼容模式开启</p></td></tr><tr><td><p>write()、writeln()、</p><p>open()、close()</p></td><td><p>write()文本原样输出到屏幕、writeln()输出后加换行符、</p><p>open()清空内容并打开新文档、close()关闭当前文档，下次写是新文档</p></td></tr></tbody></table><p>示例：</p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"><!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></pre><div class="contentsignin">ログイン後にコピー</div></div><p>结果：</p><p><img alt="" src="https://img.php.cn/upload/article/000/054/025/901d5bf647ae71b34cf6adae2dc7269f-28.png"/></p><h2>五、学习资料</h2><p>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</p><h2>六、作业</h2><p>6.1)、尽量多的输出javascript中为false的情况</p><p>6.2)、尽量多的输出javascript中为undefined的情况</p><p>6.3)、用示例说明未定义全局变量，特别是没有使用var关键字时</p><p>6.4)、请定对照“数组”一节的内容，练习数组定义与每一个已列出的数组方法</p><p>6.5)、请使用纯JavaScript（不允许使用任何三方库，如jQuery）完成下列功能：</p><p><img alt="" src="https://img.php.cn/upload/article/000/054/025/901d5bf647ae71b34cf6adae2dc7269f-29.png"/></p><p>要求：</p><p>全选、反选、子项全部选项时父项被选择<br/>完成所有功能<br/>鼠标移动到每一行上时高亮显示（js）<br/>尽量使用弹出窗口完成增加、修改、详细功能<br/>删除时提示<br/>使用正则验证<br/>封装代码，最终运行的代码只有一个对象，只对外暴露一个对象<br/>越漂亮越好</p><p>6.6)、请写出以下两个正则表达式并使用两个文本框模拟用户提交数据时验证：</p><p>//身份证<br/>//411081199004235955 41108119900423595x 41108119900423595X<br/>//邮箱<br/>//zhangguo123@qq.com zhangguo@sina.com.cn</p><p>6.7)、请写一个javascript方法getQuery(key)用于根据key获得url中的参值，如果不指定参数则返回一个数组返回所有参数，如：</p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">url: http://127.0.0.1?id=1&name=tom getQuery("id") 返回 1 getQuery() 返回[{key:id,value:1},{key:name,value:tom}] //思考一个如果有多个想同的key时怎样处理</pre><div class="contentsignin">ログイン後にコピー</div></div><p>相关推荐：</p> <p><a href="http://www.php.cn/js-tutorial-377788.html" target="_self">JavaScript基础进阶之数组相关介绍</a></p> <p><a href="http://www.php.cn/js-tutorial-375936.html" target="_self">JavaScript基础知识点学习总结</a></p> <p><a href="http://www.php.cn/js-tutorial-382774.html" target="_self">详解9个JavaScript图表库</a></p> <p><a href="http://www.php.cn/js-tutorial-382693.html" target="_self">最全JavaScript的模块讲解</a></p> <p><a href="http://www.php.cn/js-tutorial-382669.html" target="_self">JavaScript队列原理与用法实例详解</a></p><p>以上が最も完全な JavaScript 学習の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。</p> </div> </div> <div style="height: 25px;"> <div class="wzconBq" style="display: inline-flex;"> <span>関連ラベル：</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/search?word=javascript" target="_blank">javascript</a> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/ja/search?word=js" target="_blank">js</a> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/ja/search?word=要約する" target="_blank">要約する</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;">ソース：php.cn</div> </div> <div class="wzconOtherwz"> <a href="http://www.php.cn/ja/faq/384408.html" title="章の目次インデックスを自動的に生成する Web サイトの js コード例"> <span>前の記事：章の目次インデックスを自動的に生成する Web サイトの js コード例</span> </a> <a href="http://www.php.cn/ja/faq/384410.html" title="ブートストラップツリービューにより、データの動的なロードとクイック検索機能を実現"> <span>次の記事：ブートストラップツリービューにより、データの動的なロードとクイック検索機能を実現</span> </a> </div> <div class="wzconShengming"> <div class="bzsmdiv">このウェブサイトの声明</div> <div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div> </div> <div class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div> <div class="wzconZzwz"> <div class="wzconZzwztitle">著者別の最新記事</div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/382497.html">最新の PHP Programmer Toolbox v1.0 バージョンの紹介</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/384436.html">vue-cliカスタムディレクティブの詳細説明検証スライダーを追加するディレクティブ</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/385949.html">PHPでIMAPを利用したメール受信例を詳しく解説</a> </div> <div>2023-03-19 18:36:02</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/387976.html">Redisの一般的な利用シナリオの共有</a> </div> <div>2023-03-21 07:36:01</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/384222.html">JSの数値と文字列の変換を詳しく解説</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/384373.html">Dreamweaver Web ページに電子メールリンクを追加する共有の例</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/384107.html">Vue フィルターとその使用法の概要</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/387142.html">PHPの基礎知識メモ共有</a> </div> <div>2023-03-20 14:32:01</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/388965.html">WeChatアプレットファイルAPIの詳細説明</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/382202.html">JSで実装されるajaxと同一オリジン戦略について詳しく解説</a> </div> <div>1970-01-01 08:00:00</div> </li> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">最新の問題</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ja/wenda/176376.html" target="_blank" title="JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド" class="wdcdcTitle">JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド</a> <a href="http://www.php.cn/ja/wenda/176376.html" class="wdcdcCons">img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> から 2024-04-06 19:25:49</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>505</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ja/wenda/176368.html" target="_blank" title="d3.js でズームインすると散布図のポイントの値が維持されない" class="wdcdcTitle">d3.js でズームインすると散布図のポイントの値が維持されない</a> <a href="http://www.php.cn/ja/wenda/176368.html" class="wdcdcCons">d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> から 2024-04-06 18:16:26</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>403</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ja/wenda/176347.html" target="_blank" title="ベンダー固有の疑似要素上の JavaScript ホバーイベント" class="wdcdcTitle">ベンダー固有の疑似要素上の JavaScript ホバーイベント</a> <a href="http://www.php.cn/ja/wenda/176347.html" class="wdcdcCons">次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> から 2024-04-06 15:35:24</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>274</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ja/wenda/176343.html" target="_blank" title="Javascript/Jqueryを使用してボタンなしでフォームを送信する" class="wdcdcTitle">Javascript/Jqueryを使用してボタンなしでフォームを送信する</a> <a href="http://www.php.cn/ja/wenda/176343.html" class="wdcdcCons">JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> から 2024-04-06 14:54:03</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>2</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>421</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ja/wenda/176324.html" target="_blank" title="CollapseDisplay クラスを使用してブートストラップアコーディオンヘッダーの外観をカスタマイズする" class="wdcdcTitle">CollapseDisplay クラスを使用してブートストラップアコーディオンヘッダーの外観をカスタマイズする</a> <a href="http://www.php.cn/ja/wenda/176324.html" class="wdcdcCons">class Collapseshow を使用してパネルのカードタイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> から 2024-04-06 12:53:11</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>376</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>関連トピック</div> <a href="http://www.php.cn/ja/faq/zt" target="_blank">詳細> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ja/faq/jsszcd"><img src="https://img.php.cn/upload/subject/202407/22/2024072214415543594.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="配列の長さを取得するjsメソッド" /> </a> <a target="_blank" href="http://www.php.cn/ja/faq/jsszcd" class="title-a-spanl" title="配列の長さを取得するjsメソッド"><span>配列の長さを取得するjsメソッド</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ja/faq/jszzbds"><img src="https://img.php.cn/upload/subject/202407/22/2024072214413954023.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="js正規表現" /> </a> <a target="_blank" href="http://www.php.cn/ja/faq/jszzbds" class="title-a-spanl" title="js正規表現"><span>js正規表現</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ja/faq/jssxym"><img src="https://img.php.cn/upload/subject/202407/22/2024072214363232433.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="jsで現在のページを更新する" /> </a> <a target="_blank" href="http://www.php.cn/ja/faq/jssxym" class="title-a-spanl" title="jsで現在のページを更新する"><span>jsで現在のページを更新する</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ja/faq/jssswr"><img src="https://img.php.cn/upload/subject/202407/22/2024072214362363697.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="jsの丸め" /> </a> <a target="_blank" href="http://www.php.cn/ja/faq/jssswr" class="title-a-spanl" title="jsの丸め"><span>jsの丸め</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ja/faq/jshqdqsj"><img src="https://img.php.cn/upload/subject/202407/22/2024072214282324693.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="jsは現在時刻を取得します" /> </a> <a target="_blank" href="http://www.php.cn/ja/faq/jshqdqsj" class="title-a-spanl" title="jsは現在時刻を取得します"><span>jsは現在時刻を取得します</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ja/faq/jszfcsz"><img src="https://img.php.cn/upload/subject/202407/22/2024072214253682490.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="js文字列を配列に変換" /> </a> <a target="_blank" href="http://www.php.cn/ja/faq/jszfcsz" class="title-a-spanl" title="js文字列を配列に変換"><span>js文字列を配列に変換</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ja/faq/jsssmys"><img src="https://img.php.cn/upload/subject/202407/22/2024072214182727205.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="jsはどういう意味ですか" /> </a> <a target="_blank" href="http://www.php.cn/ja/faq/jsssmys" class="title-a-spanl" title="jsはどういう意味ですか"><span>jsはどういう意味ですか</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ja/faq/jsscjddff"><img src="https://img.php.cn/upload/subject/202407/22/2024072214115932190.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="ノードを削除するjsメソッド" /> </a> <a target="_blank" href="http://www.php.cn/ja/faq/jsscjddff" class="title-a-spanl" title="ノードを削除するjsメソッド"><span>ノードを削除するjsメソッド</span> </a> </li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <div class="wzrOne"> <div class="wzroTitle">人気のおすすめ</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="jsはどういう意味ですか" href="http://www.php.cn/ja/faq/482163.html">jsはどういう意味ですか</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="jsで文字列を配列に変換するにはどうすればよいですか?" href="http://www.php.cn/ja/faq/461802.html">jsで文字列を配列に変換するにはどうすればよいですか?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="JavaScriptを使用してページを更新する方法" href="http://www.php.cn/ja/faq/473330.html">JavaScriptを使用してページを更新する方法</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="js配列内の項目を削除する方法" href="http://www.php.cn/ja/faq/475790.html">js配列内の項目を削除する方法</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="sqrt関数の使い方" href="http://www.php.cn/ja/faq/415276.html">sqrt関数の使い方</a> </div> </li> </ul> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="wzrThree"> <div class="wzrthree-title"> <div>人気のチュートリアル</div> <a target="_blank" href="http://www.php.cn/ja/course.html">詳細> </a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one">関連するチュートリアル <div></div></div> <div class="tabdiv swiper-slide" data-id="two">人気のおすすめ<div></div></div> <div class="tabdiv swiper-slide" data-id="three">最新のコース<div></div></div> </div> <ul class="one"> <li> <a target="_blank" href="http://www.php.cn/ja/course/812.html" title="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)" href="http://www.php.cn/ja/course/812.html">最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)</a> <div class="wzrthreerb"> <div>1416821 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/74.html" title="PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ" href="http://www.php.cn/ja/course/74.html">PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ</a> <div class="wzrthreerb"> <div>4257445 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="74"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/286.html" title="JAVA 初心者向けビデオチュートリアル" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 初心者向けビデオチュートリアル"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA 初心者向けビデオチュートリアル" href="http://www.php.cn/ja/course/286.html">JAVA 初心者向けビデオチュートリアル</a> <div class="wzrthreerb"> <div>2475817 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/504.html" title="Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル" href="http://www.php.cn/ja/course/504.html">Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル</a> <div class="wzrthreerb"> <div>503673 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/2.html" title="PHP ゼロベースの入門チュートリアル" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="PHP ゼロベースの入門チュートリアル"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP ゼロベースの入門チュートリアル" href="http://www.php.cn/ja/course/2.html">PHP ゼロベースの入門チュートリアル</a> <div class="wzrthreerb"> <div>844119 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="2"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="http://www.php.cn/ja/course/812.html" title="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)" href="http://www.php.cn/ja/course/812.html">最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)</a> <div class="wzrthreerb"> <div >1416821 回の学習</div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/286.html" title="JAVA 初心者向けビデオチュートリアル" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 初心者向けビデオチュートリアル"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA 初心者向けビデオチュートリアル" href="http://www.php.cn/ja/course/286.html">JAVA 初心者向けビデオチュートリアル</a> <div class="wzrthreerb"> <div >2475817 回の学習</div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/504.html" title="Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル" href="http://www.php.cn/ja/course/504.html">Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル</a> <div class="wzrthreerb"> <div >503673 回の学習</div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/901.html" title="Web フロントエンド開発の簡単な紹介" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Web フロントエンド開発の簡単な紹介"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Web フロントエンド開発の簡単な紹介" href="http://www.php.cn/ja/course/901.html">Web フロントエンド開発の簡単な紹介</a> <div class="wzrthreerb"> <div >215273 回の学習</div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/234.html" title="PSビデオチュートリアルをゼロからマスターする" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="PSビデオチュートリアルをゼロからマスターする"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PSビデオチュートリアルをゼロからマスターする" href="http://www.php.cn/ja/course/234.html">PSビデオチュートリアルをゼロからマスターする</a> <div class="wzrthreerb"> <div >876886 回の学習</div> <div class="courseICollection" data-id="234"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="three" style="display: none;"> <li> <a target="_blank" href="http://www.php.cn/ja/course/1648.html" title="[Web フロントエンド] Node.js クイックスタート" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web フロントエンド] Node.js クイックスタート"/> </a> <div class="wzrthree-right"> <a target="_blank" title="[Web フロントエンド] Node.js クイックスタート" href="http://www.php.cn/ja/course/1648.html">[Web フロントエンド] Node.js クイックスタート</a> <div class="wzrthreerb"> <div >6360 回の学習</div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/1647.html" title="海外のWeb開発フルスタックコースの完全なコレクション" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="海外のWeb開発フルスタックコースの完全なコレクション"/> </a> <div class="wzrthree-right"> <a target="_blank" title="海外のWeb開発フルスタックコースの完全なコレクション" href="http://www.php.cn/ja/course/1647.html">海外のWeb開発フルスタックコースの完全なコレクション</a> <div class="wzrthreerb"> <div >5011 回の学習</div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/1646.html" title="Go言語実践GraphQL" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go言語実践GraphQL"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Go言語実践GraphQL" href="http://www.php.cn/ja/course/1646.html">Go言語実践GraphQL</a> <div class="wzrthreerb"> <div >4193 回の学習</div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/1645.html" title="550W ファンマスターが JavaScript をゼロから段階的に学習します" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W ファンマスターが JavaScript をゼロから段階的に学習します"/> </a> <div class="wzrthree-right"> <a target="_blank" title="550W ファンマスターが JavaScript をゼロから段階的に学習します" href="http://www.php.cn/ja/course/1645.html">550W ファンマスターが JavaScript をゼロから段階的に学習します</a> <div class="wzrthreerb"> <div >633 回の学習</div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/1644.html" title="Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる" href="http://www.php.cn/ja/course/1644.html">Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる</a> <div class="wzrthreerb"> <div >21312 回の学習</div> <div class="courseICollection" data-id="1644"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper2', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrthreeTab>div').click(function(e){ $('.wzrthreeTab>div').removeClass('check') $(this).addClass('check') $('.wzrthreelist>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div>最新のダウンロード</div> <a href="http://www.php.cn/ja/xiazai">詳細> </a> </div> <script> $(document).ready(function(){ var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{ speed:1000, autoplay:{ delay:3500, disableOnInteraction: false, }, pagination:{ el:'.sjyx_banSwiperwz .swiper-pagination', clickable :false, }, loop:true }) }) </script> <div class="wzrfourList swiper3"> <div class="wzrfourlTab swiper-wrapper"> <div class="check swiper-slide" data-id="onef">ウェブエフェクト <div></div></div> <div class="swiper-slide" data-id="twof">公式サイト<div></div></div> <div class="swiper-slide" data-id="threef">サイト素材<div></div></div> <div class="swiper-slide" data-id="fourf">フロントエンドテンプレート<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery エンタープライズメッセージフォームの連絡先コード" href="http://www.php.cn/ja/xiazai/js/8071">[フォームボタン] jQuery エンタープライズメッセージフォームの連絡先コード</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 MP3 オルゴール再生効果" href="http://www.php.cn/ja/xiazai/js/8070">[プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 クールなパーティクルアニメーションナビゲーションメニューの特殊効果" href="http://www.php.cn/ja/xiazai/js/8069">[メニューナビゲーション] HTML5 クールなパーティクルアニメーションナビゲーションメニューの特殊効果</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery ビジュアルフォームのドラッグアンドドロップ編集コード" href="http://www.php.cn/ja/xiazai/js/8068">[フォームボタン] jQuery ビジュアルフォームのドラッグアンドドロップ編集コード</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="VUE.JS 模倣 Kugou 音楽プレーヤーコード" href="http://www.php.cn/ja/xiazai/js/8067">[プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤーコード</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="古典的な HTML5 プッシュボックスゲーム" href="http://www.php.cn/ja/xiazai/js/8066">[html5特殊効果] 古典的な HTML5 プッシュボックスゲーム</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="画像効果を追加または削減するための jQuery スクロール" href="http://www.php.cn/ja/xiazai/js/8065">[画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="CSS3 個人アルバムカバーホバーズーム効果" href="http://www.php.cn/ja/xiazai/js/8064">[フォトアルバム効果] CSS3 個人アルバムカバーホバーズーム効果</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8328" title="室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート" target="_blank">[フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8327" title="フレッシュカラーの個人履歴書ガイドページテンプレート" target="_blank">[フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8326" title="デザイナーのクリエイティブな仕事の履歴書 Web テンプレート" target="_blank">[フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8325" title="現代のエンジニアリング建設会社のウェブサイトのテンプレート" target="_blank">[フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8324" title="教育サービス機関向けのレスポンシブ HTML5 テンプレート" target="_blank">[フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8323" title="オンライン電子書籍ストアモールのウェブサイトテンプレート" target="_blank">[フロントエンドテンプレート] オンライン電子書籍ストアモールのウェブサイトテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8322" title="IT テクノロジーがインターネット企業の Web サイトテンプレートを解決します" target="_blank">[フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイトテンプレートを解決します</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8321" title="パープルスタイル外国為替取引サービスウェブサイトテンプレート" target="_blank">[フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/sucai/3078" target="_blank" title="かわいい夏の要素のベクター素材 (EPS+PNG)">[PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/sucai/3077" target="_blank" title="4 つの赤い 2023 卒業バッジベクター素材 (AI+EPS+PNG)">[PNG素材] 4 つの赤い 2023 卒業バッジベクター素材 (AI+EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/sucai/3076" target="_blank" title="歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）">[バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/sucai/3075" target="_blank" title="金色の卒業帽ベクター素材（EPS+PNG）">[PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/sucai/3074" target="_blank" title="黒と白のスタイルの山アイコンベクター素材 (EPS+PNG)">[PNG素材] 黒と白のスタイルの山アイコンベクター素材 (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/sucai/3073" target="_blank" title="異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）">[PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/sucai/3072" target="_blank" title="フラットスタイルの植樹祭バナーベクター素材 (AI+EPS)">[バナー画像] フラットスタイルの植樹祭バナーベクター素材 (AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/sucai/3071" target="_blank" title="9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）">[PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）</a> </div> </li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8328" target="_blank" title="室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート">[フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8327" target="_blank" title="フレッシュカラーの個人履歴書ガイドページテンプレート">[フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8326" target="_blank" title="デザイナーのクリエイティブな仕事の履歴書 Web テンプレート">[フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8325" target="_blank" title="現代のエンジニアリング建設会社のウェブサイトのテンプレート">[フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8324" target="_blank" title="教育サービス機関向けのレスポンシブ HTML5 テンプレート">[フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8323" target="_blank" title="オンライン電子書籍ストアモールのウェブサイトテンプレート">[フロントエンドテンプレート] オンライン電子書籍ストアモールのウェブサイトテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8322" target="_blank" title="IT テクノロジーがインターネット企業の Web サイトテンプレートを解決します">[フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイトテンプレートを解決します</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8321" target="_blank" title="パープルスタイル外国為替取引サービスウェブサイトテンプレート">[フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート</a> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper3', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrfourlTab>div').click(function(e){ $('.wzrfourlTab>div').removeClass('check') $(this).addClass('check') $('.wzrfourList>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> </div> </div> <div class="phpFoot"> <div class="phpFootIn"> <div class="phpFootCont"> <div class="phpFootLeft"> <dl> <dt> <a href="http://www.php.cn/ja/about/xieyi.html" rel="nofollow" target="_blank" title="私たちについて" class="cBlack">私たちについて</a> <a href="http://www.php.cn/ja/about/yinsi.html" rel="nofollow" target="_blank" title="免責事項" class="cBlack">免責事項</a> <a href="http://www.php.cn/ja/update/article_0_1.html" target="_blank" title="Sitemap" class="cBlack">Sitemap</a> <div class="clear"></div> </dt> <dd class="cont1">PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</dd> </dl> </div> </div> </div> </div> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1731050031"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> </body> </html>

最も完全な JavaScript 学習の概要

1. JavaScript の概要

1.1. JavaScript の構成

1.2、JavaScript スクリプト言語機能

2. ECMAScript (JavaScript コアと構文)

2.1、ECMAScript 定義

2.2. データ型

2.3、ローカル変数とグローバル変数の代わりに === を使用してみてください

2.4, Array (配列)

2.4.1、创建

2.4.2、访问与修改

2.4.3、添加元素

2.4.4、删除

2.4.5、截取和合并

2.4.6、拷贝

2.4.7、排序

2.4.8、合并成字符

2.5、正则表达式RegExp

2.6、字符串对象String

2.7. 時刻と日付オブジェクト Date

2.8、数学对象Math

2.9、JavaScript グローバル オブジェクト

2.10、JavaScript避免使用的语法

三、BOM

3.1、BOM概要

3.2、BOM导图

3.3、window对象

3.4、document 对象

3.5、location对象

3.6、history对象

3.7、navigator对象

四、DOM

4.1、节点类型

4.2、节点关系

4.3、选择器

4.4、样式操作方法style

4.5、元素节点ELEMENT

4.6、属性节点attributes

4.7、文本节点TEXT

4.8、文档节点 Document

2.9、JavaScript グローバルオブジェクト