1.jQuery概念：

jQuery是一个js类库，类库：其实就是一个JS文件，别人提供的对象（属性和方法）：压缩版（正式上线项目）和未压缩的源代码版
目的：简化JS-DOM、事件、ajax
常识题：jQuery有人称呼为js库，而有人称为js框架
jQuery其实是一个库：由4方面组成
1.jQuery.js -库：简化了js   大部分人只知道这一部分
2.jQuery.ui -提供了页面的组件（组成页面一部分的部件）-已经过时
3.jQuery.mobile -移动端开发   -现在更流行uniapp
4.Qunit -测试人员 ，用于测试JavaScript的工具
曾经jQuery是全球最火的一个js库
现在三大框架：Vue、react、angluar
目前市场上流传的库大概有8000+

2.jquery的使用步骤：

 1.引入jquery.js文件
 2.使用jquery的API去获取元素
 3.使用jQuery的API去操作元素

3.jQuery如何获取元素：

1.工厂函数：

  $();或者jQuery();
 作用：
  1、查找元素
    语法：var 元素=$("jquery选择器")  -jquery选择器是基于css选择器，但是比css选择器更加的强大
    jquery选择器不需要任何记忆：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
    返回值：使用jquery的工厂函数找到的元素，是一个jQuery对象集合，意味着不能使用以前的DOM方法去操作

•   1、jq找到的元素的特点：
        1.隐式迭代  -不用循环，直接做操作
        2.具有链式操作  -可以不断的使用。一步接一步做下去
        3.jq元素和dom元素 两者方法不能乱用，自己用自己的
         转换：jq->dom：$("选择器")[i]  -只要加上下标就会变成DOM元素
                                       最好不要对jq加下标，更不要循环，反而将简单复杂化
  

•   2、将dom->jq:$(dom元素) -有用：e.srcElement得到的都是一个dom元素，要转为jQuery元素才能使用对应的方法    
       为什么一个方法可以实现多个操作
       function $(){
               arguments -重载：判断传入的实参的不同执行不同的操作
               }
  

2.通过节点之间的关系：

    1.父：$("xx").parent()
    2.子：$("xx").children()
    3.前一个兄弟：$("xx").prev();
    4.后一个兄弟：$("xx").next();
    5.除了自己的其他兄弟：$("XX").siblings();
 jquery查找元素，返回值：jquery集合，可以直接做操作，切记不要循环

4.操作元素

• 内容：

  html() -底层就是dom的innerHTML  -能够识别标签
  获取：$("xx").html();
  设置：$("XX").html("新内容")；
  
  text() -底层就是dom的innerText  -只能书写纯文本
  获取：$("XX").text();
  设置：$("XX").text("新内容");
  
  val() -底层就是dom的value  -单标签input、select&option
  获取：$("XX").val();
  设置：$("XX").val("新内容");
  

• 属性：

  attr() -底层就是dom的getAttribute/setAttribute  -自定义属性也可以操作
  获取：$("XX").attr("属性名")
  设置：$("XX").attr("属性名","属性值");
  删除：$("XX").removeAttr("属性名")
  专门提供了操作class的API：
   1.追加class:$("XX").addClass("追加的class值")
   2.删除class:$("xx").removeClass();
            没传参数，清空所有的class
            传递实参，删除你传递的class
   3.切换class:有此class和没有此class之间进行切换
            $("xx").toggleClass("active");  //在有active和没有active之间进行切换
  

• 样式：

  css() -设置时依然是内联样式（优先级高，不会影响到其他元素），获取时不关注内联/内部/外部样式表，只管当前生效的
  获取：$("XX").css("属性名");
  设置：$("XX").css({
        "属性名":"属性值",
        .....
        });
  

• 创建&渲染

  创建：var elem=$(`<开始标签 属性名='${属性值}'>${内容}</结束标签>`)
  渲染：父亲.append(elem);  //后面，儿子
      父亲.prepend(elem);  //前面，儿子
      兄弟，after(elem);   //后面，兄弟
      兄弟，before(elem);   //前面，兄弟
       一句话创建并且渲染：父亲.append($`<开始标签 属性名='${属性值}'>${内容}</结束标签>`));
  

•   删除：$("xx").remove();
  

•   克隆：$("XX").clone();
  

•   获取元素下标：$("XX").index();