javascript笔记

javascript代码必须位于中
脚本可被放置于或中
单引号双引号均可
双斜杠 // 或 /* ... */ 之间的代码被视为注释
标识符用于命名变量（以及关键词、函数和标签），首字符必须是字母、下划线（-）或美元符号（$）
对大小写敏感
不能使用连字符，如 first-name

JavaScript 能够以不同方式“显示”数据：
使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出（测试）
使用 innerHTML 写入 HTML 元素：document.getElementById(id)
使用 console.log() 写入浏览器控制台（？）

关键词
break 终止 switch 或循环。
continue 跳出循环并在顶端开始。
debugger 停止执行 JavaScript，并调用调试函数（如果可用）。
do ... while 执行语句块，并在条件为真时重复代码块。
for 标记需被执行的语句块，只要条件为真。
function 声明函数。
if ... else 标记需被执行的语句块，根据某个条件。
return 退出函数。
switch 标记需被执行的语句块，根据不同的情况。
try ... catch 对语句块实现错误处理。
var 声明变量。

innerHTML = "Bill" + " " + "Gates" 结果为 Bill Gates
可以在一条语句中声明许多变量，以 var 作为语句的开头，并以逗号分隔变量，声明可横跨多行
再次声明某个 JavaScript 变量，将不会丢它的值
var x = "8" + 3 + 5 结果为 835
var x = 3 + 5 + "8" 结果为88 由于第一个操作数是字符串，因此所有操作数都被视为字符串
当数值和字符串相加时，JavaScript 将把数值视作字符串

赋值运算符： x?=y 等同于 x=x?y (?为+ - * / %)

&& 逻辑与
|| 逻辑或
! 逻辑非

运算符
typeof 返回变量的类型。
instanceof 返回 true，如果对象是对象类型的实例。
位运算符处理 32 位数（更多运算符的知识在高级教程中）

超大或超小的数值可以用科学计数法来写
var y = 123e5; // 12300000
var z = 123e-5; // 0.00123

花括号里对象属性是name:value，由逗号分隔

typeof 运算符返回变量或表达式的类型
没有值的变量typeof返回undefined
空值与 undefined 不是一回事
空的字符串变量既有值也有类型

function name(参数 1, 参数 2, 参数 3) {
要执行的代码
return a //函数返回a，返回值返回给调用者
}

不使用 () 访问函数将返回函数声明而不是函数结果

结果：function toCelsius(f) { return (5/9) * (f-32); }
函数可以当做变量值直接使用
在函数中声明的变量会成为函数的局部变量，局部变量只能在函数内访问，所以可以在不同函数中使用相同名称的变量

this 关键词
this.firstName 的意思是 this 对象的 firstName 属性
可以以两种方式访问属性：
objectName.propertyName objectName["propertyName"]
可以如下语法访问对象方法：
objectName.methodName() name = person.fullName();

HTML事件
onchange HTML 元素已被改变
onclick 用户点击了 HTML 元素
onmouseover 用户把鼠标移动到 HTML 元素上
onmouseout 用户把鼠标移开 HTML 元素
onkeydown 用户按下键盘按键
onload 浏览器已经完成页面加载

内建属性length返回字符串长度 len=txt.length

字符串也可通过关键词 new 定义为对象(使代码复杂化)
var firstName = new String("Bill") typeof y将返回为object

indexOf() 方法返回字符串中指定文本首次出现的索引（位置（数字））
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引
0 是字符串中的第一个位置，1 是第二个，2 是第三个 ...
如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1
两种方法都接受作为检索起始位置的第二个参数：
pos = str.indexOf("China", 18)
search()的结果与inderOf()相等，但区别在：
search() 方法无法设置第二个开始位置参数。
indexOf() 方法无法设置更强大的搜索值（正则表达式）

slice() 提取字符串的某个部分并在新字符串中返回被提取的部分
参数为负则从字符串结尾开始计数
如果省略第二个参数，则该方法将裁剪字符串的剩余部分
substring() 类似于 slice()，不同之处在于 substring() 无法接受负的索引
substr() 类似于 slice()，不同之处在于第二个参数规定被提取部分的长度
如果省略第二个参数，则该 substr() 将裁剪字符串的剩余部分
如果首个参数为负，则从字符串的结尾计算位置
replace() 方法用另一个值替换在字符串中指定的值
默认对大小写敏感，/xxx/i则对大小写不敏感（不带引号）
toUpperCase() 把字符串转换为大写
toLowerCase() 把字符串转换为小写
concat() 连接两个或多个字符串
trim() 方法删除字符串两端的空白符
charAt() 方法返回字符串中指定下标（位置）的字符串
charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码
split() 将字符串转换为数组

