javascript学习笔记整理总汇

不念不忘少年蓝@ 2021-09-14 07:54 324阅读 0赞

一 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 οnclick="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。该对象是一种支持异步请求的技术