java script学习笔记整理总汇

一 JavaScript:简称JS
编程语言：可以将具体、实物化得实物抽象成代码的方式来描述
它是一种专为网页交互而设计的脚本语言。也是一种非常松散(弱类型)的面相对象的语言
交互：通过一些行为来展现后台所提供的数据


二 JS的组成部分：
ECMAScript(ES)---描述了JS的语法和基本对象。目前用得最广泛的版本是ES5，下一代标准是ES6(ES2015)
DOM(document object model)---文档对象模型，描述了处理网页内容的方法和接口
BOM(browser object model)---浏览器对象模型，描述了与浏览器进行交互的方法和接口


三 引用方式及放置位置
1 内部
<script>
    js代码
</script>


2 外部
<script src="路径"></script>


3 完整的写法：<script type="text/javascript" src=""></script>


4 放置位置：可以放在html页面中的任何位置
推荐方式：见demo2和demo3


5 a标签的一些特殊功能
<a href="#">刷新页面并回到顶部</a>
<a href="javascript:void(0)">只有标签效果</a>
<a href="javascript:;">只有标签效果</a>
<a href="javascript:js代码;">点击执行js代码</a>


四 变量
作用：用来存储数据，必须是先定义才能使用
定义: var 变量名;
如何取变量名：
1 变量名只能由数字、字母、下划线、$构成，但是不能以数字开头
2 变量名要知名见意
3 变量名不能是js的保留关键字
4 建议大家采用驼峰命名法
驼峰命名法：第一个单词全部小写，后面的每个单词的首字母大写
var studentName;


变量的赋值
1 边定义边赋值
2 先定义后赋值


js代码的注释：
* 单行注释：//注释内容
* 多行注释：/*注释内容*/


数据类型：
number---数字类型
int---整数类型 5
float---浮点类型 1.5
NaN---(not a number),非数字


string---字符串类型，凡是以单引号或者双引号包着的数据就是字符串  "美女"  "hello" "5"
boolean---布尔类型，true(真)/false(假)
undefined---未定义、未初始化
null---空
object---对象类型，数据和功能的集合
基本数据类型：number string boolean undefined null
复杂数据类型：object
typeof 变量名----检测变量所存储的数据类型
变量的数据类型取决于所保存的数据值---其根本原因是因为js属于弱类型语言


五 输出语句
1 alert():确认模态框
alert(5);
alert("heheda");
var num=10;
alert(num);
alert("这是一个数字，是"+num);
变量必须要从字符串中分离出来，用"+"连接
alert是可以阻塞程序的


ps:每条语句后面都要加上分好，表示一条语句的结束(有换行也表示结束)


2 console.log():仅在控制台中打印相关信息
console.log(5);
console.log("heheda");
var num=10;
console.log(num);
console.log("这是一个数字，是"+num);


3 document.write():在文档中显示相关信息
document.write(5);
document.write("heheda");
var num=10;
document.write(num);
document.write("这是一个数字，是"+num);


三个输出语句的区别：
alert、console.log原样输出
document.write可以将标签字符串以标签的形式解析出来


六 输入语句
var 变量=prompt("请输入"):输入模态框---输入的数据都是字符串类型的


字符串---->数字
parseInt(变量)，强制将字符串转为整数
parseFloat(变量)，强制将字符串转为小数


数字----->字符串
String(变量)，将数字转换为字符串
""+变量：将变量变成了字符串类型


七 运算符(操作符)
定义：是一组用来操作数据值的特殊符号
1 算术运算符
+ - * / %
+：如果用在字符串当中叫做连接符，如果用来数字当中就是进行加法运算----拼接
%：取模（取余）---两个数相除取余数
6%5=1*5+1
9%5=1*5+4
10%3=3*3+1
2%5=0*5+2


乘性运算符：* / %
加性运算符：+ -


