jQuery選擇器dom操作動畫事件處理

jQuery 能做什么僵控？

jQuery是一個輕量級的javascript庫近刘，可以少寫代碼熙尉，做更多的事药有。
1.jQuery庫擁有強大的選擇器毅戈。jquery允許開發(fā)者使用CSS1到CSS3幾乎所有選擇器苹丸，以及jquery獨創(chuàng)的高級復雜的選擇器愤惰。
2.出色的DOM操作。jquery封裝了大量常用的DOM操作赘理，使開發(fā)者在編寫DOM操作程序的時候得心應手宦言。
3.可靠的事件處理機制。使開發(fā)者處理事件更方便商模。
4.良好的兼容性奠旺。jquery可以在IE 6.0+,FF 2+,Safari 2.0+和Opera 9.0+下正常運行，同時還修復了一些瀏覽器之間的差異施流。
5.鏈式操作方式响疚。對發(fā)生在同一個jQuery對象上的一組動作，可以直接連寫而無需重復獲取對象瞪醋。
6.隱士迭代忿晕。當用jQuery找到“.myclass”類的全部元素，然后隱藏它們時银受，無需循環(huán)遍歷每個返回元素践盼。
7.ajax操作鸦采。jquery將所有的ajax操作封裝在到一個函數(shù)$.ajax()里,使得開發(fā)者在處理ajax的時候，能夠專心處理業(yè)務邏輯而無需關心復雜的瀏覽器兼容性和XMLHttpRequest對象的創(chuàng)建和使用的問題咕幻。

jQuery 對象和 DOM 原生對象有什么區(qū)別渔伯？如何轉化？

jquery對象
jquery對象就是通過jQuery包裝DOM對象后產(chǎn)生的對象肄程。jQuery對象是jQuery獨有的锣吼，如果一個對象是jQuery對象就可以使用jQuery中的方法，如：

$("#id").html();

在jQuery對象中無法使用DOM對象的任何方法蓝厌，DOM對象也不可以使用jQuery里的方法吐限，

DOM對象
DOM對象是文檔對象模型(Document Object Medol),每份DOM都可以表示成一顆DOM樹，如：

Paste_Image.png

可以通過javascript中的一些方法拿到元素節(jié)點褂始，如getElementById()等诸典，
像這樣得到的DOM元素就是DOM對象，DOM對象可以使用Javascript中的方法崎苗，

var text=getElementById("text")狐粱；//獲取dom對象
text.innerText="hello world";

互相轉化
jquery對象轉化成DOM對象
jQuery提供了兩種方法將一個jQuery對象轉化成DOM對象，即[index]和get[index],
1.jQuery對象是一個數(shù)組對象胆数，可以通過數(shù)組下標獲取到相應的DOM對象肌蜻，如

var $obj=$("#obj") ;//jQuery對象
var obj=$obj[0];//DOM對象，

2.jquery中提供get(index)方法獲取相應的DOM對象必尼，如

var $obj=$("#obj") ;//jQuery對象
var obj=$obj.get(0);//DOM對象蒋搜，

DOM對象轉化成jQuery對象
DOM對象只要用$()將DOM對象包裝起來，就可以獲得一個jQuery對象判莉，方式為$(DOM對象)豆挽，
如：

var obj=getElementById("obj");
var $obj=$(obj);

jQuery中如何綁定事件？bind券盅、unbind帮哈、delegate、live锰镀、on娘侍、off都有什么作用？推薦使用哪種泳炉？使用on綁定事件使用事件代理的寫法憾筏？

jQuery通過bind()、delegate()花鹅、live()氧腰、on()等方法綁定事件。
bind()
bind(type,[,data],fn),bind()方法有三個參數(shù)，第一個參數(shù)是一個或者多個事件類型容贝，第二個是可選參數(shù)自脯，作為event.data的屬性值傳給事件對象，第三個是綁定的處理函數(shù)斤富。
bind方法必須使用在一個已經(jīng)存在的元素中膏潮，bind也只能把事件處理程序綁定到指定的DOM元素上面，如果經(jīng)常刪除或者創(chuàng)建DOM,不適合使用bind满力。當選擇器選擇的DOM元素很多的時候焕参，要在每個元素上都綁定事件處理程序，會有很大的額外開銷油额。

