H5edu -第二周-----js基础(2)

1、数组
声明数组
var arr=[1,2,3]
var arr=new Array(1,3,5)
数组长度 arr.length
2、数组操作
①末尾添加数据
arr.push(7);//返回值是数组长度
②前面添加数据
arr.unshift(8);//返回值是数组长度
③删除数组元素-最后一个值
arr.pop();//返回值是删掉的元素值
④删除第一个元素
arr.shift()//返回值是删掉的元素值
⑤连接两个数组---不会改变现有的数组,仅仅会返回一个连接数组的副本
var aa = [1,3,5]; var bb = [“a”,”b”,”c”];
aa.concat(bb);
⑥将数组转换为字符串
join();
数组名.join(符号);//符号为指定的分隔符,如果省略,则使用逗号作为分割符
⑦将字符串转换为数组
字符串名.split(要替换的符号,返回的数组的最大长度)
例: var text="aa-aa"
text.split("-");//要与字符串中的一样
3、DOM树

image.png

4、节点关系
image.png

5、dom节点操作
①创建节点
var div=document.createElement(“div”);
创建一个新的div标签
②插入节点
appendChild();添加孩子,放到最后面
demo.insertBefore(插入的节点,参照节点);//放到参照节点的前面,若参照节点为空,则默认放到最后面
③移除节点---移除父节点的一个子节点
demo.removeChild(要移除的节点)
④克隆节点
cloneNode(参数);//参数为true,深层复制,除了复制本盒子,还有子节点
参数为false,浅层复制,只复制本节点,不包括子节点
6、设置节点属性
1、setAttribute("属性名",属性值);//添加属性
2、getAttribute("属性名");//获取属性
3、removeAttribute("属性名");//删除某个属性
7、计时器
setInterval("执行的函数",间隔时间);//间隔时间以毫秒为单位
每隔多长时间执行一次
setTimeout(function,tim);//隔tim时间执行function函数,只执行一次
clearInterval(计时器名);//清除计时器
8、添加事件监听器
要添加的对象.addEventListener("监听的事件",“事件触发的回调函数”,"捕获/冒泡");
冒泡:点击子代会向外传递,默认,false
捕获:从父代向子代传递 true
默认时冒泡
9、字符串操作
<1>转换为字符串
1、+“” 2+""="2"
2、String()
3、toString(基数);基数就是进制
var text=10;
text.toString(2) 二进制 1010
<2>获取字符串位置方法
chartAt(字符位置);//获取相应位置的字符
charCodeAt(字符位置);//获取相应位置的Unicode编码
<3>根据字符返回位置
indexOf("字符");//从左开始数,找到第一个相对应的字符,返回字符的位置,(从0开始)
lastIndexOf("字符");//从后面开始数,返回值 还是从 左边开始 数的 索引号 。
<4>concat();连接字符串
<5> 获取一段字符串
slice("取字符串的起始位置",[“结束位置”]);[]可选的
起始位置一定要有,结束位置可以省略,要是省略默认到最后
substr("起始位置",[取的个数]);//不写取的个数默认取到最后
substring 同slice 一样的 但是有一点不同
substring 始终会把 小的值作为 起始位置 大的值作为结束位置
例如: substring(6,3) 实际中 自动变成 substring(3,6);
10、保留小数位数
通过indexOf(".");返回小数点的位置,再使用substr()截取字符串
toFixed(2);//保留2位小数
11、大小写转换
toUpperCase();//转换为大写(参数:无)
toLowerCase();//转换为小写(参数:无)
12、获取元素尺寸
① offsetWidth 得到对象的宽度
offsetWidth=width+border+padding
② offsetHeight 得到对象的高度
③offsetLeft 返回距离上级盒子(最近的带有定位)左边的位置,从父级的padding开始算,父级的border不算

image.png

④offsetTop 返回距离上级盒子(最近的带有定位)顶部的位置,从父级的padding开始算,父级的border不算
⑤offsetParent
返回对象的父级(带有定位)
13、事件对象 event

image.png

event常见属性
属性 作用
data 返回拖拽对象的URL字符串(dragDrop)
width 该窗口或框架的高度
height 该窗口或框架的高度
pageX 光标相对于该网页的水平位置(ie无)
pageY 光标相对于该网页的垂直位置(ie无)
screenX 光标相对于该屏幕的水平位置
screenY 光标相对于该屏幕的垂直位置
target 该事件被传送到的对象
type 事件的类型
clientX 光标相对于该网页的水平位置 (当前可见区域)
clientY 光标相对于该网页的水平位置
14、

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,275评论 0 4
  • 《ijs》速成开发手册3.0 官方用户交流:iApp开发交流(1) 239547050iApp开发交流(2) 10...
    叶染柒丶阅读 5,392评论 0 7
  • js简介 Js是一种基于事件和对象驱动的解释性、松散性的语言。 一切皆对象 javascript 布兰登艾奇 ...
    塔库纳玛哈哈阅读 1,245评论 0 2
  • 运营渠道:知乎答题,豆瓣小组,马蜂窝,穷游,妙计,微信公号,qq兴趣部落,兴趣贴吧等。 运营内容:过往公众号文章,...
    H河童阅读 197评论 0 0
  • 每个人都向往光荣,害怕失败。有时候,这是一体两面,有时候,却一家独大。 有些人,追寻的是光荣,他/她想象着目标实现...
    袅袅iooi阅读 528评论 0 1