jQuery 常用API

已于 2022-03-10 19:38:51 修改
阅读量1.4k 收藏 22
点赞数 2
分类专栏： jQuery入门 文章标签： jquery javascript 前端
于 2022-03-09 22:57:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AAAAA1235555/article/details/123389292
版权

jQuery 常用API

1、jQuery 选择器

1.1 、jQuery 基础选择器

在这里插入图片描述

1.2 、jQuery 层级选择器

在这里插入图片描述
代码：
在这里插入图片描述
效果：
在这里插入图片描述

在这里插入图片描述

1.3 、隐式迭代（重要）

在这里插入图片描述
代码：
在这里插入图片描述
效果：
在这里插入图片描述

1.4 、jQuery 筛选选择器

在这里插入图片描述
代码：
在这里插入图片描述
效果：

在这里插入图片描述

1.5、 jQuery 筛选方法（重点）

在这里插入图片描述
代码：
在这里插入图片描述
效果：

在这里插入图片描述
代码：
在这里插入图片描述
效果：
在这里插入图片描述
在这里插入图片描述

1.6 、jQuery 里面的排他思想

在这里插入图片描述
代码：
在这里插入图片描述
效果：

在这里插入图片描述

1.7、 链式编程

在这里插入图片描述
代码：
在这里插入图片描述
效果：
在这里插入图片描述

2、jQuery 样式操作

2.1 、操作 css 方法

在这里插入图片描述
代码：
在这里插入图片描述
效果：
在这里插入图片描述

2.2 、设置类样式方法

在这里插入图片描述

代码：
在这里插入图片描述

效果：
在这里插入图片描述

2.3、 类操作与className区别

在这里插入图片描述
代码：
在这里插入图片描述
效果：

在这里插入图片描述

3、jQuery 效果

在这里插入图片描述

3.1 、显示隐藏效果

3.1.1、显示效果

在这里插入图片描述

3.1.2、隐藏效果

在这里插入图片描述

3.1.3切换效果

在这里插入图片描述
代码:
在这里插入图片描述
效果：
在这里插入图片描述

3.2 、滑动效果

3.2.1下滑效果

在这里插入图片描述

3.2.2上滑效果

在这里插入图片描述

3.2.3滑动切换效果

在这里插入图片描述
代码：
在这里插入图片描述
效果：
在这里插入图片描述

3.3 、事件切换

在这里插入图片描述

3.4 、动画队列及其停止排队方法

在这里插入图片描述
代码：

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 100px;
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        $(function() {
            // 鼠标经过
            // $(".nav>li").mouseover(function() {
            //     // $(this) jQuery 当前元素  this不要加引号
            //     // show() 显示元素  hide() 隐藏元素
            //     $(this).children("ul").slideDown(200);
            // });
            // // 鼠标离开
            // $(".nav>li").mouseout(function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 1. 事件切换 hover 就是鼠标经过和离开的复合写法
            // $(".nav>li").hover(function() {
            //     $(this).children("ul").slideDown(200);
            // }, function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 2. 事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
            $(".nav>li").hover(function() {
                // stop 方法必须写到动画的前面
                $(this).children("ul").stop().slideToggle();
            });
        })
    </script>
</body>

</html>

3.5 、淡入淡出效果

3.5.1、淡入效果

在这里插入图片描述

3.5.2、淡出效果

在这里插入图片描述

3.5.3、淡入淡出效果切换

在这里插入图片描述

在这里插入图片描述
代码：
在这里插入图片描述
效果：
在这里插入图片描述

3.6、 自定义动画 animate

在这里插入图片描述
代码：
在这里插入图片描述

效果：
在这里插入图片描述

4、jQuery 属性操作

4.1、 设置或获取元素固有属性值 prop()

在这里插入图片描述

4.2、 设置或获取元素自定义属性值 attr()

在这里插入图片描述

4.3、 数据缓存 data()

在这里插入图片描述

5、jQuery 文本属性值

在这里插入图片描述
在这里插入图片描述

6、jQuery 元素操作

主要是遍历、 创建、 添加、删除元素操作。

6.1、 遍历元素

在这里插入图片描述

