JavaScript学习(一)基础知识

输出消息的几种方式

1. alert() 在页面弹出一个对话框。
2. confirm() 在页面弹出一个对话框, 常配合if判断使用。
3. console.log() 将信息输入到控制台，用于js调试。
4. prompt() 弹出对话框，用于接收用户输入的信息。
5. document.write()在页面输出消息,document.write不仅能输出信息，还能输出标签。

数据类型转换

字符串转数字类型
Number
- 数字类型的字符串，转换之后得到的数字。
- 非数字字符串，转换之后得到是NaN。
- 小数类型的字符串，转换之后得到的是原数字。

parseInt
- 整数数字类型的字符串，转换之后得到的整数数字。
- 数字开头的字符串，转换之后得到的是前边的数字。
- 非数字开头的字符串，转换之后得到的是NaN。
- 小数类型的字符串，转换之后取整。

parseFloat
- 整数数字类型的字符串，转换之后得到的整数数字。
- 数字开头的字符串，转换之后得到的是前边的数字。
- 非数字开头的字符串，转换之后得到的是NaN。
- 小数类型的字符串，转换之后得到的是原数字。

转布尔类型
- 数字和字符串转完之后为true。
- undefined、null、0转完之后为false.

预解析

预解析：js的解析器在页面加载的时候，首先检查页面上的语法错误。把变量声明提升起。
变量声明提升：在预解析的时候，成员变量和函数，被提升到最高位置，方便其他程序访问。
变量声明提升特点：成员变量只提升变量名，不提升变量值。但是，函数是所有内容全部提升。（function直接定义的）
函数范围内照样会出现变量声明提升：使用变量在定义变量之前。
函数价值时，只加载函数名，不加载函数体。

1. 变量声明提升在函数中也适用
2. 函数的就近原则

函数

回调函数

回调函数:函数作为参数进行传递和使用。
回调函数一般是用于定义一个规则来使用的。
规则的传递只能通过函数实现,通过变量无法达成。所以我们需要传递规则的时候必须使用回调函数。

function fn(demo){    demo();}

参数

参数赋值的时候,简单数据类型传数值。
参数赋值的时候，复杂数据类型传地址（修改的同一片内存地址）。
当你向修改成员变量中的简单数据类型时，不要通过参数传递，要在函数中直接修改。

对象

对象的字面量就是一个{}，而里面的属性和方法是以键值对形式表现的。
a对象.b属性 代表a这个对象的b属性的值，并不是b对应的变量值的属性。
a对象[b] 代表的是a这个对象中b这个变量值对应的属性值。

for in循环一般用于遍历json等

内置对象

内置对象：js本身已经帮我们写好的对象，创建之后可直接使用。
内置对象例如：Date，Array，Math，RegExp，Error，String,Number。
伪数组arguments，不是数组类型，可以修改元素，不能修改数组长度。

数组

数组排序,按首字母Unicode排序

 //解决方案,按整体大小排序console.log(arr4.sort(function (a,b) {    return a-b;}));

数组合并

使用concat方法合并数组。
Join 方法 返回一个字符串

事件

js的加载是和html同步加载的,如果使用元素在定义元素之间,容易报错。
整个页面上所有元素加载完毕在执行js内容。
window.onload可以预防使用标签在定义标签之前。
如悬停事件：鼠标进入到事件源中立即触发事件。

DOM

由结构图中我们可以看到
- 整个文档就是一个文档节点。
- 每一个HMTL标签都是一个元素节点（标签）。
- 标签中的文字则是文字节点。（文本）
- 标签的属性是属性节点。（属性）

操作节点，必须首先找到该元素。有三种方法来做这件事：
通过 id 找到 HTML 元素,document.getElementById(“demo”);
通过标签名找到 HTML 元素,document.getElementsByTagName(“div”);
通过类名找到 HTML 元素,document.getElementsByClassName(“a”);

节点

父节点 （ parentNode ）
兄弟节点
- Sibling就是兄弟的意思。
- Next：下一个的意思。
- Previous:前一个的意思。

    下一个兄弟节点=节点.nextElementSibling || 节点.nextSibling    下一个兄弟节点=节点.previousElementSibling|| 节点.previousSibling

单个子节点

    第一个子节点=父节点.firstElementChild || 父节点.firstChild    第一个子节点=父节点.lastElementChild|| 父节点.lastChild

所有子节点

    子节点数组 = 父节点.childNodes;   获取所有节点。    子节点数组 = 父节点.children;   用的最多。    节点自己.parentNode.children[index];随意得到兄弟节点。

DOM节点操作

创建节点

    新的标签（节点） = document.createElement(“标签名”);

插入节点（使用节点）

    父节点.appendChild(新节点); 父节点的最后插入一个新节点    父节点.insertBefore(新节点,参考节点)在参考节点前插入;

