Js的前端效果编写逻辑（1）

学习、使用js最大的困扰在于没有良好的编程逻辑。这也许是我们大家的通病。

而在做过了成百上千的Jquery效果之后，我总结出以下几点。

无论多么朴质，或是多么华丽的效果，它的原理都是只有一点。

那么就是被选中和未被选中两点。

我们需要做的就是，当用户进行操作过后，把未被选中的Dom切换为选中的Dom，而已选中的Dom归零为未被选中的Dom。

说起来有点饶，但是仔细想其实是很简单的一条逻辑。

例如，我们想做个当鼠标经过图片让它后面盒子的背景变色，而和它同级的其他图片则取消这个效果。当然这个简单的事件，我们可以用CSS的:hover伪类来完成。

那么用Js去实现呢？其实也很简单，代码如下

---html---

<div style="background-color:#fff"><img></div>

<div style="background-color:#fff"><img></div>

<div style="background-color:#fff"><img></div>

(以jQuery为例)

$("img").mouseenter(function(){

    var index = $("img").index(this);

    $("div").css("background-color","#fff").eq(index).css("background-color","red");

});

----Over----

很简单吧？我们只是动态的修改了一下Dom的Css属性。

但是注意上面，我var了一个index的变量，去储存住img当前的焦点在序列中的编号。从而把这个编号，传给div，使它能准确的完成变色操作。

有些人可能会说，我完全可以用$(this).parents()。没错，也可以这样做，但是当img和div不在一个层级的时候$(this)就完全失效了。作为一个超新手，你还是希望能一劳永逸不是么？

好了，今天这点简单的东东，就说到这，日后有时间+有心情，还会再写。