1. 什么是jQuery?
    jQuery是一个js框架(其实就是一个.js文件),它的特点是使用选择器查找要操作的节点,并且将这些节点封装成一个jQuery对象。封装的目的是为了更好地兼容不同的浏览器之间的差异，同时也会简化代码。
    注：选择器是jQuery借鉴css选择器的语法而创建的一种查找要操作的节点的语法格式。比如 $(’#id’);
  2. 使用jQuery的基本步骤
    （1）、引入jQuery.js文件
    （2）、 使用选择器查找要操作的节点
    （3）、调用jQuery对象的属性或者方法来操作相应的节点
<script  src="../js/jquery-3.3.1.min.js"></script>
<script>
  $(function(){
      //改变 id 为 one 的元素的背景色为 红色
     $("#b1").click(function () {
        $("#one").css("backgroundColor","red");
          })
</script>

3.jquery对象与js对象之间的相互转换
（1）、js对象和jq对象的方法和用法是不相通的
（2）、jq中提供了更多更好更便捷的方法
转换：
jq ----> js jq对象[index]或者jq对象.get(index)
js ----> jq $(js对象)
4.jquery选择器：
（1）、基础选择器
a、 标签选择器（元素选择器）
* 语法： $(“html标签名”) 获得所有匹配标签名称的元素
* $("#b2").click(function () { $("div").css("backgroundColor","red"); }) b、id选择器

  • 语法： $("#id的属性值") 获得与指定id属性值匹配的元素
  • $("#b1").click(function () { $("#one").css("backgroundColor","red"); }) c、类选择器
  • 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
  • $("#b3").click(function () { $(".mini").css("backgroundColor","red"); }) d、并集选择器
  • 语法： $(“选择器1,选择器2…”) 获取多个选择器选中的所有元素
  • $("#b4").click(function () { $("span,#two").css("backgroundColor","red"); }) (2)、层级选择器
    a、 后代选择器
    • 语法： $("A B ") 选择A元素内部的所有B元素
    • $("#b1").click(function () { $("body div").css("backgroundColor","red"); })
    • b、 子选择器
    • 语法： $(“A > B”) 选择A元素内部的所有B子元素
    • $("#b2").click(function () { $("body > div").css("backgroundColor","red"); })(
      (3)、属性选择器
      a、属性名称选择器
    • 语法： $(“A[属性名]”) 包含指定属性的选择器
    • $("#b1").click(function () { $("div[title]").css("backgroundColor","red"); }) b、 属性选择器
    • 语法： $(“A[属性名=‘值’]”) 包含指定属性等于指定值的选择器
    • $("#b2").click(function () { $("div[title='test']").css("backgroundColor","red"); })~ c、 复合属性选择器
    • 语法： $(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器
      (4)、过滤选择器
      a、首元素选择器
    • 语法： :first 获得选择的元素中的第一个元素
    • $("#b1").click(function () { $("div:first").css("backgroundColor","red"); }) b、 尾元素选择器
    • 语法： :last 获得选择的元素中的最后一个元素
    • $("#b2").click(function () { $("div:last").css("backgroundColor","red"); }) c、 非元素选择器
    • 语法： :not(selector) 不包括指定内容的元素
    • $("#b3").click(function () { $("div:not('.one')").css("backgroundColor","red"); }) d、 偶数选择器
    • 语法： :even 偶数，从 0 开始计数
    • $("#b4").click(function () { $("div:even").css("backgroundColor","red"); }) e、 奇数选择器
    • 语法： :odd 奇数，从 0 开始计数
    • $("#b5").click(function () { $("div:odd").css("backgroundColor","red"); }) f、 等于索引选择器
    • 语法： :eq(index) 指定索引元素
    • $("#b7").click(function () { $("div:eq(3)").css("backgroundColor","red"); }) g、 大于索引选择器
    • 语法： :gt(index) 大于指定索引元素
    • $("#b6").click(function () { $("div:gt(3)").css("backgroundColor","red"); }) h、 小于索引选择器
    • 语法： :lt(index) 小于指定索引元素
    • $("#b8").click(function () { $("div:lt(3)").css("backgroundColor","red"); }) j、 标题选择器
    • 语法： :header 获得标题（h1~h6）元素，固定写法
    • $("#b9").click(function () { $(":header").css("backgroundColor","red"); })(
      (5)、 表单过滤选择器
      a、 可用元素选择器
    • 语法： :enabled 获得可用元素
    • $("#b1").click(function () { alert($("input:enabled").val()) }) b、 不可用元素选择器
    • 语法： :disabled 获得不可用元素
    • $("#b2").click(function () { alert($("input:disabled").val()) }) c、 选中选择器
    • 语法： :checked 获得单选/复选框选中的元素
      、 选中选择器
    • 语法： :selected 获得下拉框选中的元素