jQuery（ 二）——特殊属性操作及事件

jQuery特殊属性操作

Class类操作

Class类方法和css方法作用相同，Class类样式是针对内部和外部样式表，css方法是针对行内样式表

<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>

【案例-tab栏切换.html】
<script>
    $(function () {
        //需求:给tab栏的每一个li标签设置鼠标移入事件: 当前li添加active类,其他的兄弟li移除active类.
        //    找到当前tab栏索引一致的div,让他添加 selected类,其他的兄弟div移除selected类.

        //需求1
        $('.tab>.tab-item').mouseenter(function () {
            $(this).addClass('active').siblings('li').removeClass('active');

            //获取鼠标当前移入的这个li标签的索引
            var idx = $(this).index();

            //需求2:
            $('.products>.main').eq(idx).addClass('selected').siblings('div').removeClass('selected');
        });

    });
</script>

动画方法：show/hide/toggle(显示/隐藏/切换)，slideDown/slideUp/slideToggle(滑入/滑出/切换)，fadeIn/fadeOut/fadeToggle(淡入/淡出/切换)，stop清除动画队列(防止多次点击动画排队情况)，animate(自定义动画)

【显示/隐藏/切换】
<script>
  $(function () {
    //1.显示 show();
    //参数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').click(function () {
      //让id为div1的元素动画影藏.
      //$('#div1').hide();//没有参数没有动画效果.
      $('#div1').hide(2000);
      // $('#div1').hide(2000, function () {
      //   alert('隐藏了');
      // });
    });

    //3.切换 toggle
    //如果元素是隐藏状态就动画显示; 如果元素是显示状态就动画影藏.
    $('#toggle').click(function () {
      $('#div1').toggle(1000);
    });

  });
</script>
【滑入/滑出/切换】
<script>
  $(function () {
    //1.滑入 slideDown(参数1,参数2);
    //参数1: 动画执行的时长
    //参数2: 动画执行完毕后的回调函数
    $('#slideDown').click(function () {
      //让id为div1的元素滑入.
      //$('#div1').slideDown();//没有给参数相当于给了一个默认的时长,mormal代表的400毫秒
      $('#div1').slideDown(2000);
      // $('#div1').slideDown(2000, function () {
      //   alert('滑入完成了..');
      // });
    });


    //2.滑出 slideUp();
    $('#slideUp').click(function () {
      //让id为div1的元素滑出
      $('#div1').slideUp(2000);
      // $('#div1').slideUp(2000, function () {
      //   alert('滑出做完了...');
      // });
    });

    //3.切换 slideToggle();
    //元素是隐藏状态就滑入; 元素是显示状态就滑出.
    $('#slideToggle').click(function () {
      $('#div1').slideToggle(1000);
    });

  });
</script>
【清除动画队列】
<script>
  $(function () {
    //1.开始动画:模拟一个动画队列
    $('#start').click(function () {
      $('div').slideDown(2000).slideUp(2000);
    });

    //2.停止动画: 执行stop方法.
    //stop();
    // 第一个参数：是否清除队列
    // 第二个参数：是否跳转到最终效果
    $('#stop').click(function () {
      //$('div').stop(true,true);
      //$('div').stop(true,false);
      //$('div').stop(false,true);
      $('div').stop(false,false);

      //如果stop()方法不写参数,默认就是两个false.
      //$('div').stop();
    });

  });
</script>
【淡入/淡出/切换】
<script>
  $(function () {
    //1.淡入 fadeIn
    $('#fadeIn').click(function () {
      //让id为div1的这个元素淡入.
      //$('#div1').fadeIn(); //不给参数相当于给了一个默认的动画时长,mormal400毫秒
      $('#div1').fadeIn(1000);
      // $('#div1').fadeIn(2000, function () {
      //   alert('淡入完成了...');
      // });
    });

    //2.淡出 fadeOut
    $('#fadeOut').click(function () {
      //让id为div1的这个元素淡出
      $('#div1').fadeOut(1000);
      // $('#div1').fadeOut(1000, function () {
      //   alert('淡出完成了');
      // });
    });


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


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

  });
