台湾六角学院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方法。