JSAPI 02.属性操作与事件

属性操作与事件

隔行换色

案例一：完成对无序列表的隔行换色（原理~~~通过循环获取元素得到的伪数组进行取余逻辑判断操作）

var btn = document.getElementById("btn");

var liObj = document.getElementById("list").getElementsByTagName("li");

console.log(liObj);

  btn.onclick = function () {

//第一种

    for (var i = 0; i < liObj.length; i += 2) {

      console.log(liObj[i]);

      /* if (i % 2 == 0) {

        liObj[i].style.color = "red";

      } */

      liObj[i].style.color = "red";

    }

    //第二种 

    /* for (var i = 0; i < liObj.length; i++) {

      console.log(liObj[i]);

      if (i % 2 == 0) {

        liObj[i].style.color = "red";

      }

    } */

  }

思考代码还有没有能优化的空间(是不是还可以使用三元表达式）

美女画廊

效果展示:

 

点击小图完成大图切换

思路：遍历伪数组，给四张小图绑定单击事件，让当前被单击的小图的src属性值赋给大图的src属性值，让小图的title的属性值，赋给下侧文本内容。

<script>

  /*

    步骤：

    1、页面的搭建

    2、获取元素

    3、遍历伪数组

    4、给四个小美女绑定单击事件

    5、把事件源的src属性值赋给大图的src属性值

    6、把事件源的title属性值赋给标题的innerText属性值

   */

  // 获取小图

  var smallPic = document.getElementById("smallPicObj").getElementsByTagName("img");

  // 获取大图

  var bigPic = document.getElementById("bigPic");

  // 获取文本

  var title = document.querySelector("#text");

  for (var i = 0; i < smallPic.length; i++) {

    smallPic[i].onclick = function () {

      bigPic.src = this.src;

      title.innerText = this.title;

    }

  }

</script>

新事件

鼠标事件

案例一：完成对无序列表的隔行换色（原理~~~通过循环获取元素得到的伪数组进行取余逻辑判断操作）

onmouseover鼠标移入事件：在鼠标指针移动到元素上时触发。

onmouseout 鼠标移出事件：在鼠标指针移出元素后触发

//鼠标移入事件

  box1.onmouseover = function () {

    this.style.fontSize = "26px";