Js基础2

数组–Array

数组使用数字作为索引操作元素

vararr=newArray();arr[0]=10;

获取数组长度
console.log(arr.length);
修改length
arr.length=10;
向下位添加元素：
arr[arr.length]=11;

数组字面量

var arr=[1,2,3,4,5,6];
var arr2=new Array(10);
数组的四个方法

1. push（）；向数组末尾添加一个或多个元素，返回数组的长度 arr.push(“孙悟空”，“唐僧”)
2. pop（）；删除最后一个元素，并将删除的元素返回 unshiftr（）；向数组开头添加一个或多个元素，返回数组的长度
3. arr.unshift(“沙和尚”,“猪八戒”)；
4. shift（）；删除第一个元素，将删除的元素作为返回值返回

数组的遍历

forEach 需要一个函数作为参数
由我们创建但不由我们调用的函数叫做回调函数
数组中有几个元素就调用几次
浏览器会在回调函数中传递三个参数

1. 第一个参数是当前正在遍历的值
2. 第二个参数是当前正在遍历的元素的索引
3. 第三个元素是正在遍历的数组

arr.forEach(function(a，b，c){console.log("a="+a);})

slice和splice

slice可以将元素从数组中提取出来
该方法不会影响原数组，将元素放到一个新数组中
所截取元素前包后不包
第二个元素省略不写会向后取到尾
索引可以传一个负值，从后往前计算

newarr=arr.slice(1,3)

splice可以删除数组中指定元素
会影响原数组，将元素从原素组删除，返回被删除元素
一共三个参数

1. 第一个表示开始位置的索引
2. 第二个表示删除数量
3. 第三个及以后可以传递新的元素，自动插入到第一个索引位置前

splice（1,2，“猪八戒”）；

数组的剩余方法

**concat（）**将两个或多个数组连接成一个或者向里传递元素
不会对原数组产生影响

varnewarr=arr.concat(arr2);varnewarr=arr.concat(arr2，arr3);varnewarr=arr.concat(arr2，arr3，"铁扇公主");

**join（）**将数组转换为一个字符串
不会对原数组产生影响，将产生的字符串返回
括号内为连接方式，默认为","

vararr=["猪八戒","孙悟空","唐僧"]result=arr.join（，）

reverse进行翻转

arr.reverse();

sort()
对数组里的元素进行排序
会影响原数组，会按照unicode编码排序，纯数字进行排序可能会得到错误结果
可以自己制定排序规则，在serve中添加回调函数
回调函数设置两个形参，浏览器会分别使用数组中的元素作为实参去调用回调函数，使用哪个函数不确定，但是a一定在b前

• 浏览器会根据回调函数的返回值来决定元素的顺序，
• 如果返回一个大于 0 的值，则元素会交换位置
• 如果返回一个小于 0的值，则元素位置不变
• 如果返回一个 0，则认为两个元素相等，也不交换位置

arr=[5,4];arr.sort(function(a,b){console.log("a = "+a);console.log("b = "+b);});console.log(arr);

call和apply

是函数对象的方法，需要通过函数对象来使用
当对函数调用call()和apply()都会调用函数执行 -
在调用call和apply()可以讲一个对象指定为第一个参数
此时这个对象将会成为函数执行时的 this
fun.apply(obj);
call()方法可以将实参在对象之后依次传递
fun.call(obj,2,3);

• apply()方法需要将实参封装到一个数组中统一传递
• this的情况：

1. 以函数形式调用时，this永远都是window
2. 以方法的形式调用时，this是调用方法的对象
3. 以构造函数的形式调用时，this是新创建的那个对象
4. 使用call和apply调用时，this是指定的那个对象

arguments

在调用函数时，浏览器每次都会传递进两个隐含的参数：

1. 函数的上下文对象 this
2. 封装实参的对象 arguments
   arguments是一个类数组对象，它也可以通过索引来操作数据，也可以获取长度
   在调用函数时，我们所传递的实参都会在arguments中保存
   arguments.length可以用来获取实参的长度
   我们即使不定义形参，也可以通过arguments来使用实参， 只不过比较麻烦
   arguments[0] 表示第一个实参
   arguments[1] 表示第二个实参
   它里边有一个属性叫做callee， 这个属性对应一个函数对象，就是当前正在指向的函数的对象