delegate()
delegate(selector,[type],[data],fn),delegate方法有四個參數(shù)叠纷，第一個參數(shù)是選擇器，指當觸發(fā)事件的DOM元素匹配這個選擇器時觸發(fā)事件處理程序潦嘶，后面的三個參數(shù)與bind相同涩嚣。如：

//當點擊鼠標時，隱藏或顯示 p 元素：
<div style="background-color:red">
       <p>這是一個段落掂僵。</p>
     <button>點擊</button>
</div>
<script>
   $("div").delegate("button","click",function(){
  $("p").slideToggle();
});
</script>

delegate可以把事件處理程序委托到一個指定的根元素上面航厚，但是event.stopPropagation在代理的事件處理程序中是無效的，如果在根元素的DOM樹下锰蓬，有一個元素的事件處理程序阻止事件冒泡幔睬，那么代理的事件處理程序將被阻止執(zhí)行。

live()
live(type, [data], fn),三個參數(shù)都與bind相同芹扭，可以說live方法是bind方法的變體麻顶，使用 .bind() 時，選擇器匹配的元素會附加一個事件處理函數(shù)舱卡，而以后再添加的元素則不會有辅肾。為此需要再使用一次 .bind() 才行。live給所有匹配的元素附加一個事件處理函數(shù)灼狰，即使這個元素是以后再添加進來的也有效宛瞄。如：

<body>
<div class="click">點擊這里</div>
</body>
<body>
<script>
   $('.click').live('click', function() {
       console.log("點擊這里");
   });
</script>

再添加一個元素

$('body').append('<div class="click">另一個</div>');

然后再點擊新增的元素浮禾，依然能夠觸發(fā)事件處理函數(shù)交胚。
live() 方法能對一個還沒有添加進DOM的元素有效，是由于使用了事件委托：綁定在祖先元素上的事件處理函數(shù)可以對在后代上觸發(fā)的事件作出回應盈电。所以無論在綁定事件的時候選擇器對應的元素是否存在蝴簇，都能在事件觸發(fā)之后正確執(zhí)行相關的事件處理程序。
live的缺點：
1.live不支持鏈式的寫法,
2.因為所有的事件處理程序都是綁定在document元素匆帚，如果目標元素所在的DOM樹節(jié)點比較深熬词，會有一個比較長的冒泡路徑。
3.當一個事件處理函數(shù)用 .live() 綁定后，要停止執(zhí)行其他的事件處理函數(shù)互拾，那么這個函數(shù)必須返回 false歪今。 stopPropagation() 是無效的,因為事件已經(jīng)冒泡到document上了。

on()
on方法是在選擇元素上綁定一個或多個事件的事件處理函數(shù)颜矿。
on(events,[selector],[data],fn);
events:是要綁定的事件類型寄猩；
selector：可選參數(shù)，過濾選擇器骑疆，用于過濾器的觸發(fā)事件的選擇器元素的后代田篇，只有匹配這個選擇器的元素才執(zhí)行事件處理程序。如果沒有提供則認為是綁定在選中的元素上箍铭。
后面兩個與bind相同泊柬。
如果on有selector這個參數(shù)，就跟delegate類似诈火，是一個事件代理兽赁，把selector匹配的元素的事件處理程序代理到選中的元素上。如果沒有冷守，就跟bind類似闸氮，綁定在某個指定的元素上。

** unbind()**
unbind(type,[data|fn]])
bind()的反向操作教沾，從每一個匹配的元素中刪除綁定的事件蒲跨。

1.把所有段落的所有事件取消綁定
$("p").unbind()
2.將段落的click事件取消綁定
$("p").unbind( "click" )
3.刪除特定函數(shù)的綁定，將函數(shù)作為第二個參數(shù)傳入
$("p").bind("click", foo); // ... 當點擊段落的時候會觸發(fā) foo 
$("p").unbind("click", foo); // ... 再也不會被觸發(fā) foo

off
off(events,[selector],[fn]),off() 方法移除用on()方法中綁定的事件處理程序授翻。

1.把所有段落的所有事件取消綁定
$("p").offf()
2.把所有段落的點擊事件都取消
$("p").off( "click", "**" )
3.點擊p時移除foo事件
$("body").off("click", "p", foo);
4.移除命名空間下的所有事件
var validate = function () {}
$("form").on("click.validator", "button", validate);
$("form").off(".validator");