对于引号引起来的数字，进行计算时会讲其转化成数字计算
除了 + 会进行级联,需注意

NaN 属于 JavaScript 保留词，指示某个数不是合法数

Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值
Infinity 是数：typeOf Infinity 返回 number

JavaScript 会把前缀为 0x 的数值常量解释为十六进制

toString() 方法把数输出为十六进制、八进制或二进制
toExponential() 返回字符串值，它包含已被四舍五入并使用指数计数法的数字
var x = 9.656;
x.toExponential(2); // 返回 9.66e+0
x.toExponential(4); // 返回 9.6560e+0
x.toExponential(6); // 返回 9.656000e+0
该参数是可选的。如果没有设置它，JavaScript 不会对数字进行舍入
toFixed() 返回字符串值，它包含了指定位数小数的数字
var x = 9.656;
x.toFixed(0); // 返回 10
x.toFixed(2); // 返回 9.66
x.toFixed(4); // 返回 9.6560
toPrecision() 返回字符串值，它包含了指定长度的数字
var x = 9.656;
x.toPrecision(); // 返回 9.656
x.toPrecision(2); // 返回 9.7
x.toPrecision(4); // 返回 9.656
valueOf() 以数值返回数值
Number() 可用于把 JavaScript 变量转换为数值
如果无法转换数字，则返回 NaN
Number() 还可以把日期转换为数字，返回 1970 年 1 月 1 日至今的毫秒数
parseInt() 解析一段字符串并返回数值。允许空格。只返回首个数字
如果无法转换为数值，则返回 NaN

创建数组文本用[],length 属性返回数组的长度（数组元素的数目）
遍历数组元素可用Array.foreach()函数
添加数组元素：push()、length属性
fruits.push()=
fruits[fruits.length]=
添加最高索引的元素可在数组中创建未定义的“洞”,未被定义的索引值为undefined
对于数组instanceof 运算符返回 true

数组使用数字索引。
对象使用命名索引。

join() 方法也可将所有数组元素结合为一个字符串
它的行为类似 toString()，但是可以规定分隔符

pop() 方法从数组中删除最后一个元素
push() 方法（在数组结尾处）向数组添加一个新的元素
shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引
unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素
使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之
splice() 方法可用于向数组添加新项
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
第一个参数（2）定义了应添加新元素的位置（拼接）。
第二个参数（0）定义应删除多少元素。
其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。
结果：新数组Banana,Orange,Lemon,Kiwi,Apple,Mango
使用 splice() 在数组中不留“空洞”的情况下移除元素
第一个参数（0）定义新元素应该被添加（接入）的位置。
第二个参数（1）定义应该删除多个元素。
concat() 方法通过合并（连接）现有数组来创建一个新数组
var a=myGirls.concat(myBoys); // 连接 myGirls 和 myBoys
不会更改现有数组。它总是返回一个新数组
slice() 方法用数组的某个片段切出新数组,创建新数组，均不会改变原数组
可接受两个参数，从参数处选取元素
sort() 方法以字母顺序对数组进行排序,对数值排序时会产生不正确的结果
对数值排序时通过一个比值函数：
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
reverse() 方法以降序对数组进行排序，对数值处理时同上 {return b - a}
以随机顺序排序数组
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()});
对数组使用 Math.max()=Math.max.apply([])
对数组使用 Math.min()=Math.min.apply([])
排序对象数组，通过比map() 方法通过对每个数组元素执行函数来创建新数组, year:2016},
{type:"BMW", year:2010}];
cars.sort(function(a, b){return a.year - b.year});

forEach() 方法为每个数组元素调用一次函数（回调函数）
map() 方法通过对每个数组元素执行函数来创建新数组
filter() 方法创建一个包含通过测试的数组元素的新数组
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值
reduceRight() 方法在每个数组元素上运行函数，以生成（减少它）单个值
every() 方法检查所有数组值是否通过测试
some() 方法检查某些数组值是否通过了测试
indexOf() 方法在数组中搜索元素值并返回其位置。
第一个项目的位置是 0，第二个项目的位置是 1，以此类推
Array.lastIndexOf() 与 Array.indexOf() 类似，但是从数组结尾开始搜索。
find() 方法返回通过测试函数的第一个数组元素的值
findIndex() 方法返回通过测试函数的第一个数组元素的索引

