人々はあまり話さないので、javascript 列は JavaScript の知識体系を統合するのに役立ちます。
基本的な JavaScript 構文
##
var a = [1, 2, 5]; for(var k in a){ console.log(k); // k 为当前元素的下标 } for(var m of a){ console.log(m); // m 为当前元素的值 } VM215:3 0 VM215:3 1 VM215:3 2 VM215:6 1 VM215:6 2 VM215:6 5复制代码
変数の名前は「識別子」とも呼ばれます。変数に初期値が割り当てられていない場合、値はデフォルトで
unknown 変数が宣言されておらず、直接使用されていない場合は、
ReferenceErrorunknown
の場合、ブール値環境は
変数値が ## の場合、ブール値環境は false
、ブール値 環境は
false
// ES5 var a = 'web'; window.a; // 'web' // ES6 let b = 'web'; window.b; // undefined复制代码
コメント
// 单行注释 /* 多行注释 */复制代码
変数スコープ
グローバル変数: つまり、関数の外で宣言され、現在のドキュメント内のすべての場所からアクセスできます// ES5及之前 console.log(a); // undefined var a = 1; console.log(a); // 1 // ES6开始 console.log(b); // Uncaught ReferenceError: b1 is not defined let b = 2; console.log(b); // 2复制代码
関数を宣言するには 2 つの方法があります。
// 函数声明 f(); // 'web' function(){ console.log('web'); };复制代码
// 函数表达式 g(); // Uncaught TypeError: g is not a function var g = function(){ // 换成 let 声明也一样 console.log('web'); }复制代码
定数
const を使用して読み取り専用定数を宣言します、Document Object Model
DOM の 3 つの部分で構成されます。 、ブラウザ オブジェクト モデル
BOM 。
JavaScript
JavaScript ほとんどのブラウザでサポートされているクロスプラットフォーム機能は、複数のプラットフォームで実行できます。
言語と同じです。注釈も同様で、中括弧はコードのブロックを示します。
コード ブロックを表すコンテンツが含まれています。
コード:
if(test1=="red") { test1 = "blue"; alert(test1); }复制代码ログイン後にコピー
JavaScript
キーワード:break,else,new,var case,finally,return,void catch,for,switch,while continue,function,this,with default,if,throw delete,in,try do,instanceof,typeof复制代码
JavaScript の変数
javascriptJavaScript
的原始类型,即Undefined
,Null
,Boolean
,Number
和String
型。String
是JavaScript
的基本数据类型。JavaScript
语言的每个值都属于某一种数据类型。JavaScript
的数据类型分两类:值类型(原始值),引用数据类型(引用值)。JavaScript
提供typeof
运算符用于判断一个值是否在某种类型的范围内。Undefined
类型只有一个值,即为undefined
。undefined
。Null
类型只有一个值为null
,值undefined
实际上是从值null
派生来的,所以JavaScript
将他们定义为相等的。null
与undefined
表示这两个值相等,但含义不同。undefined
是声明了变量但未对其初始化时赋予该变量的值,null
表示尚未存在的对象。代码:
console.log( null == undefined); // true复制代码
Boolean
类型的两个值是true
和false
。Number
类型,所有数学运算返回的都是十进制的结果。Number.MAX_VVALUE
和Number.MIN_VALUE
,它们定义了Number
值集合的外边界。Number.MAX_VALUE
时,将被赋予值Number.POSITIVE_INFINITY
,表示不再有Number
值。生成的数值小于Number.MIN_VALUE
,会被赋予值Number.NEGATIVE_INFINITY
,表示不再有Number
值。Infinity
。Number.POSITIVE_INFINITY
的值为Infinity
,Number.NEGATIVE_INFINITY
的值为-Infinity
。使用
isFinite()
方法判断参数值是否是有穷的。
NaN
,表示非数。与无穷大一样,NaN
也不能用于算术计算。注意,NaN
与自身不相等。示例:
console.log(NaN == NaN) // false console.log(isNaN("66")); // false复制代码
String
类型,是唯一没有固定大小的原始类型,字符串字面量是用双引号或者单引号声明。typeof
操作符,用于获取一个变量或者表达式的类型。返回值:
undefined,变量是Undefined类型 boolean,变量是Boolean类型的 number,变量是Number类型的 string,变量是String类型的 object,变量是一种引用类型或者Null类型复制代码
示例:
console.log(typeof 12); // number复制代码
typeof
运算符对null
的值返回Object
。
instanceof
操作符,用于判断一个引用类型属于哪种类型。示例:
<script> var a = new Array(); if(a instanceof Array) { console.log('a是一个数组类型'); }else{ console.log('a不是一个数组类型'); } </script>复制代码
Number
变量,将变量转化为数字类型。String
变量,将变量转化为字符串类型。Boolean
变量,将变量转化为布尔值类型。parseFloat
变量,将变量转化为浮点类型。parseInt
变量,将变量转化为整数类型。名称 | 操作符 | 含义 |
---|---|---|
赋值 | x = y | x = y |
加法赋值 | x += y |
x = x + y |
减法赋值 | x -= y |
x = x - y |
乘法赋值 | x *= y |
x = x * y |
除法赋值 | x /= y |
x = x / y |
求余赋值 | x %= y |
x = x % y |
求幂赋值 | x **= y |
x = x ** y |
左移位赋值 | x <<= y | x = x << y |
右移位赋值 | x >>= y |
x = x >> y |
无符号右移位赋值 | x >>>= y |
x = x >>> y |
按位与赋值 | x &= y |
x = x & y |
按位异或赋值 | x ^= y |
x = x ^ y |
示例:
赋值运算符的符号为= 算数运算符:+,-,*,/,% 比较运算符:>,>=,<,<=,!=,==,===,!== 逻辑运算符: &&,逻辑与,表示表达式前后全为true才能返回true ||,逻辑或,表示表达式前后只要有一个true就返回true !,逻辑取反,表示表达式后若为true,则返回false,否则反之。复制代码
++
自增长,每执行一次自身加1,--
自减,每执行一次自身减1.i++
,值先参与外部表达式的运算,然后再将自身的值加1。++i
,i先自身的值加1,再参与外部表达式的运算。+=
,a+=3
等于a=a+3
。同理类似。if-else
条件判断语句switch-case
选择语句for
循环语句for-in
遍历语句while
循环语句do-while
循环语句示例:
if(条件 1) { 当条件1为true时执行的代码 }else if(条件 2){ 当条件2为true时执行的代码 }else{ 当条件1和条件2都不为true时执行的代码 }复制代码
示例:
switch(n){ case1: 执行代码块1 break; case2: 执行代码块2 break; default: ... }复制代码
示例:
for(语句1;语句2;语句3){ 被执行的代码块 }复制代码
continue
表示为越过本次循环,继续下一次循环break
表示跳出整个循环,循环结束for in
语句循环遍历对象的属性,多用于对象,数组等复合类型,以遍历其中的属性和方法。示例:
for(键 in 对象) { 代码块 }复制代码
while
,只有表达式为真,就可以进入循环。示例:
while(表达式){ 代码块 }复制代码
do-while
示例:
do { 代码 }while(表达式)复制代码
数组的属性和方法:
方法 | 说明 |
---|---|
concat() |
连接两个或者更多的数组,并返回结果 |
join() |
把数组的所有元素放入一个字符串,元素通过指定的分隔符进行分隔 |
pop() |
删除并返回数组的最后一个元素 |
push() |
向数组的末尾添加一个或者多个元素,并返回新的长度 |
reverse() |
颠倒数组中元素的顺序 |
shift() |
删除并返回数组的第一个元素 |
slice() |
从某个已有的数组返回选定的元素 |
sort() |
对数组的元素进行排序 |
splice() |
删除元素,并向数组添加新元素 |
toSource() |
返回该对象的源代码 |
toString() |
将数组转换为字符串,并返回结果 |
toLocalString() |
将数组转换为本地数组,并返回结果 |
unshift() |
向数组的开头添加一个或者更多元素,并返回新的长度 |
valueOf() |
返回数组对象的原始值 |
indexOf() |
在数组中搜索指定元素并返回第一个匹配的索引 |
lastIndexOf() |
在数组中搜索指定元素并返回最后一个匹配的索引 |
concat()
连接两个或更多的数组,并返回一个新数组。
语法:
arr.concat(a1, a2, ..., an)复制代码
参数:
arr
:目标数组a1,a2,...,an
:需要合并的元素
join()
使用指定分隔符,连接两个或多个数组的元素,返回一个字符串。
new
关键字创建一个array
对象,可以在内存中创建一个数组空间,添加元素。new
关键字创建一个array
对象的同时为数组赋予n个初始值。new
,直接用[]
声明一个数组,可以直接赋予初始值。pop
方法,从尾部删除,删除后元素从数组上剥离并返回。shift
方法,从头部删除元素,并返回。splice
方法,从指定位置删除指定的元素。unshift
方法,从头部插入。splice
方法,从指定位置插入指定个数的元素。concat
方法将多个数组连接成一个数组。join
方法将数组中的元素合并成一个用指定分隔符合并起来的字符串。reverse
方法可以将数组中的元素倒序排列,而且直接改变原来的数组,不会创建新的数组。sort
方法可以将数组中的元素按照一定的规则自动排序(默认的是按照字符的ASCII码顺序排序)。pop()和push()
shift()和unshift()
示例:
let arr = [1, 2, 3, 5, 6]; let a1 = arr.slice(2); // [3, 5, 6] let a2 = arr.slice(2,3); // [3] let arr = [1, 2, 3, 4]; let a = arr.splice(1, 2, "web", "a"); // a => [2, 3] // arr => [1, "web", "a", 4]复制代码
代码:
let a = [1,3,5,7]; a.forEach(function(val, index, arr){ arr[index] = val * 2 }) a ; // [2, 6, 10, 14]复制代码
代码:
arr.every(callback) 测试数组的所有元素是否都通过了指定函数的测试。 some() 测试数组中的某些元素是否通过由提供的函数实现的测试。复制代码
示例:
let a = [1, "", "aa", 2, 6]; let res = a.filter(function(val, index, arr){ return typeof val == "number"; }) res;//[1, 2, 6]复制代码
对每个元素执行此方法,并返回一个执行后的数组。
示例:
let a = [1, 3, 5]; let b = a.map(function(val, index, arr){ return val + 1; }) b; //[2, 4, 6]复制代码
拓展运算符使用(...)
示例:
console.log(...[1, 2, 3]); // 1 2 3 console.log(1, ...[2,3], 4); // 1 2 3 4复制代码
// 通常情况 浅拷贝 let a1 = [1, 2]; let a2 = a1; a2[0] = 3; console.log(a1,a2); // [3,2] [3,2] // 拓展运算符 深拷贝 let a1 = [1, 2]; let a2 = [...a1]; // let [...a2] = a1; // 作用相同 a2[0] = 3; console.log(a1,a2); // [1,2] [3,2]复制代码
let [a, ...b] = [1, 2, 3, 4]; // a => 1 b => [2,3,4] let [a, ...b] = []; // a => undefined b => [] let [a, ...b] = ["abc"]; // a => "abc" b => []复制代码
new Array(3).fill('a'); // ['a','a','a'] [1,2,3].fill('a'); // ['a','a','a'] [1,2,3].fill('a',1,2);// [1, "a", 3]复制代码
entries()
对键值对遍历keys()
对键名遍历values()
对键值遍历。includes()
用于表示数组是否包含给定的值代码:
[1,2,3].includes(3,3); // false [1,2,3].includes(3,4); // false [1,2,3].includes(3,-1); // true [1,2,3].includes(3,-4); // true复制代码
示例:
var arr1 = [1, 2, [3, 4]]; arr1.flat(); // [1, 2, 3, 4] var arr2 = [1, 2, [3, 4, [5, 6]]]; arr2.flat(); // [1, 2, 3, 4, [5, 6]] var arr3 = [1, 2, [3, 4, [5, 6]]]; arr3.flat(2); // [1, 2, 3, 4, 5, 6]复制代码
var arr4 = [1, 2, , 4, 5]; arr4.flat(); // [1, 2, 4, 5]复制代码
语法
var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) { // return element for new_array }[, thisArg])复制代码
var arr1 = [1, 2, 3, 4]; arr1.map(x => [x * 2]); // [[2], [4], [6], [8]] arr1.flatMap(x => [x * 2]); // [2, 4, 6, 8] // only one level is flattened arr1.flatMap(x => [[x * 2]]); // [[2], [4], [6], [8]]复制代码
let arr1 = ["it's Sunny in", "", "California"]; arr1.map(x => x.split(" ")); // [["it's","Sunny","in"],[""],["California"]] arr1.flatMap(x => x.split(" ")); // ["it's","Sunny","in", "", "California"]复制代码
reduce()
方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。
var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) { return accumulator + currentValue; }, 0); // 和为 6 var total = [ 0, 1, 2, 3 ].reduce( ( acc, cur ) => acc + cur, 0 );复制代码
语法
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]) initialValue可选 作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。复制代码
字符串对象属性
属性 | 说明 |
---|---|
constructor |
对创建该对象的函数的引用 |
length |
字符串的长度 |
prototype |
允许向对象添加属性和方法 |
String オブジェクト メソッド
Attribute | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
anchor() |
HTML アンカーの作成 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
##big() | 文字列を大きなフォントで表示します|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
##点滅する文字列を表示 |
##bold() | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
文字列を表示するには太字を使用します
|
charAt() | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
次の文字を返します指定された位置
|
charCodeAt() | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
指定された位置の文字の Unicode エンコードを返します | concat() | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
接続文字列
|
##fixed() | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ##fontcolor()#指定された色を使用して文字列を表示します | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
fontsize() | #指定されたサイズを使用して文字列を表示します|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
文字列を作成します文字エンコーディングから |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
文字列を確認 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
文字列を表示するには斜体を使用します |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
文字列の前方検索の後から |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
文字列をリンクとして表示 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ロケール固有の順序で 2 つの文字列を比較します |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
1 つ以上の正規表現の一致を検索します |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
正規表現に一致する部分文字列を置換します |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
正規表現に一致する値を取得 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
フラグメントを抽出文字列の抽出部分を新しい文字列で返します |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
文字列を表示するには小さなフォント サイズを使用します |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
文字列を文字列配列に分割します |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
取り消し線を使用して文字列を表示します |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
##文字列を下付き文字として表示します
|
substr() | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
substring() | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
sup() | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
##toLocaleLowerCase() |
文字列を小文字に変換します | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
# #toLocaleUpperCase() |
文字列を大文字に変換します | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
toLowerCase() |
文字列を小文字に変換します | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
#toUpperCase()
| 文字列を大文字に変換します|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
toString()
| 文字列を返します|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
#文字列オブジェクトの元の値を返します |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
オブジェクトのソース コードを表します
|
方法 | 说明 |
---|---|
keydown |
当用户按下键盘上的任意键时触发。按住不放,会重复触发 |
keypress |
当用户按下键盘上的字符键时触发。按住不放,会重复触发 |
keyup |
当用户释放键盘上的键时触发 |
鼠标绑定onmousedown()
,onmousemove()
,onmouseup()
事件。
mouse网页,点击跳转:mouse.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>mouse</title> <style> html,body{ width: 100%; height: 100%; } #dd { width: 120px; height: 120px; background: #00ff00; position: absolute; } </style> <script> var dd; var mflag = false; function ondown() { dd = document.getElementById('dd'); mflag = true; } function onmove(e){ if(mflag) { dd.style.left = e.clientX - 60 + "px"; dd.style.top = e.clientY - 60 + "px"; } } function onup() { mflag = false; } </script> </head> <body onmousemove="onmove(event)"> <p id="dd" onmousedown="ondown()" onmouseup="onup()" style="left: 80px;top: 120px;" </body> </html>复制代码
鼠标事件:
方法 | 说明 |
---|---|
click |
用户单击鼠标左键或者按下Enter 键触发 |
dbclick |
用户双击鼠标触发 |
mousedown |
在用户按下任意鼠标按钮时触发 |
mouseenter |
在鼠标光标从元素外部首次移动到元素范围内时触发,不冒泡 |
mouseleave |
元素上方的光标移动到元素范围之外时触发,不冒泡 |
mousemove |
光标在元素的内部不断移动时触发 |
mouseover |
用户指针位于一个元素外部,然后用户将首次移动到另一个元素边界之内时触发 |
mouseout |
用户将光标从一个元素上方移动到另一个元素时触发 |
mouseup |
在用户释放鼠标时触发 |
mousewheel |
滚轮滚动时触发 |
示例:
function web(e) { mouseX = e.clientX; mouseY = e.clientY; console.log("x:"+mouseX + "," + "y:"+mouseY) } <body onclick="web(event)">复制代码
onmouseover
onmouseout
窗口事件:
load
unload
abort
error
select
resize
scroll
load
事件,表示当页面完全加载完之后,就会触发window
上面的load
事件。包含所有的图像,js文件,css文件等外部资源。
示例:
window.onload=function(){}复制代码
当页面完全加载完之后执行其中的函数。
示例:
<script> window.onload = function() { var myp = document.getElementById("myp"); console.log(myp.innerText); } </script> <body> <p id="myp"></p> </body>复制代码
示例:
function imgLoad() { myimg = document.getElementById("myimg"); // 图片加载完成后,给图片加载框 myimg.style.border = "9px solid $00ff00"; } <img id="myimg src="" onload="imgLoad()">复制代码
resize事件
resize
事件。示例:
document.body.clientWidth
和document.body.clientHeight
获得窗口的宽和高。
html,body { width: 100%; height: 100%; } <script> function winChange() { winWidth = document.body.clientWidth; winHeight = document.body.clientHeight; } </script> <body onresize="winChange()"> </body>复制代码
scrol
事件,文档或者浏览器窗口被滚动时触发scroll
事件
示例:
<script> function scrollChange() { srpos = document.getElementById("srpos"); srpos.innerText = document.documentElement.scrollTop; srpos.style.top = docuemnt.documentElement.scrollTop+"px"; } </script> <body onscroll="scrollChange()"> <p style="height:300%;"> <br/> <font id="srpos" style="position: relative;top: 0px">滚动条滚动到0px</font> </p> </body>复制代码
焦点事件
方法 | 说明 |
---|---|
blur |
在元素失去焦点时触发,所有浏览器都支持 |
focus |
在元素获得焦点时触发,所有浏览器都支持 |
示例:
<script> var note; function myfocus(fname,notename) { note = document.getElementById(notename); note.innerText = fname+'获得焦点'; } function myblur(fname,notename) { note = document.getElementById(notename); note.innerText = fname + '失去焦点'; } </script> <body> <form name="myform"> <input type="text" name="uname" onfocus="myfocus('uname','unote')" onblur="myblur('uname','unote')"/><font id="unote"></font> <br/> <input type="text" name="pwd" onfocus="myfocus('pwd','pnot')" onblur="myblur('pwd','pnote')"/><font id="pnote"></font> </form> </body>复制代码
事件方法
方法 | 说明 |
---|---|
onabort |
图像加载被中断 |
onblur |
元素失去焦点 |
onchange |
用户改变域的内容 |
onclick |
鼠标单击某个对象 |
ondblclick |
鼠标双击某个对象 |
onerror |
当加载文档或图像时发生某个错误 |
onfocus |
元素获得焦点 |
onkeydown |
某个键盘的键被按下 |
onkeypress |
某个键盘的键被按下或者按住 |
onkeyup |
某个键盘的键被松开 |
onload |
某个页面或者图像被完成加载 |
onmousedown |
某个鼠标按键被按下 |
onmousemove |
鼠标被移动 |
onmouseout |
鼠标从某元素移开 |
onmouseover |
鼠标被移到某元素之上 |
onmouseup |
某个鼠标按键被松开 |
onreset |
重置按钮被单击 |
onresize |
窗口或者框架被调整尺寸 |
onselect |
文本被选定 |
onsubmit |
提交按钮被单击 |
onunload |
用户退出页面 |
窗口事件
load
事件resize
事件scroll
事件鼠标事件
键盘事件与事件冒泡,获取
window
对象document
对象location
对象navigator
对象screen
对象history
对象
JavaScript
的DOM
操作,包含获取节点,获取,设置元素的属性值,创建,添加节点,删除节点,属性操作。
DOM
对象Document Object Model
,文档对象模型属于BOM
的一部分,用于对BOM
中的核心对象document
进行操作。html dom
模型被构造为对象的树。DOM
操作获取节点的方法:
id
获取:document.getElementById(idName)复制代码
name
属性获取:返回元素数组document.getElementsByName(name)复制代码
document.getElementsByClassName(className)复制代码
document.getElementsByTagName(tagName)复制代码
获取,设置元素的属性值
getAttribute(attributeName)
方法,//括号出入输入名,返回对应属性的属性值setAttribute(attributeName,attributeValue)
方法,//传入属性名以及设置的值示例:
<script> window.onload=function(){ mytable = document.getElementById('mytable'); // 获取mytable中标签名为tr的字节点 trs = mytable.getElementsByTagName("tr"); len = trs.length; flag = true; for(i=0;i<len;i++){ if(flag){ trs[i].setAttribute('bgcolor','#cccccc'); flag = false; }else{ flag = true; } } ww = mytable.getAttribute('width'); } </script> <body> <table id="mytable' align='center' width="80%" border="1"> <tr bgcolor = "#cccccc"> <td>aaa</td> <td>bbb</td> <td>ccc</td> </tr> </table> </body>复制代码
创建,添加节点
代码:
// 创建节点: document.createElement("h1"); document.createTextNode(String); document.createAttribute("class");复制代码
代码:
element.appendChild(Node); element.insertBefore(newNode, existingNode);复制代码
代码:
element.removeChild(Node)复制代码
属性操作:获取当前元素的父节点,获取当前元素的子节点,获取当前元素的同级元素,获取当前元素的文本,获取当前节点的节点类型,设置样式。
代码:
element.parentNode复制代码
代码:
element.chlidren复制代码
代码:
element.nextElementSibling element.previousElementSibling复制代码
代码:
element.innerHTML element.innerText复制代码
代码:
node.nodeType复制代码
BOM
对象,称为内置对象,是浏览器对象模型,也是JavaScript
的重要组成部分。window
-》document,location,navigator,screen,history
window
对象表示浏览器窗口window.innerHeight
获取浏览器窗口的内部高度,window.innerWidth
获取浏览器窗口的内部宽度。document.documentElement.clientHeight
,document.documentElement.clientWidth
;document.body.clientHeight
,document.body.clientWidth
。window.open(url)
。window.close()
。window.resizeTo(宽,高)
document对象
document
属性和方法:
説明 | |
---|---|
ページの背景色の設定 |
|
#前景色の設定
|
document.linkColor |
クリックされていないリンクの色
|
##document.alinkCOlor |
|
document.vlinkColor |
|
document.URL |
| document.cookie|
|
##document.write()
| コンテンツをページに動的に書き込みます
##document.createElement(Tag) |
HTML タグ オブジェクトの作成 |
document .getElementById(ID) |
指定された | id
| document.getElementsByName(Name) 指定された | name
| document.body
ドキュメント本文の先頭と末尾を指定します |
document.location.href |
fullurl |
document.location.reload() |
現在の Web ページを更新します |
document.location.reload(url) |
新しい Web ページを開きます |
##location オブジェクト |
location |
プロパティとメソッド
説明
URL リンクを表示現在の Web ページの | |
---|---|
現在の Web ページのリンクのポートを表示します |
|
現在のページを更新 |
|
オブジェクト
|
navigator | オブジェクトにはブラウザに関する情報が含まれています
#プロパティ
説明
##appName
appVersion | |
---|---|
cookieEnabled |
ブラウザが有効かどうかを返します |
|
platform |
|
screen オブジェクト |
window オブジェクトの screen | 属性は、を参照します。 scren | オブジェクト。
オブジェクトには、ブラウザ画面の表示に関する情報が保存されます。
プロパティ
#availHeight#表示画面の高さを返します
表示画面の幅を返す | |
---|---|
#パレットのビット深度を設定または返します
|
#Height |
モニター画面の高さを返します
|
Width |
モニターを返します 画面の幅
|
#history オブジェクト |
#history | オブジェクトには次の内容が含まれますユーザーがアクセスした URL。 |
|
プロパティ |
#history.length
ブラウザ履歴リスト内の URL の数を返します
history.back()
historyリストの次の URL
|
##history.go() | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
を読み込む履歴 リスト |
の特定のページ組み込み関数
|
以上がJavaScript の知識システムを統合するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。