終上所述或悲，推薦使用on綁定事件，較好的彌補了其他幾種綁定事件的缺點堪唐。
on事件代理寫法,加個過濾參數(shù)即可

<div class="test">
    <p class="btn">點擊</p>
</div>
<script>
    $('.test').on('click','.btn',function() {
        console.log("點擊這里");
    });
</script>

jQuery 如何展示/隱藏元素巡语？

使用show()和hide()

<div class="demo"></div>
<button class="btn1">點擊隱藏</button>
<button class="btn2">點擊顯示</button>
<script>
   $(function(){
       $(".btn1").click(function(){
              $(".demo").hide(2000);
       })
       $(".btn2").click(function(){
           $(".demo").show(2000);
       })
   })
</script>

jQuery 動畫如何使用？

1.show()和hide()

show()方法和hide()方法沒有參數(shù)的時候淮菠，相當于css("display"男公，"none/block"),立即隱藏或顯示元素，不會有任何動畫合陵，動畫效果的顯示功能：
show(speed,[callback])
隱藏功能：
show(speed,[callback])
speed:表示執(zhí)行動畫時的速度
callback:可選參數(shù)枢赔，表示動畫結束后執(zhí)行的回調(diào)函數(shù)。

<div class="demo"></div>
<button class="btn1">點擊隱藏</button>
<button class="btn2">點擊顯示</button>
<script>
   $(function(){
       $(".btn1").click(function(){
              $(".demo").hide(2000);
       })
        $(".btn2").click(function(){
           $(".demo").show(2000,function(){
              $(this).css('border','1px solid')
           });
       })
   })

</script>

2.toggle()

在使用show()和hide()方法顯示隱藏元素時拥知，為了正確執(zhí)行切換顯示的動作踏拜，需要檢測當前元素的顯示狀態(tài)，然后根據(jù)該狀態(tài)再執(zhí)行顯示或者隱藏低剔，toggle()方法就是切換元素的可見狀態(tài)速梗。
1.無參數(shù)調(diào)用
toggle()
2.參數(shù)是一個布爾值肮塞，如果是true顯示，false隱藏姻锁。
toggle(boolean)
3.與show()參數(shù)所表示的意義一樣枕赵。
toggle(speed,[callbakc])

<div class="demo"></div>
<button class="btn1">點擊1</button>
<button class="btn2">點擊2</button>
<button class="btn3">點擊3</button>
<script>
   $(function(){
       $(".btn1").click(function(){
              $(".demo").toggle();//無參數(shù)方法
       });
       $(".btn2").click(function(){
           $(".demo").toggle(false);//根據(jù)參數(shù)顯示或隱藏
       });
       $(".btn3").click(function(){
           $(".demo").toggle(2000,function(){
               $(".demo").css("background","yellow"); //有兩個參數(shù)
           })
       });
   })
</script>

3.slideUp()和slideDown(),slideToggle()

slideUp()方法格式如：
slideUp(speed,[callback]),動畫效果是將所選元素的高度向上減小，呈現(xiàn)一種向上滑動的效果位隶。
slideDown()方法格式如：
slideDown(speed,[callback]),動畫效果是將所選元素的高度向下增大烁设，僅僅改變元素的高度屬性，所含參數(shù)與slideUp一樣钓试。
slideToggle()方法格式如下：
slideDown(speed,[callback])装黑，動畫效果是自動切換所選元素的高度狀態(tài)。

<body>
<div class="demo"></div>
<button class="btn1">點擊1</button>
<button class="btn2">點擊2</button>
<button class="btn3">點擊3</button>
<script>
   $(function(){
       $(".btn1").click(function(){
              $(".demo").slideUp(2000);
       });
       $(".btn2").click(function(){
           $(".demo").slideDown(2000);
       });
       $(".btn3").click(function(){
           $(".demo").slideToggle(2000,function(){
               $(".demo").css("background","yellow");
           })
       });
   })
</script>
</body>

4.fadeIn()弓熏、fadeOut()恋谭、fadeTo()

