jQuery（ 一）——基本概念

jQuery官网

jQuery基本概念

学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常见的效果。

 

为什么要学习jQuery？

使用javascript开发过程中，有许多的缺点：

1. 不能有多个入口函数-----window.onLoad()
2. 原生JS的API一般太长太难记
3. 原生JS部分代码冗余
4. 容错性
5. 兼容性问题

jQuery初体验

$(document).ready(function () {
    $("#btn1").click(function () {
        //隐式迭代：偷偷的遍历，在jQuery中，不需要手动写for循环了，会自动进行遍历。
        $("div").show(200);
    });
​
    $("#btn2").click(function () {
        $("div").text("我是内容");
    });
});

 

优点总结：

1. 可以写多个入口函数
2. 方法易记
3. 代码冗余度低
4. 容错性好
5. 兼容性高（兼容各种主流浏览器）

没有对比，就没有伤害，有了对比，处处戳中要害。

 

什么是jQuery?

jQuery的官网 http://jquery.com/ jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。

js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js）

 

我们知道了，jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发，其实就是一个加强版的common.js，因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。

 

jQuery的版本

官网下载地址：http://jquery.com/download/ jQuery版本有很多，分为1.x 2.x 3.x

大版本分类：

1.x版本：能够兼容IE678浏览器
2.x版本：不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。
​
3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）

关于压缩版和未压缩版

jquery-1.12.4.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本没有颗阅读性。
jquery-1.12.4.js:未压缩版本，适用于学习与开发环境，源码清晰，易阅读。

jQuery的入口函数

使用jQuery的三个步骤：

1. 引入jQuery文件
2. 入口函数
3. 功能实现

关于jQuery的入口函数：

//第一种写法
$(document).ready(function() {
    
});
//第二种写法
$(function() {
    
});

 

jQuery入口函数与js入口函数的对比

1.  JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
2.  jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

$函数
  $和jQuery完全等价。
      能使用$的地方，就能是jQuery
      console.log($ === jQuery); //true
  $是一个函数,根据传入的参数不同，实现不同的功能。
     a. 参数是一个函数，功能就是入口函数
        $(function () {

        });

     b. document
        参数是一个对象，DOM对象（元素），会把这个DOM对象转换成jquery对象

     c. 字符串（最常用）选择器
        $("#one")    $(".one")

 

jQuery对象与DOM对象的区别（重点）

1. DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
2. jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
3. jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合（伪数组））
4. DOM对象与jQuery对象的方法不能混用。

DOM对象转换成jQuery对象：【联想记忆：花钱】

var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

jQuery对象转换成DOM对象：

var $li = $(“li”);
//第一种方法（推荐使用）
$li[0]
//第二种方法
$li.get(0)
​

【练习：隔行变色案例.html】

 

选择器

什么是jQuery选择器

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。

jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。【查看jQuery文档】

jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。

基本选择器

名称	用法	描述
ID选择器	$(“#id”);	获取指定ID的元素
类选择器	$(“.class”);	获取同一类class的元素
标签选择器	$(“div”);	获取同一类标签的所有元素
并集选择器	$(“div,p,li”);	使用逗号分隔，只要符合条件之一就可。
交集选择器	$(“div.redClass”);	获取class为redClass的div元素
通用选择器	$("*");	获取所有元素

总结：跟css的选择器用法一模一样。

层级选择器

名称	用法	描述
子代选择器	$(“ul>li”);	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等
相邻兄弟选择器	$("ul + ol");	使用+号，代表相邻兄弟选择器，获取ul后面紧邻的兄弟元素ol（相当于筛选选择器的next方法）
	$("#id ~ li")	使用~号，获取#id元素后的全部li兄弟元素

跟CSS的选择器一模一样。

过滤选择器

这类选择器都带冒号:

名称	用法	描述
:eq（index）	$(“li:eq(2)”).css(“color”, ”red”);	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(“li:odd”).css(“color”, ”red”);	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”).css(“color”, ”red”);	获取到的li元素中，选择索引号为偶数的元素
:selected	$(“select>option:selected”).css(“color”, ”red”);	获取被选中的option元素
:focus		获取被获取焦点的元素
:animated		获取这正在执行动画的所有元素
:lt(index)		获取小于索引号为2的元素，索引号从0开始
:gt(index)		获取于索引号为2的元素，索引号从0开始
:hidden		获取被隐藏的元素
:visible		获取可见元素
还有属性选择器[ ]	("input[type:text]")	。。。。。

【案例：隔行变色】

<script>
  $(function () {
    //设置奇数行li标签颜色为天蓝色.
    $('li:odd').css('backgroundColor','skyblue');

    //设置偶数行li标签背景色为粉色
    $('li:even').css('backgroundColor','pink');

    //首尾两行li显示红色.
    $('li:eq(0)').css('backgroundColor','red');
    $('li:eq(9)').css('backgroundColor','red');

  });
</script>

筛选选择器(方法)

筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

