jQuery api中文手册：https://jqueryapi.net/

1 jQuery简介

1.1 安装与引入

  • 下载地址：[Download jQuery | jQuery](https://jquery.com/download/)
  • 选择生产环境（production)：
    • 看源码，选择development.js
  • 进入后，ctrl+A，全选，ctrl+C，复制。新建jQuery.min.js，将复制的代码粘贴进去

  • 引入： 

    1. <script src="./jquery.min.js"></script>

  • cdn引入： 

    1. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

1.2 jQuery的入口函数

等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成。原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。相当于原生的DOMContentLoaded事件。可以放页面上方。

  1. <script>
  2.   // 1. 等着页面DOM加载完毕再去执行js 代码
  3.   $(document).ready(function() {
  4.     $('div').hide();
  5.   })
  6.   // 下面是上面的简化版
  7.   // 2.  等着页面DOM加载完毕再去执行js 代码
  8.   $(function() {
  9.     $('div').hide();
  10.   })
  11. </script>

1.3 顶级对象$

  • $ 是jQuery的别称（另外的名字）
  1. // 二者等价
  2. $(function() {
  3.   alert(11)
  4. });
  6. jQuery(function() {
  7.   // alert(11)
  8.   // $('div').hide();
  9.   jQuery('div').hide();
  10. });
  • $同时也是jQuery的 顶级对象，和js中的window一样

2 jQuery基本api

