小例子 熟悉jquery

<div class="tab-head">
    <h2 id="tab1"  class="selected">JQGrid</h2>
    <h2 id="tab2" >Uploadify</h2>
    <h2 id="tab3" >Angularjs</h2>
</div>
<div class="tab-content">
     <div id="c1" class="div-content show">
             <table id="list1"></table>
            <div id="pager1"></div>

     </div>
     <div id="c2" class="div-content"><input type="file" id="uploadify" name="uploadify" /></div>
     <div id="c3" class="div-content">content3</div>
</div>

定义三个tab横向排列，切换tab会显示不同的内容。
css样式定义如下：

div.tab-head h2 {
                border: solid cornflowerblue 1px;
                width: 100px;
                height: 25px;
                margin: 0;
                float: left;
                text-align: center;
                list-style:none;
}
       
.tab-content {
                border: solid cornflowerblue 1px;
                width: 100%;
                height: 100%;
            }
            
.div-content {
                display: none;
                margin-top:30px;
            }
            
.selected {
                background-color: cornflowerblue;
            }
            
.show{
                display: block;
}

Jquery 定义mouseover事件：

$(this).ready(function () {
    var tabs = $('.tab-head h2');
    tabs.mousemove(function () {
        tabs.removeClass("selected"); 
        $(this).addClass("selected");   
        var index = $(this).index();
        $('.div-content').removeClass('show');
        $('.div-content').eq(index).addClass('show');
    });
});

 1.选择器

    元素选择器：$('div')   $('div .tab-head')   $('ul li:first')

    id选择器：$('#id')

    class选择器：$('#class')

    属性选择器：$("[id=choose]")

    input选择器：:input, :Button, :text

 2.Css类

• addClass() - 向被选元素添加一个或多个类  空格区分多个样式
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回样式属性 $("p").css({"background-color":"yellow","font-size":"200%"});

    JQuery 操作CSS的几种方式：

    1.$("#div").attr("class","divClass")

    2.$("div").css("color","red")

    3.$('div').addClass('divClass')

 

 3.遍历

  first();

  last();

  eq(index);

  filter(".intro");方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回

  not() 方法与 filter() 相反;

  each() 方法规定为每个匹配元素规定运行的函数

 $("button").click(function(){
   $("li").each(function(){
     alert($(this).text())
   });
 });