前端笔记.md

使用JavaScript历遍某个class的元素, 并单独处理某个参数

• 对于html class来说, 要使用JavaScript来修改有两种方法, 第一种是给每个元素单独加上一个id, 要使用某个元素就要用 document.getElementById()函数. 这种方法使用简单, 容易阅读. 缺点是对于动态网页, 事先不知道元素的id, 就算知道, 一个个手动编写代码也非常浪费时间.

• 另外一个办法就是使用历遍函数. 比如说网页上有很多图片, 在点击图片时要进行操作. 手动给每个图片加上id非常慢而且无法实现动态增加图片的效果. 最好的方法是给所有的图片赋予同一个class, 然后历遍操作:

  <img class='img'>
      
  //使用下面函数获取一个array, 包含所有的图片
  let imgs = document.querySelectorAll('.img');
  
  //给每个图片加上点击监听器
  imgs.forEach(img => {
      
      img.addEventListener('click', function() {
     // 执行操作
    });
  
  });

  这个方法的好处就是避免了给每个图片单独加id, 费时费力, 图片多了还很容易出错.

• 如果使用jQuery库的话, 上面的操作会更简单:

  $('img').click(function() {
    // handler code
  });

  上面的代码会自动获取整个img class, 并且给其中的每个元素同样的处理.