jquery強大的選取器和javascript 的對比。

jquery強大的選取器和javascript 的對比。

 
首先寫結構：

• tianzi
• tianzi
• tianzi

content地區 content1 content2

然後添加樣式：

*{    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

用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真是強大，研究其源碼就是定義了$這個強大 的選擇符。