java scpipt知识全总结

JavaScript：是由网景(netscpae)开发的的基于对象的脚本语言，主要用于开发交互式的web界面

标准:ECMAScript JavaScript是ECMAScript的实现

 

 

/******************JavaScript：***************************/

一、基础体系

1.ECMAScript(核心语法)

2.文档对象模型/文档树(DOM)

3.浏览器浏览模型(BOM)

4.事件模型

 

 

二、引用方式

1.可在事件处理程序当中书写

2.超链接伪URL

3.内嵌script

4.外部引用 <script src></script>

 

三、基础函数

提示框函数:alert('你好'）;

输入框函数:prompt("请输入账号")

确认框函数:confirm("你确认修改吗？");

typeof 变量名: 数值型测试

四、

JS基础语法

 

1.变量:弱类型变量

var 变量名=值

 

2.数据类型

(1)基本数据类型

a:数值型(number)

 

a-1:当表示的数据超过上限时便会显示（Infinity）无穷大

a-2:isFinite(...)判断一个数值是否为无穷大 true:不是无穷大的数 false:是无穷大的数

a-3:toFixed(2)保留几位小数，并会四舍五入

a-4:获取字符串长度:length

a-5:算术运算符

+,-,*,/.++,--

++/--:写在之前就是先改变变量的值然后再进行运算

写在之后就是先进行运算然后再改变变量的值

Number(i)+7-->转换i为数值

parseInt(i)+6-->转换i为整型

parseFloat(i)+9.8 -->转换i为浮点型

Math.floor();取整数

Math.ceil()四舍五入

==：相等 ===：全等-->必须数据类型与值同时相等才能为true

条件运算

单目运算

双目运算

三目运算

boolean(布尔条件)？条件为true取值 : 条件为false取值 例如：5>3 3:2 则取值为3

 

 

 

b:字符串(string)

c:空指针(null)

d:未初始化(undefined)

e:布尔类型(true,false)

f:运算符 ---> 关系运算符 !:非 +:连接符

g:当一个数据和另外一个数据进行运算的时候不能得到一个有效的数据，便会显示NaN

isNaN:判断一个数值是否是非数值，若是true则为非数值

if(isNaN(s))

 

/******************************************/

 

一、

测试代码：console.log();

 

检测类型

(1)typeof 变量、 (2)对象类型 instanceof 数据类型-->返回的结果相反

undefined-->对应的返回值，可用来判断对象的兼容性(判断浏览器是否支持一个对象)

例如:if(Window. Event())

{

}else

{

}

用switch可以进行如下条件判断

var i=10;

var n=9;

switch(true/false){

case i>n:alert("大");

default:alert("小");

}

 

var i=(Math.random()*10).toFixed(0); 0-10随机数

类型转换

强制：把其他类型转换为字符串 变量 + "";

自动：Number()、Boolean

转义字符\n：换行、\r：空格

 

二、

判断：

1.if(){

}else{

}

2.if(){

}else if(){

}else{

}

3.switch(){

case : ..........; break;

case : ..........; break;

default: ...........;

}

循环

1.当型循环 while (0-->多次)

while(){

 

}

2.直到型循环:先执行循环，再判断(1-->多次)

do{

}while();

3.for(;;)循环

 

循环退出

1.控制循环变量

2.退出语句

break：退出整个循环

continue:结束本次循环

 

 

 

 

 

 

(2)对象数据类型

对象：变量、方法

 

对象类型：

1.内置对象：在执行的过程当中已经被创建好，可以直接使用的对象。

window/global(全局对象)、Math(math 对值、math.ceil():四舍五入)

2.原生对象：在执行的过程当中没有被创建好，如果要使用需要自己创建

1.Date() get...、set...

2.String() .length()、.charAt(索引号):取指定字符、s+concat("dd"):字符串拼接

.indexof("a")查找字符/字符串第一次出现的位置、.lastindexof("rr"):查找字符/字符串最后一次出现的位置

.substring(开始位置,结束位置):不包括结束位置字符

.substr(开始位置,需要截取字符串的长度)

 

 

split():用符号分割字符串，他返回的值符号之前的所有的数据，并且返回的是数组

var arr="2,3,4,45,5 : 0,5,5,9 : 777,89,7";

var back=arr.split(":"); //相当于将arr分成三段

alert(back[2]); //输出arr的第一段

 

3.数组(Array)：JS数组可以改变大小

(1)通过new Array()创建

(2)自变量:直接赋值-->var arr=[1,2,3,4]

shift():删除数组的第一个数,并且改变数组的长度

pop():删除数组的最后一个数，并且改变数组的长度

reverse():将数组的数据反向输出

slice(开始位置，需要截取长度):从数组中取出数据，

splice(开始位置，删除几个数)

splice(开始位置，删除几个数，添加的数据,数据,数据.....)：从开始的位置删除几个数，并且添加(n)个用逗号隔开的数据

splice(开始位置，0，添加的数据)：从开始位置添加数据

push():向数组的末尾添加一个或更多元素，并返回新的长度。

4.函数(function):JS函数不需要规定函数参数类型以及个数，但是也可以通过形参来使用函数

JS函数可以有返回值，也可以没有返回值

JS函数可以再任何地方返回值或通过简单返回来结束函数

JS可以书写匿名函数来赋值给变量

(1)函数定义，不遵守程序运行先后顺序

function test(){

 

执行代码....

return 返回(任何类型)值/return 后面为空可立马结束函数运行

 

}

function text(r,t,...){

执行代码...

arguments(); //数组类型的专门存放传过来的参数个数，属于函数内部的对象

 

}

text(3,4...);

 

(2)函数定义赋值，遵守程序运行先后顺序

var s = function() {

 

}

5.Object:对象

(1)创建对象，并且创建对象的属性

var ojt=new Object();

obj.name = "张三";

获取属性:aalert(obj.name);

alert(obj[n])--->或者可以用变量来引用， var n=prompt()-->n=name;

 

 

(2)对象自变量创建(JSON)

var obj={

'name':'张三',

'sex':'男',

'show':function(){

}

}

var arr=[

{

'name':'张三',

'sex':'男'

},

{

'name':'李四',

'sex':'男'

},

{

'name':'王五',

'sex':'男'

},

 

];

(1)alert(arr[1].name); -->输出李四

var n="name";

(2)alert(arr[0][n]); -->通过变量调用属性

 

 

//JavaScript体系梳理-->功能架构罗列

 

数组冒泡排序自带方法:

a=[1,2,30,4,50];

a.sort(function(x,y){

if(x > y){

return 1;// 交换位置 //-1不交换

}

});

 

6:正则表达式: new RegExp()

 

 

 

 

 

 

 

3.宿主对象：依赖于执行环境(eg:浏览器)而存在的内置对象。

 

 

 

 

/**********************DOM**********************/

 

文档对象模型(DOM):用于访问/操作网页文档结构/内容的一组对象模型

 

DOM里面的所有内容都称为节点对象Node

 

DOM主要节点:元素节点 属性节点 文本节点 document节点

 

具体划分不同的类型节点(测试节点类型:nodeType 节点名称:nodeName 节点值:nodeValue)

 

firstChild:第一个子节点

lastChild: 最后一个子节点

childNodes.length:总共有多少个子节点

children.length:只查找子元素节点

parentNode:父节点

nextSibling:下一个相邻节点

previousSibling:上一个相邻节点

 

文档名字(nodeName) 文档类型 文档类型编号(nodeType)

 

Element 元素节点 1

Text 文本节点 3

 

Attribute 属性节点 2

 

 

Document 根节点(已经创建好的内置对象-->document)

 

节点的属性操作

1.指向子父节点的属性

2.指向上下节点的属性

3.

 

针对于父节点的节点的行为操作

1.appendchild(node) 添加子节点

2.removechild(node) 删除子节点

3.replacechild(node1,node2) 替换节点(node1 --> node2)

4.insertbefore(node1,node2) 插入到 (node1 --> node2)

 

createElment(创建元素节点)

createTextNode(创建文本节点)

innerHTML(添加内容)

 

属性的节点操作：

1.获取元素类名(x.className) 属性对象.属性名 注意:属性名如果是JS的关键字，就不可以用

并且不能操作自定义属性例如：class

2.获取元素对象的属性:s.getAttribute("属性名");

设置元素对象的属性:s.setAttribute("type","属性类型");

s.type="text"

 

3.属性的遍历：attributes(属性集合(数组))、attributes.specfild(只显示定义的属性)

 

文本节点的操作：

1.nodeValue(文本节点的属性)属性就代表文本节点的值

2.元素节点的innerHTML代表元素节点的所有子内容

3.元素节点的innerText代表元素节点的所有子文本内容

 

for(var k in s(对象名/数组)){

将对象名的属性赋值给k

}

elements:所有元素个数

表单操作：getElementsByname():获取表单的name(名字)

options:下拉选择的长度

options.selectedIndex:被选中的索引下标值

checked:被选中 selected:下拉框被选中

表格操作:insertRow(插入位置):插入一行

insertCell(插入位置):插入一列

rows:所有行

rows[].cells[]:所有列

deleteRow(行索引);

 

 

 

 

一、事件处理：(1)事件监听，(2)事件源，(3)事件处理程序

事件流(事件的传播)：(1)事件冒泡：逐级往上传递-->包含关系

(2)事件捕获：从外往内传递，逐层往内找寻

事件抓取采用事件捕获，事件执行采用事件冒泡

二、事件类型:

(1)鼠标事件

鼠标右键弹出菜单事件：oncontextmenu -->关闭默认菜单 return false;

click:单击事件

dbclick:双击事件

mousedown:按下鼠标任意键

mouseup:释放鼠标

mouseout:鼠标脱离某个元素区

mouseouover:鼠标进入某个元素区

mousehmove:鼠标移动事件

onchange 内容变化

(2)键盘事件

keydown:键盘按下 keycode(键盘按键对应的编码)

keyup:键盘弹起

keypress:键盘释放

(3)HTML事件

load:网页或者图片加载完毕

unload:网页卸载触发

resize:改变元素尺寸大小

scroll:滚动条每滚动一下就改变

 

三、事件添加方式:

(1)直接在元素上面添加事件

(2)在JS里面节点对象通过属性来创建事件(传统方式) mm.onlick=fuction(){} 或者有名函数(调用时只写函数名)

缺点:一个节点对象只能添加一个事件对象

(3)通过调用JS节点对象直接添加多个事件(现代方式)

 

一般浏览器方式:

mm.addEventListener("函数类型(点击click)","函数名"); -->添加事件

mm.removeEventListener("函数类型(点击click)","函数名");-->删除事件

 

IE方式:

mm.attachEventListener(""on"+函数类型(onclick)","函数名");-->添加事件

mm.detachEventListener(""on"+函数类型(onclick)","函数名");-->删除事件

事件：onfocus:获得焦点 onblur:失去焦点

 

事件源对象：所有的事件对象都存在event里面

event.clientX:获取x坐标 event.clientY:获取y坐标

 

事件的默认行为(超链接)的阻止:

(1)return false;

(2)现代方式判断 var e=event ? event:window.event

一般浏览器方式：e.preventDefault IE方式: returnValue =false

 

阻止事件的冒泡

DOM标准(stoppropagation)以及低版本的(cancelable)

一般浏览器方式：e.stoppropagation IE方式: cancelable = true

 

 

css操作

1.内联方式操作：通过节点对象的style属性直接操作

通过改变class属性来操作

.tirm():去掉字符串的前后空格

x.className="a b c".trim();

2.样式表操作：IE9以下获取stylesheets对象里面的rules不一样

 

3.获取最终样式:样式不能修改

传统： document.defaultView.getcomputedStyle(对象名)

IE： 对象名.currentStyle

 

 

/******************JS动画********************/14:58 2018\5\23 星期三

延时函数：s = settimeout(函数，时间(毫秒)) -->返回一个延时函数ID

cleartimeout(s)

s = setInterval(函数，事件) 无限循环 -->返回一个ID

clearInterval(s)

 

 

/*****************JS表单验证************************/

 

提交表单:document.forms[0].submit() -->提交函数

document.forms[0].reset() -->重置函数

onsubmit():点击submit时触发的事件

a:取消提交便可用取消默认行为 return(内联)

b:逻辑判断:return false

c:可以设置按钮禁用属性(disable)

正则表达式(pattern)：表单数据验证 txtreg.test(txt)-->与txt进行匹配

txtreg=/abc/ -->没有限制边界 txtreg=/^abc$/ -->限制边界(开始和结束可写一个(限制一边))

txtreg=/^a{0,3}bc$/ -->a的个数0-->3 txtreg=/^a{1,}bc$/ -->1-->多次 *: 0-->多次 +: 1-->多次

[abc]:一个字符位置的取值集合(任意值) [^abc]:不取方括号里面的任意值

\w:查找单词字符(包括数字、大小写字母、下划线) \d:查找数值字符 (a | b | c | d):分组中任选其一

 

 

/*********************本地存储**********************/

 

存储数据；

会话存储(sessionStorage):当用户关闭浏览器窗口时数据便会消失

本地存储(localStorage): 数据一直存在浏览器里

 

eval():将存入的对象或者是一条语句代码,取出时变成对象或者代码, 但是--->在存储对象时需呀添加小括号

例如：var stu="({\"name\":\"张三\",\"age\":\"20\"})"

parse():取出时转换为数组对象

JSON.stringify():存入时转换为字符串

 

 

 

/******************BOM*******************/

 

document.location(本地位置)

document.location.href(网址)

documment.location.history--->go(1-->n) back(1-->n) 返回 前进