Javascript知识总结（二）
五、深入了解JSON
（一）初识
- JSON是JavaScript Object Notation的缩写，它是一种数据交换格式
- JSON基于文本，优于轻量，用于交换数据
- JSON主要用于前后端交互时数据的传输，JSON简单易用，是ECMA的一个标准，几乎所有的编程语言都有解析JSON的库，所以我们可以放⼼大胆的在前后端交互里直接使用JSON
- JSON跟XML的比较
在可读性上面JSON是简易的写法，XML是规范的标签写法形式
使用层面，由于JSON是我们ECMA的一个标准，所以在我们JS 上面使用有着天然的主场优势，对于存储我们JS的各种格式的数据都比XML有优势 轻量级是JSON最大的优势，在数据交换这一块轻量就代表着速度要比别人快
（二）JSON字符串、对象和数组
JSON的语法规定JSON字符串必须为双引号("")包着而不是单引号(’’)，
同时JSON对象内的键也是必须为双引号("")包着而不是单引号 (’’)
实例
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//json对象
var jsonObj={"name":"tim","age":28}
console.log(jsonObj,typeof(jsonObj))
//json数组
var jsonarr=[
{"name":"tim","age":28},
{"name":"tim","age":28},
]
console.log(jsonarr,typeof(jsonarr))
//json字符串
var jsonString='{"name":"tim","age":28}'
console.log(jsonString,typeof(jsonString))
</script>
</body>
</html>
（三）序列化和反序列化
- 序列化 JSON.stringify()
把js对象转JSON字符串 - 反序列化 JSON.parse()
把JSON字符串转js对象
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//序列化，js对象转换成json字符串
var obj={'name':'tim','age':16}
console.log(obj,typeof(obj))
console.log(JSON.stringify(obj),typeof(JSON.stringify(obj)))
//反序列化 json字符串转换成js对象
console.log('********反序列化*********')
var jsonString='{"name":"tim","age":18}'
console.log(jsonString,typeof(jsonString))
console.log(JSON.parse(jsonString),typeof(JSON.parse(jsonString)))
</script>
</body>
</html>
（四）JSON的使用
实例
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//对于json对象的操作
var obj={"name":"tim","age":18}
// console.log(obj)
//对象增加一个属性
obj.height="180cm"
//删除一个属性 删除年龄
delete obj.age
//更改一个属性的值 把名字改成tom
obj.name="tom"
//查找名字是什么 obj.name
console.log(obj.name)
var arr=[
{"name":"tim","age":18},
{"name":"tony","age":20},
{"name":"jerry","age":23}
]
for(var i=0;i<arr.length;i++){
console.log(arr[i])
}
</script>
</body>
</html>
（五）数组常见操作
实例1（操作元素）
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//创建数组
var arr=["篮球","足球","乒乓球","羽毛球"]
//删除数组第一个元素 返回值为被删除的元素
// var first=arr.shift()
// console.log(first)
// console.log(arr)
//删除数组最后一个元素 返回值为被删除的元素
// var end=arr.pop()
// console.log(end)
// console.log(arr)
//向我们的数组的第一个元素前面添加元素，返回添加后数组长度
// var arrLength=arr.unshift('排球')
// console.log(arrLength)
// console.log(arr)
//向我们数组最后一个元素后面添加元素，返回添加后数组长度
var arrLength=arr.push("排球")
console.log(arrLength)
console.log(arr)
</script>
</body>
</html>
实例2
- concat() 合并两个或多个数组
不会改变原有数组，返回一个合并完的数组 - join(separator) 数组转字符串 可传入一个参数用于分隔元素
separator可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。 - split(separator,howmany) 字符串转数组 可传入两个参数
separator必选，实现方法为将字符串按某个字符切割成若干个字符串，并以数组形式返回
howmany可选，该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。 - reverse() 翻转数组 颠倒数组中元素的顺序
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//创建数组
//合并数组，可合并两个或多个
// var arr=["篮球"]
// var arr1=["足球"]
// var arr2=["乒乓球"]
// console.log(arr.concat(arr1,arr2))
// console.log(arr)
//数组转字符串
// var arr=["篮球","足球","乒乓球"]
// console.log(arr.join(''))
//字符串转数组
// var string1="abcdecefg"
// console.log(string1.split('c',3))
//翻转数组，颠倒数组中元素的顺序
var arr=[1,2,3,4,5]
console.log(arr.reverse())
</script>
</body>
</html>
实例3
- sort(sortfun) 数组排序 可传入一个参数 直接改变原数组
sortfun可选。规定排序顺序。必须是函数。不传即按照字符编码顺序排序。 - slice(start,end) 返回数组中被选定的元素,不包含下标为end的元素 可传入两个参数
start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1指最后一个元素，-2指倒数第二个元素，以此类推。
end可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。 - splice(index,howmany,x,y,z)可以对数组进行增加，删除，更改的操作。非常灵活。会返回
被删除的项目index必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 howmany必需。要删除的项目数量。如果设置为 0，则不会删除项目。
x,y,z为可选项，为添加的新项目 - indexOf(item,start)返回元素的索引，即下标，如果没有查找的 元素就返回-1
item必须，查找的元素。
start可选，整数，规定在数组中开始检索的位置，如不选则为 第⼀个开始检索
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
// var arr=[1,3,5,4,2,6,7,7,9,11,8]
//数组排序 有正向和反向（从大到小或从小到大） 不传参数就是按照字符编码排序
//sort函数接收的参数也是一个函数,里面接收两个参数，
// 返回第一个参数减第二个参数(a-b)即按照从小到大排序，
// 返回第二个参数减第一个参数(b-a)即按照从大到小排序
// console.log(arr.sort(function(a,b){
// return b-a
// }))
//选定数组里面指定下标的元素 slice
// var a=arr.slice(6,8)
// console.log(a)
//可以对数组进行增删改的方法 splice
// var arr=["篮球","足球"]
// //利用splice方法增加
// // arr.splice(0,0,"排球")
// // console.log(arr)
// //利用splice方法删除
// // arr.splice(0,1)
// // console.log(arr)
// //利用splice方法进行更改元素
// arr.splice(0,1,"排球","乒乓球")
// console.log(arr)
//查找元素索引，即下标 indexOf
var arr=["篮球","足球","乒乓球","排球"]
console.log(arr.indexOf("棒球"))
</script>
</body>
</html>
六、定时器
实例1
- 间隔型定时器 setInterval(fun,time)
fun为执行的函数
time为间隔执行的时间，单位为毫秒，每过time时间就执行一 次fun⾥⾯的代码 - 延时型定时器器 setTimeout(fun,time)
fun为执行的函数
time为延时执⾏的时间，单位为毫秒，经过time时间后执行fun代码，只执行一次
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//延时型的定时器 setTimeout 只会执行一次
// setTimeout(function(){
// alert("我是延时三秒执行的弹窗")
// },3000)
//间隔型定时器 setInterval 每间隔time的时间就会执行一次
setInterval(function(){
console.log(1)
},2000)
</script>
</body>
</html>
实例2
- clearInterval 清除间隔性定时器
- clearTimeout 清除延时性定时器
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//清除定时器
//创建间隔性定时器
var timer1=setInterval(function(){
console.log("我是间隔型定时器")
// clearTimeout(timer2)
},1000)
//创建延时性的定时器
var timer2=setTimeout(function(){
console.log("我是延时性定时器")
clearInterval(timer1)
},3000)
</script>
</body>
</html>
实例3
利用延时性定时器器制作延时提示框
描述场景：当我们鼠标移入小div的时候，会有一个弹窗大div显示在隔壁，鼠标离开两个div的时候弹窗div延时消失
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1{
float: left;
width: 50px;
height: 50px;
background: red;
margin-right: 30px;
}
#div2{
float: left;
width: 200px;
height: 200px;
background: black;
display: none;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<script type="text/javascript">
window.onload=function(){
var oDiv1=document.getElementById('div1')
var oDiv2=document.getElementById('div2')
var timer=null
//给div1添加鼠标移入事件
oDiv2.onmouseover=oDiv1.onmouseover=function(){
//改变div2的display
clearTimeout(timer)
oDiv2.style.display='block'
}
//给div1添加鼠标移出事件
oDiv2.onmouseout=oDiv1.onmouseout=function(){
//改变div2的display
timer=setTimeout(function(){
oDiv2.style.display='none'
},500)
}
//给div2添加鼠标移入事件
// oDiv2.οnmοuseοver=function(){
// //改变div2的display
// clearTimeout(timer)
// oDiv2.style.display='block'
// }
//给div2添加鼠标移出事件
// oDiv2.οnmοuseοut=function(){
// //改变div2的display
// timer=setTimeout(function(){
// oDiv2.style.display='none'
// },500)
// }
}
</script>
</body>
</html>
实例4（滚动图片展示）
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin:0;padding: 0;}
#banner{
position: relative;
width: 600px;
height: 150px;
margin:100px auto;
overflow: hidden;
}
#banner ul{
position: absolute;
left: 0;
top:0;
}
#banner li{
float: left;
width: 200px;
height: 150px;
list-style: none;
}
#banner li img{
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<div id="banner">
<ul>
<li><img src="img/1.png"></li>
<li><img src="img/2.png"></li>
<li><img src="img/3.png"></li>
<li><img src="img/4.png"></li>
<li><img src="img/5.png"></li>
<li><img src="img/6.png"></li>
</ul>
</div>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('banner')
var oUl=oDiv.getElementsByTagName('ul')[0]
var oLi=oUl.getElementsByTagName('li')
var timer=null
//拼接多一份ul里面的内容 这两种写法相等
// oUl.innerHTML=oUl.innerHTML+oUl.innerHTML
oUl.innerHTML+=oUl.innerHTML
//计算ul的宽度
oUl.style.width=oLi[0].offsetWidth*oLi.length+'px'
function moving(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='0'
}
oUl.style.left=oUl.offsetLeft-2+'px'
}
timer=setInterval(moving,30)
oDiv.onmouseover=function(){
clearInterval(timer)
}
oDiv.onmouseout=function(){
timer=setInterval(moving,30)
}
}
</script>
</body>
</html>
七、DOM操作
（一）DOM结点获取
- DOM获取子节点
- childNodes
使用childNodes获取子节点的时候，childNodes返回的是子节点的集合，是一个数组的格式。他会把换行和空格也当成是节点信息。 - children
children不会返回文本节点，返回的是元素节点
- childNodes
- DOM获取父节点
- parentNode
获取的是当前元素的直接父元素，是w3c的标准 - parentElement
获取的是当前元素的直接父元素，是ie的标准 - offsetParent
获取离当前节点最近的一个有定位的父节点或祖先节点，如果没有即为获取body
- parentNode
- 判断节点的类型
nodeType 1为元素节点 3为文本节点(即空格或换行，字符)
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#bigdiv{
position: relative;
}
</style>
</head>
<body>
<div id="bigdiv">
<div id="div1">
<div>1111</div>
<div>2222</div>
</div>
</div>
<script type="text/javascript">
var oDiv=document.getElementById('div1')
//childNodes获取子节点会获取到文本节点和元素节点
var div1=oDiv.childNodes
console.log(oDiv.childNodes)
//这种只获取元素节点，不会获取到文本节点 children
console.log(oDiv.children)
//获取父节点
// console.log(oDiv.parentNode)
// console.log(oDiv.parentElement)
// console.log(oDiv.offsetParent)
//判断节点类型 1是元素节点 3是文本节点
console.log(div1[0].nodeType,'我是第一个，我是文本节点')
console.log(div1[1].nodeType,'我是第二个，我是元素节点')
</script>
</body>
</html>
- 获取第一个子节点
- firstChild有可能会匹配到是空白或换行的节点信息
- firstElementChild 不会匹配空白或换行的节点信息(获取到的是元素节点，不会获取到文本节点)
- 获取最后一个子节点
- lastChild 有可能会匹配到是空⽩或换行的节点信息
- lastElementChild 不会匹配空白或换行的节点信息(获取到的是元素节点，不会获取到文本节点)
- 获取兄弟节点
- previousSibling和previousElementSibling 获取上⼀个兄弟节点
previousSibling 有可能会匹配到是空白或换⾏的节点信息
previousElementSibling 不会匹配空白或换行的节点信息(获取到的是元素节点，不会获取到文本节点) - nextSibling和nextElementSibling 获取下一个兄弟节点
nextSibling 有可能会匹配到是空白或换行的节点信息
nextElementSibling 不会匹配空白或换行的节点信息(获取到的是元素节点，不会获取到文本节点)
- previousSibling和previousElementSibling 获取上⼀个兄弟节点
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="div1">
<div>我是第一个</div>
<div>我是第二个</div>
<div id="three">我是第三个</div>
<div>我是第四个</div>
<div>我是第五个</div>
</div>
<script type="text/javascript">
var oDiv=document.getElementById('div1')
var three=document.getElementById('three')
//获取第一个子节点
// console.log(oDiv.firstChild)
// console.log(oDiv.firstElementChild)
//获取最后一个子节点
// console.log(oDiv.lastElementChild)
//获取上一个兄弟节点
console.log(three.previousElementSibling)
//获取下一个兄弟节点
console.log(three.nextElementSibling)
</script>
</body>
</html>
（二）元素操作
- 第一种：oDiv.style.display=“block”;
- 第二种：oDiv.style[“display”]=“block”;
- 第三种：Dom方式
- 获取：getAttribute(属性名称)
- 设置：setAttribute(属性名称, 值)
- 删除：removeAttribute(属性名称)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="div1" value="2">123</div>
<script type="text/javascript">
var oDiv=document.getElementById('div1')
//第一种
// oDiv.style.color='red'
//第二种
oDiv.style['color']='red'
//第三种 dom的方式
//获取属性
console.log("我是改变前的id："+oDiv.getAttribute('id'))
console.log("我是改变前的value："+oDiv.getAttribute('value'))
//改变属性
oDiv.setAttribute('id','tim')
oDiv.setAttribute('value','100')
console.log("我是改变后的id："+oDiv.getAttribute('id'))
console.log("我是改变后的value："+oDiv.getAttribute('value'))
//删除属性 removeAttribute
oDiv.removeAttribute('value')
</script>
</body>
</html>
（三）DOM节点的创建、插入和删除
- 创建并添加DOM元素
document.createElement(‘标签名’) 创建一个DOM节点
appendChild(DOM节点) 为某个DOM添加一个子节点,在最后面添加 - 插⼊入元素
insertBefore(节点, 原有节点) 在已有元素前插入 - 删除DOM元素
removeChild(节点) 删除一个节点
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul id="ullist">
<li>我是第一个</li>
<li>我是第二个</li>
<li>我是第三个</li>
<li>我是第四个</li>
</ul>
<script type="text/javascript">
var oUl=document.getElementById('ullist')
var oLi=oUl.getElementsByTagName('li')
//创建dom节点
var li=document.createElement('li')
li.innerHTML='我是新创建的li'
// oUl.appendChild(li)
//我们要在指定的位置插入新创建的li
// oUl.insertBefore(li,oLi[2])
//删除节点
oUl.removeChild(oLi[3])
</script>
</body>
</html>
（四）文档碎片
- document.createDocumentFragment() 创建文档碎片节点（是一个虚拟的节点对象）
- 文档碎片存在的意义就是减少页面渲染DOM的次数
- 文档碎片可以提高DOM操作性能(理论上)
现在的硬件已经足够强大了，不像以前的硬件水平了
<ul id="ul1"></ul>
//不使⽤⽂档碎片，每次插入li到ul都会造成页⾯重新渲染
var oUl=document.getElementById('ul1');
for(var i=0;i<100;i++){
var oLi=document.createElement('li');
oUl.appendChild(oLi);
}
//使⽤文档碎片，每次把li先插入虚拟的节点文档碎片节点，最后只插入一次即可，只会重新渲染一次⻚面
var oUl=document.getElementById('ul1');
var oFrag=document.createDocumentFragment(); for(var i=0;i<100;i++)
for(var i=0;i<100;i++){
var oLi=document.createElement('li');
oFrag.appendChild(oLi);
}
oUl.appendChild(oFrag);
（五）操作表格元素
- 首先获取到我们的表格，暂时用table1代表整个表格
- DOM来获取表头表尾、
因为表头表尾只能存在一个，获取表头table1.tHead 获取表尾table1.tFoot - DOM获取表体即
table1.tBodies获取到的是一个集合，因为可以存在多个tbody - 获取行数的集合，即需要获取表格对象里的tr行数的集合
rows - 获取行⾥⾯单元格td的数量 是一个集合，所以获取内部第⼀个需要cells[0]获取
cells
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table id="table1" border="1">
<thead>
<td>姓名</td>
<td>年龄</td>
<td>身高</td>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>180cm</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
<td>190cm</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>170cm</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var table1=document.getElementById('table1')
// alert(table1.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[0].getElementsByTagName('td')[0].innerHTML)
// alert(table1.tBodies[0].rows[0].cells[0].innerHTML)
table1.tBodies[0].rows[0].cells[0].innerHTML='tim'
</script>
</body>
</html>
扫一扫
158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
