jQuery_动画(二)-【官方】百战程序员_IT在线教育培训机构_体系课程在线学习平台

目录

百战程序员，全站22050+开发课程+文档，学习精选优质好课快人一步！观看视频快捷键ALT+N

JAVA全系列教程

3762个小节阅读：7095.2k

赞

收藏

全部开发者教程

目录

Spring6

项目搭建_项目介绍

亿级高并发电商项目-新

Ajax技术详解-新

spring-security-新

Elasticsearch介绍_全文检索

Spring Cloud Alibaba-Dubbo新

SpringMVC封装参数_简单数据类型集合

分词器默认分词器

分词器_IK分词器

分词器拼音分词器

分词器_自定义分词器

SpringDataES_入门案例

SpringDataES_入门案例

SpringDataES_编写实体类

SpringDataES_编写实体类

SpringDataES_Repository接口

SpringDataES_Repository接口

SpringDataES_DSL查询文档

SpringDataES_按照规则命名查询方法

SpringDataES_分页查询

SpringDataES_分页查询

SpringDataES_结果排序

SpringDataES_template操作文档

SpringDataES_template查询文档

SpringDataES_template复杂条件查询

SpringDataES_template分页查询

SpringDataES_template结果排序

Spring Cloud Alibaba-Higress新

Spring Cloud Alibaba技术栈-Sentinel新

Elasticsearch集群_搭建集群

Elasticsearch集群_搭建集群(2)

Elasticsearch集群_配置kibana

Elasticsearch集群_测试集群状态

Elasticsearch集群_测试集群状态

Elasticsearch集群_故障应对&水平扩容

Elasticsearch优化_内存设置

Elasticsearch优化_磁盘选择

Elasticsearch优化_分片策略

Spring Cloud Alibaba技术栈-RocketMQ新

SpringDataES_template操作索引

分词器_IK分词器词典

Spring Cloud Alibaba技术栈-SkyWalking新

Elasticsearch案例_需求说明

Elasticsearch案例_ES自动补全

Elasticsearch案例_创建索引

Elasticsearch案例_创建索引

Elasticsearch案例_导入数据

Elasticsearch案例_项目搭建

Elasticsearch案例_创建实体类、Repository接口

Elasticsearch案例_自动补全功能

Elasticsearch案例_高亮搜索关键字

Elasticsearch案例_编写Controller

Elasticsearch案例_前端页面

Spring Cloud Alibaba技术栈-Seata新

NewRedis

01_JAVA入门和背景知识

02_变量、数据类型、运算符

03_IDEA的使用和第一个java项目

04_控制语句、方法、递归算法

05_面向对象详解和JVM底层内存分析

06_数组和数据存储

08_异常机制

09_【项目】飞机大战

11_数据库范式与表关系

12_计算机网络协议详解

13_Elasticsearch

14_Servlet技术详解

15_Git版本控制

17_Docker技术应用于实战新版

21_Dubbo

22_FastDFS分布式文件系统

23_Nginx入门到实战

24_Redis从入门到实战

25_数据库中间件Mycat实战

28_Maven

34_分布式医疗云平台

34_Mysql

35_Spring Cloud alibaba

37_面试和成功求职的秘技

38_shiro

39_Spring Security

40_预科阶段

41_HTML5

42_反射技术

46_网络编程

47_多线程与并发编程

48_Tomcat调优

49_百战旅游网

53_JavaScript语言

56_Lambda表达式

59_Elastic Stack

60_分布式全局ID

61_分布式事务

62_分布式锁

63_接口幂等

64_亿级高并发电商项目

67_微信支付

68_支付宝支付

70_高性能web平台

74_华为面试题

C语言快速入门

JAVA全系列教程

面向对象的程序设计语言

Python全系列教程

Python3.x版本，未来主流的版本

人工智能教程

顺势而为，AI创新未来

大厂算法教程

算法，程序员自我提升必经之路

C++ 教程

一门通用计算机编程语言

微服务教程

目前业界流行的框架组合

web前端全系列教程

通向WEB技术世界的钥匙

大数据全系列教程

站在云端操控万千数据

AIGC全能工具班

A

A A

White Night

阅读(2.4k)

赞(0)

jQuery动画(二)

jQuery提供了一系列的动画基本方法，同时也提供了自定动画方案.animate()

jQuery重点讲解知识点

选择器
1. 基础选择器类选择器元素选择器 ID选择器子元素选择器后代元素选择器
2. 属性选择器完美匹配包含前缀开头结尾空格
3. jQuery扩展选择器 eq even odd first last gt lt
DOM操作
1. Class操作 addClass() removeClass() toggleClass() hasClass()
2. 文本操作 html() text() val()
3. 属性操作 attr() removeAttr()
4. DOM 插入并包裹现有内容 .wrap() .unwrap() .wrapAll() .wrapInner()
5. DOM 插入现有元素内 .append() .prepend()
6. DOM 插入现有元素外 .after() .before()
7. DOM 移除 .empty() .remove()
8. DOM 替换 .replaceAll() .replaceWith()
CSS操作
1. 尺寸 .css() .height()，.width() .innerHeight()，.innerWidth() .outerHeight()，.outerWidth()
2. 位置 .offset() .position() .scrollLeft() .scrollTop()
事件处理
1. 绑定事件处理器 .on() .one() .off()
2. 鼠标事件 .click() .hover() .mouseenter() .mouseleave() .mousemove() .mouseover() .mouseout()
3. 表单事件 .focus() .blur() .change() .submit()
4. 键盘事件 .keydown() .keypress() .keyup()
5. 浏览器事件 .resize() .scroll()
6. 事件对象 event.type event.target event.currentTarget event.preventDefault() event.stopPropagation()
遍历
1. 列表遍历 .map() .each()
2. 列表中获得一个JS对象的DOM元素 .get()
3. 树遍历（关系） .children() .find() .next() .parent() .siblings()
动画
1. .show() .hide() .fadeIn() .fadeOut() .slideDown() .slideUp() .animate()

.slideDown()

用滑动动画显示一个元素


xxxxxxxxxx
$("button").click(function () {
  $("div").slideDown(1000);
});

.slideUp()

用滑动动画隐藏一个元素


xxxxxxxxxx
$("button").click(function () {
  $("div").slideUp(1000);
});

.animate()

执行自定义动画


xxxxxxxxxx
$("button").click(function () {
    $("div").animate({
        width: "200px",
        opacity: 0.5
    }, 1500);
});

实时效果反馈

1. 下列是jQuery动画，哪个方法可以实现自定义动画：

A show()

B fadeIn()

C slideDown()

D animate()

答案

1=>D

实操

【实操】利用jQuery的遍历，获取每一个li标签元素，修改元素内容
【实操】添加一个滚动事件，实现滚动到200px部分，隐藏一个元素
【简答】jQuery提供的选择器eq()是具体可以做什么

jQuery_动画(一) Swagger_Swagger简介_batch

北京市昌平区回龙观镇南店村综合商业楼2楼226室

©2014-2023 百战卓越（北京）科技有限公司 All Rights Reserved.

京ICP备14032124号-2