JS思维导图 - 思维导图

JavaScript简介

简介

JavaScript 是一种网页编程技术，用来向 HTML 页面添加交互行为 JavaScript 是一种基于对象和事件驱动的解释性脚本语言，直接嵌入 HTML 页面，由浏览器解释执行代码，不进行预编译。

特点:

可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序解释执行：事先不编译，逐行执行基于对象：内置大量现成对象

作用:

客户端数据计算客户端表单合法性验证浏览器事件的触发网页特殊显示效果制作

三种定义JS代码的方式

方式

1. 在元素的事件属性中编写代码案例: 清除缓存 2. 在网页的script标签中编写代码案例: alert("哈哈哈"); 3. 在外部的.js文件中编写代码, 通过script标签引入到html中案例: 注意: 注意字符编码问题在引入外部js文件的script标签中不要在script标签中出现任何的代码, 会被忽略!

AJAX

1.什么是AJAX

Asynchronous JavaScript And XML 异步JS 和 XML 它不是一个新技术是几个技术的综合以JavaScript 作为主要操作语言以HTML 为骨架以CSS作为渲染手段以XML作为传输载体(以JSON) 以异步请求对象(XMLHttpRequest) 作为发送请求和接收响应的对象

3.AJAX的优势

异步请求和响应局部刷新

4.XMLHttpRequest 的API

