jquery强大的选择器和javascript 的对比。

来源：互联网发布：vr头显知乎封闭式编辑：程序博客网时间：2024/05/29 17:00

案列demo：http://codepen.io/tianzi77/pen/yNJVaM
首先写结构：

<body><ul id="nav">    <li class="current">tianzi</li>    <li>tianzi</li>    <li>tianzi</li></ul><div id="content"><div class="show">content区域</div><div>content1</div><div>content2</div></div>

然后添加样式：

*{    padding:0;    margin: 0;}body{    margin:0 50%;}#nav{    width: 500px;    height: 50px;    line-height: 50px;    list-style: none;    border-radius: 20px;    margin-bottom: 5px;}#nav li{    float: left;    padding-right: 10px;    border-left: 1px solid green;    font-size: 2em;    font-family: "微软雅黑";    cursor: pointer;}#nav li.current{    background: #abcdef;}#nav li:hover{    color: #fff;    background: red;    cursor: pointer;}#content div{    width: 270px;    height: 180px;    border:1px solid blue;    box-sizing:border-box;    display: none;}#content div.show{    display: block;}

纯javascript控制表现：

window.onload=function(){var ul=document.getElementById("nav");var li=ul.getElementsByTagName("li");var content=document.getElementById("content");var div=content.getElementsByTagName('div');for(var i=0;i<li.length;i++){    li[i].index=i;    li[i].onclick=function(){        for(var j=0;j<li.length;j++){            li[j].className="";            div[j].style.display="none";        }        this.className="current";        div[this.index].style.display="block";    }}}

用js写代码比较多，而且里面有2层循环很饶人。那么我用jquery写了一下：
jq代码：

$(function(){    $("ul li").click(function(){    $(this).addClass("current").siblings().removeClass("current");    $("#content div").eq($(this).index()).show().siblings().hide();})})

基本2行代码就搞定，由于jquery支持强大的链式操作，所以以上代码完全可以精简为一行：

$(this).addClass("current").siblings().removeClass("current").parent().next().children().eq($(this).index()).show().siblings().hide();

不得不说jquery真是强大，研究其源码就是定义了$这个强大的选择符。

1 0