在这里插入图片描述

6.2、 创建元素

在这里插入图片描述

6.3、 添加元素

6.3.1、内部添加

在这里插入图片描述

6.3.2、外部添加

在这里插入图片描述

6.4、 删除元素

在这里插入图片描述

7、jQuery 尺寸、 位置操作

7.1 jQuery 尺寸

在这里插入图片描述

7.2 jQuery 位置

7.2.1、 offset() 设置或获取元素偏移

在这里插入图片描述

7.2.2、 position() 获取元素偏移

在这里插入图片描述

7.2.3、 scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧

在这里插入图片描述

8、资料来源：黑马程序员

GT-一二
关注
  • 2
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
jQuery 二 属性操作， 数据缓存data() ，内容文本值，元素遍历、创建、添加和删除操作，尺寸、位置操作，
m0_55170432的博客
03-23 325
1. jQuery 属性操作 1.1 设置或获取元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。 1. 获取属性语法 2. 设置属性语法 element.prop("属性名") 1.获取元素固有的属性值 console.log($("a").prop("href")); element.prop("属性名",
jQuery——常用API
@一只躺平的猪@的博客
08-01 873
JavaScript 库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。 简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。 比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。 ......
jQuery入门与常用API
最新发布
2401_84153285的博客
05-13 433
1️⃣ 语法2️⃣ 参数params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略；speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)；easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”；fn: 回调函数，在动画完成时执行的函数，每个元素执行一次；
jQuery常用API
czx1826488201的博客
10-19 655
1.jQuery 选择器 $('选择器') //获取事件 $('选择器') .css('属性', '属性值')； 如： $('div').css('background', 'pink'); 为什么使用,css属性就可以更改获取的事件的属性值： 把匹配的所有元素在内部进行遍历循环，给每一个元素添加css这个方法，这种行为称为隐式迭代。 $('ul li:first')// 获取ul...
jQuery常用的API
m0_67388537的博客
07-07 435
jQuery常用API
jquery api 3.2.1
11-14
《jQuery API 3.2.1详解：解锁前端开发新高度》 jQuery，这款轻量级的JavaScript库，自2006年发布以来，便以其简洁的语法和强大的功能深受开发者喜爱。本文将深入探讨jQuery API 3.2.1版本中的关键知识点，帮助...
jQuery常用api手册大全
06-20
**jQuery API 大全** jQuery 是一款广泛应用于前端开发的JavaScript库，以其简洁的语法和强大的功能深受开发者喜爱。这个API手册大全包含了多个版本及专题的jQuery知识，旨在帮助开发者深入理解和熟练运用jQuery。 ...
jQuery API文档
01-15
jQuery API文档。jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。...
jQuery API 中文手册
03-21
jQuery开发手册，可用于jQuery开发过程中常用函数的查询，并且其中含有常用函数的使用案例介绍。
JQAPI文档最全的
11-14
api文档api文档api文档api文档api文档api文档api文档api文档api文档api文档api文档
jquery所有版本
06-04
欢迎大家下载jquery所有版本，
jQuery_3.3.1_API_Docs_CN.CHM
03-29
jQuery_3.3.1_API_Docs_CN.CHM中文API，版本：jQuery_3.3.1_API_Docs_CN.CHM，解压即食，
jquery 常用操作方法
10-29
以下是一些jQuery的常用操作方法，这些方法在日常开发中非常常见且实用。 1. **选择器**： jQuery的选择器类似于CSS选择器，可以方便地选取页面中的DOM元素。例如，`$("#id")`选择ID为"id"的元素，`$(".class")`...
jQueryAPI中文手册3.1.rar
07-15
《jQuery API 中文手册 3.1》是一个针对jQuery库的详细参考文档，旨在帮助中文用户更好地理解和使用这个广泛应用于Web开发的JavaScript框架。jQuery以其高效、易用和丰富的功能特性，深受开发者喜爱。这份手册提供了...
[jQuery]常用API
m0_71229255的博客
05-04 487
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。
二、jQuery常用API
qq_55891636的博客
11-29 559
jQuery给我们封装的常用API让我们很方便的编写代码

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GT-一二

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值