js初级思维导图
tab切换
利用for循环遍历标签
第一层for走一遍 第二层走全部
this
利用this当前显示其他隐藏
加入定时器
轮播图
把之前的tab切换改为定位
利用定位改变其位置实现切换
布局使用图片超出隐藏
加入定时器
计算距离和添加步数
开始位置+移动距离*移动步数/总步数+‘px’
无缝轮播图
要无缝滚动,需要两组同样的照片。
用两个索引分别控制激活索引数字与图片,数字激活方法与图片运动方法分开来写,布局时图片比原来多一个
右点击 条件控制:下一张时判断图片索引是否比数字索引大,如果大说明图片个数到第6张了,把图片索引key=1,同时把距左距离设置成0
左点击:上一张时图片索引是否小于0,如果小说明图片个数到第5张了,值设置为倒数第2张图片,同时把距左距离设置成4张图片宽度
自执行函数(即时函数)
作用:主要用于隔离作用域,形成封闭空间,避免变量或函数重名造成的覆盖问题
用法:1.(函数)() , 2.(函数()) , 3.匿名函数自执行也可以
this指针
在事件函数里指当前调用对象,其它均指向window对象
如果单独放函数里,其实是window对象在调用,会出现undefined
解决办法 在this正常的地方外面存储var that=this;
在定时器里,this指向window对象,解决办法在正常地方存储this
定时器:重复定时器setInterval(函数,时间); 一次定时器setTimeout(函数,时间)
this在dom中,也就是行内事件调用 指的是当前对象
//如果事件写到行内,调用函数,还是window在调用
字符串
字符串声明
str‘hello’ 字面量方式
var str = String(‘hello’) 实例化方式
字符串转大小写
toUpperCase()转成大写
toLowerCase()转成小写
查找指定下标处字符
charAt(数字下标) , 给数字返回字符
charCodeAt(2) ,返回的是字符的unicode编码值
获取指定字符位置
indexOf(字符,[指定一个位置开始]) 。给字符,返回指定位置,如果找不到,返回-1
lastIndexOf(' '),获取指定字符最后位置
截取字符串方法
substring( , )截取字符串, 1个值:代表从这个位置开始,到结尾。2个值:包左不包右 ,不能给负数,会把负数转换成0
截取字符串slice( ,) 用法同上,它能给负数,负数代表从右第一个开始
截取字符串 substr(开始位置,个数),用法同上,第2个代表截取个数
分割字符串
spilt('指定分割符'), 把不要的字符分割出去,返回的是数组
替换字符串方法
replace('老的','新的'),只能替换一次,如果想全局替换,可用正则表达式,用法//g 全局匹配
获取元素本身
注意这些属性:返回值都是数字 ,如果要用的话,要跟px像素拼接
offset相关属性:获取参考于有定位元素(任何祖辈有定位)的距离,如果没有定位获取的是到浏览器窗口的距离。
offsetLeft:获取对象左侧与窗口(body之间)的距离
offsetTop:获取对象上侧与窗口(body之间)的距离
offsetWidth:获取元素自身的宽度(包含边框和内边距),如果有滚动条,不会包含滚动条的宽高 width+padding+border
offsetHeight:获取元素自身的高度(包含边框和内边距)
client相关属性: 获取可视区宽高的
(不含边框,包含内边距), width+padding 如果有滚动条,不会包含滚动条的宽高
clientWidth:获取元素自身的宽度(不含边框,包含内边距)
clientHeight:获取元素自身的高度(不含边框,包含内边距)
scroll获取滚动条相关的属性:,注意兼容写法
兼容写法: document.documentElement.scrollTop || document.body.scrollTop
scrollTop 设置或获取当前上滚的距离,即上边被卷去的距离 . 滚动条被卷起的高度
scrollLeft:设置或获取当前左滚的距离,即左边被卷去的距离;
dom属性操作
访问父节点对象 -- 子对象.parentNode
创建元素节点对象 document.createElement('标签')
想要在页面显示,必须得追加到对象里
用字符串拼接法实现同样效果-在js里拼接字符串如果有换行,要加转义符\,如果里面有双引号,外面要用单引号
访问兄弟节点对象-弟弟对象 obj.nextElementSibling ,哥哥对象 obj.previousElementSibling
数组
数组的声明
var arr = 【‘1’,‘2’,‘3’】字面量方式
var arr = Array(1,‘2’)实例化方式
访问数组加下标【第几个数组】
访问数组长度加lenght
转字符串
toString()
jojn(‘连接符’)
数组归并方法
concat(可以是任何类型) ,归并到数组里
数组截取
slice() 用法同字符串截取方法一样.特点:返回的是截取出来的数组,原数组不会改变,
数组修改
splice(开始位置[必需],个数,追加项,....)
给1个值,用法同slice方法
第2个值,代表截取个数
可以对原数组进行添加替换
给数组增加值和删除值
头部!!
往数组头部追加一个值 unshift(),
从数组头部删除一个值 shift(),原数组会改变
尾部!!
从数组尾部删除一个值 pop(),原数组会改变
往数组尾部追加一个值 push()
数组反转
reverse() 颠倒数组中元素的顺序 等同于for循环倒序 ,原数组会改变
数组排序
sort() 默认升序,如果有负值排序有问题
解决负数问题(用函数返回值)