</script>
【自定义动画】
<script>
  $(function () {
    //自定义动画 animate();
    //参数1:必选的 对象 代表的是需要做动画的属性
    //参数2:可选的 代表执行动画的时长.
    //参数3:可选的 easing 代表的是缓动还是匀速 linear(匀速)  swing(缓动)   默认不写是缓动
    //参数4:可选的 动画执行完毕后的回调函数.
    $('#lr800').click(function () {

      //让id为div1的元素动画移动到800那个位置.
      // $('#div1').animate({
      //   left:800,
      //   width:200,
      //   height:200,
      //   opacity:0.5
      // },2000,'linear', function () {
      //   alert('动画执行完毕了');
      // });

      $('#div1').animate({
        left:800,
        width:200,
        height:200,
        opacity:0.5
      },2000,'linear', function () {
        //既然这里是一个函数,那就可以写任意的代码,那就可以在这里让div1做动画.
        $('#div1').animate({
          left:400,
          width:300,
          height:300,
          top:150,
          opacity:1
        },2000);
      });

      //让id为div2的元素动画移动到800那个位置.
      // $('#div2').animate({
      //   left:800
      // },2000,'swing');
    });
  });
</script>

 

html()方法和$()动态创建元素以及添加节点的几种方式，empty清空节点/remove移除节点，clone克隆节点

<script>
  $(function () {
    //原生js中创建节点: document.write();  innerHTML;  document.createElement();

    //jQuery中如何创建节点呢?
    //html();   $();


    //1.html();
    //设置或者获取内容的.
    $('#btnHtml1').click(function () {
      //1.1 获取内容: html()方法不给参数
      //获取到元素的所有内容.
      // console.log($('#div1').html());

      //1.2 设置内容: html()方法给参数
      //会把原来的内容给覆盖
      //如果设置的内容中包含了标签,是会把标签给解析出来的.
      $('#div1').html('我是设置的内容<a href="https://www.baidu.com">百度一下</a>');
    });


    //2.$();
    //确实能创建元素,但是创建的元素只存在于内存中,如果要在页面上显示,就要追加.
    $('#btn1').click(function () {
      var $link = $('<a href="http://news.baidu.com/">我是新闻</a>');
      //console.log($link);
      //追加节点.
      $('#div1').append($link);
    });


  });
</script>

<script>
  $(function () {
    //1.append()
    //父元素.append(子元素); //作为最后一个子元素添加.
    $('#btnAppend').click(function () {
      //1.1 新创建一个li标签,添加到ul1中的去.
      // var $liNew = $("<li>我是新创建的li标签</li>");
      // $('#ul1').append($liNew);

      //1.2 把ul1中已经存在的li标签添加到ul中去. 剪切后作为最后一个子元素添加.
      // var $li3 = $('#li3');
      // $('#ul1').append($li3);

      //1.3 把ul2中已经存在的li标签添加到ul1中去.剪切后作为最后一个子元素添加.
      var $li32 = $('#li32');
      $('#ul1').append($li32);
    });


    //2.prepend();
    //父元素.prepend(子元素); //作为第一个子元素添加.
    $('#btnPrepend').click(function () {
      //2.1 新建一个li标签,添加到ul1中去.
      // var $liNew = $("<li>我是新创建的li标签</li>");
      // $('#ul1').prepend($liNew);

      //2.1 把ul1中已经存在的li标签添加到ul1中去. 剪切后作为第一个子元素添加.
      // var $li3 = $('#li3');
      // $('#ul1').prepend($li3);

      //2.2 把ul2中已经存在的li标签添加到ul1中去. 剪切后作为第一个子元素添加.
      var $li32 = $('#li32');
      $('#ul1').prepend($li32);
    });


    //3.before()
    //元素A.before(元素B); //把元素B插入到元素A的前面,作为兄弟元素添加
    $('#btnBefore').click(function () {
      //新建一个div
      var $divNew = $('<div>我是新建的div</div>');
      $('#ul1').before($divNew);
    });

    //4.after();
    //元素A.after(元素B); //把元素B插入到元素A的后面,作为兄弟元素添加.
    $('#btnAfter').click(function () {
      //新建一个div
      var $divNew = $('<div>我是新建的div</div>');
      $('#ul1').after($divNew);
    });


    //5.appendTo();
    //子元素.appendTo(父元素); //把子元素作为父元素的最后一个子元素添加.
    $('#btnAppendTo').click(function () {
      //5.1 新建一个li标签,添加到ul1中去.
      var $liNew = $("<li>我是新创建的li标签</li>");
      $liNew.appendTo($('#ul1'));

    });
  });
</script>

