1.tab切换 主要原理和思路 先写好Html css样式 然后初始化 让刚开始无动作的时候图片都display none 有一个display block li的第一个给一个背景色 然后获取元素 绑定事件 点击的时候 给className为空 然后 给一个加className
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#tab{
width:300px;
height: 345px;
margin: 100px auto;
}
#tab ul li{
float: left;
width: 100px;
height: 45px;
background: pink;
text-align: center;
line-height: 45px;
}
#tab div{
display: none;
height: 300px;
}
#tab div.active{
display: block;
}
#tab li.active{
background: green;
}
#tab div img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="active">
<img src="https://img-bss.csdn.net/1558508583729.jpg" alt="">
</div>
<div>
<img src="https://img-bss.csdn.net/1563779653200.jpg" alt="">
</div>
<div>
<img src="https://img-bss.csdn.net/1561358566688.jpg" alt="">
</div>
</div>
<script>
var oDiv= document.getElementById('tab');
var aLi=oDiv.getElementsByTagName('li');
var aDiv = oDiv.getElementsByTagName('div');
for(var i=0;i<aLi.length;i++)
{
aLi[i].index=i;
aLi[i].onclick=function(){
for(var j=0;j<aLi.length;j++)
{
aLi[j].className='';
aDiv[j].className='';
}
aLi[this.index].className="active";
aDiv[this.index].className="active"
}
}
</script>
</body>
</html>
switch 判断必须值和类型都相等
栈内存 可以叫做作用域 给js代码执行的环境
堆内存 所有的引用数据类型 他们需要存储的内容都在堆内存中 相当于一个仓库 目的存储信息 信息分为 ---对象会把键值对存储进来 函数会把代码当做字符串存储起来。
arguments 实参集合-》类数组
-
-
- arguments只有函数才有
-
函数的返回值 不加return 返回undefined
for in循环 对象 的时候 顺序 (key值) 数字在前 字母按照原来的顺序排列 (小数算做字母)
number(“1”)//1 number("1a")//NaN number([])//0 number(false)//0 number('')//0 number(null)//0
number(undefined)//NaN number({})//NaN
isNaN(null)//false isNaN(NaN)//true isNaN(undefined)//true
+'1111' 加号 变成数字类型 -'1111'变成负的1111【
-
-
- 加法特殊性
- 遇到字符串的时候,+不是数学运算符,而是字符串拼接,只要不遇到字符串就是数学运算
- 字符串拼接:把其他值转换成字符串然后在拼接 tostring;其他数据类型的toString是直接的把值用双引号包起来就行了,只有对象的有特殊性[object Object]
- 加法特殊性
-
】
所以其他类型转换成数字类型 四种方法 numbe parseInt parseFloat +
null和undefined没有toString方法
什么类型为false 五种 0 null un NaN、‘ ’
对象和boolean(把两边都转换成数字)
({ })==false//NaN==0 false
[ ]==false //true [ ]==true//false [ ]==false//true [ ]->' '->0
![]==false//true ![ ]->false->0
-
- 规律:两个等于号比较,左右两边数据值的类型不一样,浏览器会把两边的类型都转换成数字后在比较
- 但是null undefined除外
- null == undefined ->true
- null === undefined -> false
- null,undefined和其他任何值不想等
- null == 0 -> false
lastIndexOf()从后往前找 找到后再看下标 (正常下标) 【没有对应字符 返回-1】
fromCharCode()把对应ascii码值换成字符串
substr(开始截取的下标,截几个) 返回值 截取后的字符
substring(开始截取的下标,截取的末尾下标但是不包括这个【不能为负数】) 返回值 截取后的字符
slice( )同上 但是第二个参数可以为负数
字符串转换成数组 split(,) 分割返回值是数组 这个很重要
Replace(old, news) 字符的替换 换多个用正则
获取id元素 (id的主语永远都是document)
如果id重复 只能出现第一个 所以一个页面只能出现的id名唯一
-
- 获取dom元素的方法
- document.getElementById()
- 获取id 一个元素
- 此方法的上下文只能document
- id不能重复的,重复获取的永远是第一个
- 返回的时一个dom对象
- document.getElementsByTagName()
- 上下文是可以自己来指定的
- 获取到的结果是一个元素集合(类数组集合
- document.getElementById()
- 获取dom元素的方法
-
-
- getElementsByName
- 通过元素的name属性值获取一组元素(类数组:节点集合nodelist)
- 上下问是document
- ie浏览器中只能识别表单元素的name属性值,所以我们这个方法都是操作表单元素的
- getElementsByName
-
获取元素参数可以写css的选择器 返回的只是一个dom对象
querySelector(‘ . a ’)
querySelector( ' .a ' )回的只是一个集合
for in的时候 obj.key是不行的 obj【key】 然后初始 str = “ ”给空串
不过obj[xxx]这个有好处..就是xxx是动态的时候..
例如:
var xxx="2";
obj[xxx]这样就可以..但obj.xxx就不行的..
var obj = {name:111}
obj.name (这个name不能当做变量只能当字符串来用)
-
- DOM的节点
- node: 节点, 浏览器认为在一个html页面中的所有内容都是节点(标签节点,注释节点,文本节点,文档节点)
- 元素节点: html标签
- 文本节点: 文字内容(大部分浏览器会把空格和换行也当作文本节点,除ie678)
- 注释节点:注释内容
- document文档节点: 整个文档
- DOM的节点
console.dir() 看结点 nodename nodetype nodevalue
.childNodes 返回节点集合
.children 返回的是元素集合节点 ie678和标准浏览器中有区别(6~8会把注释节点当作元素节点)
.parentNode 获取父级节点
.previousSibling 获取哥哥节点(注意空格也是文本节点哦) .previousElementSibling 获取哥哥元素节点 不兼容ie 6 7 8
.nextSibling 获取弟弟节点 .nextElementSibling 获取弟弟元素节点 不兼容ie 6 7 8
.firstChild 获取第一个子节点 .lastChild 获取最后一个子节点 .firstElementChild .lastElementChild 获取第一个【最后一个】子元素节点 好用不兼容
DOM的增删改查
动态创建元素 .createElement()
父亲.appendChild() 追加元素 容器 .insertBefore(新元素,在这个元素之前)
剪切 已经存在的元素放在某个元素之前 容器.insertBefore(容器.getElementById(),某元素)
删除 容器.removeChild(容器.get...)
替换 容器.replaceChild( 新元素 document。createChild(),替换元素)
克隆 获取的元素.cloneNode()
属性的获取 oA.title或者 oA.getAttribute('title')
修改属性 oA.title=' ' 或者 oA.setAttribute(" tilte"," ")
添加属性 通过 . 添加的属性不会反应到标签上 但是oA.setAttribute(“age”,“18”)可以
删除属性 delete oA.age 这种点删除只会删除DOM对象上的,不会删除元素上的
而 oA.removeAttribute('age','18')是真删除