var xhr = getXHR(); 准备发送请求 xhr.open(type,url,asyn); type就是请求的类型有 get post put delete url 请求的路径 asyn 是否异步默认是 true 注册数据处理函数 xhr.onreadystatechange=函数; 函数可以是一个函数的名字或者匿名函数 xhr.onreadystatechange=function(){ // readyState 请求的状态 status http的状态码 if(xhr.readyState==4 && xhr.status == 200){ // 获取返回的数据 var text = xhr.responseText; } }; 发送请求 xhr.send(null);

6.JSON

JavaScript Object Notation JS 对象通知 6.2 JSON 对象格式和 JSON字符串格式 {"key":value,"key":value} JSON对象格式 '{"key":value,"key":value}' JSON字符串格式 "{\"key\":value,\"key\":value}" java 中的JSON字符串 JSON 对象数组 [{"key":value,"key":value},{"key":value,"key":value}] java中JSON对象数组字符串 "[{\"key\":value,\"key\":value},{\"key\":value,\"key\":value}]" 6.3 JSON对象和 JSON字符串 JSON对象可以使用点取得对应的数据 JSON字符串必须转成JSON对象之后才能使用点语法取得对应的数据。如何把JSON字符串变成 JSON 对象 JSON.parse(json字符串); eval('(' + jsonStr + ')'); 6.4 如何把java对象转换成 JSON字符串 XdlBankAccount account = new XdlBankAccount(1,"liweijie","123",1000011); "{\"id\":1,\"acc_no\":\"liweijie\"}" 使用第三方的jar包 JSONObject.fromObject(java对象).toString() JSONArray.fromObject(java对象的List).toString()

7.常见的问题

7.1 缓存问题

当浏览器发送同一个get 请求时,不同的浏览器对同一个get请求处理方式不同 IE 浏览器会直接使用上一次的结果,Firefox 谷歌浏览器会重新发送请求。

如何解决:

把get 请求换成 post

url 改变但是请求的服务不改通过增加变化的参数即可 ()

randomValue.do?r=Math.random() 或者 randomValue.do?r=new Date().getTime()

7.2 中文参数的乱码问题

get 请求 encodeURI 处理一下中文参数特别说明 IE 必须使用 encodeURI 其它浏览器可以不使用。tomcat8 中get 没有中文乱码问题。如:var url = 'randomValue.do?username='+encodeURI(username)+'&r='+new Date().getTime(); post 请求的中文乱码

子主题 1

定义变量

var 变量名 = 初始化值;

数据类型 ***

基本数据类型

number : 数值类型;

string : 字符串类型

boolean : 布尔类型

复杂数据类型

Array : 数组

Object : 对象类型

特殊数据类型

null : 空类型

undefined: 未定义s

获取变量的值类型

var 变量名 = typeof(变量); // 返回值: string类型的数据类型名称

严格相等*****

在JS中, 双等号比较变量时 , 比较的仅仅是值, 不比较数据类型; 我们可以使用严格相等符号(三等===) , 来比较数据和类型 !

Array 数组

JS中的数组 , 可以存储任意类型的数据 ! 数组的长度, 理论上是无上限的 . 数组存在length属性

创建数组

- var 数组名 = new Array(); - var 数组名 = new Array(数组长度);

创建数组时, 直接指定元素列表:

- var 数组名 = new Array(元素1,元素2,元素3... n); - var 数组名 = [元素1,元素2,元素3... n];

从数组中取出数据:

var 变量 = 数组名[下标];

给数组指定下标赋值:

数组名[下标] = 值;

Math 对象

最大值

var max = Math.max(数值1,数值2);

随机数字

var number = Math.random();//产生一个0-1的随机浮点型数字

四舍五入

var number = Math.round(数值);//将浮点型的数字, 转换四舍五入为整数!

控制台对象 console 了解

- 输出普通日志 console.log(文本);

- 输出提示信息console.info(文本);

- 输出警告信息 console.warn(文本);

- 输出错误信息 console.error(文本);

- 输出debug信息console.debug(文本);

console可以使用占位符:

上述的所有的输出日志的方法 , 方法参数都是可变参数 ; 都可以传递0-n个参数, 参数1. 要输出的文本(可以带有占位符的文本) 参数2-n: 按照顺序, 填充参数1中占位符的数据 ! 格式化占位符: %s 字符串的占位符, 可以填充字符串数据 %d 整型数字占位符, 可以填充整型数字 %f 浮点型数字占位符, 可以填充浮点型数字 %o 对象占位符 , 可以填充对象案例: console.info("王帅是一个%s人 , 他拥有%d头%s","社会",16,小猪佩琪);

字符串转换数字 ***

格式1

用来转换整型, 浮点型数字 var 变量名 = new Number(字符串);

格式2.

用来转换整型数字 var 变量名 = parseInt(字符串);

数字转换字符串

数字.toString();

正则表达式 ***

步骤

步骤: 1. 创建一个正则表达式对象 var 变量名 = /正则表达式/g; 2. 通过正则表达式的test函数, 验证是否匹配规则: var flag = 正则对象.test(要验证的字符串); //返回结果为boolean类型

案例:

案例: 编写一个函数, 用于验证参数1 是否匹配手机号码: function haha(tel){ //创建正则对象 var reg = /^(13[0-9]|14[457]|15[0-9]|16[67]|17[0-9]|18[0-9]|19[89])[0-9]{8}$/g; //验证是否匹配 var flag = reg.test(tel); if(flag){ alert("您输入的手机号可用"); }else{ alert("格式有误, 请检查 !"); } }

Date 日期对象了解

案例: var date = new Date(); console.info(date.toString()); console.info(date.toLocaleString()); console.info(date.toLocaleTimeString()); console.info(date.toLocaleDateString()); 案例: var date = new Date(2008,7,8,20,8,8,888); console.info(date.toString()); console.info(date.toLocaleString()); console.info(date.toLocaleTimeString()); console.info(date.toLocaleDateString());

创建当前日期对象

var date = new Date();

根据指定时间, 创建一个日期对象

var date = new Date(年,月-1,日,[时],[分],[秒],[毫秒]);

常用函数

常用函数: toString(); toLocaleString(); toLocaleTimeString(); toLocaleDateString();

函数*****

定义函数的格式: function 函数名(形式参数列表){ 函数体; [return 返回值;] }

案例:

function max(a,b,c,d){ return ((a>b?a:b)>c?(a>b?a:b):c)>d?((a>b?a:b)>c?(a>b?a:b):c):d; }

Function 类型对象

function x(){ console.info("这里是x方法"); } function y(){ console.info("这里是y方法"); } x=y; x(); 上述案例执行结果为: 这里是y方法我们JS中, 函数是一种类型, 定义一个函数的同时, 其实也是在创建一个函数类型的对象 ! 对象名就是函数名创建方式: 格式1. 定义函数的方式格式2. 通过new 来创建函数: var 函数名 = new Function(参数1,参数2...参数n): 参数列表的含义: 所有参数都是字符串 , 最后一个参数的含义时函数体 ! 之前的所有参数, 都是函数的参数列表 ! 案例: var x = new Function("x","y","z","return x+y+z"); x(1,2,3);

匿名函数:

常用于参数的传递和仅执行一次的函数

案例:

常用的参数传递的格式: functio(参数列表){ } ------------------------------------- //这种格式存在返回值, 为function类型 ,观察如下代码, 给匿名函数起名 var x = function(参数列表){ } 仅自动执行一次的匿名函数格式: 格式: (function(参数列表){ console.info("自动执行"); })(); 恶心格式: [~|+|-|!|void](function(参数列表){ console.info("自动执行"); })();

JS的三种弹出窗

第二天:

弹出一个信息提示框

alert("文本内容");

弹出一个信息问询框, 可点击确定和取消

confirm("文本内容");//返回值: 点击确定时返回true 点击取消时返回false

弹出一个输入框 , 用户可以点击确定和取消

var text = prompt("提示文本内容");//返回值: 点击确定返回输入的内容, 点击取消返回null

提示窗

alert("文本");

任何的弹出窗体, 都是在跟用户进行交互, 用户未进行操作之前, 解析器时阻塞的 !

全局函数

格式:isNaN(string text)

作用:用于验证传入的参数text 是否为非数字

参数为数字, 则返回false ! 参数为非数字, 则返回true !

eval(string text);

作用:用来将传入的字符串参数, 当作代码执行 !

URI编码 (URL编码)

案例: encodeURI("王帅是一个大SB"); decodeURI("%e7%b2%97%e4%ba%ba");

文字进行URI编码

var URI编码文字 = encodeURI("正常文字");

将URI编码的字符串, 解码为普通文字

var 正常文字 = decodeURI(URI编码文字);

HTMLDOM对象

获取元素对象的四种方式

document.getElementById("id值");

document.getElementsByTagName("标签名");

通过元素的标签名称, 查找一个元素对象数组 !

document.getElementsByName("name属性值");

通过元素的name属性, 查找一个元素对象数组 !

document.getElementsByClassName("class属性值");

通过元素的class属性, 查找一个元素对象数组 !

通过元素对象, 对属性进行取值/赋值操作 ***

夜间模式案例: HTML部分: p CSS部分: body{ background-color: #666; } #content{ width:1100px; margin: 0 auto; border:1px solid #999; padding: 30px; } .night{ color:#bbb; background-color: #333; } .day{ color:#333; background-color: #fff; } JS部分: var flag = true; function change(img){ var div = document.getElementById("content"); if(flag){ img.src="images/x1.png"; //切换样式 div.className = "night"; }else{ img.src="images/x2.png"; //切换样式 div.className = "day"; } flag = !flag; }

取值: var 属性值 = 元素对象.属性名;

赋值: 元素对象.属性名 = 值;

特殊属性: 1. class属性值的修改和获取, 在JS中需要通过className属性进行操作 2. 元素的文本内容 (开始节点与结束节点之间的部分) ,通过innerHTML属性表示!

根据元素层次查找元素节点

当前元素.parentNode; 获取父元素对象

当前元素.firstChild;获取第一个子元素

当前元素.lastChild; 获取最后一个子元素

当前元素.childNodes;获取所有子元素(返回数组)

通过JS得到的节点, 节点类型: 了解

- 元素节点 - 文本节点 - 属性节点如何判断一个对象的元素类型: 通过得到的节点 , 调用如下属性进行区分: - nodeName : 获取元素名称 - nodeValue : 获取节点值(元素节点返回null.文本节点返回文本, 属性节点返回属性值) - nodeType : 表示节点类型: 1表示元素节点, 2表示属性节点 3表示文本节点

文档操作

创建节点

document.createElement("节点名称");

插入节点

方式1.

父元素对象.appendChild(新节点对象);

方式2.

父元素对象.insertBefore(新节点对象,参考元素对象);插入到参考子元素之前

删除节点

父元素.removeChild(子节点对象);

清空节点:

元素对象.innerHTML = "";

删除当前节点:

当前元素.parentNode.removeChild(当前元素);

省市县三级联动

元素对象了解

select 对象:

document.getElementXXX方法获得对象

属性:

options : 可以用来获取所有的下拉选项对象

selectedIndex : 获取当前选中的下标

函数

add(option对象); 追加一个选项

remove(index); 移除指定索引的选项

事件:

onchange : 当选中的选项改变时触发

option 对象

格式:new Option(文本内容,value属性值);

常用属性:

index : 当前选项, 在列表中的索引值

text : 用于获取/设置文本内容. 与innerHTML一致

value : 用于获取/设置value属性值

selected: 用于判断当前选项是否被选中

table 对象表格

属性:rows : 获取所有的tableRow对象

常用函数:

insertRow(); 追加

insertRow(index); 在指定索引的位置, 插入一行, 并返回行对象(tableRow)

deleteRow(index); 从制定索引的位置, 删除一行

tableRow 对象行

描述:在table中 ,调用insertRow函数会得到一个行对象

常用属性

cells : 获取所有的tableCell对象

rowIndex: 得到当前行对象, 在表格中的索引值!

常用函数:

insertCell();追加

insertCell(index);在指定索引的位置, 插入一列 , 并返回列对象(tableCell)

deleteCell(index);从指定索引的位置, 删除一列;

子主题 1

tableCell 对象列

属性:

cellIndex : 获取当前列在行中的索引值;

colSpan : 获取/设置 td纵向占用的单元格数量

rowSpan : 获取/设置 td横向占用的单元格数量

window对象 ***

var width = 195; var height = 145; var leftx,topx; for(i=0;i //计算距离顶部的高度 topx = i*height; for(j=0;j //计算距离左边的长度 leftx = j*width; window.open("http://itdage.cn",i+""+j, "height="+height+"px,width="+width+"px,top="+topx+"px,left="+leftx+"px" ,false); } }

格式: var 新窗口 = window.open(url,[name],[config],[specs]);

(不要使用QQ浏览器 ,QQ浏览器在旧窗口中, 以新标签的形式打开)

参数:

url:新打开的窗口加载的资源地址, 可以是本地相对路径, 也可以是网页路径

name:窗口的唯一标识 , 用于后续操作此窗口(相同name的窗口,不允许同时存在)

config :窗口的配置

height : 窗口的高度 px

resizabe : 是否可调整窗口大小

left : 新窗口左上角,距离屏幕左边框的距离!

top : 新窗口左上角,距离屏幕上边框的距离!

location : 显示地址栏

width : 窗口的宽度 px

menubar : 显示菜单栏

scrollbars : 显示滚动条

titlebar : 显示标题栏

tollbar : 显示工具栏

不常用配置

specs : boolean值, 表示是否允许采用历史文件!

关闭浏览器窗口:window对象.close();

定时器 ***

一次性定时器 (延迟执行)

格式:setTimeout("执行的语句",延迟时间毫秒);

案例:

打开一个新的网页 , 延迟10秒钟关闭它 function closex(){ windowObj.close(); } var windowObj = window.open("https://itdage.cn"); setTimeout("closex()",10000);

周期性定时器 (循环执行)

格式:

开启周期性定时器:var obj = setInterval("执行的语句",周期时间毫秒);

关闭周期性定时器:clearInterval(周期性定时器对象);

案例:

案例: 倒计时: var s = 10; function showTime(){ s--; var h1 = document.getElementsByTagName("h1")[0]; h1.innerHTML = s; } function loadx(){ //当网页加载完毕 , 开启周期性定时器 setInterval("showTime()",1000); } 10

window子对象

获取屏幕信息 screen 了解

属性:

width : 用于获取屏幕宽度

height : 用于获取屏幕高度

availWidth : 获取屏幕可用宽度

availHeight : 获取屏幕可用高度

浏览器历史对象 history 了解

函数

forward() : 前进

back() : 后退

go(数字) : 正数表示前进的页数, 负数表示后退的页数!

浏览器地址对象 location ***

属性

href : 用来获取或修改当前网址 !

函数

reload() : 刷新当前网页

replace(url) : 替换当前网页内容为 url 指向的网页内容 ! 替换不等于跳转, 无法后退

assign(url) : 跳转到指定url , 与location.href=url 基本一致!

作用:

用逻辑代码控制的网页跳转 !!!

1. 我们可以通过运算获取数据, 2. 通过拼接字符串网址, 来将数据存储到网址中, 3. 然后修改地址, 将数据发送给服务器 !

事件 ***

概念

指的是HTML在元素状态改变, 操作键盘鼠标时触发的动作

事件分类

鼠标事件

键盘事件

状态事件

无论任何事件, 都存在event(事件)对象 , 事件对象中包含一些属性:

clientX : 当鼠标触发事件时 , 此属性表示鼠标在网页中的横向坐标x轴的点

clientY : 当鼠标触发事件时 , 此属性表示鼠标在网页中的横向坐标y轴的点

keyCode : 当键盘事件触发时, 此属性表示触发事件的按键的键盘码 !

案例:

案例: body{ margin: 0; padding: 0; } div{ width:1000px; height:500px; border:1px solid red; } #span{ position: absolute; z-index:-1; } function move(e){ var span = document.getElementById("span"); var x = e.clientX-16; var y = e.clientY-8; console.info(x+" "+y); span.style="left:"+x+"px;top:"+y+"px"; } 图片

键盘事件

键盘按下:onkeydown

键盘弹起:onkeyup

案例:

案例: //在JS中, 给window对象的事件属性赋值, 赋值为一个函数! var flag = true; function xUp() { var code = event.keyCode; if(code==115){ if(flag){ alert("外挂开启成功"); }else{ alert("外挂已关闭"); } flag = !flag; } console.info("键盘弹起: " + code); } window.onkeyup = xUp;

事件冒泡机制了解

指: html中元素触发事件时, 会依次激活父元素的同类事件 !

停止冒泡

设置取消冒泡标记为true:event.cancelBubble = true;

停止冒泡:在取消的事件代码中, 调用event.stopPropagation();

事件源对象了解

事件源, 指的就是实际触发事件的元素对象

获取事件源对象

- IE : var element = event.srcElement; - 其他 : var element = event.target;

面向对象 ***

定义对象的三种方式 *****

1. 创建对象直接调用

格式: var 对象名 = new Object(); JS对象设置属性时(属性赋值), 如果属性不存在, 则创建属性并赋值

案例:

案例: var say = function(){ console.info("我是:"+this.name+",我的性别是:"+this.sex+",我今年 "+this.age+"岁了"); } var person = new Object(); person.name="成轩"; person.age=38; person.sex="污妖王"; person.say = say; person.say();

2. 创建对象模版 , 通过new使用

案例: function Book(id,name,info,say){ this.id = id; this.name = name; this.info = info; this.say = say; } var book = new Book(10001,"成轩武神招式之老树盘根分解","一代武术宗师成轩, 图文并茂分解老树盘根详细步骤与要领!",function(){ console.info("图书编号:"+this.id+", 图书名称:"+this.name+", 图书简介:"+this.info); }); book.say();

格式:

格式: function 模版名称(形式参数列表){ 通过this给属性赋值; }

3. JSON格式对象

var json2 = JSON.parse(jsonstr1);

JS中的if语句

案例:

可以判断一个元素是否被定义. 或者是否为null if(xx){ //当xx为true 或者存在具体的值 }else{ //当xx为false , null , 未定义 }