show(),hide()與fadeOut()、fadeIn()比較挽鞠，相同之處就是切換元素的顯示狀態(tài)疚颊，不同在于show()和hide()的動畫使元素的高度和寬度屬性都發(fā)生了變化，而fadeOut()和fadeIn()只是元素的透明度發(fā)生變化信认。
fadeOut()方法格式如：
fadeOut()(speed,[callback]),通過改變元素的透明度材义，實現(xiàn)淡出的動畫效果。
fadeIn()方法格式如：
fadeIn()(speed,[callback]),通過改變元素的透明度嫁赏，實現(xiàn)淡入的動畫效果其掂。
fadeTo()方法格式如：
fadeTo()(speed,opacity,[callback]),該方法是將所選元素的不透明度以動畫的效果調(diào)整到指定的透明度。參數(shù)speed是動畫速度潦蝇，opacity是指定的不透明值款熬，范圍是0.0~1.0,可選參數(shù)回調(diào)函數(shù) ，與別的動畫相同攘乒。

<div class="demo"></div>
<button class="btn1">點擊1</button>
<button class="btn2">點擊2</button>
<button class="btn3">點擊3</button>
<script>
   $(function(){
       $(".btn1").click(function(){
              $(".demo").fadeIn(2000);
       });
       $(".btn2").click(function(){
           $(".demo").fadeOut(2000);
       });
       $(".btn3").click(function(){
           $(".demo").fadeTo(2000,0.2,function(){
               $(".demo").css("background","yellow");
           })
       });
   })

5.自定義動畫

animate()可以自定義各種復雜的高級的動畫贤牛，調(diào)用語法格式為：
animate(params,[duration],[easing],[callback])
params：表示用于制作動畫效果的屬性樣式和值的集合，
duration：可選则酝，表示自定義動畫的速度殉簸，可以是normal，slow沽讹，fast或自定義的數(shù)字般卑，
easing：可選，為動畫插件使用妥泉，用于控制動畫的表現(xiàn)效果椭微，有swing和linear等值，
callback：可選盲链，自定義動畫完成后的回調(diào)函數(shù)。
簡單的動畫,點擊之后變大

    <script src="js/jquery-1.8.3.min.js"></script>
    <style>
        .demo{width: 100px;height: 100px;background: #ff0000;}
    </style>
</head>
<body>
<div class="demo">點擊變大</div>
<button class="btn">點擊變大</button>
<script>
  $(function(){
      $(".btn").click(function(){
          $(".demo").animate({
                      width:"200",
                      height:"200px"
          },2000)
      })
  })
</script>

位置移動的動畫,要給元素設置position，位置移動才生效刽沾。

<script>
  $(function(){
      $(".btn").click(function(){
          $(".demo").animate({
                      width:"200",
                      height:"200px",
                       top:"40px",
                     left:"50px"
          },2000)
      })
  })
</script>

隊列中的動畫本慕，就是元素在執(zhí)行一個以上的多個動畫效果,即有多個animate()方法在元素中執(zhí)行，如先將元素放大侧漓，然后再縮小锅尘，

<div class="demo">點擊變大</div>
<button class="btn">點擊變大</button>
<script>
  $(function(){
      $(".btn").click(function(){
          $(".demo")
                  .animate({height:"200px"},2000)
                  .animate({width:"200px"},1000)
                  .animate({height:"50px"},1000)
                  .animate({width:"50px"},1000)
      })
  })
</script>

如何設置和獲取元素內(nèi)部 HTML 內(nèi)容？如何設置和獲取元素內(nèi)部文本布蔗？

用html()和text()獲取元素中的內(nèi)容藤违，將內(nèi)容作為html(val)和text(val)的參數(shù)分別設置元素內(nèi)容。
設置元素內(nèi)部的HTML,使用$().html()或者innerHTML

<div class="demo"></div>
<button class="btn1">點擊1</button>
1.
<script>
    var demo=document.querySelector(".demo");
    var btn1=document.querySelector(".btn1");
     btn1.onclick=function(){
         demo.innerHTML="<p>這是一個段落</p>";
     }
    })