2 一元运算符:只能操作一个值的运算符
前置：前置递增、前置递减
前置递增（++i）
var i=10;
++i;//i=i+1;
前置递减 (--i)
ps:先计算自身，再返回(赋值)参与值


后置：后置递增、后置递减
后置递增（i++）
后置递减 (i--)
ps:先将自身的值赋值一份给临时变量，再计算自身，返回的是临时变量的值
ps:前置比后置效率高，所以一般情况下用前置


一元加、减运算符
var num=2;
num=+num;//+2
num=-num;//-2


3 关系运算符：返回的都是布尔类型的值
>(大于)  <(小于) <=(小于等于)  >=(大于等于)


4 相等运算符：返回的都是布尔类型的值
相等(==) 不相等(!=):先转换后比较
全等(===) 不全等(!==):直接进行比较


5 布尔运算符
a 逻辑非(!):首先会将表达式转为布尔值，再对其求反(遇真为假，遇假为真)
var res = !exp
表达式(exp)：
常量表达式:5 "heheda" true ...
复合表达式:由一个或者多个运算符和数据值组合而成的语句  8>5  9+4 ...
var res=!true;//false
!"blue";//false
!"";//true
!5;//false
!0;//true
!NaN;//true
!null;//true
ps:无论当前表达式返回的是什么类型的数据，求反过后返回的都是一个布尔值
(!!):(遇真为真，遇假为假)


b 逻辑与(&&)
var res = exp1 && exp2;
(遇假为假，全真为真)
exp1 true   false  false  true
exp2 false  false  true   true
res  false  false  false  true
ps:返回的不仅仅是布尔类型的值，逻辑与是一个短路操作：如果第一个值为false，无论第二个值是什么都会返回false


c 逻辑或(||)
var res = exp1 || exp2;
(遇真为真，全假为假)
exp1 true   false  false  true
exp2 false  false  true   true
res  true   false  true   true
ps:返回的不仅仅是布尔类型的值，逻辑与是一个短路操作：如果第一个值为true，无论第二个值是什么都会返回true


6 赋值运算符
简单赋值运算符：= 把右边的值赋给左边
复合赋值运算符：+= *= /= %= -=
var num=10;
num+=10;
num=num+10


7 条件运算符(三目运算符 ?:)
var res = bool_exp ? trueValue : falseValue;
如果bool_exp为true,就将trueValue返回给res；如果bool_exp为false,就将falseValue返回给res。


8 逗号运算符
var num1,num2,num3,...;
var num1=1,num2=2,num3=3,...;
var nums=(1,2,3,...);//只能取最后的值


9 优先级顺序：
一元运算符(逻辑非)>算术运算符>关系运算符>逻辑或(逻辑与)>赋值运算符
如果要增强某个运算符的优先级的话就加上"()"


-----------------------------------------------------------------------------------
语句：定义了ES中程序结构的主要语法。通常使用一个或者多个关键字来完成给定的任务
语句可以很简单也可以很复杂。
程序的三种基本结构：顺序结构 分支结构 循环结构
分支：单分支 双分支 多分支 分支嵌套（用来做判断用的）
单分支：
if(条件表达式){
if字句;
}
条件表达式：返回的是一个boolean值，当为true时，就进入到{}执行if字句，当为false时就不进入{}执行if字句
双分支：
if(条件表达式){
if字句;
}else{
else字句;
}
如果满足条件表达式就执行if字句，否则就执行else字句
else不能单独存在，依附于if存在。if后面有条件表达式，else后面没有条件表达式，但是有隐含条件年，与if相反


多分支:
if(条件表达式1){


}else if(条件表达式2){


}else if(条件表达式3){


}...
else{


}
分支嵌套：
if(条件表达式1){
if(条件表达式2){


}else{


}
}else{
if(条件表达式2){


}else{


}
}
在语句里面只要有"{}"就代表了当前语句的结束，所以我们不需要用";"再进行结束语句


