javascript相关技术之总结

javaScript-高级

## 回顾: js-基础

js概述:

js和html整合:

方式1:内联式 直接在script标签体中编写js代码即可

方式2:外联式

a.编写外部的js文件 (*.js)

b.在使用的页面引入即可

js组成部分:

ECMAScript: 核心语法

变量声明: var 变量名称 = 值;

var关键字可以省去不写,如果不写则该变量为全局变量

数据类型:

原始类型: 5种

Undefined:

Null: null

String:

Number:

Boolean:

运算符:

typeof 变量

引用类型:

数组:

String:

Number:

Boolean:

Boolean(对象);

运算符:

逻辑运算符:

逻辑运算符两边可以为任意对象,在进行逻辑运算时,先将对象转成boolean值,再进行运算,

运算结果为对象本身.

非空对象 非空字符串 非空数字为true 其他为false

语句:

if else

函数:

js中没有重载概念,只有覆盖

普通函数:

格式:

function 函数名称(I,j){

return ;

}

匿名函数:

格式:var 函数名称 = function (){}

事件: 具体的某件事情

onclick: 单击事件

onsubmit: 该事件只有表单提交时触发

onload: 页面加载成功事件

焦点事件:

onfoucus: 获取焦点事件

onblur: 失去焦点事件

onchange: 改变事件

事件和事件源绑定:

方式1: 绑定事件

<xxx onclick="函数()"></xxx>

方式2: 派发事件

a.获取事件源对象

DOM对象

b.派发事件

元素对象.事件名称 = function(){}

BOM: 浏览器对象模型

DOM: 文档对象模型

一 ECMAScript:核心语法

数据类型-引用类型

1.Array

• 语法

  • var arr = [18];

  • new Array(); 创建空数组

  • new Array(3); 创建包含指定个数的数组

  • new Array(ele1,ele2...); 创建包含指定元素的数组

• 特征

  • 数组长度可变

  • 数组中可以存放任何类型的值

• 常用属性

  • length 长度

• 常用方法

  • join("分隔符"); 按指定的分隔符分割

  • shift(); 删除并返回数组中的第一个元素

  • unshift(); 向数组的开头添加一个或多个元素,并返回新数组的长度

  • pop(); 删除并返回数组中的最后一个元素

  • push(); 向数组的末尾添加一个或多个元素,返回新数组的长度

  • sort(); 操作数组结构 对数组进行排序

  • reverse(); 颠倒数组中元素的顺序

  • concat();连接两个或更多的数组，并返回结果

2.String

• 语法

  • new String("值"); object对象

• 常用属性

  • length 长度

• 常用方法

  • substring(startindex,endindex);

  • slice(startindex,endindex);

  • charAt();

  • split();

3.Number

• 语法

  • new Number(); object对象

4.Boolean

• 语法

  • new Boolean(); object对象

  • Boolean(值); 将给定值转为Boolean类型

5.Math

• 常用方法

  • Math.round(); 四舍五入

  • Math.PI; 圆周率

  • Math.random(); 随机数

6.Date

• 语法

  • new Date();

• 常用方法

  • toLocaleString(); ★★★ 根据本地时间格式，把 Date 对象转换为字符串。

  • getFullYear(); 从 Date 对象以四位数字返回年份。

  • getMonth(); 从 Date 对象返回月份 (0 ~ 11)。

  • getDate(); 从 Date 对象返回一个月中的某一天 (1 ~ 31)。

  • getHours() ; 返回 Date 对象的小时 (0 ~ 23)。

  • getMinutes(); 返回 Date 对象的分钟 (0 ~ 59)。

  • getSeconds() ;返回 Date 对象的秒数 (0 ~ 59)。

  • getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。

  • getTime() 返回 1970 年 1 月 1 日至今的毫秒数。类似于Java中的System.currentTimeMillis()

7.Reg(正则)

• 使用方式

  • a.编写正则表达式

    • var reg = new RegExp(正则表达式, 匹配模式);

    • var reg = /^正则表达式$/匹配模式

      • 匹配模式

        • i: 忽略大小写

        • g: 全局匹配(模糊匹配)

      • [] : 可选的值有哪些

      • {} : 可选值出现的位数

  • b.校验

    • 正则表达式.test("被校验的字符串"); 返回boolean值

8.全局函数

• parseInt(要转换的对象); 尝试 转换为Int类型

