JQuery学习（二）

JQuery学习（二）

class操作

包括添加类、移除类、判断类、切换类。
实例：

<script>
  $(function () {
    //1.添加类 addClass(类名);
    $('#addClass').click(function () {
      //1.1 给id为div1的元素添加类.
      //添加单个类
      //$('#div1').addClass('fontSize30');
      //添加多个类.
      $('#div1').addClass('fontSize30 width200');
    });

    //2.移除类
    $('#removeClass').click(function () {
      //2.1 给id为div1的元素移除类.
      //移除单个类
      //$('#div1').removeClass('fontSize30');
      //移除多个类
      //$('#div1').removeClass('fontSize30 width200');
      //移除所有的类
      $('#div1').removeClass();
    });

    //3.判断类
    $('#hasClass').click(function () {
      //判断一个元素有没有某个类,如果有就返回true,如果没有就返回false.
      console.log($('#div1').hasClass('fontSize30'));
    });

    //4.切换类
    $('#toggleClass').click(function () {
      //如果元素有某个类就移除这个类, 如果元素没有这类就添加这个类.
      $('#div1').toggleClass('fontSize30');
    });
  });
</script>

动态数据的添加和删除

1、点击 添加数据 按钮,显示添加面板和遮罩层；

$('#j_btnAddData').click(function () {
            $('#j_formAdd').show();
            $('#j_mask').show();
        });

2、点击添加面板里的关闭按钮,隐藏添加面板和遮罩层；

        $('#j_hideFormAdd').click(function () {
            $('#j_formAdd').hide();
            $('#j_mask').hide();
        });

3、点击添加面板里的添加按钮,会把输入的内容生成一个tr,这个tr添加到tbody中；

#j_btnAdd').click(function () {
            var txtLesson = $('#j_txtLesson').val();
            var txtBelSch = $('#j_txtBelSch').val(); 
            //3.2 把用户输入的课程名称和所属学院 ,创建出一个tr.
            var $trNew =$( '<tr>' +
                            '<td>'+txtLesson+'</td>'+
                            '<td>'+txtBelSch+'</td>' +
                            '<td><a href="javascrip:;" class="get">delete</a></td>' +
                         '</tr>' );

            //给新创建的这个$trNew里面的a标签添加一个事件.
            $trNew.find('.get').click(function () {
                //$(this).parent().parent().remove();
                $trNew.remove();
            });

4、点击delete这些a标签,删除对应的tr。

#j_tb .get').click(function () {
            $(this).parent().parent().remove();
        });

JQuery动画—显示隐藏

1、显示 show

 $(function () {
    //参数1:代表执行动画的时长 毫秒数,也可以是代表时长的字符串 fast normal  slow
    //参数2:代表动画执行完毕后的回调函数.
    $('#show').click(function () {
      //给id为div1的元素动画显示.
      //1.1 如果show()这个方法没有参数,那就没有动画效果.
      //$('#div1').show();
      //1.2 如果要想要动画效果,就应该给他参数.
      //$('#div1').show(2000);
      $('#div1').show('fast'); //200毫秒
      //$('#div1').show('normal'); //400毫秒
      //$('#div1').show('slow'); //600毫秒
      //$('#div1').show('penglin'); //如果代表时长的单词写错了,就相当于写了一个normal
      //1.3 回调函数.
      // $('#div1').show(2000, function () {
      //   alert('动画执行完毕了...');
      // })
    });

2、隐藏 hide

$('#hide').click(function () {
      //让id为div1的元素动画影藏.
      //$('#div1').hide();//没有参数没有动画效果.
      $('#div1').hide(2000);
    });

3、切换 toggle

$('#toggle').click(function () {
      $('#div1').toggle(1000);
    });

JQuery案例–下拉菜单

首先设置三个一级菜单，每个一级菜单下有三个二级菜单，
然后给一级菜单的li标签设置鼠标移入事件，二级菜单ul显示。 给一级菜单li设置鼠标离开事件，二级菜单隐藏。

   //鼠标移入事件.
    $('.wrap>ul>li').mouseenter(function () {
      //$(this).children('ul').css('display','block');
      //简写
      $(this).children('ul').stop(true,false).slideDown(300);
    });

  //鼠标移出事件.
    $('.wrap>ul>li').mouseleave(function () {
      //$(this).find('ul').css('display','none');
      //简写
      $(this).find('ul').stop(true,false).slideUp(150);
    });

JQuery案例–轮播图

创建图片容器 class=“slider”，设置span标签左滑箭头（arrow-left）、右滑箭头（arrow-right）

$(function () {
        /*获取所有的图片*/
        var $lis = $('.slider li');
        /*轮播图的程序的核心点  索引*/
        var index = 0;
        /*1.当点击左边按钮   图片切换上一张*/
        $('.arrow-left').click(function () {
            index --;
            /*循环的判断*/
            if(index < 0){
                index = $lis.length-1;
            }
            /*根据索引去找到对应的图片淡入显示  其他的图片淡出隐藏*/
            $lis.eq(index).fadeIn().siblings().fadeOut();
        });
        /*2.当点击右边按钮   图片切换下一张*/
        $('.arrow-right').click(function () {
            index ++;
            /*循环的判断*/
            if(index > ($lis.length-1)){
                index = 0;
            }
            /*根据索引去找到对应的图片淡入显示  其他的图片淡出隐藏*/
            $lis.eq(index).fadeIn().siblings().fadeOut();
        });
    })