jQuery02

Ordbiao

于 2021-05-15 21:39:57 发布

阅读量127

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/tooHar/article/details/116856950

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

笔记目录

小概
1. 类操作
2. 动画
3. 节点操作
- 3.1 创建节点
- 3.2 追加节点
总结

小概

本章学习jQuery的三个部分：类操作，动画，节点操作。原理也是使用原生JS中的方法封装实现的，只不过使用起来更简洁方便。关键词：类操作 addClass(),removeClass(),hasClass(),toggleClass()；动画 show(),hide(),slideDown(),slideUp(),fadeIn(),fadeOut(),animate(),stop()；节点操作 html(),$(),append(),prepend(),appendTo(),prependTo(),before(),after(),empty(),remove(),clone()。

提示：以下是本篇文章正文内容，下面案例可供参考

1. 类操作

无非就老生常谈：增删改查

1.1 添加类名

语法：元素.addClass(‘类名’)

      $('#addClass').click(function () {
        //1.1 给id为div1的元素添加类. 
        $('#div1').addClass('fontSize30');
        //$('#div1').addClass('fontSize30 width200');

        //1.2 给div们添加类. 
        //$('div').addClass('width200'); //有隐式迭代.
      });

1.2 删除类

语法：元素.removeClass(‘类名’)

     $('#removeClass').click(function () {
        //2.1 给id为div1的元素移除类. 
        //$('#div1').removeClass('fontSize30');
        //$('#div1').removeClass('fontSize30 width200');

        //2.2 给div们移除类
        $('div').removeClass('width200'); //有隐式迭代.
      });

1.3 判断类

(查看是否存在这个类名)语法：元素.hasClass(‘类名’)
返回值是boolear类型

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

1.4 切换类

元素有这个类就移除这个类,没有这个类就添加这个类.
语法：元素.toggleClass(‘类名’)

      $('#toggleClass').click(function () {
        $('#div1').toggleClass('fontSize30');
      });

1.5 修改类

可以使用attr()修改，原生js中的attribute属性吗？自定义属性(setattributes,getattribute，removeattribute)
元素.attr(‘属性名’，‘属性值’)

       //克隆
        let $cloneDiv = $('#div1').clone();
        //修改一下克隆节点的id 
        $cloneDiv.attr('id','div2');  //把id='div1'改成div2
        console.log($cloneDiv);

2. 动画

2.1 三组基本动画

