jQuery框架(二)

1.、常用方法

1.1addClass||removeClass

概述：它们两者是JQ函数库提供的。他们两者主要的作用是，可以给匹配节点添加类型或移除类名操作。

<script type="text/javascript">
   //绑定事件
   $('button:eq(0)').click(function(){
       //给div添加类名
       $("div").addClass('cur');
   });
   $("button:eq(1)").click(function(){
        //div移除类名
        $("div").removeClass("cur");
   });
   //链式语法：连续打点【从左带有】
   $("button:eq(2)").click(function(){
      $("div").html("我爱你").css({'width':100}).addClass('erha');
   });
</script>
1.2index
概述：它是JQ函数库提供一个常用方法。它主要的作用是可以获取到某一个匹配节点索引值。
<script type="text/javascript">
  //index:获取匹配节点的索引值
  console.log($(".cur").index());
</script>

1.3each

概述：它也是jQuery函数库给我们提供方法。他们主要的作用是可以遍历全部匹配节点。

  $("li").each(function(index,element){
  	   //遍历每一个节点：设置样式
      $(element).css({'color':'red',"border":"1px solid black",'width':index * 100 + 50})
  });

• each方法:主要的作用是可以循环遍历到每一个节点
• 回调函数当中：有两个形参，分别是匹配到全部元素索引值、全部匹配到节点。

2、节点关系方法

概述：在HTML骨架下，标签与标签之间是有嵌套关系。就导致出现父子节点、爷孙节点等关系。
jQuery函数库中给我们封装了很多节点关系方法。

2.1parent

概述：它是jQuery函数库中提供一个方法，它主要的作用是可以获取到某一个匹配节点【父节点】。

<script type="text/javascript">
   //parent:可以获取到匹配节点父元素
   $("li").parent().css({'background':'red'});
</script>

2.2函数上下文
概述：函数上下文【this】，如果在函数中出现（只能在函数体中使用）。
事件处理函数中下文this，就是当前这个触发事件元素。

  $('li').click(function(){
      $(this).css({'background':"red"});
  }); 

作为事件处理函数中上下文this---->当前触发这个事件节点。

2.3siblings*

概述：它是jQuery函数库给我们提供节点关系方法。它主要的作用是可以获取到某一个匹配节点的姊妹节点。
说白了，就是同级元素。

• siblings方法不传选择器：匹配的是某一个节点全部兄弟元素
• siblings方法传递选择器：匹配的是某一个节点某一类型兄弟元素。

1.4children

概述：它也是jQuery函数库提供一个方法。主要的作用是可以获取到某一个匹配节点的全部子节点。

<script type="text/javascript">
   //children方法：获取某一个节点子节点
   console.log($("div").children(".cur"));
</script>

1.5节点关系方法实战-折叠卡片

业务分析:

• 页面布局:布局采用的无序列表ul进行布局。首先第一项军事内容部分显示、其余军事内筒部分隐藏
• 需要给每一个标题绑定单机事件
• 也利用到slideDown与slideUp特效函数

3、animate动画函数

3.1animate动画基本使用

概述：在前端DOM课程中我们曾经讲过动画实现原理：定时器 + 信号量套路。
但是jQuery函数库认为这种操作太麻烦了，我给你封装一个函数你直接用即可。
语法格式：

$(selector).animate(json,time,callBack);

• 第一个参数【必有得】：JSON数据格式是用来设置动画最终完成的样式属性值。
• 第二参数【可有可无】：动画时间的设置【ms】。
• 第三个参数【可有可无】：当动画执行完毕的时候立即执行一次。

<script type="text/javascript">
  $("div").animate({"left":500},2000,function(){
  	   //当动画结束以后会立即执行一次
  	    console.log('动画结束之后立即执行一次')
  });
</script>

• jQ函数库中animate动画：很多样式属性都可以参与动画：设计颜色部分不能参与动画。

3.2注释事项

概述：我们已经知道可以通过animate方法给匹配节点添加动画。
需要注意：一个匹配节点可以同时绑定多个动画

<script type="text/javascript">
 //探讨：一个节点通过绑定多个动画
 //第一个动画
 $("div").animate({"left":300},2000);
 //第二个动画
 $("div").animate({'top':300},2000);
 //第三个动画
 $('div').animate({'left':0},2000);
 //第四个动画
 $("div").animate({'top':0},2000);
</script>
	某一个节点可以通过绑定多个动画：按照书写先后顺序依次完成。
3.3动画积累问题
概述：在上面课程当中，已经知道一个节点可以同时添加多个动画，而且这些动画是按照书序一次完成。
但是需要注意：在开发中有一些特定场景下不希望出现这种现象，动画积累问题。
<script type="text/javascript">
   //第一个按钮：绑定单机事件
   $("button:eq(0)").click(function(){
       //只要触发单机事件，添加一个动画
       $("div").stop(true).animate({'left':600},2000);
   });
   //第二个按钮：绑定单机事件
   $('button:eq(1)').click(function(){
        //只要触发单机事件，添加一个动画
       $("div").stop(true).animate({'left':0},2000)
   });
</script>

-stop也是jQuery函数库提供：它主要的作用是可以终止当前元素全部积累动画。

• stop方法放置在animate动画方法之前。

3.4传统轮播图

业务分析:
1:左右按钮需要绑定单机事件
2:传统轮播图俗称三位轮播

<script type="text/javascript">
   //信号量
   var idx = 0;
  //左侧按钮的单机事件
  $('.lbtn').click(function(){
     //当前显示的这张图片
     $("ul li:eq("+idx+")").css({"left":0}).stop(true).animate({'left':-600},300);
     //信号量累加
     idx++;
     idx = idx > 4 ? 0 : idx;
     //下一张图显示
     $('ul li:eq('+idx+')').css({'left':600}).stop(true).animate({'left':0},300);
     //小球类名切换
     $('ol li:eq('+idx+')').addClass('show').siblings().removeClass('show');
  });

  //右侧按钮单机事件
  $('.rbtn').click(function(){
   //当前显示的这张图
   $("ul li:eq("+idx+")").css({"left":0}).stop(true).animate({'left':600},300);
   idx--;
   idx = idx < 0 ? 4 :idx;
   //下一张图显示
   $('ul li:eq('+idx+')').css({"left":-600}).stop(true).animate({'left':0},300);
        //小球类名切换
     $('ol li:eq('+idx+')').addClass('show').siblings().removeClass('show');
  });
</script>

3.5前端规划图