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

案列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真是强大,研究其源码就是定义了$这个强大 的选择符。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值