jQuery

方便、快捷、插件丰富

一、jQuery 选择器

1. 标签选择器
    $("tagName");    // 引号里面是标签名，例：div

2. 类（class）选择器
    $(".className");   // 引号里面是类名，例：.box

3. id 选择器
    $("#idName");    // 引号里面是id名，例：#box

4. 通配符
    $("*");    // 引号里面是*，表示所有元素

5. 交集选择器
    $("#idName.className");    // 两个元素之间没有空格
    // ""里面可以是，标签名/类名/id名等，例：div.box 表示既是一个div，又满足class名为box的元素

6. 后代选择器
    $("#idName .className");   // 两个元素有空格
    // ""里面可以是，标签名/类名/id名等，例：#box .boxChild 表示boxChild元素是box元素的子级

【注】$ 是一个函数；返回结果是jQuery 内部的对象；

二、路径内容补充

  js/jquery-3.2.2.js --> 相对于当前HTML文件来说

  ../ --> 当前HTML文件的上一级目录

  ./ --> 代表当前HTML文件所在目录

  / --> 代表服务器根目录
   例： 在HBuilder服务器中： http://127.0.0.1:8020是根目录; 
        在Nginx服务器中，nginx-1.10.3\html是根目录

三、css 访问匹配元素的样式属性

// {"color": "red"}，是css样式参数，是一个JSON对象
$("div").css({"color": "red","backgorund-color": "plum"});

// 也可以不加引号
$("div").css({color: "red"});

// 必须加引号
$("div").css("color", "red");

// 可以得到元素的样式值
var a = $("div").css("color");
console.log(a);    // 结果为div的color样式值，如果找到多个元素，则返回第一个元素的值

四、关于有序号的元素获取

1. $("p");    // 所有的p标签
2. $("p:first");    // 第一个p标签
3. $("p:last");    // 最后一个p标签
4. $("p:eq(3)");    // 下标为3的p标签     或   $("p").eq(3);
5. $("p:lt(3)");    // 下标小于3的p标签
6. $("p:gt(3)");    // 下标大于3的p标签
7. $("p:odd");    // 下标为奇数的p标签
8. $("p:even");    // 下标为偶数的p标签

五、加载完成后执行（当js写在head里面时，使用）

  // 代表DOM元素都加载完毕之后，执行
1. $(document).ready(function(){
       $("div").css("color","red");
   });

  // 1的简写版，效果相同
2. $(function(){
       $("div").css("color","red");
   });

// 原生JS中书写形式
3. window.onload = function(){
      $("div").css("color","red");
   }

【注】document 和 window 对象加载的区别：document 是表示DOM元素都加载完毕之后执行js代码；而window 是表示DOM元素、图片资源都加载完成后执行js代码；一般使用document加载就可以了。

六、鼠标移入、移出事件

jQuery 中的事件比原生JS中少了on

 mouseover 和 mouseenter 鼠标移入事件：
    $("div").mouseover(function(){
        console.log("鼠标移入了")；
    });
    $("div").mouseenter(function(){
        console.log("鼠标移入了")；
    });

mouseout 和 mouseleave 鼠标移出事件
     $("div").mouseout(function(){
        console.log("鼠标移出了")；
    });
    $("div").mouseleave(function(){
        console.log("鼠标移出了")；
    });

【注】：mouseover（mouseout）和mouseenter （mouseleave）的区别：mouseover （mouseout）事件会冒泡；mouseenter （mouseleave）事件不会冒泡；

七、事件的链式调用

隐藏（hide） 和 显示（show）事件

    1. 隐藏事件：
       $("div").hide(speed,easing,fn);

    2. 显示事件：
      $("div").show(speed,easing,fn);
    
    3. 链式调用（原理：因为这些方法默认返回的是jQuery对象）
      $("div").hide(1000).show(1000);    // 表示先隐藏在显示

【注】显示、隐藏事件的参数：speed - 代表执行事件的速度，有三种速度字符串（"slow"(慢)，"normal"(正常)，"fast"(快)）也可以用执行时间的毫秒数值来表示（例：1000）；easing - 表示变化效果，默认为“swing”，可用参数为“linear”，如果想要其他变化样式，需要引入jQuery插件；fn - 动画执行完成之后执行的回调函数，每个元素执行一次。

八、动画（animate）引用

如果引用其他运动样式，则需要在引用jQuery文件之后再引入jQuery插件（插件必须在jQuery文件之后引入）

$(div).animate({"left": 1000},1000);   // 把div向右移动到1000px 的位置，执行事件为1000毫秒

// 先把div 移动到1000px的位置，在执行回调函数，将div 移动到0px的位置
$("div").animate({"left": 1000},1000,function(){
    $(this).animate({"left": 0},1000);   
 });

// 同一个物体，执行两个动画，会先执行第一个，之后再执行第二个
$("div").animate({"left": 1000,"top": 400},1000);
$("div").animate({"left": 0,"top": 400},1000);

// 不同的物体，执行两个动画。会同时执行，互不干扰
$("#box").animate({"left": 1000,"top": 400},1000);
$("#box1").animate({"left": 0,"top": 400},1000);

// 默认执行"linear" 和 "swing"两种动画，如果需要，可以引入插件
$("#box").animate({"left":1000},1000,"easeInOutExpo",function(){});

【注】this 谁调用就是谁，这里this值这个div元素；实现原理：animate 函数内部做了对象冒充，用物体元素代替了回调函数中的this；通过$( this ) 将this 转换为jQuery 对象。

九、鼠标滚动，页面侧边栏跟着滚动

思路： 1. 绑定滚动事件；2. 滚动事件处理函数中（调整广告栏移动，到滚动位置）；

    // 设置 鼠标滚动事件
    $(document).scroll(function(){
        // 得到滚动的高度
        var y = $(document).scrollTop();
        // 让div 跟着移动到页面滚动的高度（+300，是为了让div在页面中间，可以更改）
        $("div").stop(true).animate({"top": 300+y},1000);   // 只执行当前滚动事件，其余停止
    });

【注】stop( true ) 动画执行停止，true表示清除之前的动画执行队列，