删除节点

    父节点.removeChild（子节点）；必须制定要删除的子节点

复制节点

    新节点=要复制的节点.cloneNode(参数) ; 参数可选复制节点    //用于复制节点， 接受一个布尔值参数， true 表示深复制（复制节点及其所有子节点）， false 表示浅复制（复制节点本身，不复制子节点）

节点属性（节点.属性）

    获取：getAttribute(名称)    设置：setAttribute(名称, 值)    删除：removeAttribute(名称)

BOM

• 浏览器对象模型
• window对象
  
  • window对象是JavaScript中的顶级对象
  • 所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法
  • window对象下的属性和方法调用的时候可以省略window

对话框

• alert() 不同浏览器中的外观是不一样的
• confirm() 兼容不好
• prompt() 不推荐使用

窗口

• window.open(url,target,param)
  
  • url 要打开的地址
  • target新窗口的位置 _blank _self _parent(父框架)
  • param 新窗口的一些设置
  • 返回值，新窗口的句柄
• window.close() 关闭窗口
• 新窗口.moveTo(5,5) 新窗口.moveBy()
• 新窗口.resizeTo() window.resizeBy()

定时器

• 循环执行
  
  • var timerId = setInterval(code,interval);
  • clearInterval(timerId);
• 定时执行
  
  • var timerId = setTimeout(code,interval);
  • clearTimeout(timerId);

location对象

• window.location
  
  • location相当于浏览器地址栏
  • 可以将url解析成独立的片段
• location对象的属性
  
  • href
  • hash 返回url中#后面的内容，包含#
  • host 主机名，包括端口
  • hostname 主机名
  • pathname url中的路径部分
  • protocol 协议 一般是http、https
  • search 查询字符串

方法：
- location.assign() 改变浏览器地址栏的地址，并记录到历史中
- 设置location.href 就会调用assign()。一般使用location.href 进行页面之间的跳转
- location.replace() 替换浏览器地址栏的地址，不会记录到历史中
- location.reload() 重新加载

navigator对象

• window.navigator 的一些属性可以获取客户端的一些信息，如：
  
  • userAgent (系统，浏览器)
  • platform (浏览器支持的系统，win/mac/linux)

history对象

• 历史记录管理
• 后退
  
  • history.back()
  • history.go(-1) 0是刷新
• 前进
  
  • history.forward()
  • history.go(1)

正则表达式

正则表达式,为字符串定义规则，为输入内容定义规则，用来记录文本规则的代码。

正则表达式声明

1、通过构造函数定义

var 变量名= new RegExp(/表达式/); 

2、通过直接量定义

var 变量名= /表达式/;

test() 方法

正则对象方法，检测测试字符串是否符合该规则，返回true和false，参数（测试字符串） 。
语法：

Boolean = 表达式.test("要验证的内容");

正则内部类

1、预定义类

[^\n\r] - 除了换行和回车之外的任意字符（“”不行） \d [0-9] 数字字符 \D [^0-9] 非数字字符 \s [ \t\n\x0B\f\r] 空白字符 \S [^ \t\n\x0B\f\r] 非空白字符 \w [a-zA-Z_0-9] 单词字符 \W [^a-zA-Z_0-9] 非单词字符

2、简单类
1. /string/.test(“string”); 必须是完整的，只多不能少
2. /[string]/.test(“string”); 只要包含里面的任何一个就可以
3. 中括号内，前面加个元字符^进行取反，不是括号里面的字符（一部分也不行）。
4. 有时匹配的东西过多，而且类型又相同，全部输入太麻烦，我们可以在中间加了个横线。
5. 用中括号匹配不同类型的单个字符。如：/[a-m1-5]/

3、正则边界
^ 会匹配行或者字符串的起始位置，^在[]中才表示非。会匹配行或字符串的结尾位置。  
^在一起 表示精确匹配。

4、量词

• * 重复零次或更多 (>=0)
• + 重复一次或更多次 (>=1)
• ? 重复零次或一次 （0||1）
  
  • {} 重复多少次的意思
  • {n} n次 （x=n）
  • {n,} 重复n次或更多 (x>=n)
• {n,m} 重复出现的次数比n多但比m少 (n<=x<=m)
• x|y x或者y
• （） 提高权限，有限计算

5、匹配模式
正则表达式的匹配模式支持的2个标志：
g：表示全局模式（global），即模式将被应用于所有字符串而非发现一个而停止。
i：表示不区分大小写（ease-insensitive）模式，在确定匹配想时忽略模式与字符串的大小写。

6、案例
1. 匹配电话

/^((13[0-9])|(15[^4,\D])|(18[0-9]))\d{8}$/

1. 匹配中文姓名

/^[\u4e00-\u9fa5]{2,4}$/

1. 匹配邮箱

/^[\w\-\.]{5,}\@[\w]+\.[\w]{2,4}$/