switch语句：多分支


switch(表达式){
case value1://表达式===value1
case语句1;
break;
case value2:
case语句2;
break;
...
default:
default语句;
}
1 表达式:通常方式一个变量。不仅仅是一个条件表达式
2 {}:不能省略
3 case:表示会出现的每一种情形。如果表达式符合当前情形则执行后面的case语句。表达式有多少种情况，
就要罗列出多少个case以及case语句，case后面的值就是表达式可能的值
4 default:表示表达式不匹配前面任何一种情行的时候，就执行default语句
5 break:每条case后面都可以加上break关键字。遇到break就退出switch语句，如果不加break，程序会继续向下执行，直到遇到break为止
6 任意表达式都可以使用switch语句
7 switch语句可以与if语句进行互换
8 switch语句在比较值的时候使用的是全等操作符，因此不会发生类型转换
--------------------------------------------------------------------------------
绝对值：Math.abs(n)  ---->|-8|
平方根：Math.sqrt(n)---->n只能取正数
m的n次方：Math.pow(m,n)
向上截断取整：Math.ceil(n)取大于或等于n的最小整数   5.1---》6    5.9---》6    5.0----》5
向下截断取整：Math.floor(n)取小于或等于n的最大整数  5.9---》5    5.1---》5    5.0----》5
四舍五入：Math.round(n)
伪小数：Math.random() 0---1之间的伪小数  有可能为0 但绝不可能为1


求一个有范围的随机数  小----》大
Math.floor(Math.random()*(大-小+1)+小)
Math.floor(Math.random()*10)


循环语句---for  while  do...while
循环语句：让由一条或多条语句组成的代码块执行特定的次数
for语句：
for(表达式1;表达式2;表达式3){
循环体;
}
表达式1：循环变量的初始值
循环变量：控制循环次数的一个值；
表达式2：循环条件，当条件为true的时候，就进入到循环体执行，当条件为false的时候循环结束
表达式3：循环变量的改变值
循环体：循环执行的代码
for语句执行的特点次数由表达式2 表达式3决定


break continue语句用于在循环中精确的控制代码的执行
break:退出      遇到break立即退出循环，未执行的代码和循环次数就不会再执行 强制继续执行循环后面的语句
continue:继续   先退出当前次数的循环，然后继续执行下一次的循环
-----------------------------------------------------------------------------------
循环语句---for  while  do...while
循环语句：让由一条或多条语句组成的代码块执行特定的次数
for语句：
for(表达式1;表达式2;表达式3){
循环体;
}
表达式1：循环变量的初始值
循环变量：控制循环次数的一个值；
表达式2：循环条件，当条件为true的时候，就进入到循环体执行，当条件为false的时候循环结束
表达式3：循环变量的改变值
循环体：循环执行的代码
for语句执行的特点次数由表达式2 表达式3决定


break continue语句用于在循环中精确的控制代码的执行
break:退出      遇到break立即退出循环，未执行的代码和循环次数就不会再执行 强制继续执行循环后面的语句
continue:继续   先退出当前次数的循环，然后继续执行下一次的循环


while语句：前测试循环语句
while(条件表达式){
循环体;
}
while里面的表达式就相当于for语句的表达式2；当条件为真时，进入循环体，当条件为false时，就结束循环
while可以和for进行互换的


do...while语句：后测试循环语句
do{
循环体;
}while(条件表达式);
先执行循环体，再判断条件
循环体可以至少执行一次，但是for和while有可能一次都不执行




for和while可以一起使用，但是有不同的分工
for:已知循环次数
while:未知循环次数，用while做死循环，但是不能真正的死循环，要有退出条件