</script>
2.<script>
    $(function(){
        $(".btn1").click(function(){
            $(".demo").html("<p>這是一個段落</p>");
        });
</script>

獲取元素內(nèi)部的HTML

<div class="demo">
    <p>這是一個段落</p>
</div>
<button class="btn1">點擊1</button>
1.原生的方法
<script>
   var demo=document.querySelector(".demo");
    var btn1=document.querySelector(".btn1");
     btn1.onclick=function(){
         var innerhtml=demo.innerHTML;
         console.log(innerhtml);// <p>這是一個段落</p>
     }
</script>
2.jquery方法
<script>
       $(function(){
        $(".btn1").click(function(){
            console.log($(".demo").html());// <p>這是一個段落</p>
        });

    })
</script>

設置元素內(nèi)部的文本,使用$().text()或者innerText

<div class="demo"></div>
<button class="btn1">點擊1</button>
1.原生的方法
<script>
    var demo=document.querySelector(".demo");
    var btn1=document.querySelector(".btn1");
     btn1.onclick=function(){
         demo.innerText="這是一個文本";
     }
  
</script>
2.jQuery方法
<script>
    $(function(){
        $(".btn1").click(function(){
            $(".demo").text("這是一個文本");
        });

    })
</script>

獲取文本纵揍，與獲取html方法一樣

<div class="demo">這是一個文本</div>
<button class="btn1">點擊1</button>
1. 原生的方法   
var demo=document.querySelector(".demo");
    var btn1=document.querySelector(".btn1");
     btn1.onclick=function(){
         console.log(demo.innerText);
     }
2.jQuery的方法
    $(function(){
        $(".btn1").click(function(){
           console.log($(".demo").text()) ;//不寫參數(shù)即可
        });

    })

如何設置和獲取表單用戶輸入或者選擇的內(nèi)容顿乒？如何設置和獲取元素屬性？

如果想要獲取元素的值泽谨，可以通過val()方法實現(xiàn)璧榄，語法：
$(‘selector’).val(val)，
如果不帶參數(shù)就是獲取輸入的值吧雹，如果帶有參數(shù)就是設置元素的值骨杂，

<form class="demo">
    <input type="text" id="txt">
</form>

<script>
    $(function() {
         //獲取值
        $("#txt").focus(function () {
            var txtvalue = $(this).val();
            console.log(txtvalue)
        });
           //設置值
        $("#txt").blur(function () {
            var txtvalue = $(this).val();
            if (txtvalue==""){
                $(this).val("文本框不能為空")
            }
        });

    })
</script>

獲取選擇的內(nèi)容,val()方法還有一個用處是，可以使下拉列表雄卷，復選框和單選框相應的選項被選中搓蚪，

<form class="demo">
    <select  id="single">
        <option >選項1</option>
        <option >選項2</option>
        <option >選項3</option>
    </select>
    <select id="multiple" multiple="multiple">
        <option  selected="selected">選擇1號</option>
        <option >多選2</option>
        <option >多選3</option>
    </select>
    <input type="checkbox" value="check1">多選1
    <input type="checkbox" value="check2">多選2
    <input type="checkbox" value="check3">多選3
    <input type="radio" value="check1">單選1
    <input type="radio" value="check2">單選2
    <input type="radio" value="check3">單選3
</form>

<script>
    $(function() {
        //使下拉框的第二個被選中
        $("#single").val("選項2");
        //使下拉列表的第二第三個被選中
        $("#multiple").val(["多選2","多選3"])
        $(":checkbox").val(["check1","check2"]);
        $(":radio").val(["check1"])

    })
</script>

$(‘selector’).attr(attr):獲取元素屬性;
$(‘selector’).attr(‘a(chǎn)ttr’,’type’):設置元素屬性的值;

8

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul li{list-style: none}
        a{text-decoration: none}
        .wrap{
            width: 600px;
            margin: 0 auto;
        }
        .nav-aside{
            margin-top: 30px;
            width: 180px;
        }
        .category{
            position: relative;
            width: 190px;
            background: #c7171e;
        }
        .category>a{
            display: block;
            padding: 10px;
            margin: 0 10px;
            width: 150px;
            color: #fff;
            font-size: 14px;

            border-bottom:1px dotted #de272e;

        }
        .icon-jiantou{
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: SimSun-ExtB;
            font-style: normal;
            font-weight: 700;
            color: #fff;
        }
        .category-child{
            display: none;
            position: absolute;
            top: 0;
            left: 190px;
            width: 190px;;
            background: #fff;
            border: 1px solid #ddd;

        }
        .category-child>li{
            float: left;
            width: 75px;
            padding: 10px;
            text-align: center;
        }
        .category-child>li>a{
            color: #333;
            font-size: 14px;
        }
        .show{display: block}
    </style>
</head>
<body>
<div class="wrap">
    <ul class="nav-aside">
        <li class="category">
            <a href="">珠寶玉器</a>
            <i class="icon-jiantou"> > </i>
            <ul class="category-child">
                <li><a href="">翡翠</a></li>
                <li><a href="">玉石</a></li>
                <li><a href="">翡翠</a></li>
                <li><a href="">玉石</a></li>
                <li><a href="">翡翠</a></li>
                <li><a href="">翡翠</a></li>
                <li><a href="">玉石</a></li>
                <li><a href="">翡翠</a></li>
                <li><a href="">玉石</a></li>
                <li><a href="">翡翠</a></li>
            </ul>
        </li>
        <li class="category">
            <a href="">珠寶玉器</a>
             <i class="icon-jiantou"> > </i>
            <ul class="category-child">
                <li><a href="">翡翠</a></li>
                <li><a href="">玉石</a></li>
                <li><a href="">翡翠</a></li>
                <li><a href="">玉石</a></li>
                <li><a href="">翡翠</a></li>
                <li><a href="">翡翠</a></li>
            </ul>
        </li>
        <li class="category">
            <a href="">珠寶玉器</a>
           <i class="icon-jiantou"> > </i>
            <ul class="category-child">
                <li><a href="">翡翠</a></li>
                <li><a href="">玉石</a></li>
                <li><a href="">翡翠</a></li>
                <li><a href="">玉石</a></li>
            </ul>
        </li>
        <li class="category">
            <a href="">珠寶玉器</a>
           <i class="icon-jiantou"> > </i>
            <ul class="category-child">
                <li><a href="">翡翠</a></li>
                <li><a href="">玉石</a></li>
                <li><a href="">翡翠</a></li>
                <li><a href="">玉石</a></li>
                <li><a href="">翡翠</a></li>
                <li><a href="">翡翠</a></li>
                <li><a href="">玉石</a></li>
                <li><a href="">翡翠</a></li>
            </ul>
        </li>
        <li class="category">
            <a href="">珠寶玉器</a>
            <i class="icon-jiantou"> > </i>
            <ul class="category-child">
                <li><a href="">翡翠</a></li>
                <li><a href="">玉石</a></li>
                <li><a href="">翡翠</a></li>
                <li><a href="">玉石</a></li>
                <li><a href="">翡翠</a></li>
                <li><a href="">翡翠</a></li>
            </ul>
        </li>
    </ul>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>

    $(function(){
        /*
         $(".category").on("mouseenter",function(){
         $(this).find(".category-child").show();
         });
         $(".category").on("mouseleave",function(){
         $(this).find(".category-child").hide();
         });*/
        $(".category").on("mouseenter",function(){
            $(this).find(".category-child").addClass("show");
        });
        $(".category").on("mouseleave",function(){
            $(this).find(".category-child").removeClass("show");
        });
    })

</script>
</body>
</html>

效果預覽

9

代碼預覽
 效果

10

代碼
 效果預覽

11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul li{ list-style: none}
        a{text-decoration: none;color: #ddd;}
        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }
        .tab{
            width: 200px;
            padding: 5px;
            border: 1px solid #ddd;
            text-align: center;
        }
        .tab>span{
            padding: 0 5px;
            line-height: 1;
            border-right: 1px solid #ddd;
        }
        .tab-wrap{
           position: relative;
            width: 600px;
            height: 400px;
            overflow: hidden;
        }
        .tab-panel{
            position: absolute;
            height: 400px;

        }
        .tab-item{
            float: left;
            width: 600px;
            height: 400px;
        }
        .tab-item:nth-of-type(1){
            background: #ff0000;
            left:0;
        }
        .tab-item:nth-of-type(2){background: #6A6AFF}
        .tab-item:nth-of-type(3){background: #00ff00}
        .select{background: #ddd;}
    </style>
</head>
<body>
 <div class="wrap">
     <div class="tab">
         <span class="select">tab1</span>
         <span>tab2</span>
         <span>tab3</span>
     </div>
     <div class="tab-wrap clearfix">
         <ul class="tab-panel">
             <li class="tab-item"></li>
             <li class="tab-item"></li>
             <li class="tab-item"></li>
         </ul>
     </div>
 </div>
 <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
 <script>
     $(function(){
         $(".tab>span").on('click',function(){
             var $this=$(this);
             var index=$(this).index();
             var wid=$(".tab-wrap").width();
             $this.siblings().removeClass("select");
             $this.addClass("select");
             $(this).parents(".wrap").find(".tab-panel").animate({left:-wid*index},1000);
         })
     })
 </script>
</body>
</html>