new Date() 用当前日期和时间创建新的日期对象
默认将输出全文本字符串格式
Mon Feb 19 2018 06:00:00 GMT+0800 (中国标准时间)
new Date(year, month, ...) 用指定日期和时间创建新的日期对象
如果只提供一个参数，则将其视为毫秒
一位和两位数年份将被解释为 19xx 年
new Date(dateString) 从日期字符串创建一个新的日期对象
toUTCString() 方法将日期转换为 UTC 字符串（一种日期显示标准）。
Tue, 18 Feb 2020 13:03:53 GMT
toDateString() 方法将日期转换为更易读的格式
Tue Feb 18 2020

有四种 JavaScript 日期输入格式：
类型 实例
ISO 日期 "2018-02-19" （国际标准）
短日期 "02/19/2018" 或者 "2018/02/19"
长日期 "Feb 19 2018" 或者 "19 Feb 2019"
完整日期 "Monday February 25 2015"

getDate() 以数值返回天（1-31）
getDay() 以数值获取周名（0-6）
getFullYear() 获取四位的年（yyyy）
getHours() 获取小时（0-23）
getMilliseconds() 获取毫秒（0-999）
getMinutes() 获取分（0-59）
getMonth() 获取月（0-11）
getSeconds() 获取秒（0-59）
getTime() 获取时间（从 1970 年 1 月 1 日至今）
以上在get后加上UTC则返回UTC日期

setDate() 以数值（1-31）设置日
setFullYear() 设置年（可选月和日）
setHours() 设置小时（0-23）
setMilliseconds() 设置毫秒（0-999）
setMinutes() 设置分（0-59）
setMonth() 设置月（0-11）
setSeconds() 设置秒（0-59）
setTime() 设置时间（从 1970 年 1 月 1 日至今的毫秒数）
JavaScript 从 0 到 11 计数月份。1 月是 0。12 月是 11

Math.PI; // 返回 3.141592653589793
Math.round(x) 的返回值是 x 四舍五入为最接近的整数：
Math.round(6.8); // 返回 7
Math.round(2.3); // 返回 2
Math.pow(x, y) 的返回值是 x 的 y 次幂
Math.sqrt(x) 返回 x 的平方根
Math.abs(x) 返回 x 的绝对（正）值
Math.ceil(x) 的返回值是 x 上舍入最接近的整数
Math.floor(x) 的返回值是 x 下舍入最接近的整数
Math.min() 和 Math.max() 可用于查找参数列表中的最低或最高值
Math.random() 返回介于 0（包括） 与 1（不包括） 之间的随机数
总是返回小于 1 的数
Math.E // 返回欧拉指数（Euler's number）
Math.PI // 返回圆周率（PI）
Math.SQRT2 // 返回 2 的平方根
Math.SQRT1_2 // 返回 1/2 的平方根
Math.LN2 // 返回 2 的自然对数
Math.LN10 // 返回 10 的自然对数
Math.LOG2E // 返回以 2 为底的 e 的对数（约等于 1.414）
Math.LOG10E // 返回以 10 为底的 e 的对数（约等于0.434）
Math.random() 与 Math.floor/ceil() 一起使用用于返回随机整数
返回介于 min（包括）和 max（不包括）之间的随机数
return Math.floor(Math.random() * (max - min) ) + min;
返回介于 min 和 max（都包括）之间的随机数
return Math.floor(Math.random() * (max - min + 1) ) + min;
使用 Boolean() 函数来确定表达式（或变量）是否为真
Boolean(10 > 9) // 返回 true
甚至更简单：
(10 > 9) // 也返回 true
10 > 9 // 也返回 true
0, -0, ""（空值）, undefined ,null, false,NaN的布尔值为 false
=== 运算符需要在类型和值两方面同时相等

条件（三元）运算符：
语法 variablename = (condition) ? value1:value2
condition为1则进行value1，为0则进行value2

switch(表达式) {
case n:
代码块
break;
case n:
代码块
break;
default:
默认代码块
} 遇到 break 关键词，会跳出 switch 代码块

case4:
case5:
text=
即4和5分享相同的代码块

函数参数（parameter）指的是在函数定义中列出的名称。
函数参数（argument）指的是传递到函数或由函数接收到的真实值。

函数表达式可以在变量中存储（是一个匿名函数）：
var x = function (a, b) {return a * b};
在变量中保存函数表达式之后，此变量可用作函数
自调用函数：
(function () {
var x = "Hello!!"; //我会调用我自己
})();
arguments.length 会返回函数被调用时收到的参数数目
toString() 方法以字符串返回函数
箭头函数允许使用简短的语法来编写函数表达式
const x = (x, y) => { return x * y };

在 JavaScript 中，被称为 this 的事物，指的是“拥有”当前代码的对象。
this 的值，在函数中使用时，是“拥有”该函数的对象。

