适合初学者学的jQuery两个案例分析

适合初学者学的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，选择器等非常出色！对于跟我一样的初学者来说，电脑上下载个文档自己没事看，做的时候找方法就可以了！
  大家是不是觉得很简单，赶紧去试一试吧！