jQuery入门（一）

See_you
137 阅读1分钟

这是我参与8月更文挑战的第18天，活动详情查看：8月更文挑战

jQuery

  • jQuery 是一个前端库，也是一个方法库
  • 他里面封装着一些列的方法供我们使用
  • 我们常用的一些方法它里面都有，我们可以直接拿来使用就行了
  • jQuery 之所以好用，很多人愿意使用，是因为他的几个优点太强大了
    1. 优质的选择器和筛选器
    2. 好用的隐式迭代
    3. 强大的链式编程
  • 因为这些东西的出现，很多时候我们要做的事情被 “一行代码解决”
  • 接下来我们就来认识一下 jQuery

jQuery 的使用

  • jQuery官网

  • jQuery方法大全中文网

    • 这个网站可以多看看
    • 里面是 jQuery 的方法大全，而且是中文的

  • 我们要使用 jQuery 首先要下载一个

    • 可以去官网下载，也可以直接百度搜索下载，都可以

  • 然后就是再页面里面引入 jQuery.js 就行了

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script src="./jquery/jquery.js"></script>
</body>
</html>

  • 然后就可以开始使用了

  • jQuery 向全局暴露的接口就是 jQuery 或者 $ 都行

选择器和筛选器

  • 选择器和筛选器就是用来帮我们获取 DOM 元素的

选择器

  • jQuery 有着相当强大的选择器

    // 按照 id 获取页面中的元素
const ele = jQuery('#box') 
const ele = $('#box')
    • 上面两个都可以按照 id 来获取元素
    // 按照类名来选择
const eles = jQuery('.a')
const eles = $('.a')
    • 上面就是按照类名来选择元素，可以获取到一组元素
    const lis = jQuery('li')
const lis = $('li')
    • 上面就是按照标签名来获取元素，可以获取到一组元素
    const eles = jQuery('ul > li')
const eles = $('ul > li')
    • 上面就是按照选择器来获取元素，可以获取到一组元素

特殊选择器

  • 直接找到第一个

    $('li:first') // 找到所有 li 中的第一个

  • 直接找到最后一个

    $('li:last') // 找到所有 li 中的最后一个

  • 直接找到第几个

    $('li:eq(3)') // 找到所有 li 中索引为 3 的那个

  • 找到所有奇数个

    $('li:odd') // 找到所有 li 中索引为 奇数 的

  • 找到所有偶数

    $('li:even') // 找到所有 li 中索引为 偶数 的
avatar
文章
阅读
粉丝