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、

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

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