<script>
  //清空元素: empty();
  //移除节点: remove();
  $(function () {
    //给按钮设置点击事件.
    $('#btn').click(function () {
      //1.清空ul.
      //$('#ul1').html(""); //不推荐使用,有可能会造成内存泄漏,不安全.
      // $('#ul1').empty();//推荐使用.

      //2.移除某一个元素.
      // $('#li3').remove(); //"自杀"

      //3.移除ul.但是只能获取li3这个标签.
      $('#li3').parent().remove();

    });
  });
</script>

<script>
  $(function () {
    //给id为div1的这个元素添加一个点击事件.
    $('#div1').click(function () {
      alert('哈哈,我被点击了...');
    });


    //jQuery中克隆节点:clone()
    //只存在与内存中,如果要在页面上显示,就应该追加到页面上.
    //clone()方法参数不管是true还是false,都是会克隆到后代节点的.
    //clone()方法参数是true表示会把事件一起克隆到. 参数如果是false就不会克隆事件. 不给参数默认是false.
    //给按钮设置点击事件
    $('#clone').click(function () {
      var $cloneDiv = $('#div1').clone();
      //修改克隆节点的id
      $cloneDiv.attr('id','div2');
      //console.log($cloneDiv);
      //把克隆的节点追加到body中.
      $('body').append($cloneDiv);
    });

  });
</script>

val方法

val方法用于设置和获取表单元素的值，例如input、textarea的值

//设置值
$("#name").val(“张三”);
//获取值
$("#name").val();

 

html方法与text方法

html方法相当于innerHTML text方法相当于innerText

//设置内容
$(“div”).html(“<span>这是一段内容</span>”);
//获取内容
$(“div”).html()
​
//设置内容
$(“div”).text(“<span>这是一段内容</span>”);
//获取内容
$(“div”).text()

区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。

width方法与height方法

设置或者获取高度

 

//带参数表示设置高度
$(“img”).height(200);
//不带参数获取高度
$(“img”).height();

获取网页的可视区宽高

//获取可视区宽度
$(window).width();
//获取可视区高度
$(window).height();

scrollTop与scrollLeft

设置或者获取垂直滚动条的位置

 

//获取页面被卷曲的高度
$(window).scrollTop();
//获取页面被卷曲的宽度
$(window).scrollLeft();

【案例：仿腾讯固定菜单栏案例】 【案例：小火箭返航案例】

offset方法与position方法

offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。

//获取元素距离document的位置,返回值为对象：{left:100, top:100}
$(selector).offset();
//获取相对于其最近的有定位的父元素的位置。
$(selector).position();

【案例：固定顶部导航栏】

<script>
  $(function () {
    //思路:给页面设置一个滚动事件,时刻监视页面的scrollTop的值,
    // 如果这个值大于第一部分的高度,就设置第二部分为固定定位.
    // 如果这个值小于第一部分的高度,就设置第二部分的定位还原.

    //计算第一部分的高度.
    var topHeight = $('.top').height();
    //计算第二部分的高度.
    var navHeight = $('.nav').height();

    //给页面设置一个滚动事件.
    $(window).scroll(function () {
      //1.获取页面滚出去的距离(被卷曲出去的距离);
      var scrollTopValue =  $(window).scrollTop();
      //2.判断,看scrollTopValue的值是不是大于第一部分的高度.
      if(scrollTopValue >= topHeight){
        //让第二部分固定定位.
        $('.nav').css({
          position:'fixed',
          top:0,
          left:0
        });
        //设置第三部分的margin-top的值为第二部分的高度.
        $('.main').css({
          marginTop:navHeight+10
        });
      }else {
        //让第二部分定位还原.
        $('.nav').css({
          position:'static',
          top:0,
          left:0
        });
        //设置第三部分的margin-top的值为原来的值.
        $('.main').css({
          marginTop:10
        });
      }
    });



  });
</script>

 

attr设置属性或添加属性和removeAttr移除属性

