JavaScript WebAPI学习 demo5

最新推荐文章于 2021-11-03 14:06:14 发布

VIP文章菜鸟小铭

最新推荐文章于 2021-11-03 14:06:14 发布

阅读量707

点赞数

分类专栏： JavaScript学习文章标签： js javascript css html html5

本文链接：https://blog.csdn.net/weixin_46170034/article/details/105910991

版权

JavaScript WebAPI学习

这篇文章讲解了修改元素属性，自定义属性，节点的增删添加删除等操作
这篇文章实在是太长了，里面主要有一些代码占据了很多的空间，我尝试能不能把他们折叠起来
这篇博客是初学者写下的笔记，如有错误，欢迎前来指正！
最后推荐大家看这部分知识点的总结，六分钟回顾一下这里的知识点

js案例

案例：排他思想

案例：当点击一个按钮时选中它，并且其他的按钮都恢复未被选中的状态 (不能出现多个按钮同时被选中的状态)
思考过程：在选中之前把其他的选中都去掉
1. 先把其他元素的样式清除掉
2. 在设置自己的样式
代码示例：

<body>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <script>
   // 1. 获取所有按钮元素
   var btns = document.querrySelectorAll('button');
   // 返回含有三个button的伪数组
   for (var i = 0; i < btns.length; i++) {
    
   // 为背景颜色添加事件
   btns[i].onclick = function() {
    
    // 先把所有的背景颜色清空，防止出现多个被选中的状态
    for (var i = 0; i < btns.length; i++) {
    
    btns[i].style.backgroundColor = '';
    }
    // 改变按钮的背景颜色
    this.style.backgroundColor = 'blue';
    }
   }
  </script>
</body>

案例：百度换肤

这里我们没有图片做背景，还是用颜色作为背景
就是点击一个按钮，然后整个网页的颜色就会改变
代码示例：

<head>
  <style>
  ul li {
    
    float: left;
    list-style: none;
  }

  .color ul li:first-child {
    
    height: 40px;
    width: 40px;
  }

  .color ul li:nth-child(2) {
    
    height: 40px;
    width: 40px;
  }

  .color ul li:nth-child(3) {
    
    height: 40px;
    width: 40px;
  }

  .color ul li:last-child {
    
    height: 40px;
    width: 40px;
  }
  </style>
</head>
<body>
  <div class="color">
    <ul>
      <li><img src="1.ipg" alt=""></li>
      <li><img src="2.jpg" alt=""></li>
      <li><img src="3.jpg" alt=""></li>
      <li><img src="4.jpg" alt=""></li>
    </ul>
  </div>
  <script>
    var items = document.querySelector('.color').  querySelectorAll('img');
    console.log(items);
    for (var i = 0; i < items.length; i++) {
    
      items[i].onclick = function () {
    
      console.log(this.style.backgroundColor);
      // 这里需要注意一下，这里需要两边加上url()
      document.body.style.backgroundColor = 'url('  +this.src+')';
      }
    }
  </script>
</body>

案例：当前行变色

实现效果：鼠标放在一行上，该行变色，鼠标移开时该行变成原来的颜色
做法：直接用 onmouseover 事件和 onmouseout 两个事件更改背景颜色
代码示例：

<body>
  <div class="table">
  <div class="thead">表头</div>
  <div class="tbody">
    <ul>
      <li>行1<li>
      <li>行2<li>
      <li>行3<li>
    </ul>
  </div>
  </div>
  <script>
    // 多重选择
    var tbody = document.querySelector('.tbody'). querySelectorAll('li');
    for (var i = 0; i < tbody.length; i++) {
    
      // 鼠标经过事件
      tbody[i].onmouseover =  function() {
    
        this.style.backgroundColor = 'gray';
      }
      // 鼠标离开事件
      tbody[i].onmouseout = function() {
    
        this.style.backgroundColor = '';
      }
    }
  </script>
</body>

案例：表单全选取消

要求：有一个全选按钮，当所有元素都被选中时他也被选中，反之只要有一个还是没有选中的状态他就没有选中，点击他可以实现全选与非全选之间的切换，同样，下面有一个按钮未选中时全选按钮就不选中，下面所有按钮选中时上面全选按钮选中
操作思路：
- 全选按钮影响下面的按钮：给全选按钮绑定点击事件&#

最低0.47元/天解锁文章

菜鸟小铭

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript WebAPI学习 demo5

JavaScript WebAPI学习这篇文章讲解了修改元素属性，自定义属性，节点的增删添加删除等操作这篇文章实在是太长了，里面主要有一些代码占据了很多的空间，我尝试能不能把他们折叠起来这篇博客是初学者写下的笔记，如有错误，欢迎前来指正！最后推荐大家看这部分知识点的总结，六分钟回顾一下这里的知识点js案例案例：排他思想案例：当点击一个按钮时选中它，并且其他的按钮都恢复未被选中的...
复制链接

扫一扫