• parseFloat(要转换的对象); 尝试转换为float类型

• String(要转换的对象); 强制转换为String类型

• Number(要转换的对象); 强制转换为number类型

• Boolean(要转换的对象)); 强制转换为Boolean类型

• encodeURI(); 编码

• decodeURI(); 解码

• eval(); 将字符串转换称js可以执行的代码

9.事件

• 单击事件: onclick

• 表单提交事件: onsubmit

• 页面加载成功事件: onload

• 焦点事件::

  • 获取焦点: onfocus

  • 失去焦点: onblur

• 改变: onchange

二 BOM对象

概述:

Browser Object Model 浏览器对象模型.

作用:

用于操作浏览器中的各种对象

BOM对象:

BOM对象	作用
window(窗口对象)	浏览器窗体对象
location(链接对象)	浏览器地址栏对象
history(历史对象)	历史记录对象
Navigator (了解)	存放有关浏览器的信息
Screen(了解)	存放客户端显示屏幕的信息

window:

常用属性:

通过它获取其他的四个对象 ​ eg:window.history == history ​ 注意:使用window的对象的方法或属性时,window关键字可以省略不写

常用方法:

定时器:

周期执行定时器:

var 定时器id = setInterval(函数名,毫秒值); // 定义周期执行定时器

var 定时器id = setInterval(函数名,毫秒值); // 定义周期执行定时器

clearInterval(定时器id); // 清除周期执行定时器

单次执行定时器:

var 定时器id = setTimeout(函数名,毫秒值); // 定义单次执行定时器

var 定时器id = setTimeout(函数名,毫秒值); // 定义单次执行定时器

clearTimeout(定时器id);

警告框:

alert();

对话框:

prompt();

注释: 可以传入两个参数,第一个为提示信息,第二个为默认值

确认框: ★★★★★

confirm();

注释: 可以传入一个参数,为确认信息

history: 历史对象

常用方法:

forward(); 向前一个页面

back(); 返回上一个页面

go(number);

go(number); 向后跳转几个页面

go(-number); 向前跳转几个页面

location: 连接对象

常用属性:

href: ★★★★★

location.href; // 获取当前页面的路径

location.href=路径值; // 跳转到指定路径

常用方法:

reload(); 重新加载当前的页面，相当于浏览器上的刷新按钮

三 DOM对象

概述:

Document Object Model 文档对象模型.html加载到内存中时,是以一棵树的形式存在的,可以通过document操作所有的节点.

作用:

用于操作网页中元素(标签)信息.

html文档与dom树的关系(理解)

html里所有的标签、标签上的属性、文本都会转换成dom树里的节点

a.整个html文档抽象成的对象,叫作document 文档节点

b.标签转换成的节点对象，叫作Element 元素节点

c.标签属性转换成的节点对象，叫作Attribute 属性节点

d.文本转换成的节点对象，叫作Text 文本节点

查找(获取)节点的方法(重点):

document.getElementById("id"); 获取一个元素对象

document.getElementsByTagName("标签名"); 获取一种元素对象 数组接收

document.getElementsByClassName("class属性值"); 获取一类元素对象 数组接收

document.getElementsByName("name属性值"); 获取多个元素对象 数组接收

操作元素(标签): 标签体

元素对象.innerHTML = "<h1>文本内容</h1>"; // 设置标签体,可以解析标签内容

元素.innerHTML = ""; // 删除

操作属性(标签):

元素.属性名称; // 获取指定属性的值

元素.属性名称 = "属性值"; // 设置指定属性的值

操作文本: 标签体

元素.innerText; // 获取文本信息

元素.innerText = "值" ; // 设置文本信息 将所有信息作为普通文本添加

innerHTML 和 innerText 区别:

innerHTML 在获取时,获取的是标签体的所有内容

innerText 在获取时,获取的仅仅是标签体中的文本信息

innerHTML 在设内容时,可以解析内容中的标签对象

innerText 在设置内容时,将所有内容作为文本插入到标签体中.

js操作css属性:

元素对象.style.css属性; // 获取css属性的值

元素对象.style.css属性 = 值; // 设置css属性的值

注意事项: css名称

CSS中写法	JS中的写法	说明
color	color	一个单词的样式写法是相同
font-size	fontSize	驼峰命名法，首字母小写，第二个单词以后首字母大写

操作class属性:

元素.className="值";