jQuery的基本操作

jQuery
  是一个快速小巧、功能丰富的第三方JavaScript库
  为我们封装了DOM操作 让我们操作dom节点更加方便
  打扫屋子
    DOM ： 扫把扫地            - 直接操作dom节点 
    jQuery：扫地机器人 吸尘器    - 通过工具操作dom节点
    企业框架：佣人              - 不需要我们去操作dom节点
  功能：
    选取HTML元素 
    操作HTML元素
    CSS操作
    操作HTML事件
    ...
    AJAX
  使用：
    bootcdn 找到资源 把链接引入到HTML文件里
      1. 直接引入网络资源
      <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      2. 将网络资源下载到本地去引入
      <script src="./jquery.js"></script>
      <script src="./jquery.min.js"></script>
    通过 jQuery 或者 $ 去调用相应的属性和方法

    1. $(选择器)
        通过选择器选择符合条件的Element元素 将其保存为jQuery对象
        具体的选择器
          基本选择器
          层次选择器
          伪类选择器
          微元素选择器
          属性选择器
    2. $(html片段)
        将html片段转换为Element 然后再封装为jQuery对象
    3. $(Element元素)
        将Element元素转换为jQuery对象
    4. $(匿名函数)
      匿名函数会在文档加载完成后执行
        $(function () {
            var btn = $('button');
            console.log(btn);
          })
      防止文档没有加载完成就运行jQuery代码
        $(document).ready(
          function () {
            var btn = $('button');
            console.log(btn);
          }
        )
  事件：click
      dblclick
      mouseenter
      mouseleave
      hover
      keypress
      keydown
      keyup
      submit
      focus
      load
      resize
      ...
      $("div").click();
  效果：
    去显示或者隐藏html元素
      hide() 
        参数：两个可选
          1. 速度  数字类型的 毫秒 string类型（ fast/slow ）
          2. 是一个回调函数 隐藏完成后会执行
      show()
        
      toggle()

    淡入淡出效果
      fadeIn()
        speed callback
      fadeOut()
        speed callback
      fadeToggle()
        speed callback

    滑动
      slideUp
        speed callback
      slideDown
        speed callback
      slideToggle
        speed callback
  链式调用
    $("#div1").css("color", "orange")
    .slideUp(2000)
    .slideDown(200)
    .fadeOut(200)
    .fadeIn(200);
  操作DOM节点
    1. 获取节点
      $(选择器)
    2. 获取内容
      .text();
      .html();
      .val();
      .attr();
    3. 设置内容
      .text();
      .html();
      .val();
      .attr();
      // 设置一个属性
      $("a").attr("href", "http://taobao.com");
      // 设置多个属性
      $("a").attr({
        "href": "http://taobao.com",
        "title": "url",
      });
      // 回调函数
        $("#app").text(function (i, text) {
          console.log(i);
          console.log(text);
        });
        回调函数的参数 
          被选中元素列表中 当前元素的下标
          text是旧文本
          return 函数的返回值 会作为元素内显示的新内容
    4. 添加元素
      append(p1, p2);
      prepend(p1, p2);

      after("追加文本");
      before(
    5. 静态方法
      each map toArray
    6. css
      $("#app").css({
        "color":"yellow",
        "font-size":"16px",

      })