2.1 jQuery对象

  • 概念
    • jQuery 方法获取的元素就是 jQuery 对象。
    • jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。
  • 创建
    ```javascript //1、创建节点，$(“标签”) 类似js document.createElement(“li”) console.log($(“
  • 我是li创建的标签
    • “))

//2、创建节点，$(“ul”).html(“

  • “) 类似js innerHTML 因为此属性，识别标签 会覆盖原来的内容 console.log($(“ul”).html(“
  • 我是thml创建的li
    • “))

    2. -  和DOM元素互转   
    3. ```javascript
    4. // dom转jQuery
    5. let div = document.querySelector(".div");
    6. let $div = $(div);
    1. // jQuery转dom
    2. let div = $('div')[0];

    2.2 选择器

    • 基本选择器
      • 用法和document.querySelectorAll一样，$(‘类名’)

    • 筛选选择器 

      1. $("ul li:first").css("color", "red");
      2. $("ul li:last").css("color", "red");
      3. $("ul li:eq(2)").css("color", "blue"); // 选中第三个li
      4. $("ol li:odd").css("color", "skyblue"); // 选中奇数个li
      5. $("ol li:even").css("color", "pink"); // 选中偶数个li

    • 筛选方法 

      1. // 父  parent()  返回的是 最近一级的父级元素
      2. console.log($(".son").parent());
      3. // 所有祖先元素
      4. console.log($(".four").parents());
      5. console.log($(".four").parents(".one"));
      6. // 子，nav自子代中的p
      7. $(".nav").children("p").css("color", "red");
      8. // 后代，nav中的p
      9. $(".nav").find("p").css("color", "red");
      10. // 选择兄弟元素中的li
      11. $("ol .item").siblings("li").css("color", "red");
      12. // 我们可以利用选择方法的方式选择 更推荐这种写法
      13. $("ul li").eq(2).css("color", "blue");
      14. // 判断是否有某个类名
      15. console.log($("div:first").hasClass("current"));
      16. console.log($("div:last").hasClass("current"));

    • 排他思想

      • 只有选择的元素具有背景色
      • 隐式迭代：jQuery内部会遍历
    1. $(function() {
    2.   // 1. 隐式迭代 给所有的按钮都绑定了点击事件
    3.   $("button").click(function() {
    4.     // 2. 当前的元素变化背景颜色
    5.     $(this).css("background", "pink");
    6.     // 3. 其余的兄弟去掉背景颜色 隐式迭代
    7.     $(this).siblings("button").css("background", "");
    8.   });
    9. })
    • 链式编程 
      1. // 只有选择的元素具有背景色
      2. $(this).css('color', 'red').sibling().css('color', '');
      1. $(function() {
      2. // 1.点击上部的li，当前li 添加current类，其余兄弟移除类
      3. $(".tab_list li").click(function() {
      4.  // 链式编程操作
      5.  $(this).addClass("current").siblings().removeClass("current");
      6.  // 2.点击的同时，得到当前li 的索引号
      7.  var index = $(this).index();
      8.  console.log(index);
      9.  // 3.让下部里面相应索引号的item显示，其余的item隐藏
      10.  $(".tab_con .item").eq(index).show().siblings().hide();
      11. });
      12. })

    2.3 样式操作

    • 读取css属性 

      1. console.log($("div").css("width"));

    • 设置css属性 

      1. $("div").css("width", "300px");
      1. $("div").css({
      2. width: 400,
      3. height: 400,
      4. backgroundColor: "red"
      5. // 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
      6. })

    • 切换类 

      1. $(function() {
      2. // 1. 添加类 addClass()
      3. $("div").click(function() {
      4.  // $(this).addClass("current");
      5. });
      6. // 2. 删除类 removeClass()
      7. $("div").click(function() {
      8.  $(this).removeClass("current");
      9. });
      10. // 3. 切换类 toggleClass()
      11. $("div").click(function() {
      12.  $(this).toggleClass("current");
      13. });
      14. })

    2.4 动画效果

    2.4.1 显示与隐藏

    1. <button>显示</button>
    2. <button>隐藏</button>
    3. <button>切换</button>
    4. <div></div>
    1. div {
    2.   width: 150px;
    3.   height: 300px;
    4.   background-color: pink;
    5. }
    1. $(function() {
    2.   $("button").eq(0).click(function() {
    3.     $("div").show(1000, function() {
    4.       alert(1);
    5.     });
    6.   })
    7.   $("button").eq(1).click(function() {
    8.     $("div").hide(1000, function() {
    9.       alert(1);
    10.     });
    11.   })
    12.   $("button").eq(2).click(function() {
    13.     $("div").toggle(1000);
    14.   })
    15.   // 一般情况下，我们都不加参数直接显示隐藏就可以了
    16. });

    2.4.2 滑动

    1. $(function() {
    2.   $("button").eq(0).click(function() {
    3.     // 下滑动 slideDown()
    4.     $("div").slideDown();
    5.   })
    6.   $("button").eq(1).click(function() {
    7.     // 上滑动 slideUp()
    8.     $("div").slideUp(500);
    9.   })
    10.   $("button").eq(2).click(function() {
    11.     // 滑动切换 slideToggle()
    12.     $("div").slideToggle(500);
    13.   });
    14. });

    2.4.3 等待

    1. $(".nav>li").hover(function() {
    2.   // stop 方法必须写到动画的前面，先停止之前的动画
    3.   $(this).children("ul").stop().slideToggle();
    4. });

    2.4.4 淡入淡出

    1. <button>淡入效果</button>
    2. <button>淡出效果</button>
    3. <button>淡入淡出切换</button>
    4. <button>修改透明度</button>
    5. <div></div>
    1. div {
    2.   width: 150px;
    3.   height: 300px;
    4.   background-color: pink;
    5.   display: none;
    6. }
    1. $(function() {
    2.   $("button").eq(0).click(function() {
    3.     // 淡入 fadeIn()
    4.     $("div").fadeIn(1000);
    5.   })
    6.   $("button").eq(1).click(function() {
    7.     // 淡出 fadeOut()
    8.     $("div").fadeOut(1000);
    9.   })
    10.   $("button").eq(2).click(function() {
    11.     // 淡入淡出切换 fadeToggle()
    12.     $("div").fadeToggle(1000);
    13.   });
    14.   $("button").eq(3).click(function() {
    15.     //  修改透明度 fadeTo() 这个速度和透明度要必须写
    16.     $("div").fadeTo(1000, 0.5);
    17.   });
    18. });

    2.4.5 自定义动画效果

    1. <button>动起来</button>
    2. <div></div>
    1. div {
    2.   position: absolute;
    3.   width: 200px;
    4.   height: 200px;
    5.   background-color: pink;
    6. }
    1. $(function() {
    2.   $("button").click(function() {
    3.     $("div").animate({
    4.       left: 500,
    5.         top: 300,
    6.         opacity: .4,
    7.         width: 500
    8.     }, 500);
    9.   })
    10. })

    2.5 属性操作

    • 固有属性 

      1. // element.prop("属性名") 获取元素固有的属性值
      2. console.log($("a").prop("href"));
      3. // 设置固有属性
      4. $("a").prop("title", "我们都挺好");

    • 自定义属性 

      1. // 元素的自定义属性 我们通过 attr()
      2. console.log($("div").attr("index"));
      3. $("div").attr("index", 4);
      4. console.log($("div").attr("data-index"));

    • 数据缓存，这样设置的属性不会出现在dom结构中，但是可以获取 

      1. // 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
      2. $("span").data("uname", "andy");
      3. console.log($("span").data("uname"));
      4. // 这个方法获取data-index h5自定义属性 第一个 不用写data-  而且返回的是数字型
      5. console.log($("div").data("index"));

    2.6 内容文本

    1. // 获取设置元素内容 html()
    2. console.log($("div").html());
    3. // $("div").html("123");
    4. // 获取设置元素文本内容 text()
    5. console.log($("div").text());
    6. $("div").text("123");
    8. // 获取设置表单值 val()
    9. console.log($("input").val());
    10. $("input").val("123");

    2.7 元素操作

    2.7.1 遍历元素

    • 隐式迭代 

      1. $("div").css("color", "red");

    • 遍历dom 

    1. $("div").each(function (index, domEle) { xxx; }）
    • each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
    • 里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
    • 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle) 
    1. var sum = 0;
    2. // 1. each() 方法遍历元素 
    3. var arr = ["red", "green", "blue"];
    4. $("div").each(function(i, domEle) {
    5.   // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
    6.   // console.log(index);
    7.   // console.log(i);
    8.   // 回调函数第二个参数一定是 dom元素对象 也是自己命名
    9.   // console.log(domEle);
    10.   // domEle.css("color"); dom对象没有css方法
    11.   $(domEle).css("color", arr[i]);
    12.   sum += parseInt($(domEle).text());
    13. })

    • 遍历任意数据 

      1. $.each(object，function (index, element) { xxx; }）
      • $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
      • 里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容 
    1. $.each({
    2.   name: "andy",
    3.   age: 18
    4. }, function(i, ele) {
    5.   console.log(i); // 输出的是 name age 属性名
    6.   console.log(ele); // 输出的是 andy  18 属性值
    7. })

    2.7.2 增删元素

    1. $(function() {
    2.   // 1. 创建元素
    3.   var li = $("<li>我是后来创建的li</li>");
    4.   // 2. 添加元素
    6.   // (1) 内部添加
    7.   // $("ul").append(li);  内部添加并且放到内容的最后面 
    8.   $("ul").prepend(li); // 内部添加并且放到内容的最前面
    10.   // (2) 外部添加
    11.   var div = $("<div>我是后妈生的</div>");
    12.   // $(".test").after(div);
    13.   $(".test").before(div);
    14.   // 3. 删除元素
    15.   // $("ul").remove(); 可以删除匹配的元素 自杀
    16.   // $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
    17.   $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子
    18. })

    2.7.3 元素尺寸

    1. $(function() {
    2.   // 1. width() / height() 获取设置元素 width和height大小 
    3.   console.log($("div").width());
    4.   // $("div").width(300);
    6.   // 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小 
    7.   console.log($("div").innerWidth());
    9.   // 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小 
    10.   console.log($("div").outerWidth());
    12.   // 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
    13.   console.log($("div").outerWidth(true));
    14. })

    2.7.4 元素位置

    1. $(function() {
    2.   // 1. 获取设置距离文档的位置（偏移） offset
    3.   console.log($(".son").offset());
    4.   console.log($(".son").offset().top);
    5.   // $(".son").offset({
    6.   //     top: 200,
    7.   //     left: 200
    8.   // });
    9.   // 2. 获取距离带有定位父级位置（偏移） position   如果没有带有定位的父级，则以文档为准
    10.   // 这个方法只能获取不能设置偏移
    11.   console.log($(".son").position());
    12.   // $(".son").position({
    13.   //     top: 200,
    14.   //     left: 200
    15.   // });
    16. })

    2.7.5 滚动位置

    1. <div class="back">返回顶部</div>
    2. <div class="container"></div>
    1. body {
    2.   height: 2000px;
    3. }
    5. .back {
    6.   position: fixed;
    7.   width: 50px;
    8.   height: 50px;
    9.   background-color: pink;
    10.   right: 30px;
    11.   bottom: 100px;
    12.   display: none;
    13. }
    15. .container {
    16.   width: 900px;
    17.   height: 500px;
    18.   background-color: skyblue;
    19.   margin: 400px auto;
    20. }
    1. $(function() {
    2.   $(document).scrollTop(100);
    3.   // 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()
    4.   // 页面滚动事件
    5.   var boxTop = $(".container").offset().top;
    6.   $(window).scroll(function() {
    7.     // console.log(11);
    8.     console.log($(document).scrollTop());
    9.     if ($(document).scrollTop() >= boxTop) {
    10.       $(".back").fadeIn();
    11.     } else {
    12.       $(".back").fadeOut();
    13.     }
    14.   });
    15.   // 返回顶部
    16.   $(".back").click(function() {
    17.     // $(document).scrollTop(0);
    18.     $("body, html").stop().animate({
    19.       scrollTop: 0
    20.     });
    21.     // $(document).stop().animate({
    22.     //     scrollTop: 0
    23.     // }); 不能是文档而是 html和body元素做动画
    24.   })
    25. })

    3 事件

    • mouseover
    • show
    • hover
    • hide
    • index

    3.1 事件绑定

    • 单个事件
    1. // 1. 单个事件注册
    2. $("div").click(function() {
    3.   $(this).css("background", "purple");
    4. });
    5. $("div").mouseenter(function() {
    6.   $(this).css("background", "skyblue");
    7. });
    • 多个事件
    1. // 2. 事件处理on
    2. // (1) on可以绑定1个或者多个事件处理程序
    3. $("div").on({
    4.   mouseenter: function() {
    5.     $(this).css("background", "skyblue");
    6.   },
    7.   click: function() {
    8.     $(this).css("background", "purple");
    9.   },
    10.   mouseleave: function() {
    11.     $(this).css("background", "blue");
    12.   }
    13. });
    14. $("div").on("mouseenter mouseleave", function() {
    15.   $(this).toggleClass("current");
    16. });
    • 事件委托
    1. // (2) on可以实现事件委托（委派）
    2. // $("ul li").click();
    3. $("ul").on("click", "li", function() {
    4.   alert(11);
    5. });
    6. // click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
    • 给未来动态创建的元素绑定事件
    1. // (3) on可以给未来动态创建的元素绑定事件
    2. // $("ol li").click(function() {
    3. //     alert(11);
    4. // })
    5. $("ol").on("click", "li", function() {
    6.   alert(11);
    7. })
    8. var li = $("<li>我是后来创建的</li>");
    9. $("ol").append(li);

    3.2 事件解绑

    1. $(function() {
    2.   $("div").on({
    3.     click: function() {
    4.       console.log("我点击了");
    5.     },
    6.     mouseover: function() {
    7.       console.log('我鼠标经过了');
    8.     }
    9.   });
    10.   $("ul").on("click", "li", function() {
    11.     alert(11);
    12.   });
    13.   // 1. 事件解绑 off 
    14.   // $("div").off();  // 这个是解除了div身上的所有事件
    15.   $("div").off("click"); // 这个是解除了div身上的点击事件
    16.   $("ul").off("click", "li");
    17.   // 2. one() 但是它只能触发事件一次
    18.   $("p").one("click", function() {
    19.     alert(11);
    20.   })
    21. })