jQuery(二)

首先我先把下载好的 jQuery 文件夹放到下面

这是下载地址 ：https://jquery.cuishifeng.cn/

//引入方式<script src="./jquery/jquery.min.js"></script>注意：（jquery.min.js是我的文件名，不要写错了与自己的）

前端方法库：

          插件 库 和 框架的区别

      插件： 实现某一个单一类功能

          库: 封装了各种的功能和你需要的工具

          框架: 自己的完整的生态系统

        主要内容是封装了各种 dom 操作

        优点:

          1. 选择器

          2. 链式编程

          3. 隐式迭代

        特点: 全兼容 2.0 以前的版本

          2.0 以后逐步的不再兼容 IE

        当你引入一个 jquery.js 或者 jquery.min.js 以后

          会向全局暴露两个变量名

            1. jQuery

            2. $

      jQuery 的选择器

        包含两个部分

          1. 选择器（对元素的获取）

            基本选择器

        使用方法: $(选择器)

        返回值: 满足条件的所有元素(id 选择器除外)

          放在一个数组里面返回给你

          都是一个 集合 的形式

          这个 集合 叫做 jquery 元素集合

        css 如何捕获标签, 就可以怎么填写参数

            特殊选择器

使用方法: $(选择器)

        对你已经存在的选择器进行修饰

        1. :first

        2. :last

        3. :eq(索引)

        按照索引排列的第几个

          注意: 索引从 0 开始

        4. :odd 按照索引排列的奇数个

        5. :even 按照索引排列的偶数个

//html部分<div id="box">1</div>  <div class="box">2</div>  <div>3</div>  <div>    <ul>      <li>1</li>      <li>2</li>      <li>3</li>      <li>4</li>      <li>5</li>      <li>6</li>      <li>7</li>      <li>8</li>      <li>9</li>      <li>10</li>    </ul>  </div>  <div name="username">5</div> <button disabled>按钮</button>  <button disabled>按钮</button>  <button>按钮</button>//引入jQuery样式 （后面代码这步骤会省略，大家注意啊）  <script src="./jquery/jquery.min.js"></script>// 基本选择器     console.log($('div'))     console.log($('#box'))     console.log($('.box'))     console.log($('div > ul > li:nth-child(odd)'))     console.log($('div[name=username]'))// 特殊选择器// 拿到所有 div 的第一个    console.log($('div:first'))    console.log($('div:last'))    console.log($('div:eq(0)'))    console.log($('li:odd'))            // js    console.log($('li:nth-child(odd)'))  // css    console.log($('li:even'))            // js    console.log($('li:nth-child(even)'))  // css
    console.log($('button:enabled'))    console.log($('button:disabled'))

jQuery 的筛选器

        对 jQuery 的元素集合进行二次筛选

可以 直接进行链式编程

        注意: 只有 jQuery 的元素集合才可以使用, 原生 DOM 对象不能使用

1. first()

        元素集合里面的第一个

console.log($('li').first())

2. last()

        元素集合里面的最后一个

console.log($('li').last())

3. eq(索引)

        元素集合里面指定索引的那一个

console.log($('li').eq(2))

4. next()

    当前元素的下一个元素

console.log($('span').next())

5. nextAll()

        使用方法

          1. 元素集合.nextAll()       获取到当前元素后面的所有兄弟元素

          2. 元素集合.nextAll(选择器)  获取到当前元素后面所有元素中指定选择器的那一个

  console.log($('span').nextAll())

   console.log($('span').nextAll('.box'))

6. nextUntil()

      使用方法

          1. 元素集合.nextUntil()     获取到当前元素后面所有的兄弟元素

          2. 元素结合.nextUntil(选择器) 获取到当前元素后面所有兄弟元素, 直到选择器元素为止(不包含选择器元素)

console.log($('span').nextUntil())

  console.log($('span').nextUntil('.box'))

7. prev()

       当前元素的上一个元素

console.log($('span').prev())

8. prevAll()

          1. 元素集合.prevAll()        获取到当前元素上面的所有兄弟元素

          2. 元素集合.prevAll(选择器)  获取到当前元素上面的所有兄弟元素中指定选择器的那一个

console.log($('span').prevAll())

    console.log($('span').prevAll('.box'))

9. prevUntil()

    1. 元素结合.prevUntil()       获取到当前元素上面所有的兄弟元素

      2. 元素结合.prevUntil(选择器) 获取到当前元素上面所有兄弟元素, 直到选择器元素为止(不包含选择器元素)

console.log($('span').prevUntil())

    console.log($('span').prevUntil('.box'))

10. parent()

        获取到当前元素的父元素

console.log($('span').parent())

11. parents()

          1. 元素集合.parents()         拿到结构父级的所有父元素

          2. 元素集合.parents(选择器)   拿到结构父级里面所有父元素中符合选择器的那一个元素

console.log($('span').parents())

    console.log($('span').parents('body'))

12. children()

          1. 元素集合.children()       拿到该元素的所有子元素

          2. 元素集合.children(选择器)  拿到该元素的所有子元素中符合选择器的那一个元素

console.log($('ul').children())

   console.log($('ul').children('.box'))

13. sinblings()

        拿到该元素的所有兄弟元素, 自己除外

console.log($('span').siblings())

14. find()

        找到该元素中所有后代元素里面符合选择器条件的元素

console.log($('body').find('span'))

15. index()

        获取到的就是该元素在其父元素里面的索引位置

console.log($('span').index())

    console.log($('.a'))

    console.log($('.a').first().index())

    console.log($('.a').last().index())