js初级
TAB选项卡
选项卡
公用代码,提取出来,用函数包起来
通过选择器方法找对象w
定时器
重复性不间断的执行一段功能w
轮播图
布局注意问题
最外层的框,宽高是一个图片的宽高,不要忘记超出隐藏
内层套图片的宽高
如果是左右的,宽是多张图片宽
如果是上下的,搞事多张图片的高
js操作图片移动时,赋值到内层套图片的盒子上,而不是单个图片上
移动的距离是负值
如果是用定位的话,最外层框是相对定位,内层套图片盒子是绝对定位
字符串方法
字符串的声明常用字面量方式
字符串转大写 str.toUpperCase() ,转小写str.toLowerCase()
字符串获取指定下标的字符 obj.charAt(数字下标)
字符串charCodeAt(数字下标)获取指定下标处的字符的Unicode码[国际通用]
字符串截取字符串 slice(start,[end]) 给下标,返回截取的字符
分割字符串 split(指定分隔符,[个数]) 分隔字符串-使用指定分隔符对字符串进行拆分,返回值是数组
替换字符串:replace('替换老的','新的')
数组方法
数组的声明是常用字面量方式
数组的连接方式:连接两个数组合成一个concat() -原数组不会改变
截取数组的方式slice() -原数组不会被修改
修改数组的方式:splice(start,count,...) -原数组会被改变
数组反转的方式:reverse() 颠倒数组中元素的顺序 等同于for循环倒序
往数组尾部推入用push方法
自执行函数,this指向问题
自执行函数的作用
主要用于隔离作用域,形成封闭空间,避免变量函数重名造成的覆盖问题
this指向问题
在事件函数里指当前调用者,其他均指向window窗口
如果被套用一层方法,其实还是指向window调用
解决方法:在this正常的地方外面存储var that=this;
定时器里调用this 也是window,
解决方法:外面存储this变量,里面调用这个变量
this在dom中,也就是行内时间调用 指的是当前对象
获取元素,窗口,滚动条相关的运动属性
获取元素,窗口,滚动等属性的共同点:都是得到的数字,注意有时候要加上ps元素
offset 特点-祖辈有定位元素的话,就是到定位元素的距离,如果有滚动条,不会包含滚动条的宽高 width+padding+border
offsetLeft:获取对象左侧与窗口(body之间)的距离
offsetTop:获取对象上侧与窗口(body之间)的距离
offsetWidth:获取元素自身的宽度(包含边框和内边距)
offsetHeight:获取元素自身的高度(包含边框和内边距)
dom属性操作
访问父节点 子对象.parentNode
兄弟节点 nextElementSibling /nextSibling 兄弟节点,previousElementSibling/previousSibling 哥哥节点
节点创造
之前方法 obj.innerHTML='<ol></ol>'
createElement(tagName)
节点删除
父对象.removeChild(子对象)
添加节点
appendChild 用法: 父对象.appendChild(子对象) 把子对象添加到父对象尾部
insertBefore 用法父级节点.insertBefore(插入新的,老的);
dom其他方法
属性操作
元素.setAttribute(name,value):设置节点上属性的值
元素.getAttribute(name):获取节点上属性的值,返回属性与值
元素.removeAttribute(name):删除节点上的属性
子节点
childNodes:所有子节点 (浏览器都支持),包括单个文本
children:所有是标签类型的子节点, 不包括单个文本(浏览都支持)
firstElementChild/lastElementChild(同理) 第一个儿子节点,不包括单个文本
firstChild/lastChild(同理) 第一个儿子,包括单个文本
克隆节点
obj.cloneNode(true/false) 克隆一份(复制)obj
true:深复制,复制节点及其整个子节点树
false : 浅复制,只复制节点本身。
时间无法克隆的解决方法是手动给克隆的元素加事件
无缝轮播图
无缝轮播是什么?
从第1张过渡到第2张,中间没有间隔
无缝轮播的总思路
1.用两个索引分别控制激活索引数字与图片,数字激活方法与图片运动方法分开来写,布局时图片比原来多一个
2.右点击 条件控制:下一张时判断图片索引是否比数字索引大,图片key++,如果大说明图片个数到第6张了,把图片索引key=1,同时把距左距离设置成0
3.左点击条件:上一张时图片索引key--是否小于0,如果小说明图片个数到第5张了,key设置为倒数第2张图片key=lis.length-1,同时把距左距离设置成4张图片宽度