<script>
  $(function () {
    //jQuery中操作属性:attr() removeAttr();
    //1.设置属性
    $('#btn2').click(function () {
      //设置单属性.
      // $('img').attr('src','992.gif');//以前有src属性,更改这个属性.
      // $('img').attr('aaa','哈哈哈');//修改自定义属性.
      // $('img').attr('bbb','bbb');//如果元素原来没有这个属性,那就是添加属性.
      //设置多属性.
      $('img').attr({
        src:'992.gif',
        aaa:"hahaha",
        bbb:'bbb'
      });
    });

    //2.获取属性.
    $('#btn1').click(function () {
      //console.log($('img').attr('src'));//自带的属性可以获取
      //console.log($('img').attr('aaa'));//自定义的属性也可以获取
      console.log($('img').attr('bbb'));//如果没有这个属性,获取到的值就是undefined; attr()设置的属性也是可以获取的.
    });

    //3.移除属性.
    $('#btn3').click(function () {
      //移除单属性.
      // $('img').removeAttr('alt');
      // $('img').removeAttr('aaa');
      // $('img').removeAttr('bbb');

      $('img').removeAttr('alt aaa bbb'); //移除多属性.
    });

  });
</script>
【美女相册】
<script>
  $(function () {
      //1.需求
      //给小图片a标签设置一个单击事件.
      //让id为image的img标签修改src属性为当前点击的a标签的href属性的值
      //让id为des的这个p标签的文本设置为当前点击的这个a标签的title属性的值.

      $('#imagegallery>li>a').click(function () {
          //获取当前点击的a标签的href属性的值和title属性的值。
          var srcValue = $(this).attr('href');
          var contentValue = $(this).attr('title');
          //给img标签的src属性赋值，以及给p标签的内容赋值。
          $('#image').attr('src',srcValue);
          $('#des').text(contentValue);
          //阻止a标签的跳转
          return false;
      });


  });
</script>

对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法

<script>
  $(function () {
    //回忆一下，有一类属性比如：checked，写在元素的身上就表示选中，没有写在元素的身上就表示没有选中。
    //这一类属性，用原生js是如何操作的呢？ 给他设置true或者false, 取值也是得到true或者false.
    // document.getElementById("btn1").onclick = function () {
    //   //设置操作。
    //   //document.getElementById("ckb1").checked = false;
    //   //获取操作。
    //   console.log(document.getElementById("ckb1").checked);
    // };

    //jQuery.
    // $('#btn1').click(function () {
    //   console.log($('#ckb1').attr('checked')); //无论是选中还是没有选中，都返回一个undefined。
    // });

    //原因是：
    //在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法。

     $('#btn1').click(function () {
       console.log($('#ckb1').prop('checked'));
       //如果多选框是选中状态返回一个true； 如果多选框是取消选中状态那返回就是一个false.
     });
  });
</script>
【案例：多选框全选】
<script>
  $(function () {
      //需求1:上面的多选框选中,下面的多选框们跟着选中,上面的多选框没有选中,下面的多选框们跟着不选中.
      //需求2:下面的多选框们,都有单击事件:
      //如果下面的多选框们都选中了,那么上面的那个多选框跟着选中,如果下面多选框有一个没有选中,那么上面的多选框就不选中.

      //需求1：
      $('#j_cbAll').click(function () {
          //获取这多选框的checked值。
          var checkedValue = $(this).prop('checked');
          //console.log(checkedValue);
          //让下面的多选框们的checked跟随这个checkedValue
          $('#j_tb input').prop('checked',checkedValue);
      });

      //需求2：
      $('#j_tb input').click(function () {
          //判断下面的那四个多选框是否都被选中了。
          var numOfAll = $('#j_tb input').length; //获取到下面所有多选框的个数。
          var numOfSelect = $('#j_tb input:checked').length; //获取到下面被选中的多选框的个数。
          console.log(numOfAll + ":" + numOfSelect);
          //判断
          // if(numOfAll == numOfSelect){
          //     //全部被选中。
          //     $('#j_cbAll').prop('checked',true);
          // }else {
          //     //有的有没选中。
          //     $('#j_cbAll').prop('checked',false);
          // }

          //上面这个判断其实可以优化。
          $('#j_cbAll').prop('checked',numOfAll == numOfSelect);
      });

  });
</script>

jQuery事件机制

JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。

jQuery事件发展历程(了解)

简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)

简单事件注册

click(handler)          单击事件
mouseenter(handler)     鼠标进入事件
mouseleave(handler)     鼠标离开事件

特点：不支持同时注册,也不支持动态注册.

   //jQuery注册事件的发展历程. (了解)

    //1.简单事件绑定 click();
     $('div').click(function () {
       console.log("鼠标单击事件");
     });
     $('div').mouseenter(function () {
       console.log("鼠标移入事件...");
     });

bind方式注册事件

//第一个参数：事件类型
//第二个参数：事件处理程序
$("p").bind("click mouseenter", function(){
    //事件响应方法
});

