jQuery——常用方法

最新推荐文章于 2024-04-24 09:22:16 发布

小孩不可以吃鱼

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量2.6k

点赞数 3

分类专栏：前端笔记——jQuery基础文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_63654439/article/details/123314367

版权

前端笔记——jQuery基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

$的作用

1、$其实就是一个函数名，是jQuery的所缩写

2、$可以作为选择器，获取DOM对象对应的jQuery对象

3、$可以将一个DOM对象，转换成一个jQuery对象

4、事件中的this，指向DOM对象，所以需要使用$（this）做转换

5、什么时候使用jQuery，什么时候使用 js？其实本质上jQuery就是js，只是我们可以使用一些现成的方法而已

jQuery常用方法

1、index()；获取元素索引

2、text()；获取和设置文本节点

3、css()；获取和设置样式

4、val()；获取和设置value属性

5、attr()；获取和设置属性值，例如src

6、addClass()；添加class

7、removeClass()；删除class

8、toggleClass()；切换class

9、siblings()；获取同级其他元素

10、find("选择器")；获取子级

11、parent()；获取父级

制作页面效果

点击数字列表，切换图片

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      width: 250px;
      height: 200px;
    }

    .active {
      background-color: red;
    }
  </style>
</head>

<body>
  <img src="images/1.jpg" alt="">
  <div class="btn-list">
    <button>图一</button>
    <button>图二</button>
    <button>图三</button>
    <button>图四</button>
    <button>图五</button>
  </div>

  <script src="jquery/jquery-3.5.1.js"></script>
  <script>
    // attr()方法——获取和设置属性值，例如src
    let imgSrc = [
      "images/1.jpg",
      "images/2.jpg",
      "images/3.jpg",
      "images/4.jpg",
      "images/5.jpg",
    ]
    $('button').click(function () {
      // 获取索引
      let index = $(this).index()
      // 设置属性
      $('img').attr('src', imgSrc[index])
      // 设置背景色(添加class名)  使用addClass()
      // $(this).addClass('active')

      // 删除背景色(删除class名)  使用removeClass()
      // $(this).removeClass('active')

      // 切换class 使用toggleClass()
      // $(this).toggleClass('active')

      // 排他 点击按钮变色 其他按钮变回默认  使用siblings()
      $(this).addClass('active')
      $(this).siblings().removeClass('active')
    })
  </script>
</body>

</html>

DOM操作

1、append()；添加元素节点

2、remove()；删除元素节点

jQuery事件

1、click()

2、mouseenter()

3、mouseleave()

4、mousemove()

5、on()；事件委托

jQuery动画方法

1、show()；

2、hide()；

3、fadeln()；

4、fadeOut()；

5、slideDown()；

6、slideUp()；

7、animate()；

css3 现在几乎用这个做

练习：

1、水果列表的添加与删除

2、随鼠标显示大图

3、轮播图

小孩不可以吃鱼

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
jQuery——常用方法

$的作用1、$其实就是一个函数名，是jQuery的所缩写2、$可以作为选择器，获取DOM对象对应的jQuery对象3、$可以将一个DOM对象，转换成一个jQuery对象4、事件中的this，指向DOM对象，所以需要使用$（this）做转换5、什么时候使用jQuery，什么时候使用 js？其实本质上jQuery就是js，只是我们可以使用一些现成的方法而已jQuery常用方法1、index()；获取元素索引2、text()；获取和设置文本节点3、css()；获取和设置样式
复制链接

扫一扫