笔记来源：拉勾教育 - 大前端就业集训营

文章内容：学习过程中的笔记、感悟、和经验

jQuery基础

jQuery简介

是一个高效、精简且功能丰富的js工具库

主要针对js中选择元素的方法进行大量优化，简化了DOM操作，让编程更加高效

版本发展

1.x：兼容IE6、7、8，工作中最常用，目前主要学习1.12.4版本
2.x：不兼容IE6、7、8，多用于jQuery官方调整BUG使用，工作中不常用
3.x：不兼容IE6、7、8，只能在高版本中使用，目前官方维护版本

下载JQuery

jQuery体验

<body>
<div id="box" class="box"></div>
<!-- 引入jQuery文件 -->
<script src="./js/jquery.min.js"></script>
<script>
// 获取元素
const box = $('#box')

// 获取计算后样式
l(box.css('width'))
//修改样式
box.css('width', '500px')

// 事件添加简化
box.click(function () {
  $(this).css('background-color', 'skyblue')
})

// 动画简化
box.animate({
  'height': 500
}, 2000)
</script>
</body>

$()方法

在jQuery中，只暴漏了一个全局变量$，也是jQuery的特点，避免了全局变量污染

在jQuery中，最开始$()方法叫做jQuery()，在jQuery中两者可以产生同样的效果

语法：jQuery / $(' 选择器 ')

jq经典错误：当我们没有引入jq而使用 $()方法的时候，可能会提示$ 未定义

// 获取元素
// const box = jQuery('#box')
const box = $('#box')

JQ对象

$()方法获取到的内容叫做jQuery对象，内部封装了大量方法和属性，例如查询修改Css样式方法.css()、修改标签内部文本方法.html()、动画方法.animate()等

通过$()获取到的jq对象是一组元素，使用方法的时候无需遍历，可以批量操作

<body>
  <p>123</p>
  <p>123</p>
  <p>123</p>
  <p>123</p>
  <p>123</p>
  <p>123</p>
  <p>123</p>
  <p>123</p>
  <!-- 引入jQuery文件 -->
  <script src="./js/jquery.min.js"></script>
  <script>
    // 获取元素,p就是一个iQuery对象
    const p = $('p')
    // 打印p看一下 ，发现p是一个数组，每个成员都有很多方法和属性
    l(p)
    // 调用p的css方法
    p.css('background', 'red')
    // 调用p的html方法
    p.html('修改后的内容')
    // 调用p的animate方法
    p.animate({
      'height': 50
    }, 2000)
  </script>
</body>

JQ对象和原生js对象

JQ对象获取以后，无法再调用原生的js方法，同样，原生js对象也不能使用JQ对象上面的一些方法

JQ对象实际是一个类数组的对象，内部包含所有获取到的js原生对象，以及大量的JQ对象的方法和属性

获取JQ对象内部原生js对象个数

调用JQ对象的.length属性
调用JQ对象的.size()方法

原生js对象和JQ对象的使用对方方法

JQ对象使用原生方法：
- JQ对象内部每个成员都是原生对象，通过下标调用即可使用该对象的原生方法
原生对象使用JQ对象方法：
- 使用$()包裹原生对象，即可使用JQ对象的方法

<body>
  <p>123</p>
  <p>123</p>
  <p>123</p>
  <p>123</p>
  <div id="d">我是div</div>
  <!-- 引入jQuery文件 -->
  <script src="./js/jquery.min.js"></script>
  <script>
    // 获取元素,p就是一个jq对象
    const $p = $('p')
    // jQ对象利用下标调用原生对象的原生方法
    $p[1].innerText = 'JQ对象调用原生方法修改'

    // 获取原生对象
    d = document.getElementById('d')
    // 包裹$()使用jq对象方法
    $(d).css('background-color', 'skyblue')
  </script>
</body>

JQ选择器

在JQ中可以使用 $(选择器‘’)选中元素，其中$ ()内部的选择器字符串几乎可以使用CSS中所有的选择器，包括基本选择器、高级选择器等等

jq新增筛选选择器

jq中提供了新的筛选选择器，使用方法直接跟在我们的基础选择器后面，筛选出来的内容是前面选择器选择的其中一部分，也可以作为高级选择器的一部分

选择器	说明
$(' 选择器:first ')	第一个
$(' 选择器:last ')	最后一个
$(' 选择器:eq(index) ')	下标为index的项
$(' 选择器:gt(index) ')	下标大于index的项
$(' 选择器:lt(index) ')	下标小于index的项
$(' 选择器:odd ')	下标为奇数的项
$(' 选择器:even ')	下标为偶数的项
$(' 选择器:not(选择器2) ')	去除所有与选择器2的项

<body>
  <p>123</p>
  <p>123</p>
  <p>123</p>
  <p>123</p>
  <p>123</p>
  <p>123</p>
  <p>123</p>
  <p>123</p>
  <!-- 引入jQuery文件 -->
  <script src="./js/jquery.min.js"></script>
  <script>
    // jq选择器
    // 第一个p字体颜色为红色
    $('p:first').css('color', 'red')
    // 最后一个p颜色为粉色
    $('p:last').css('color', 'pink')
    // 下标为2的p颜色为天蓝色
    $('p:eq(2)').css('color', 'skyblue')
    // 大于下标2的元素背景色为#333
    $('p:gt(2)').css('background', '#333')
    // 小于下标2的元素背景色为黄色
    $('p:lt(2)').css('background', 'yellow')
    // 奇数项的p字号为10px
    $('p:odd').css('font-size', '10px')
    // 偶数项的p字号为20px
    $('p:even').css('font-size', '20px')
    // 除了第二项其他所有高度为50px
    $('p:not(:eq(2))').css('height', '50px')
  </script>
</body>

jq新增筛选方法

作用同筛选选择器相同，不同点是使用jq对象的方法

常用方法	说明
.first()	第一项
.last()	最后一项
.eq(index)	第index项

<body>
  <p>123</p>
  <p>123</p>
  <p>123</p>
  <p>123</p>
  <p>123</p>
  <p>123</p>
  <p>123</p>
  <p>123</p>
  <!-- 引入jQuery文件 -->
  <script src="./js/jquery.min.js"></script>
  <script>
    // jq选择方法
    // 第一个p字体颜色为红色
    $('p').first().css('color', 'red')
    // 下标为2的元素颜色为蓝色
    $('p').eq(2).css('color', 'blue')
    // 最后一个元素颜色为黄色
    $('p').last().css('color', 'yellow')
  </script>
</body>

案例：表格隔行变色

根据各行变色案例，可以对比js原生方法和jq方法的不同点

<body>
  <table>
    <tbody id="tbody">
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
  <!-- 引入jQuery文件 -->
  <script src="./js/jquery.min.js"></script>
  <script>
    // 使用jq链式调用方法
    // 使用$获取元素，使用：even筛选元素
    // 再调用css方法修改css属性值
    $('tbody tr:even').css('background-color', 'skyblue')
  </script>
</body>