functionfun(a,b){console.log(arguments[1]);//提取第二个实参console.log(arguments.length);//看看有几个实参console.log(arguments.callee);}

Date对象

在js用date函数表示时间

vard=newDate();console.log(d);

直接使用date，会封装为代码执行的时间
创建一个指定时间对象
需要在构造函数中传递一个表示时间的字符串作为参数
日期格式 月份/日/年份 时：分：秒

vard2=newDate("12/03/2016 11:10:30");console.log(d2);

**getDate（）**获取当前日期是几日
获取当前日期对象是几日

vardate=d2.getDate();

**getDay（）**获取当前日期是周几
var day = d2.getDay();
会返回0-6的值，周日为0
**getMonth（）**获取当前日期是几月
返回0-11的值，分别表示一月到十一月

varmonth=d2.getMonth（）;

**getFullYear（）**获取当前日期的年份

varfullYear=d2.getFullYear（）;

getTime获取当前时期的时间戳
从1970年一月一日零时零分零秒–格林威治标准时间到当前时间的毫秒数

vard2=newDate("12/03/2016 11:10:30");vartime=d2.getTime();//获取当前时间戳time=Date.now();

Math

Math和其他的对象不同,它不是一个构造函数, 它属于一个工具类:不用创建对象,里边封装了数学运算相关的属性和方法
abs（）
console.log(Math.abs(-1));
取一个数的绝对值
ceil对数进行上输入（向上取整）
floor向下取整
round四舍五入取整
Math.random()
生成0-1之间的随机数（没有0和1）
Math.random(Math.random()*x)
生成0-x之间的随机数
Math.random(Math.random()*y-x)+x
生成x-y之间的随机数
Math.max()
获取多个数中的最大值
Math.min()
获取多个数中的最小值
Math.pow(x,y)
返回x的y次幂

包装类

基本数据类型 String Number Boolean Null Undefined
引用数据类型 Object
在JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象

String( ) - 可以将基本数据类型字符串转换为String对象
Number( ) - 可以将基本数据类型的数字转换为Number对象
Boolean( ) - 可以将基本数据类型的布尔值转换为Boolean对象

varnum=newNumber(3);varstr=newString("hello");varbool=newBoolean(true);

方法和属性之能添加给对象，不能添加给基本数据类型
当我们对一些基本数据类型的值去调用属性和方法时， 浏览器会临时使用包装类将其转换为对象，然后在调用对象的属性和方法

字符串的方法

在底层字符串是以字符数组的形式保存的
[“H”,“e”,“l”,“l”,“o”]
var str=“Hello”

console.log(str.length);//空格也算长度console.log(str[1]);//e

charAt()
可以返回字符串中指定位置的字符
var result=str.charAt(0)
charCodeAt()
返回字符串中指定位置字符的unicode编码
var result=str.charCodeAt(0)
fromcharCode（）
result = String.fromCharCode(0x10086);
0x为十进制的标志
concat（）
可以连接两个或多个字符串，作用和+一样
result = str.concat(“你好”,“再见”);
indexof（）
检查字符串中是否有指定字符

str="hello atguigu";result=str.indexOf("e");console.log(result);

如果字符串中含有该内容，则会返回其第一次出现的索引
如果没有找到指定的内容，则返回 - 1

可以指定一个第二个参数，指定开始查找的位置

str="hello atguigu";result=str.indexOf("e"，2);console.log(result);

lastIndexof（）
该方法的用法和 indexOf () 一样，
不同的是 indexOf 是从前往后找，
而 lastIndexOf 是从后往前找
slice（）
截取指定内容，不会影响原字符串

str="abcdefghijk";result=str.slice(0,2);console.log(result);

参数：包括开始位置，不包括结束位置
传递负数从后往前算
substring（）
可以用来截取一个字符串，可以 slice () 类似
参数：

• 第一个：开始截取位置的索引（包括开始位置）
• 第二个：结束位置的索引（不包括结束位置）

不同的是这个方法不能接受负值作为参数，如果传递了一个负值，则默认使用 0
会自动调整参数位置，由小到大
substr（）
● 用来截取字符串
● 参数：

• 截取开始位置的索引
• 截取的长度

正则表达式

用于定义一些字符串的规则
正则表达式用于定义一些字符串的规则，
计算机可以根据正则表达式，来检查一个字符串是否符合规则，
获取将字符串中符合规则的内容提取出来
语法：
var 变量 = new RegExp(“正则表达式”,“匹配模式”);

在构造函数中可以传递一个匹配模式作为第二个参数，可以是
i 忽略大小写
g 全局匹配模式

正则表达式的方法：test ()

• 使用这个方法可以用来检查一个字符串是否符合正则表达式的规则，
• 如果符合则返回 true，否则返回 false

var reg = new RegExp(“a”);
var str = “a”;
var result = reg.test(str);
console.log(reg.test(“Abcbc”));

使用字面量创建正则表达式

语法：var 变量 = / 正则表达式 / 匹配模式
使用字面量的方式创建更加简单
使用构造函数创建更加灵活

//var reg = new RegExp("a","i");varreg=/a/i;

或：a|b|c|d|e== [abcde]==[a-e]

//检查一个字符串中是否含有abc或adc或aecvarreg=/a[bda]c/

除了：

reg=/[^ab]/

字符串和正则表达式

plit ()
● 可以将一个字符串拆分为一个数组
● 方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串
● 无需添加g，默认全局

varstr="1a2b3c4d5e6f7";varresult=str.split(/[A-z]/);console.log(result);

search（）
● 可以搜索字符串中是否含有指定内容
● 如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回 - 1
● 它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串
● 只会查找第一个，即使设置g

str="hello abc hello aec afc";result=str.search(/a[bef]c/);console.log(result);

match ()
● 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
str = “1a2b3c4d5e6f7”;
result = str.match(/[A-z]/);
console.log(result);
默认只找到第一个，可以设置全局匹配，在后面加g

str="1a2b3c4d5e6f7";result=str.match(/[A-z]/g);console.log(result);

可以为一个正则表达式设置多个匹配模式，且顺序无所谓

str="1a2b3c4d5e6f7";result=str.match(/[A-z]/gi);console.log(result);

● match () 会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果

replace（）
将字符串中的内容替换新的内容
参数：
1.原内容
2.新内容
默认只替换第一个

result=str.replace(/a/gi,"@_@");console.log(result);

正则表达式语法

量词

• 通过量词可以设置一个内容出现的次数
• 量词只对它前边的一个内容起作用
• {n} 正好出现n次
• {m,n} 出现m~n次
• • 至少一次，相当于{1,}
• • 0个或多个，相当于{0,}
• ? 0个或2个，相当于{0,1}

varreg=/a{3}///a连续出现三次varreg=/(ab){3}///ab连续出现三次varreg=/ab{3}c///a和c之间出现三次bvarreg=/ab{m,n}c///a和c之间出现m次到n次bvarreg=/ab{m,}c///a和c之间出现m次以上b

+表示至少一个

varreg=/ab+c/

^表示开头

reg=/^a/

以a开头
$表示结尾
以a结尾:

reg=/a$/

.表示任意字符
表示.可以使用转义字.

• \w 表示任意字母，数字，下划线
• \W 除了字母数字下划线
• \d 任意数字 \D 除了数字
• \s 空格 \S 除了空格
• \b 单词边界
• \B 除了单词边界

/* * 创建一个正则表达式检查一个字符串中是否含有单词child */reg=/\bchild\b/;//child前后不能加其他单词console.log(reg.test("hello children"));//false

prompt获取用户输入

去除开头的空格 str=str.replace(/^\s*/,"");去除结尾的空格 str=str.replace(/\s*$/,"");/^\s*|\s*$/g 匹配开头和结尾的空格

Dom

● 节点：Node—— 构成 HTML 文档最基本的单元。
● 常用节点分为四类

• 文档节点：整个 HTML 文档
• 元素节点：HTML 当中的 HTML 标签
• 属性节点：元素的属性
• 文本节点：HTML标签中的文本内容

浏览器已经为我们提供文档节点对象 这个对象是window属性
可以在页面中直接使用，文档节点代表的是整个网页
例子：

//获取到button对象document.getElementById("btn");//修改按钮的文字btn.innerHTML="I'm Button";

Dom查询

获取元素节点
● 通过document对象调用

1. getElementById()
   ● 通过id属性获取一个元素节点对象
2. getElementsByTagName()
   ● 通过标签名获取一组元素节点对象
   ● getElementsByTagName()可以根据标签名来获取一组元素节点对象
   这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
3. getElementsByName()
   ● 通过name属性获取一组元素节点对象

/* * 如果需要读取元素节点属性， * 直接使用 元素.属性名 * 例子：元素.id 元素.name 元素.value * 注意：class属性不能采用这种方式， * 读取class属性时需要使用 元素.className */alert(inputs[i].class);

获取元素节点的子节点

• 通过具体的元素节点调用

1. getElementsByTagName() - 方法，返回当前节点的指定标签名后代节点
2. childNodes - 属性，表示当前节点的所有子节点
   childNodes属性会获取包括文本节点在内的所有节点
   注意DOM标签之间空白也会当成文本节点
   注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
   所以该属性在IE8中会返回4个子元素而其他浏览器是9个
3. firstChild - 属性，表示当前节点的第一个子节点
   firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
4. lastChild - 属性，表示当前节点的最后一个子节点
   获取父节点和兄弟节点
5. parentNode
   ● 属性，表示当前节点的父节点
6. previousSibling
   ● 属性，表示当前节点的前一个兄弟节点
   ● 也可能获取空白文本
7. nextSibling
   ● 属性，表示当前节点的后一个兄弟节点
   ● 也可能获取空白文本
   innerText
   ● 该属性可以获取到元素内部的文本内容
   ● 它和innerHTML类似，不同的是它会自动将html去除

varum=document.getElementById("username");//读取um的value属性值//文本框的value属性值，就是文本框中填写的内容alert(um.value);

document.querySelector()

• 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
  只会选择第一个元素

vardiv=document.querySelector(".box1 div");varbox1=document.querySelector(".box1");console.log(div.innerHTML);console.log(box1);

document.querySelectorAll()

• 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回

varbox1=document.querySelectorAll(".box1");console.log(box1.length);

dom增删改
document.createElement()
可以用于创建一个元素节点对象， 它需要一个标签名作为参数，
将会根据该标签名创建元素节点对象， 并将创建好的对象作为返回值返回
var li = document.createElement(“li”);

document.createTextNode()
可以用来创建一个文本节点对象 需要一个文本内容作为参数，
将会根据该内容创建文本节点，并将新的节点返回
var gzText = document.createTextNode(“广州”);

appendChild()
向一个父节点中添加一个新的子节点
用法：父节点.appendChild(子节点);
li.appendChild(gzText);

insertBefore()
可以在指定的子节点前插入新的子节点
语法：
父节点.insertBefore(新节点,旧节点);
city.insertBefore(li , bj);

replaceChild()
可以使用指定的子节点替换已有的子节点
语法：父节点.replaceChild(新节点,旧节点);

removeChild()
可以删除一个子节点
语法： 父节点.removeChild(子节点);
或 子节点.parentNode.removeChild(子节点);

修改html：

//向city中添加广州varcity=document.getElementById("city");city.innerHTML+="<li>广州</li>";

综合使用：

//创建一个livarli=document.createElement("li");//向li中设置文本li.innerHTML="广州";//将li添加到city中city.appendChild(li);

事件的简介

我们可以在事件对应的属性中设置一些 js 代码，
这样当事件被触发时，这些代码将会执行

<button id="btn"onclick="alert('讨厌，你点我干嘛！');">我是一个按钮</button>//这种写法结构和行为耦合，不建议写

可以为按钮的对应事件绑定处理函数的形式来响应事件
事件被触发时会调用函数

<body><button id="btn1">这是一个按钮</button><script src="js/jianbian.js"></script></body>js代码：//获取按钮对象varbtn=document.getElementById("btn1");//绑定一个单击事件btn.onclick=function(){alert("你还点~~~");};

文档的加载

默认从上到下进行

/* * onload事件会在整个页面加载完成之后才触发 * 为window绑定一个onload事件 *该事件对应的响应函数将会在页面加载完成之后执行， *这样可以确保我们的代码执行时所有的DOM对象已经加载完毕 */window.onload=function(){alert("hello");};

事件对象

onmousemove

• 该事件将会在鼠标在元素中移动时被触发

areaDiv.onmousemove=function(){};

事件对象
当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
在事件对象中封装了当前事件相关的一切信息，
比如：鼠标的坐标 键盘哪个按键被按下 鼠标滚轮滚动的方向。。。

//定义一个形参areaDiv.onmousemove=function(event){/* * clientX可以获取鼠标指针的水平坐标 * cilentY可以获取鼠标指针的垂直坐标 */varx=event.clientX;vary=event.clientY;alert("x = "+x+" , y = "+y);//在showMsg中显示鼠标的坐标

事件的冒泡

事件的冒泡（Bubble）
所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发

//取消冒泡//可以将事件对象的cancelBubble设置为true，即可取消冒泡event.cancelBubble=true;

事件的委派

//如果触发事件的对象是我们期望的元素 则执行否则不执行

if(event.target.className=="link"){alert("我是ul的单击响应函数")

事件的绑定

使用 对象.事件 = 函数 的形式绑定响应函数，
它只能同时为一个元素的一个事件绑定一个响应函数，
不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的

addEventListener()
● 通过这个方法也可以为元素绑定响应函数
● 参数：
a. 事件的字符串 不要on
b. 回调函数，当事件触发时该函数会被调用
c. 是否在捕获阶段触发事件，需要一个布尔值，一般都传false

*使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数,*这样当事件被触发时，响应函数将会按照函数的绑定顺序执行*/btn01.addEventListener("click",function(){alert(1);},false);btn01.addEventListener("click",function(){alert(2);},false);btn01.addEventListener("click",function(){alert(3);},false);

attachEvent()
这个方法也可以同时为一个事件绑定多个处理函数， 不同的是它是后绑定先执行，执行顺序和addEventListener()相反

/* * attachEvent() * - 在IE8中可以使用attachEvent()来绑定事件 * - 参数： * 1.事件的字符串，要on * 2.回调函数 */btn01.attachEvent("onclick",function(){alert(1);});

Bom

浏览器对象模型
BOM可以使我们通过JS来操作浏览器
在BOM中为我们提供了一组对象，用来完成对浏览器的操作

BOM对象

Window
整个浏览器的窗口，window也是网页中的全局对象
Navigator
当前浏览器的信息，可以通过该对象识别不同浏览器
Location
代表当前对象的地址栏信息，通过location可以获取地址栏信息，或者操作跳转页面
History
历史记录，可以操作浏览器历史记录
由于隐私原因，不能获取到具体记录，只能操作向前或后退，且只在当次访问时有效
Screen
代表屏幕信息，可以获取用户显示器的相关信息
这些BOM对象在浏览器中都是作为window对象的属性保存的，
可以通过window对象来使用，也可以直接使用

console.log(navigator);console.log(location);console.log(history);

Navigator
代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
一般我们只会使用userAgent来判断浏览器的信息
userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，
不同的浏览器会有不同的userAgent

console.log(navigator.userAgent);varua=navigator.userAgent;if(/firefox/i.test(ua)){alert("你是火狐！！！");}elseif(){}

History
可以用来操作浏览器向前向后翻页
length ，
可以获取到当成访问的链接数量
alert(history.length);
back()
可以用来回退到上一个页面，作用和浏览器的回退按钮一样
history.back();
forward()
可以跳转下一个页面，作用和浏览器的前进按钮一样
history.forward();
go()
可以用来跳转到指定的页面
它需要一个整数作为参数
1：表示向前跳转一个页面
2：表示向前跳转两个页面
负数：向后跳
history.go(1); ;
Location
/如果直接将location属性修改为一个完整的路径，或相对路径
则我们页面会自动跳转到该路径
location = “http://www.baidu.com”;
location = “01.BOM.html”;
assign()
用来跳转到其他的页面，作用和直接修改location一样
location.assign(“http://www.baidu.com”);
reload()
用于重新加载当前页面，作用和刷新按钮一样
如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面
location.reload(true);
replace()
可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
不会生成历史记录，不能使用回退按钮回退
location.replace(“01.BOM.html”);

定时器

setInterval()
定时调用
可以将一个函数，每隔一段时间执行一次
参数：

1. 回调函数，该函数会每隔一段时间被调用一次
   2.每次调用间隔的时间，单位是毫秒
   返回值：会返回一个number属性的数据
   这个数字作为定时器的唯一标识
   clearInterval（）可以用来关闭一个计时器
   该方法中需要一个定时器的标识作为参数，这样关闭标识对应的定时器

vararrimg=["img/p1.jpg","img/p2.jpg","img/p3.jpg","img/p4.jpg","img/p5.jpg","img/p6.jpg"]varj=0;vartimer1=setInterval(function(){varpic=document.getElementById("picture");pic.src=arrimg[j];j++;if(j==arrimg.length){j=0;}},1000)

setTimeout
延时调用
延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次
延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
clearTimeout（）可以用来关闭一个延时调用

● 延时调用和定时调用实际上是可以互相代替的
● var timer = setTimeout (function (){
● console.log (num++);
● },3000);