适合初学者学的jQuery两个案例
用jQuery实现tab切换效果，自己做了几个小dome，拿出来给大家分享一下
######一、第一个效果图仿公司招聘
效果如上图，也就是html+css排版，用jQuery操作实现一些动画及想要的效果
下边是HTML部分代码
<div class="menu">
<ul class="ul1">
<li class="selected"><span>市场调研中心</span></li>
<li><span>php</span></li>
<li><span>美工</span></li>
<li><span>前端</span></li>
<li><span>运维</span></li>
<li><span>产品</span></li>
</ul>
<ul class="ul2">
<li><span>销售</span></li>
<li><span>产品经理</span></li>
<li><span>java</span></li>
<li><span>node.js工程师</span></li>
</ul>
</div>
这是上边tab切换部分代码，思路大概就是div+ul进行排版，css样式进行排就可以了，最主要的是咱们通过 jQuery进行tab切换selected这个属性！
大家可以参考下边jQuery代码
//全局加载完后加载
$(function(){
//控制我想要控制的li 简单的一个click事件
$(".menu ul li").click(function(){
//console.log(1);
//点击时先移除上次添加的selected样式
$(".menu ul li").removeClass ("selected");
//addClass添加一个selected属性
$(this).addClass("selected");
})
});
这样就做出来上班部分，下边我用的ul包li大约十个跟上边标签对齐来进行操作代码太多，我做了一张图片大家可以参考！
大概就是这样的结构，相信初学者很容易搞懂！
接下来还是js代码
$(function(){
$(".menu ul li").click(function(){
var index=$(this).index(".menu ul li")
//$(".menu ul li").removeClass ("selected");
//$(this).addClass("selected");
$(".content ul").removeClass("selected2");
$(".content ul").eq(index).addClass("selected2");
//console.log(1);
});
$(".jobs ul li").click(function(){
$(this).find("p").toggle();
})
});
1.主要用到了jquery的index跟find，给大家普及一下，index()主要用来索引返回指定元素相对于其他指定元素的 index 位置。
2.find()方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。
二、产品交易Tab切换
主要用到了scrllLeft()、stop()、animate()方法
先看效果图
HTML思路大概就是浮动排版吧，看图片：
思路就是div包table标签，代码太多复制不出来，思路大概就是这样！
js代码块大家可以看一看
$(function(){
$(".container .curr_left li").click(function(){
//index()返回的是当前的index()索引
var index=$(this).index();
//scrollLeft()等于index*1000px，我css分的是3屏写的
var scrollLeft=index*1000;
//
$(".container .curr_left li").removeClass("selected")
$(this).addClass("selected");
//$(".boss").scrollLeft(scrollLeft);css操作没有动画
//动画效果 stop()用来结束上次动画
$(".boss").stop().animate({
"scrollLeft":scrollLeft
});
});
$("table .span1").on("click",function(){
alert("请登录后操作")
})
})
是不是很简单，jquery是前端必须学的插件库，反正现在基本每个小牧都有用到，他的良好兼容性，加上控制DOM，选择器等非常出色！对于跟我一样的初学者来说，电脑上下载个文档自己没事看，做的时候找方法就可以了！
大家是不是觉得很简单，赶紧去试一试吧！