对于jQuery选择器和动画效果停止动画的实战心得【前端jQuery框架】

简介: 对于jQuery选择器和动画效果停止动画的实战心得【前端jQuery框架】

JQuery选择器

在这里插入图片描述

前面我展示了一些如何选择HTML元素的示例。
关键是要了解jQuery选择器如何准确地选择要应用效果的元素。
jQuery元素选择器和属性选择器允许按标记名、属性名或内容选择HTML元素。
选择器允许操作HTML元素组或单个元素。
在HTML DOM术语中:

选择器允许您操作DOM元素组或单个DOM节点。

JQuery元素选择器

JQuery使用CSS选择器选择HTML元素。

$(“P”)选择<P>元素。
$(“p.intro”)选择class=“intro”的所有<p>元素。
$(“P#demo”)选择id=“demo”的所有<P>元素。

JQuery属性选择器

JQuery使用XPath表达式选择具有给定属性的元素。

$(“[href]”)选择具有href属性的所有元素。
$([href=“#]”)选择href值等于“#”的所有元素。
$([href!='35;'])选择href值不等于'35;'的所有元素。
$([href$='.JPG'])选择href值以“.JPG”结尾的所有元素。

JQuery CSS选择器

jQuery CSS选择器可用于更改HTML元素的CSS属性。
以下示例将所有P元素的背景色更改为红色:

$("p").css("background-color","red");

jQuery 动画 - animate() 方法

jQuery animate() 方法用于创建自定义动画。

$(selector).animate({params},speed,callback);

所需的params参数定义了构成动画的CSS属性。
可选速度参数指定效果的持续时间。它可以采用以下值:“慢”、“快”或毫秒。
可选回调参数是动画完成后要执行的函数的名称。
下面的示例演示了animate()方法的简单应用。它将<div>元素向右移动250像素:

$("button").click(function(){
  $("div").animate({left:'250px'});
});

在这里插入图片描述
默认情况下,所有HTML元素都有一个静态位置,不能移动。如果需要更改为,我们需要将元素的位置属性设置为相对、固定或绝对!

jQuery animate() - 操作多个属性

请注意,在动画生成期间可以同时使用多个属性:

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

在这里插入图片描述

我可以使用animate()方法来操作所有CSS属性吗?

是的,差不多!但是,需要记住的一点是,在使用animate()时,所有属性名称都必须使用camel符号。例如,必须使用paddingleft而不是paddingleaft,必须使用marginright而不是marginright,等等。
同时,颜色动画不包括在核心jQuery库中。
如果需要生成彩色动画,则需要从jQuery下载彩色动画插件生成彩色动画。

jQuery animate() - 使用相对值

还可以定义相对值(相对于元素的当前值)。需要在值之前添加+=或-=:

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

在这里插入图片描述

jQuery 停止动画jQuery stop() 方法

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。
jQuery stop()方法用于在动画或效果完成之前停止它们。
stop()方法适用于所有jQuery效果函数,包括滑动、淡入淡出和自定义动画。

$(selector).stop(stopAll,goToEnd);

可选的stopall参数指定是否应清除动画队列。默认值为false,即仅停止活动动画,并且允许向后执行队列中的任何动画。
可选的gotoend参数指定是否立即完成当前动画。默认值为false。
因此,默认情况下,stop()清除在选定元素上指定的当前动画。
下面的示例演示了不带参数的stop()方法:

动画队列停止动画测试,仅停止当前正在进行的动画。停止当前动画后,队列中的下一个动画开始:

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
    $("#panel").slideUp(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
相关文章
|
7天前
|
JavaScript 索引
|
2月前
|
安全 前端开发 开发工具
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
108 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
|
4月前
|
存储 前端开发 JavaScript
前端状态管理:Vuex 核心概念与实战
Vuex 是 Vue.js 应用程序的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。本教程将深入讲解 Vuex 的核心概念,如 State、Getter、Mutation 和 Action,并通过实战案例帮助开发者掌握在项目中有效使用 Vuex 的技巧。
|
5月前
|
Web App开发 缓存 监控
前端性能优化实战:从代码到部署的全面策略
前端性能优化实战:从代码到部署的全面策略
80 1
|
5月前
|
Web App开发 前端开发 JavaScript
前端性能优化实战:从代码到部署的全面指南
前端性能优化实战:从代码到部署的全面指南
93 1
|
5月前
|
缓存 前端开发 搜索推荐
前端性能优化实战:提升网页加载速度
前端性能优化实战:提升网页加载速度
140 1
|
5月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
78 3
|
5月前
|
前端开发 数据管理 测试技术
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试,Cypress则擅长端到端测试,模拟用户交互。通过结合使用这两种工具,可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
195 2
|
5月前
|
前端开发 JavaScript 数据可视化
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第26天】前端自动化测试在现代软件开发中至关重要,Jest和Cypress分别是单元测试和端到端测试的流行工具。本文通过解答一系列问题,介绍Jest与Cypress的实战应用与最佳实践,帮助开发者提高测试效率和代码质量。
124 2
|
6月前
|
存储 缓存 算法
前端算法:优化与实战技巧的深度探索
【10月更文挑战第21天】前端算法:优化与实战技巧的深度探索
67 1