jQuery样式操作和效果操作

news/2025/3/19 7:47:50/

1. css方法

<!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>div {width: 200px;height: 200px;background-color: red;}</style><script src="../jQuery.min.js"></script><!-- css()1. 参数只写属性名, 那么返回的是属性值;  $(this).css('color') => green...2. 参数是 属性名, 属性值, 并且用逗号分隔, 属性必须加引号, 属性值如果是数字则可以不加单位和引号;  3. 若是复合属性, 则必须采取驼峰命名法; 4. 设置多个样式(以对象的形式传递参数); -->
</head>
<body><div>123</div><script>$(function() {console.log($('div').css('width'));     // 200px // $('div').css('width', '300px');      // 宽度被修改为300px// $('div').css('width',  250);         // 宽度被修改为250px$('div').css({                      // 设置多个样式(以对象的形式传递参数)width: 400,height: 400,backgroundColor: 'blue'                 //若是复合属性, 则必须采取驼峰命名法, 正确// background-color: 'blue';            //错误, 不能按照css的写法}); }); </script>
</body>
</html>

在这里插入图片描述

2. 类操作样式

<!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>div {width: 100px;height: 100px;background-color: red;}.current {background-color: blue;}.one {color: purple;font-size: 20px;background-color: pink;}.two {color: blue;}</style><script src="../jQuery.min.js"></script>r
</head>
<body><!-- 1. addClass('className');       //相当于追加类名, 不影响之前的类名(原生的js赋值类名会发生覆盖)2. removeClass('className');    3. toggleClass('className'); --><div class="current"></div><span class="one">HelloWorld</span><script>$(function() {$('div').click(function() {//1.addClass();// $(this).addClass('current');//2.removeClass();// $(this).removeClass('current');// 3.toggleClass()： 如下所示：如果存在current类名，就去掉; 如果不存在，就给添加上; $(this).toggleClass('current');}); }); </script><!-- 原生的js赋值类名会发生覆盖; --><script>var span = document.querySelector('span');span.className = 'two';</script>
</body>
</html>

在这里插入图片描述

3. 显示隐藏

<!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><script src="../jQuery.min.js"></script><style>div {width: 200px;height: 200px;background-color: red;}</style>
</head>
<body><!-- show(); hide(); toggle(); --><button>显示</button><button>隐藏</button><button>切换</button><div></div><script>$(function() {$('button').eq(1).click(function() {$('div').hide('slow', function() {alert('callback,last execute!');    //回调函数}); }); $('button').eq(0).click(function() {$('div').show(1000);}); $('button').eq(2).click(function(){$('div').toggle(1000);}); }); </script>
</body>
</html>

请添加图片描述

4. 上拉下滑

<!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><script src="../jQuery.min.js"></script><style>div {display: none;width: 200px;height: 200px;background-color: red;}</style>
</head><body><button>下拉滑动</button><button>上拉滑动</button><button>切换滑动</button><!-- 1. slideDown()：      下拉滑动; 2. slideUp()：        上拉滑动; 3. slideToggle():     切换滑动; 4. hover():           事件切换; --><div></div><script>$(function () {/*// 1. 鼠标点击触发下拉上滑效果; $('button').eq(0).click(function() {$('div').slideDown(500);}); $('button').eq(1).click(function() {$('div').slideUp(500);});*/ /*// 2. 鼠标经过时触发第一个函数, 鼠标离开时触发第二个函数$('button').hover(function() {$('div').slideDown();}, function() {$('div').slideUp();});*//*// 3. 单击发生切换效果(原先的隐藏变显示, 原先的显示变隐藏)$('button').eq(2).click(function() {$('div').slideToggle('slow');}); */// 4. hover(): 如果只写一个函数，那么鼠标经过和离开都会触发这个函数$('button').hover(function () {$('div').slideToggle('slow');}); }); </script>
</body></html>

请添加图片描述

5. 停止动画队列

<!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>/* 动画或效果队列：动画或效果一旦触发就会执行, 如果多次触发, 就会造成过个动画或效果排队执行; 方法：stop(); */$(function() {/*//1. 问题： 多次快速经过不同按钮, 引起动画排队, 运行即知; $(".nav>li").hover(function() {$(this).children("ul").slideDown(200);}, function() {$(this).children("ul").slideUp(200);});*/// 2. 解决方案： stop() 用于停止动画效果, stop()写到动画或者效果前面, 相当于停止结束上一次的动画; $(".nav>li").hover(function() {// stop 方法必须写到动画的前面$(this).children("ul").stop().slideToggle();});})</script>
</body></html>

请添加图片描述

6. 淡入淡出效果

<!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>div {width: 150px;height: 300px;background-color: red;display: none;}</style><script src="../jQuery.min.js"></script>
</head><body><!-- 1. fadeIn();        淡入：就是出现的意思2. fadeOut();       淡出：就是消失隐藏的意思3. fadeToggle();    4. fadeTo();        --><button>淡入效果</button><button>淡出效果</button><button>淡入淡出切换</button><button>修改透明度</button><div></div><script>$(function() {//1. 淡入 fadeIn()$("button").eq(0).click(function() {$("div").fadeIn(1000);}); //2. 淡出 fadeOut(): 类似于消失隐藏的效果$("button").eq(1).click(function() {$("div").fadeOut(1000);});//3. 淡入淡出切换 fadeToggle()$("button").eq(2).click(function() {$("div").fadeToggle(1000);});//4. 修改透明度 fadeTo() 这个速度和透明度要必须写//用1000毫秒缓慢的将div的透明度调整到0.66, 大约2/3的可见度$("button").eq(3).click(function() { $("div").fadeTo(1000, 0.66);});});</script>
</body></html>

请添加图片描述

7. 自定义动画

<!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><script src="../jQuery.min.js"></script><style>div {position: absolute;width: 200px;height: 200px;background-color: red;}</style>
</head><body><!-- animate(); --><button>动起来</button><div></div><script>$(function () {$("button").click(function() {$("div").animate({left: 200,top: 300}, 1000);}); }); </script>
</body></html>

请添加图片描述


http://www.ppmy.cn/news/96935.html

相关文章

一图看懂 pycodestyle 模块：一个检查Python代码是否符合PEP8风格约定的工具，资料整理+笔记（大全）

一图看懂 pycodestyle 模块：一个检查Python代码是否符合PEP8风格约定的工具，资料整理+笔记（大全）

本文由 大侠(AhcaoZhu)原创&#xff0c;转载请声明。 链接: https://blog.csdn.net/Ahcao2008 一图看懂 pycodestyle 模块&#xff1a;一个检查Python代码是否符合PEP8风格约定的工具&#xff0c;资料整理笔记&#xff08;大全&#xff09; &#x1f9ca;摘要&#x1f9ca;模块…
阅读更多...
Microsoft Application Control部署方案

Microsoft Application Control部署方案

目录 前言 第一章：Microsoft Application Control概述 1.1 Microsoft Application Control的定义 1.2 Microsoft Application Control的优势
阅读更多...
学习c语言中的几道习题（小有难度）！

学习c语言中的几道习题（小有难度）！

有兴趣的朋友可以看着题目自己做做&#xff0c;最后在和答案对比&#xff01;相信能力会有所提升的。我现在只是刚刚开始学习c语言&#xff0c;如果有什么说的不对的地方&#xff0c;网路过的大佬&#xff0c;及时予以指正。多谢&#xff01; 1、函数判断闰年 实现函数判断yea…
阅读更多...
使用Docker部署Jenkins

使用Docker部署Jenkins

Jenkins是一款开源的持续集成&#xff08;DI&#xff09;工具&#xff0c;广泛用于项目开发&#xff0c;能提供自动构建&#xff0c;测试&#xff0c;部署等功能。 文章目录 1、安装2、配置镜像加速3、登录初始化Jenkins4、配置Jenkins 1、安装 接下来使用Docker部署Jenkins&a…
阅读更多...
了解list

了解list

list 1. list的介绍及使用1.1 list的介绍1.2 list的使用1.2.1 list的构造1.2.2 list iterator的使用1.2.3 list capacity1.2.4 list element access1.2.5 list modifiers1. resize2. push_back/pop_back/push_front/pop_front3. insert /erase4. swap/clear 1.2.6 list operati…
阅读更多...
设置参考文献编号与文中插入引用的具体步骤

设置参考文献编号与文中插入引用的具体步骤

目录 一、前言 二、操作步骤 &#xff08;一&#xff09;参考文献设置编号 &#xff08;二&#xff09;文章中引用参考文献方式 一、前言 本教程使用的软件是WPS 二、操作步骤 &#xff08;一&#xff09;参考文献设置编号 1.把引用文献的这个编号全部删掉 2.右键点击段…
阅读更多...
关于“烫烫烫烫烫烫烫”的程序员笑话

关于“烫烫烫烫烫烫烫”的程序员笑话

环境 Microsoft Visual Studio Community 2022Windows 11 家庭中文版 笑话 小明在超市买了3瓶汽水&#xff0c;他先打开第0瓶汽水&#xff0c;咕咚咕咚喝光了&#xff0c;接着打开第1瓶汽水&#xff0c;又咕咚咕咚喝光了&#xff0c;然后又打开第2瓶汽水&#xff0c;咕咚咕咚…
阅读更多...
Java 锁 面试题（ReentrantLock、synchronized）

Java 锁 面试题（ReentrantLock、synchronized）

Java 锁 面试题&#xff08;ReentrantLock、synchronized&#xff09; 1. 锁2. ReentrantLock2.1 ReentrantLock 的实现原理2.2 AQS 是什么&#xff1f;2.3 CAS 是什么&#xff1f; 3. synchronized3.1 synchronized 的实现原理3.2 synchronized 的锁升级过程3.2.1 无锁3.2.2 偏…
阅读更多...
最新文章

Copyright @ 2022~2023