前端学习

61 阅读3分钟

排他思想

#博学谷it学习技术支持 排他思想的算法就是:
排除掉其他的(包括自己),然后再给自己设置想要实现的效果。总而言之,排他思想的实现步骤就是所有元素全部清除与设置当前元素。

如果有一组元素,但是你只想让这组元素中的摸一个元素实现某种样式,这时候就需要用到循环的排他思想算法:

1.清除所有元素的所有样式,让大家都变成一张白纸(干掉其他人) 2、给当前元素设置样式(留下我自己) 3、注意顺序不能颠倒,首先干掉其他人,然后再设置自己

最常见的案例

比如,页面有五个按钮,我们想要给它实现循环点击事件:当点到哪个按钮,就让哪个按钮变色,应该怎样操作呢?

1.先写html和css,做好这些基础的布局和设置

<button>按钮1</button>

<button>按钮2</button>

<button>按钮3</button>

<button>按钮4</button>

<button>按钮5</button>

2.然后再写JavaScript 2.1 首先获取元素 var btn = document.getElementsByTagName('button');

当然这里你用getElementsByTagName可以,用document.querySelectorAll('button')也没问题只要能把元素获取过来备用就好

2.2 循环遍历打印按钮

这些按钮元素获取过来是伪数组,我们需要先进性遍历把一个一个元素单拎出来

for(var i =0; i<btn.length;i++){   console.log(btn[i] }

2.3 在第一个for循环里面给每个按钮添加点击事件。首先在内循环里面清除掉所有按钮的样式,然后在外循环里给当前点击的按钮添加样式。

btn[i].onclick = function(){

for(var j =0;j<btn.length;j++){

btn[j].style.backgroundColor = '';} this .style.backgroundColor = 'blue';}

注意

  1. getElementsByTagName(‘button’) 获取的是一个伪数组
  2. 这里利用了双重for循环
  3. 首先先排除其他人,然后才设置自己的样式,这种排除其他人的思想我们称为排他思想

自定义属性的操作

1.获取属性值

element.属性 获取属性值 element.getAttribute('属性');

区别:

element.属性 这个获取的是内置属性值,就是元素本身自带的属性,比如value这些等等

element.getAttribute('属性') 这个主要获取的是自定义的属性,就是我们程序员根据需要给这个元素自己添加的一个自定义属性

2.设置属性值

element.属性 = '值' 设置内置属性,我们都知道在js里等号就是用来赋值的,就是把右边的值赋值给左边的属性

element.setAttribute('属性','值') 注意前边写属性,后面写值,要用逗号隔开,不用说,在js里肯定要用英文逗号

区别:和上面一样,一个是设置内置属性的,一个是设置自定义属性的

3.移除属性

能设置当然要能移除,我们现在又不想用这个属性了

element.removeAttribute('属性');

4.H5自定义属性

4.1 在H5中规定自定义属性必须以date-开头

比如

或者element.setAttribute('date-index',2)

这就是为了防止我们到时候找不到这个属性到底是自己自定义设置的,还是人家本来内置属性。所以统一规定带上date

好啦,今天先聊到这里,改天再继续!