台湾六角学院JavaScript课程笔记
上代码
<ul class="list">
<li data-id='1' data-dog="19000">
A农场
</li>
</ul>
<script>
var elList=document.queryaSelector('.list')
function show(e){
console.log(e.target.dataset.num)
console.log(e.target.dataset.dog)
}
elList.addEventListener('click',show,false)
</script>
在上面html代码中，data-··是可以加在很多标签上的，可以当作设置一个元素的属性来使用
要访问的时候用dataset来访问即可。
dataset和Array应用
样式<style>
#list{
background-color: black;
height: 300px;
width: 300px;
color: white;
font-size: larger;
}
</style>
html <ul id="list"></ul>
js
<script>
var shuzu=[
{
name:'JJ'
},
{
name:'Lily'
}
]
var str=''
var elList=document.getElementById('list')
for(var i=0;i<shuzu.length;i++){
str+='<li data-num='+i +'>'+shuzu[i].name+'</li>'
}
elList.innerHTML=str;
function show(e){
var str=e.target.dataset.num
var happenEl=e.target.nodeName
if(e.target.nodeName!=='LI'){return}
alert(shuzu[str].name)
}
elList.addEventListener('click',show)
</script>
以上代码实现了array和dataset的连用，还有e.target，以及return的中断
效果是“当你点击li标签的内容时，可以alert出本li标签的内容”，点击ul的部分，不会出现任何效果
点击实现删除操作
<ul id="list"></ul>
<script>
var shuzu=[
{
name:'Alan'
},
{
name:'Wang'
},
{
name:'Alen'
},
{
name:'Jack'
}
]
var elList=document.querySelector('#list')
function load(){
var str=''
var shuzuLen=shuzu.length
for(var i=0;i<shuzuLen;i++){
str+='<li data-num="'+i+'">'+shuzu[i].name+'</li>'
}
elList.innerHTML=str
}
load()
function deleteEl(e){
var num=e.target.dataset.num
var elCurrent=e.target.nodeName
if(elCurrent!=='LI'){
return
}
shuzu.splice(num,1)//splice方法，获取当前的数组的下标，第二个参数删除几个元素
load() // 这里在执行一次，在加载一次，才能在页面中展示出新删除的数组
}
elList.addEventListener('click',deleteEl,false)
</script>
谷歌截图.png
每当你点击这里li标签的元素的时候，就会发现删除了消失一个li元素。
这里用到了数组的splice方法。