可以把函数定义为对象方法
例子创建了一个对象（myObject），带有两个属性（firstName 和 lastName），以及一个方法（fullName）
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this;
}
}
myObject.fullName(); // 将返回 [object Object]（拥有者对象）
在此例中，this 的值是 myObject

通过 HTML DOM(文档对象模型)，JavaScript 能够访问和改变 HTML 文档的所有元素
HTML DOM 模型被结构化为对象树
HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准
HTML DOM 方法是能够（在 HTML 元素上）执行的动作。
HTML DOM 属性是能够设置或改变的 HTML 元素的值。

document.getElementById("demo").innerHTML = "Hello World!";
在上面的例子中，getElementById 是方法，而 innerHTML 是属性

DOM文档（收藏有页面https://www.w3school.com.cn/js/js_htmldom_document.asp）
查找 HTML 元素
方法 描述
document.getElementById(id) 通过元素 id 来查找元素
注意是Element 没有s,id不能重复，不需要下标
document.getElementsByTagName(name) 通过标签名来查找元素
注意是Elements,有s，需要下标
document.getElementsByClassName(name) 通过类名来查找元素
同上
document.querySelectorAll() 通过查询选择器

改变 HTML 元素
方法 描述
element.innerHTML = new html content 改变元素的 inner HTML
element.attribute = new value 改变 HTML 元素的属性值
element.setAttribute(attribute, value) 改变 HTML 元素的属性值
element.style.property = new style 改变 HTML 元素的样式

添加和删除元素
方法 描述
document.createElement(element) 创建 HTML 元素
document.removeChild(element) 删除 HTML 元素
document.appendChild(element) 添加 HTML 元素
document.replaceChild(element) 替换 HTML 元素
document.write(text) 写入 HTML 输出流

添加事件处理程序
document.getElementById(id).onclick = function(){code}
向 onclick 事件添加事件处理程序

AJAX

AJAX组合了浏览器内建的XMLHttpRequest对象（从web服务器请求数据）
javascript 和 HTML DOM
AJAX允许通过与场景后面的web服务器交换数据来异步更新网页

XMLHttpRequest 对象方法
方法 描述
new XMLHttpRequest() 创建新的 XMLHttpRequest 对象
abort() 取消当前请求
getAllResponseHeaders() 返回头部信息
getResponseHeader() 返回特定的头部信息
open(method, url, async, user, psw)
规定请求
method：请求类型 GET 或 POST
url：文件位置
async：true（异步）或 false（同步）
user：可选的用户名称
psw：可选的密码
send() 将请求发送到服务器，用于 GET 请求
send(string) 将请求发送到服务器，用于 POST 请求
setRequestHeader() 向要发送的报头添加标签/值对

XMLHttpRequest 对象属性
onreadystatechange 定义当 readyState 属性发生变化时被调用的函数
readyState 保存 XMLHttpRequest 的状态
responseText 以字符串返回响应数据
responseXML 以 XML 数据返回响应数据
status 返回请求的状态号
statusText 返回状态文本（比如 "OK" 或 "Not Found"）

JavaScript 提供內建函数把以 JSON 格式写的字符串转换为原生 JavaScript 对象：
JSON.parse()
语法： 数据在名称/值对中 数据由逗号分隔
花括号容纳对象 方括号容纳数组
JSON 名称需要双引号
访问js对象：person.name 或 person["name"]
修改数据：person.name=" " 或 person["name"]=" "
JSON 的值不可以是以下数据类型之一：函数 日期 undefined

jQuery

通过id查找元素

$(document).ready(function(){
    var myElements = $("#id03");
    $("#id03").text("段落id03的文本是：" + myElements[0].innerHTML);
});

通过标签名来查找元素

$(document).ready(function(){
    var myElements = $("p");
    $("#demo").text("第三段的文本是：" + myElements[2].innerHTML)；
});

通过类名来查找元素

$(document).ready(function(){
    var myElements = $(".intro");
    ...
});

设置文本内容

$(document).ready(function(){
    var myElements = $("#02");
    myElement.text("Hello ");
});

获取文本内容

$(document).ready(function(){
    var myElement = $("#03");
    var myText = myElement.text();
    $("#demo").text(myText);
});

设置HTML

$(document).ready(function(){
    var myElement = $("#02");
    myElement.html("xxx");
});

获取Html内容

$(document).ready(function(){
    var myElement = $("#01").html();
    $("#02").html(content);
});

隐藏html元素

$(document).ready(function(){
    var myElement = $("#02");
    myElement.hide();
});

显示html元素

myElement.show();

样式化html元素

$(document).ready(function(){
    var myElement = $("#demo");
    myElement.css("font-size","35px");
});

删除html元素

$("#id01").remove();

获取父级html元素(????)