循环嵌套：循环语句里面嵌套循环，理论上是可以任意嵌套，但是一旦嵌套过多，性能较差
执行顺序：每一次外层循环进入内层循环后，外层循环变量不变，内层循环在发生变化
外层循环进入内层循环时，内层循环变量要重新初始化
--------------------------------------------------------------------------------
一 事件对象(event):与特定事件相关且包含有关该事件详细信息的对象
通过事件可以触发event对象的元素,鼠标的位置及状态,按下的键等等
event对象只在事件发生的过程中才有效
非IE浏览器里的event跟IE里的不同,IE里面的是全局变量,随时都可用
非IE浏览器需要用参数诱导才能使用是运行时的一个局部变量


clientX:鼠标在浏览器窗口中的横向坐标
clientY:鼠标在浏览器窗口中的纵向坐标


二 事件流:描述的是页面中接受事件的顺序
在w3c的标准里面规定了事件的执行顺序要经历两个过程:事件捕获,事件冒泡
事件捕获:由最不具体的节点接收事件,而最具体的节点最后接收---由外到内的过程
最不具体的节点:document或者window
最具体的节点:绑定事件的对象最里层的节点
事件冒泡:由具体的元素接收,然后逐级向外面传播至最不具体的节点---由内到外的过程
整个事件流的顺序:先接收再传播


阻止事件冒泡:因为执行函数是在冒泡阶段执执行的
stopPropagation();
cancelBubble=true;
window.event?window.event.cancelBubble=true:e.stopPropagation();


阻止事件的默认行为:
preventDefault();
returnValue=false;
window.event?window.event.returnValue=false:e.preventDefault();


三 事件处理程序---事件后面绑定的函数
1 HTML事件处理:
直接添加到HTML结构当中
<tag onclick="funName()"></tag>---HTML的事件属性
2 DOM0级事件处理:
把一个函数赋值给一个事件
DOM.on事件名=function(){---对象的事件属性
程序块;
}
3 DOM2级事件处理:
添加事件句柄:
非IE低版本:
addEventListener("EventType",FunName,Bool);---事件句柄
true:在事件捕获阶段执行事件处理程序
false:在事件冒泡阶段执行事件处理程序


IE低版本:
attachEvent("on事件名",函数名);---只支持事件冒泡的阶段




移除事件句柄:
removeEventListener("EventType",FunName,Bool);
detachEvent("on事件名",函数名);
只能移除没有带参数的事件函数
--------------------------------------------------------------------------------------------
***节点***
一 概述
DOM可以将HTML文档描绘成一个由多层节点构成的结构
每个节点都拥有自己的特点\数据\方法,并且与其他节点存在着微妙的关系
节点的分类:
1 元素节点(div...)
2 属性节点(html属性)
3 文本节点
4 注释节点
5 文档类型节点


文档节点(document)是每个文档的根节点.html元素是文档节点的子节点.称为文档元素(documentElement),每个文档只能有一个文档元素,在
html文档当中文档元素始终是html元素


二 节点的常用方法和属性
1 创建节点
var DOM_Ele=document.createElement("元素名");
2 创建文本节点
var DOM_Txt=document.createTextNode("文本");
3 删除节点
父节点.removeChild(子节点);
4 替换节点
父节点.replaceChild(新节点,原节点);
5 克隆节点
节点.cloneNode(true/false);
true:克隆当前节点\属性\子元素
false:只克隆当前节点\属性
6 添加节点
父节点.appendChild(子节点);添加到父节点里面的后面
父节点.insertBefore(新节点,原节点);将新节点添加到原来节点的前面
7 查找节点
父节点.firstChild  找到第一个子节点
父节点.lastChild   找到最后一个子节点
父节点.childNodes  找到所有的子节点 返回的所有子节点包括文本节点
父节点.children    找到所有的子节点 返回的是所有元素子节点(非标准)
8 获取节点类型
节点.nodeType      返回当前节点的节点类型
1  元素节点
2  属性节点
3  文本节点
9 获取节点名称
节点.nodeName     返回的是当前节点的名称
10 获取相邻节点
节点.previousSibling  返回的是当前节点的前一个兄弟
节点.nextSibling      返回的是当前节点的后一个兄弟
11 获取父节点
节点.parentNode       返回的是当前节点的父节点
12 获取属性值
节点.getAttribute("属性名")  返回当前节点属性名的属性值
13 设置属性值
节点.setAttribute("属性名","属性值");
14 类名
获取:节点.className; 获取当前节点的类名
设置:节点.className="类名";设置当前节点的类名
-------------------------------------------------------------------------------------
对象：
内置对象：Array Function Date Math String Number RegExp Boolean ...
宿主对象：DOM BOM
自定义对象
------------------
RegExp：正则对象  (Regular Expression)
由普通字符和特殊字符构成的文字模式，该文字模式是用来检测当前字符串是否符合你的这套文字模式
是一种强大的字符串匹配工具，如输入验证等场景


