js数组
1.数组是js的内置对象–Array。
2.数组的取值 a【0】 0代表索引,指元素的位置
声明写法 var a=new Array()
new
产生一个对象
3.数组的属性 length
代表数组的长度。
4.数组如何来赋值?
(1)一种是直接在声明数组的时候在括号里赋值
赋值一个参数的时候,代表数组的长度;多个值得时候代表直接给数组赋值,长度为值得个数。
(2)另一种赋值方式
a[0]=1;
a[1]=2
a[2]=3;
a[3]=function(){
};
a[4]=null;
5.函数里面的数组写法
(1)可以直接写 var k=new Array( )
(2)可以简写成var k=【1,2,3,4,5】
console.log(k.join())
把数组拼接成字符串string
括号里写的东西代表以什么符号来拼接成字符串
k.reverse()
数组翻转 把所有元素反向排列
k.slice ()
截断数组 参数 start end 索引 比如 k.slice(0,2)
截取0号位到2号位 输出 【1,2,3】
。对原数组无影响。
k.splice()
;参数 start count(截多少长度) 比如k.splice(0,3)
零号位截取三个长度 输出【1,2,3】
对原数组有影响
k.push()
数组内容之后追加 返回值为数组长度
k.unshift()
数组内容之前追加 返回值是数组的长度
k.shift()
数组从前往后删除 删除前面的一位
k.pop()
数组从后往前删除 删除后边的一位
6.数组的冒泡排序
(1)每两个数需要相互比较,按照固定顺序排列。利用循环遍历然后建立空元素使参数互换值即可。
(2)第一次循环遍历数组长度,内层循环代表每一个元素位置的索引用来做相对的比较然后完成冒泡排序数值交换。
7.sort排序方法
var a1=a.sort(function(n1,n2){
return n1-n2;
});
取数组里相邻的值比较大小,比较完之后按照从小到大排,如果是n2-n1的话比较完之后是从大到小排。
8.数组的去重方法
(1)遍历数组长度
(2)循环访问数组的索引,访问到每一个索引的值
(3)写条件式利用截取属性完成去重。
9.字符串合并加去重
(1)建立两个字符串a1,a2
(2)建立新的变量a3用concat属性将字符串拼接成一个整体
(2)用split属性将字符串a3以空字符分隔开,转为数组
(3)然后根据数组去重方法来进行去重。
10.字符串翻转
(1) 可以利用for循环进行翻转
(2)转成数组进行翻转也是可以的
11.找一句话中最长的单词
(1)首先要利用split以空格截取每个单词这样接可以分开截取为数组
(2)然后建立两个新的变量储存每一次的单词和单词的长度。
(3)处理有相等值的情况的时候。
12.选择性排序
(1)首先对数组进行遍历一次循环
(2)建立最小索引然后二次循环引入新变量从最小索引位往后遍历,进行大小比较,建立空变量接收值。
(3)利用空变量传值后输出a数组,完成排序。
13.快速排序
以中间值的索引为比对将数组分为两个进行排序,元素够大继续对两个数组进行裂变然后进行快速排序。
14.dom元素
(1)如何获取dom元素
var 变量=document.getElementsByClassName(" ")
根据class类名称获取,返回集合,用法跟数组一致。
var 变量=document.getElementsByName(" ")
根据name名称获取,返回节点型,用法和数组一致。
var 变量=document.getElementsByClassId(" ")
根据id名称获取,获取为单个对象,返回单个对象。直接使用即可。
var 变量=document.getElementsByTagname(" ")
根据标签名称获取,返回为标签的名称。
document.querySelector(“#id” “.class”)
根据名称获取单个对象
document.querySelectorAll(“#id” “.class”)
根据名称获取整体集合
document.body
获取的是所有body里的元素
(2)操作dom元素怎么操作 js不能操作一组对象,只能分开操作
操作dom元素的属性和行为称为事件,先获取在操作元素
修改属性
var btn=document.getElementByTagName(“button”)
btn【0】.style.background=“red”
btn【0】.style.width=“200px”
js操作的属性都是行内属性,可以设置或者获取
js获取非行内样式如何获取?
window.getComputedStyle(btn【0】).width);
dom的事件
onkeydown
键盘敲下事件 onkeyup
键盘抬起事件 onkeypress
键盘按住状态
onfocus
获焦事件 onblur
失焦事件
onclick
鼠标单击事件 ondbclick
鼠标双击事件 onmouseleave
鼠标水平离开 onmouseout
包含垂直方向离开 onmousemove
鼠标移动事件 onmouseenter
鼠标进入事件 onmouseover
鼠标悬停事件 onmousewheel
鼠标滚轮事件
onload
浏览器加载完成时间 onresize
窗口变化事件 onerror
浏览器加载报错事件
touchstart
开始触屏事件 touchmove
触屏移动事件 touchend
触屏结束事件
15.如何给dom元素添加事件
(1)常规添加 直接在标签上添加事件 可添加多个事件
(2)动态给dom元素添加事件
var btn=document.getElementById(“btn“)
btn.onclick=functio(){
console.log(1);
}
var btn=document.getElementById(“btn“)
btn.onclick=show;不能加小括号,不然失效。
functio show(){
console.log(1);
}
(3)事件的监听
var btn=document.getElementById("btn2");
btn2.addEventListener("click",function(){
console.log(2);
}); 事件写的时候不加on 只能写一种事件
(4)事件执行里的绑定参数
var btn=document.getElementById(“btn“)
btn.onclick=functio(e){ e指时间当前的执行参数,也可以写成event,可以写成函数的形参,也可以直接在函数内定义e=event。
console.log(this); this指当前的执行对象
}
var target=e.target || e.srcElement
console.log(target); 输出当前目标元素
js里的this可以指代当前事件的执行对象,也可以在函数里指代window对象。
(5)js里事件的冒泡 (做开发尽量避免事件的冒泡)
e.stopPropagation();
阻止事件冒泡
(6)事件的委托 父容器的事件委托给子容器进行执行
var btn=document.getElementById(“btn“);
btn。onclick=function(e){
var target=e.target || e.srcElement;
if(target.nodeName.tolLowerCase( )==“li”)
{
console.log(1);
}
}