特点：支持同时注册,也不支持动态注册.

    //2. bind方式注册事件
    //支持同时注册,也不支持动态注册.
     $('div').bind({
       mouseenter: function () {
         console.log("鼠标移入事件...");
       },
       click: function () {
         console.log("鼠标单击事件");
       }
    });

delegate注册委托事件

// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".parentBox").delegate("p", "click", function(){
    //为 .parentBox下面的所有的p标签绑定事件
});

特点：支持同时注册,也不支持动态注册.，只能注册委托事件，因此注册时间需要记得方法太多了

    //3.delegate注册委托事件-原理是事件冒泡.
    //支持同时注册,也支持动态注册.
     $('body').delegate('div',{
       mouseenter: function () {
         console.log("鼠标移入事件");
       },
       click: function () {
         console.log("鼠标单击事件");
       }
     });

on注册事件

on注册事件(重点)

jQuery1.7之后，jQuery用on统一了所有事件的处理方法。上面的三种注册绑定事件方式都不用了！

最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。

on注册简单事件（特点：支持同时注册，不支持动态注册.）

// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on( "click", function() {});

on注册委托事件（特点：支持同时注册，支持动态注册.）

// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click",“span”, function() {});----->原理：将span的点击事件委托给selector代理
效果：点击span会触发函数

on注册事件的语法：

// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);
​

事件解绑

unbind方式（不用）

$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件

undelegate方式（不用）

$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件

off方式（推荐）

// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");

触发事件

$(selector).click(); //触发 click事件
$(selector).trigger("click");

满足条件才触发事件 ：

    $('#btn2').on('click', function () {
      var res = confirm('请问林哥帅吗');
      if(res){
        //触发自定义的linge事件.
        $('#one').trigger('linge');
      }
    });

jQuery事件对象

jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。

//screenX和screenY   对应屏幕最左上角的值
//clientX和clientY   距离页面左上角的位置（忽视滚动条）
//pageX和pageY   距离页面最顶部的左上角的位置（会计算滚动条的距离）
​
//event.keyCode 按下的键盘代码
//event.data    存储绑定事件时传递的附加数据
​
//event.stopPropagation()   阻止事件冒泡行为
//event.preventDefault()    阻止浏览器默认行为
//return false:既能阻止事件冒泡，又能阻止浏览器默认行为。

【案例：钢琴版导航（加强）.html】

<script>
  $(function () {

      //获取div
      var $div = $('#bgChange');
      //获取显示按键的span
      var $showCode = $('#keyCodeSpan');

      //给页面注册一个键盘按下事件.
      $(document).on('keydown', function (e) {
          //console.log(e.keyCode); //r 82   g 71   b 66   p 80   y 89
          switch (e.keyCode){
              case 82:
                  $div.css('backgroundColor','red');
                  $showCode.text(82);
                  break;
              case 71:
                  $div.css('backgroundColor','green');
                  $showCode.text(71);
                  break;
              case 66:
                  $div.css('backgroundColor','blue');
                  $showCode.text(66);
                  break;
              case 80:
                  $div.css('backgroundColor','purple');
                  $showCode.text(80);
                  break;
              case 89:
                  $div.css('backgroundColor','yellow');
                  $showCode.text(89);
                  break;
              default :
                  $div.css('backgroundColor','pink');
                  $showCode.text("查无此键");
                  break;
          }
      });

  });
</script>

jQuery补充知识点

链式编程

通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。

end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。

    1.什么时候可以链式编程?
    如果给元素调用一个方法,这个方法有返回值,并且返回的是一个jQuery对象,那就可以继续再点出jQuery方法.
    //$('div').width(100).height(100).css('backgroundColor','red');

    2.必须是jQuery对象才能点出jQuery方法.
    console.log($('div').width(100).width()); 100
    //$('div').width(100).width().height(100); 报错了,因为数值不能点出jQuery方法.

    3.有些时候我们一个方法返回的确实是一个jQuery对象
    但是这个对象又不是我们想要的对象,那这个时候就不要再继续点下去了..

    4.end(); 回到上一个状态.
    //$(this).text(sx_wjx).prevAll().text(sx_wjx).end().nextAll().text(kx_wjx);

    5.end()方法他也是jQuery方法,那他也需要一个jQuery对象才能点出了啊,
    width()方法返回的是一个数值, 数值能点出end()方法来吗? 显然不行.
    //$('div').width(100).width().end().height(100); 不行

