jQuery框架(二)

本文介绍了jQuery中的常用方法,如addClass和removeClass用于添加或移除类名,each用于遍历节点,以及节点关系方法如parent获取父节点,children获取子节点。还详细讲解了animate动画函数的基本使用,包括如何处理动画积累问题和在实际项目中的应用,如传统轮播图的实现。
摘要由CSDN通过智能技术生成

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前端规划图

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

橘子☆心酸

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值