一 定义正则对象
var reg=new RegExp("正则表达式","修饰符");---构造函数语法
var reg=/正则表达式/修饰符;---直接量语法


二 修饰符
i 不区分大小写
g 全局匹配
/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/
三 正则表达式的构成
1 元字符
\w:匹配数字字母下划线
\W:匹配非数字字母下划线
\d:匹配数字
\D:匹配非数字
\s:匹配空白字符
\S:匹配非空白字符
. :匹配换行和行结束符以外的任意字符
^ :匹配字符串开始
$ :匹配字符串的结束
\n:匹配换行符


2 方括号：用于查找某个范围内的字符
[]:匹配[]中罗列的单个字符
[abc]
[\u4e00-\u9fa5]
[a-z]
[A-Z]
[0-9]<===>\d
[a-z0-9_]<===>\w    /\w/i   /[a-z0-9_]/i  new RegExp("[a-z0-9_]","i")
[^]:匹配除了[]当中罗列的字符以为的单个字符   [^abc]   [^a-c]


3 限定符（量词）：用来描述字符出现的次数
? :匹配0个或1个
+ :匹配1个或多个
{n}:匹配n个   /\d{5}/  /[0-9]{5}/
{m,n}:匹配至少m个但是不能超过n个  /\d{6,10}/
{m,}:匹配至少m个  + <===> {1,}


4 分组和选择
() :分组   abcabcabc   (abc){3}
|  :选择   aba  abb  aab   bab  aaa  bbb...  (a|b){3}


aabbbb aaaaaa bbbbbb bbaabb ...   ((aa)|(bb)){3}


6-18个字符构成，可以使用字母数字下划线，但是必须以字母开头
{6,18}         \w                     ^[a-z]
/^[a-zA-Z]\w{5,17}$/     /^[a-z]\w{5,17}$/i


手机号：
1   3/5/7/8
/^1[3578]\d{9}$/


email:
sakjdakjd   @      zhcfdh    .           com
\w+         @      [a-z]+   [.]或者\.    (com)
/^\w+@[a-z]+\.(com)$/i


------------------------------------------


四 常用正则表达式的String对象的方法


String.search(reg):检测与正则表达式相匹配的值，如果找到返回匹配的位置否则返回-1


String.match(reg):找到一个或多个正则表达式的匹配，返回的是一个集合


String.replace(reg):替换与正则表达式匹配的子字符串


正则表达式在匹配的时候有一个特性：贪婪


五 RegExp对象的方法
RegExp.test(string):用于对某个字符串进行检测，如果符合正则表达式的一个匹配结果则返回true,否则就返回false
只要字符串当中有一部分满足正则的话就返回true,所以在书写正则的时候必须要加上(^$)
-----------------------------------------------------------------------------------------
AJAX:Asynchronous Javascript And XML
异步的JS和XML（并非只局限于XML），一种创建交互式网页应用的网页开发技术
AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的web应用程序的技术
web应用程序《----》网页


AJAX的核心是JS对象XMLHttpRequest。该对象是一种支持异步请求的技术