【案例：五角星评分案例.html】

<script>
   $(function () {
     //需求1:鼠标移入到li标签上,当前li标签和他之前的li标签显示实心五角心,后面的li显示空心五角心.
     //需求2:鼠标离开li,所有的li都变成空心.
     //需求3:点击li,鼠标离开后,刚才点击的那个li和之前的li都变成实心五角心,后面空心五角心.

     //prev();    上一个兄弟.
     //prevAll(); 之前所有的兄弟
     //next();    下一个兄弟.
     //nextAll(); 之后所有的兄弟

     //声明两个个变量,分别记录这个实心/空心五角心.
     var sx_wjx = '★';
     var kx_wjx = '☆';

     //需求1:
     $('.comment>li').on('mouseenter', function () {
       // //当前鼠标移入的li和他之前的兄弟li都显示实心五角心.
       // $(this).text(sx_wjx).prevAll().text(sx_wjx);
       // //当前鼠标移入的li之后的兄弟li都显示空心五角心.
       // $(this).nextAll().text(kx_wjx);

       //这样不行.
       //$(this).text(sx_wjx).prevAll().text(sx_wjx).nextAll().text(kx_wjx);

       //这样又可行, 加了一个end();
       $(this).text(sx_wjx).prevAll().text(sx_wjx).end().nextAll().text(kx_wjx);

     }).on('mouseleave', function () {
       //需求2:
       $('.comment>li').text(kx_wjx);

       //获取刚才点击的那个li.
       $('.comment>li[clickCurrent]').text(sx_wjx).prevAll().text(sx_wjx);

     }).on('click', function () {
       //需求3:
       //给鼠标当前点击的li做一个记号,为什么要做一个记号,是因为鼠标离开的时候,要知道你刚才点击的是哪一个li.
       //给当前鼠标点击的这个li添加一个独一无二的属性.
       $(this).attr('clickCurrent','current').siblings().removeAttr('clickCurrent');
     });


   });
</script>

each方法

jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。

作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数

// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});

【案例：不同的透明度.html】

<script>
  $(function () {
    //需求:找到所有的li标签,分别设置透明度,透明度是递增到1.

    //1.获取所有的li标签.
    var $lis = $('#ulList').children();
    //console.log($lis);

    //2.给$lis里面的每一个li标签设置透明度.
    //$lis.css('opacity',0.5);//如果这样设置的话,由于隐式迭代那每一个li标签的透明度都设置成了0.5,不符合需求.

    //给每一个对象设置不同的值的时候
    //作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
    $lis.each(function (index,element) {
      // console.log(index); //每一个li标签的索引
      // console.log(element);//每一个li标签,是一个dom对象.

      $(element).css('opacity',(index+1)/10);
    });

  });
</script>

多库共存

jQuery使用$作为标示符，但是如果与其他框架中的$冲突时，jQuery可以释放$符的控制权.

var c = $.noConflict();//释放$的控制权,并且把$的能力给了c

<script src="heima.js"></script>
<script src="jquery-1.12.4.js"></script>
<script src="jquery-3.0.0.js"></script>

<script>
  //1.如何查看jQuery的版本?
  //通过jQuery文件名来查看jQuery的版本是不靠谱的做法.
  //通过以下四种方式可以查看jQuery的版本.
  // console.log(jQuery.fn.jquery);
  // console.log(jQuery.prototype.jquery);
  // console.log($.fn.jquery);
  // console.log($.prototype.jquery);


  //2.如果引入了多个jQuery文件. 那使用的$是哪一个jQuery文件中的呢?
  //那个文件后引入,使用的$就是谁的.
  //console.log($.fn.jquery);


  //3.多库共存
  // var _$ =  $.noConflict(); //3.0.0版本jQuery文件把$符号的控制权给释放了.
  //
  // (function ($) {
  //   //在这个自执行函数中,就可以继续使用$了.
  // }(_$));
//
  // console.log(_$.fn.jquery);//3.0.0
  // console.log(jQuery.fn.jquery);//3.0.0
  // console.log($.fn.jquery);//1.12.4



  //4.多库共存2
  //console.log($.fn.jquery);
  var _$300 = $.noConflict(); //3.0.0版本的jQuery把$的控制权给释放了

  var _$1124 = $.noConflict(); //1.12.4版本的jQuery把$的控制权给释放了

  console.log($);
  console.log(_$1124.fn.jquery);
  console.log(_$300.fn.jquery);


</script>