JQuery学习（三）

JQuery学习（三）

如何查看JQuery的版本？

通过jQuery文件名来查看jQuery的版本其实是不靠谱的做法。
通过以下四种方式可以查看jQuery的版本.
（1）、console.log(jQuery.fn.jquery)；
（2）、console.log(jQuery.prototype.jquery)；
（3）、console.log($.fn.jquery)；（4）、console.log($.prototype.jquery).

多库共存

//如果引入了多个jQuery文件,那么文件后引入使用的$就是谁的jQuery文件.
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);

插件

插件是用来做扩展功能的，jQuery插件库: jq22.com

颜色插件：https://cdn.bootcss.com/jquery-color/2.1.2/jquery.color.js

UI插件：plugin/jquery-ui.js

表格插件：jQuery-table.js

tab栏插件：jQuery-tabs.js

插件封装

1. 给jQuery的原型添加方法.

$('div').width(100).height(100).bgColor('red');
$('div').bgColor('green').width(100).height(100);

2 .给jQuery直接添加方法.

console.log($.add(10, 20));

插件的使用–省市联动

<script src="jquery-1.12.4.js"></script>
<script src="plugin/distpicker.data.js"></script>
<script src="plugin/distpicker.js"></script>
<script>
  $(function () {
    //使用插件
    //1.引入jQuery文件.
    //2.引入插件文件.
    //3.调用插件方法.
    $('#one').distpicker({
      province: "广东省",
      city: "深圳市",
      district: "宝安区"
    });
  });

五星评分案例

需求1：鼠标移入到li标签上,当前li标签和他之前的li标签显示实心五角心,后面的li显示空心五角心

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

需求2：鼠标离开li,所有的li都变成空心

$('.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');
     });

显示迭代

 $(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);
    });

  });