显示show() / 隐藏hide()

    $(function () {
      //1.显示动画 show(参数1,参数2)
      //参数1: 动画执行的时长,毫秒数,给代表动画时长的单词('slow' 'normal' 'fast')
      //参数2: 动画执行完毕后的回调函数.
      $('#show').click(function () {
        //1.1 show()不给参数就是直接显示没有动画效果. 
        $('#div1').show();
        //1.2 
        $('#div1').show(1000);
        $('#div1').show('normal');
        //1.3 
         $('#div1').show(1000,function(){
           console.log('动画做完了');
         });
      });

滑入slideDown() / 划出slideUp()

    $(function () {
      //1.滑入 slideDown(参数1,参数2)
      //参数1: 动画执行的时长
      //参数2: 动画执行完毕后的回调函数
      $('#slideDown').click(function () {
        //1.1 不给参数也有滑入的效果,时长是默认的normal(400ms)
        //$('#div1').slideDown();

        //1.2 
        $('#div1').slideDown(1000);

        //1.3 
        // $('#div1').slideDown(1000,function(){
        //   console.log('滑入了');
        // });
      });

      //2.滑出 slideUp(参数1,参数2);
      $('#slideUp').click(function () {
        $('#div1').slideUp(1000);
      });

      //3.切换 slideToggle(参数1,参数2)
      $('#slideToggle').click(function () {
        $('#div1').slideToggle(1000);
      });

    });

淡入fadeIn() / 淡出fadeOut()

    $(function () {
      //1.淡入 fadeIn(参数1,参数2)
      //参数1: 动画执行的时长
      //参数2: 动画执行完毕后的回调函数
      $('#fadeIn').click(function () {
        //1.1 不给参数有默认的400ms的动画时长. 
        //$('#div1').fadeIn();

        //1.2 
        $('#div1').fadeIn(1000);

        //1.3 
        // $('#div1').fadeIn(1000,function(){
        //   console.log('淡入了...');
        // });
      });

      //2.淡出 fadeOut()
      $('#fadeOut').click(function () {
        $('#div1').fadeOut(1000);
      });

      //3.切换 fadeToggle()
      $('#fadeToggle').click(function () {
        $('#div1').fadeToggle(1000);
      });

      //4.淡入到哪里 fadeTo()
      $('#fadeTo').click(function () {
        $('#div1').fadeTo(1000,0.5,function(){
          console.log('到了');
        })
      })
    });

fadeIn(500):（color）由浅到深慢慢出现,这个过程是500毫秒
fadeOut(500)：由深到浅慢慢消失，这个过程500毫秒。

2.2 自定义动画

自定义动画: animate(参数1,参数2,参数3,参数4);
参数1: 必填项,是一个对象,做动画的属性们
参数2: 可填项,动画时长
参数3: 可填项,匀速还是缓动,取值是’swing’或者’linear’, 如果不写默认是swing
参数4: 可填项,动画执行完毕后的回调函数

        $('#div1').animate({
          left: 800,
          width: 300,
          height: 300,
          opacity: 0.5
        }, 3000, 'swing', function () {
          //继续让div1做动画. 
          $('#div1').animate({
            left: 400,
            width: 100,
            height: 100,
            opacity: 1
          },3000,'linear');
        });

自定义动画animate()，记住括号里面的4个参数，这个方法就掌握了一半了。

2.3 停止动画

stop方法：停止动画效果
stop(clearQueue, jumpToEnd);
第一个参数：是否清除队列
第二个参数：是否跳转到当前动画的最终效果

      $('#box li').mouseenter(function(){
        $(this).stop(true,false).animate({width:800},500).siblings('li').stop(true,false).animate({width:100},500)
      });

这个方法一般用于在执行动画之前清除以前的动画队列.stop(ture,false)
假如你给一个元素加了移入事件触发动画，然后你一直触发这个事件就会增加动画队列，结果就是，你停止移入了，动画还一直在执行(因为你之前触发了很多次，他们在排队执行),所以你需要在事件触发的时候，先清除之前的动画队列再执行动画。

3. 节点操作

节点操作其实和之前原生JS的操作差不多，增删克隆清空追加

3.1 创建节点

1.html()
本质用来获取 / 设置元素内容的；.html() 括号中不给参数就是获取，html(内容) 给参数就是设置。因为可以吧内容中的标签解析出来，所以可以用来做创建节点.特点：会覆盖原来内容。
原理就是原生中的innerHTML()

     $('#btnHtml1').click(function () {
        //1.1 获取内容 html();
        //console.log($('#div1').html());

        //1.2 设置 html(内容);
        //会覆盖原来的内容. 
        //如果设置的内容中有标签,那会把标签解析出来. 
        $('#div1').html('我是设置的<b>内容</b>');
      });

2.$( )
他创建的元素只存在于内存中.
如果想要在页面上显示就要追加. append()
像不像原生中的createElement()

      $('#btn1').click(function () {
        let $link = $('<a href="https://www.baidu.com">百度一下,你就知道</a>');
        console.log($link);

        //把新创建出来的a标签追加到div1中去. 
        $('#div1').append($link);
      });

3.2 追加节点

1. 子元素追加到父元素

append()
语法: 元素A.append(元素B); 把元素B作为元素A的最后一个子元素添加.
就是父亲元素.append(需要加到最后面的儿子元素)

        let $li32 = $('#li32');
        $('#ul1').append($li32);

appendTo()
语法: 元素B.appendTo(元素A); 把元素B作为元素A的最后一个子元素添加.
To 就是儿子元素放到父亲里面的最后面

    let $li32 = $('#li32');
   	$li32.appendTo($('#ul1'));

prepend()
语法: 元素A.prepend(元素B); 把元素B作为元素A的第一个子元素添加.
prependTo();
语法: 元素B.prependTo(元素A); 把元素B作为元素A的第一个子元素添加.

        let $li32 = $('#li32');
        $('#ul1').prepend($li32);

        let $liNew = $('<li>我是新建的li</li>');
        $liNew.prependTo($('#ul1'));

和append/appendTo用法基本一致，只不过append是加到最后面，prepend是加到最前面

2. 兄弟元素追加

before()
语法: 元素A.before(元素B); 把元素B插到元素A的前面.

let $div = $('<div>我是新创建的div</div>');
        $('#ul1').before($div);

after()
语法: 元素A.after(元素B); 把元素B插入到元素A的后面

        let $div = $('<div>我是新创建的div</div>');
        $('#ul1').after($div);

js原生中只有insertBefore(),jQuery用insertbefore写了个after，真不戳。

3. 清空节点

empty() 清空节点（节点还在，里面的东西没了）
remove() 删除节点（节点没了）

    $(function () {
      //给按钮设置一个点击事件
      $('#btn').click(function () {
        //1.清空节点
        //$('#ul1').html(""); //不推荐.容易造成内存泄漏
        //$('#ul1').empty(); //推荐

        //2.删除节点. 
        $('#li3').remove(); //'自杀'
      });

      //总结
      //清空节点 empty();
      //删除节点 remove();
      

    });

4. 克隆节点

clone()

      //jQuery中克隆节点用 clone()
      //克隆的节点只存在于内存中,如果要在页面上显示就要追加. 
      //不管参数是true还是false,都会克隆后代元素. 
      //如果参数是true,会克隆事件. 
      //如果参数是false,不会克隆事件,默认参数也是false. 
      $('#clone').click(function(){
        //克隆
        let $cloneDiv = $('#div1').clone();
        //修改一下克隆节点的id 
        $cloneDiv.attr('id','div2');
        console.log($cloneDiv);
        //追加. 
        $('body').append($cloneDiv);
        
      });