名称	用法	描述
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”)，子类选择器
find(selector)	$(“ul”).find(“li”);	相当于$(“ul li”),后代选择器
siblings(selector)	$(“#first”).siblings(“li”);	查找兄弟节点，不包括自己本身。
parent()	$(“#first”).parent();	查找父亲
eq(index)	$(“li”).eq(2);	相当于$(“li:eq(2)”),index从0开始
next()	$(“li”).next()	找下一个兄弟
prev()	$(“li”).prev()	找上一次兄弟
prevAll()	$(“li”).prevAll()	前面所有的兄弟
nextAll()	$(“li”).nextAll()	后面所有的兄弟

【案例：下拉菜单】this+children+mouseenter+mouseleave
<script>
  $(function () {
    //需求: 给一级菜单li设置鼠标移入事件，二级菜单显示。
    //      给一级菜单li设置鼠标离开事件，二级菜单隐藏。


    //获取一级菜单li的方式:
    //$('li');//不行
    //$('ul>li');//不行
    //$('.wrap li');//不行
    //$('.wrap>ul>li')//可行的.


    //1.给一级菜单li设置鼠标移入事件，二级菜单显示。
    $('.wrap>ul>li').mouseover(function () {
      //console.log(this);//谁触发了鼠标移入事件,那这个this就是谁,this还是一个dom对象.
      // $(this).children('ul').css('display','block');//显示就是更改display属性为block.
      $(this).children('ul').show();//show()方法本质上还是更新display属性为block.
    });

    //2.给一级菜单li设置鼠标离开事件，二级菜单隐藏。
    $('.wrap>ul>li').mouseout(function () {
      $(this).children('ul').hide(); //hide()方法本质上还是更新display属性为none
    });



    //3.思考题:
    //为什么不给一级菜单a标签设置鼠标移入和离开事件?
    //因为这样的话,选不到二级菜单.
    // $('.wrap>ul>li>a').mouseover(function () {
    //   $(this).siblings('ul').show();
    // });
    // $('.wrap>ul>li>a').mouseout(function () {
    //   $(this).siblings('ul').hide();
    // });


  });
</script>
事件改进：
<script>
  $(function () {
    //需求: 给一级菜单li设置鼠标移入事件，二级菜单显示。
    //      给一级菜单li设置鼠标离开事件，二级菜单隐藏。

    //1.给一级菜单li设置鼠标移入事件，二级菜单显示。
    var i = 0;
    $('.wrap>ul>li').mouseenter(function () {
      i++;
      console.log(i);
      $(this).children('ul').show();
    });

    //2.给一级菜单li设置鼠标离开事件，二级菜单隐藏。
    $('.wrap>ul>li').mouseleave(function () {
       $(this).children('ul').hide();
    });


    //mouseover  事件在鼠标移动到选取的元素及其子元素上时触发 。
    //mouseenter 事件只在鼠标移动到选取的元素上时触发。


    //以后如果有鼠标移入事件,请使用mouseenter,而不是mouseover.
    //鼠标离开事件使用mouseleave,就不要使用mouseout.


  });
</script>

【案例：突出展示】siblings+find
<script>
  $(function () {
    //需求1:给小人物所在的li标签设置鼠标移入事件:当前li标签透明度为1,其他的兄弟li标签透明度为0.4
    //需求2:鼠标离开大盒子,所有的li标签的透明度改成1.


    //获取小人物们所在的li
    //$('.wrap li')//可以的
    //console.log($('.wrap').find('li'));//可以的

    //需求1:
    $('.wrap').find('li').mouseenter(function () {
        //console.log($(this).css('opacity', 1));//这个css方法有返回值,返回值就是设置这个方法的元素本身.
        $(this).css('opacity', 1).siblings('li').css('opacity',0.4);
    });

    //需求2:
    $('.wrap').mouseleave(function () {
        //$('.wrap').find('li').css('opacity',1);

        //console.log($(this));//在这个离开事件中,this是这整个大盒子.
        $(this).find('li').css('opacity',1);
    });

  });
</script>

【案例：手风琴】next+parent
<script>
    $(function () {
        //需求:点击标题li标签,对应的div显示, 他的兄弟标签li下面的div隐藏.
        $('.parentWrap>.menuGroup').click(function () {
            //jQuery特性:隐式迭代
            //jQuery特性:链式编程,在于一个方法返回的是一个jQuery对象,既然是jQueyr对象就可以继续点出jQuery的方法来.
            $(this).children('div').show().parent().siblings('li').children('div').hide();
        });

    });
</script>

【案例：淘宝精品】index+eq
<script>
      $(function () {
          //需求1:给左边的li标签们设置鼠标移入事件,让中间索引对应的li显示,其他的li隐藏.
          //需求2:给右边的li标签们设置鼠标移入事件,让中间索引对应的li显示,其他的li隐藏.

          //需求1:
          $('#left>li').mouseenter(function () {
              //获取当前鼠标移入的这个li标签的索引.
              var idx = $(this).index();//索引:表示的是这个元素在他兄弟元素间的排行.
              //console.log(idx);
              //让中间索引对应的li显示,其他的li隐藏.
              //$('#center>li:eq('+idx+')'); //字符串的拼接
              $('#center>li').eq(idx).show().siblings('li').hide();
          });

          //需求2:
          $('#right>li').mouseenter(function () {
              //获取当前鼠标移入的这个li标签的索引.
              var idx = $(this).index();
              idx += 9;//9不要写死,9是左边li标签的个数.
              //让中间索引对应的li显示,其他的li隐藏.
              $('#center>li').eq(idx).show().siblings('li').hide();
          });




          //因为age已经成为字符串的一部分了.不能拿到age变量的值.
          // var age = 18;
          // console.log("我的名字是age");


          //思考题:
          //为什么是给li标签设置鼠标移入事件,而不是给a标签设置鼠标移入事件?
          //因为给a标签设置的话,不能拿到正确的索引.
          // $('#left a').mouseenter(function () {
          //    var idx =  $(this).index();
          //     console.log(idx);
          // });

      });
   </script>