【JavaWeb】 jQuery (CSS样式，动画，事件操作 以及练习)

最新推荐文章于 2021-04-21 19:28:40 发布
最新推荐文章于 2021-04-21 19:28:40 发布
阅读量157 收藏 1
点赞数 1
分类专栏： JavaWeb 文章标签： javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45260385/article/details/115207205
版权

这里写自定义目录标题

一、CSS样式

addClass() 添加样式

removeClass() 删除样式

toggleClass() 有就删除，没有就添加样式。

offset() 获取和设置元素的坐标。
练习：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	div{
		width:100px;
		height:260px;
	}
	
	div.border{
		border: 2px white solid;
	}
	
	div.redDiv{
		background-color: red;
	}
	
	div.blackDiv{
		border: 5px blue solid;
	}
</style>

<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	

	$(function(){
		/*
CSS
css(name|pro|[,val|fn])       读写匹配元素的样式属性。 
								a.css('color')取出a元素的color
								a.css('color',"red")设置a元素的color为red

CSS 类

addClass(class|fn) 			为元素添加一个class值;<div class="mini big">
removeClass([class|fn]) 	删除元素的class值；传递一个具体的class值，就会删除具体的某个class
							a.removeClass()：移除所有的class值

**/
		var $divEle = $('div:first');
		
		$('#btn01').click(function(){
			//addClass() - 向被选元素添加一个或多个类
			// 为第一个div添加样式：blackDiv(边框),redDiv(背景颜色)
			$divEle.addClass("blackDiv redDiv");
		});
		
		$('#btn02').click(function(){
			//removeClass() - 从被选元素删除一个或多个类
			// 移除第一个div的blackDiv(边框)样式; ()内不加内容即默认删除所有样式
			$divEle.removeClass("blackDiv");
		});

		$('#btn03').click(function(){
			//toggleClass() - 对被选元素进行添加/删除类的切换操作
			// 反复切换边框
			$divEle.toggleClass("blackDiv");
		});
		
		$("#btn04").click(function () {
			//offset() - 返回第一个匹配元素相对于文档的位置。
			// 设置第一个div出现的位置
			$divEle.offset({
				top:10,
				left:100
			});
		});
	});
</script>
</head>
<body>

	<table align="center">
		<tr>
			<td>
				<div class="border">
				</div>
			</td>
			
			<td>
				<div class="btn">
					<input type="button" value="addClass()" id="btn01"/>
					<input type="button" value="removeClass()" id="btn02"/>
					<input type="button" value="toggleClass()" id="btn03"/>
					<input type="button" value="offset()" id="btn04"/>
				</div>
			</td>
		</tr>
	</table>
	<br /> <br />
	<br /> <br />
</body>
</html>

在这里插入图片描述

二、jQuery动画

基本动画
show() 将隐藏的元素显示
hide() 将可见的元素隐藏。
toggle() 可见就隐藏，不可见就显示。

以上动画方法都可以添加参数。
1、第一个参数是动画执行的时长(以毫秒为单位)
2、第二个参数是动画的回调函数(动画完成后自动调用的函数)

淡入淡出动画
fadeIn() 淡入（慢慢可见）
fadeOut() 淡出（慢慢消失）
fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见 0.5 半透明
fadeToggle() 淡入/淡出切换
练习：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link href="css/style.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
	
<script type="text/javascript">
	/* 	
		基本
		show([speed,[easing],[fn]]) 
		hide([speed,[easing],[fn]]) 
		toggle([speed],[easing],[fn]) 
		滑动
		slideDown([spe],[eas],[fn]) 
		slideUp([speed,[easing],[fn]]) 
		slideToggle([speed],[easing],[fn]) 
		淡入淡出
		fadeIn([speed],[eas],[fn]) 
		fadeOut([speed],[eas],[fn]) 
		fadeTo([[spe],opa,[eas],[fn]]) 
		fadeToggle([speed,[eas],[fn]])
		*/
		$(function(){
			//显示   show()
			$("#btn1").click(function(){
				// 展示div1,过程1s(慢慢出现)
				$("#div1").show(1000);
			});

			//隐藏  hide()
			$("#btn2").click(function(){
				// 隐藏div1,过程1s(慢慢消失)
				$("#div1").hide(1000);
			});

			//切换   toggle()
			$("#btn3").click(function(){
				// 不断切换div1显示和隐藏,过程1s(慢慢出现和消失)
				$("#div1").toggle(1000);
			});

			// var abc = function(){
			// 	$("#div1").toggle(1000,abc);
			// }
			// abc();

			//淡入   fadeIn()
			$("#btn4").click(function(){
				// 淡入,过程1s
				$("#div1").fadeIn(1000);
			});

			//淡出  fadeOut()
			$("#btn5").click(function(){
				// 淡出,过程1s
				$("#div1").fadeOut(1000);
			});	
			
			//淡化到  fadeTo()
			$("#btn6").click(function(){
				// 第二个参数：1为完全可见,0为透明,0.5为半透明,这里也可以使用随机淡化程度
				$("#div1").fadeTo(1000,Math.random());
			});

			//淡化切换  fadeToggle()
			$("#btn7").click(function(){
				$("#div1").fadeToggle(1000);
			});	
		});
</script>
	
	</head>
	<body>
		<table style="float: left;">
			<tr>
				<td><button id="btn1">显示show()</button></td>
			</tr>
			<tr>
				<td><button id="btn2">隐藏hide()</button></td>
			</tr>
			<tr>
				<td><button id="btn3">显示/隐藏切换 toggle()</button></td>
			</tr>
			<tr>
				<td><button id="btn4">淡入fadeIn()</button></td>
			</tr>
			<tr>
				<td><button id="btn5">淡出fadeOut()</button></td>
			</tr>
			<tr>
				<td><button id="btn6">淡化到fadeTo()</button></td>
			</tr>
			<tr>
				<td><button id="btn7">淡化切换fadeToggle()</button></td>
			</tr>
		</table>
		
		<div id="div1" style="float:left;border: 1px solid;background-color: blue;width: 300px;height: 200px;">
			jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果
		</div>
	</body>
</html>

在这里插入图片描述

三、 练习：CSS_动画品牌展示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品牌展示练习</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

body {
	font-size: 12px;
	text-align: center;
}

a {
	color: #04D;
	text-decoration: none;
}

a:hover {
	color: #F50;
	text-decoration: underline;
}

.SubCategoryBox {
	width: 600px;
	margin: 0 auto;
	text-align: center;
	margin-top: 40px;
}

.SubCategoryBox ul {
	list-style: none;
}

.SubCategoryBox ul li {
	display: block;
	float: left;
	width: 200px;
	line-height: 20px;
}

.showmore , .showless{
	clear: both;
	text-align: center;
	padding-top: 10px;
}

.showmore a , .showless a{
	display: block;
	width: 120px;
	margin: 0 auto;
	line-height: 24px;
	border: 1px solid #AAA;
}

.showmore a span {
	padding-left: 15px;
	background: url(img/down.gif) no-repeat 0 0;
}

.showless a span {
	padding-left: 15px;
	background: url(img/up.gif) no-repeat 0 0;
}

.promoted a {
	color: #F50;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function() {
		// 基本初始状态,只展示前6个和最后一个其他标签
		$("li:gt(5):not(:last)").hide();

		// 给 "显示全部品牌" 绑定单击事件
		$("div div a").click(function () {
			// 反复切换显示和隐藏
			$("li:gt(5):not(:last)").toggle();

			// 隐藏标签时
			if ($("li:gt(5):not(:last)").is(":hidden")) {
				// "索尼"标签的高亮样式要删除
				$("li:contains('索尼')").removeClass("promoted");

				// 先删除图像,然后选用 图像箭头向下 的img
				$("div div").removeClass();
				$("div div").addClass("showmore");

				// 文本内容变为显示全部品牌
				$("span").text("显示全部品牌");
				
			} else {  // 显示所有标签时
				// "索尼"标签要添加样式(高亮)
				$("li:contains('索尼')").addClass("promoted");

				// 先删除图像,然后选用 图像箭头向上 的img
				$("div div").removeClass();
				$("div div").addClass("showless");

				// 文本内容变为显示精简品牌
				$("span").text("显示精简品牌");
			}
			
			// false,阻止超链接跳转页面
			return false;
		});
	});
</script>
</head>
<body>
	<div class="SubCategoryBox">
		<ul>
			<li><a href="#">佳能</a><i>(30440) </i></li>
			<li><a href="#">索尼</a><i>(27220) </i></li>
			<li><a href="#">三星</a><i>(20808) </i></li>
			<li><a href="#">尼康</a><i>(17821) </i></li>
			<li><a href="#">松下</a><i>(12289) </i></li>
			<li><a href="#">卡西欧</a><i>(8242) </i></li>
			<li><a href="#">富士</a><i>(14894) </i></li>
			<li><a href="#">柯达</a><i>(9520) </i></li>
			<li><a href="#">宾得</a><i>(2195) </i></li>
			<li><a href="#">理光</a><i>(4114) </i></li>
			<li><a href="#">奥林巴斯</a><i>(12205) </i></li>
			<li><a href="#">明基</a><i>(1466) </i></li>
			<li><a href="#">爱国者</a><i>(3091) </i></li>
			<li><a href="#">其它品牌相机</a><i>(7275) </i></li>
		</ul>
		<div class="showmore">
			<a href="more.html"><span>显示全部品牌</span></a>
		</div>
	</div>
</body>
</html>

在这里插入图片描述

四、jQuery事件操作

① $( function(){} ) 和 window.onload = function(){}的区别？
他们分别是在什么时候触发？
1、jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM 对象之后就会马上执行。
2、原生js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM 对象，还要等标签显示时需要的内容加载完成。

他们触发的顺序？
1、jQuery 页面加载完成之后先执行
2、原生js 的页面加载完成之后

他们执行的次数？
1、原生js 的页面加载完成之后，只会执行最后一次的赋值函数。
2、jQuery 的页面加载完成之后是全部把注册的function 函数，依次顺序全部执行。
② jQuery 中其他的事件处理方法：
click() 它可以绑定单击事件，以及触发单击事件

mouseover() 鼠标移入事件

mouseout() 鼠标移出事件

bind() 可以给元素一次性绑定一个或多个事件。

one() 使用上跟bind 一样。但是one 方法绑定的事件只会响应一次。

unbind() 跟bind 方法相反的操作，解除事件的绑定

live() 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出来的也有效
练习：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            // 鼠标点击事件
            $("#btn1").click(function () {
                console.log("鼠标点击");
            });

            // 鼠标移入事件
            $("#btn1").mouseover(function () {
                console.log("鼠标移入");
            });

            // 鼠标移出事件
            $("#btn1").mouseout(function () {
                console.log("鼠标移出");
            });

            // 鼠标绑定事件,可绑定多个事件
            $("#btn1").bind("click mouseover mouseout",function () {
                console.log("bind绑定事件");
            });

            // one和bind一样可以绑定事件,但是绑定的事件只会触发一次
            $("#btn1").one("click mouseover mouseout",function () {
                console.log("one绑定事件");
            });

            // live用来绑定事件,对于后面动态创建的也有效
            $(":button").live("click mouseover mouseout",function () {
                console.log("live绑定的事件");
            })
            
            // 在使用live绑定后,再动态创建一个button,同样能被live绑定
            $("<button>后创建的button</button>").insertAfter("#btn1");
        });
    </script>
</head>
<body>
    <button id="btn1">button</button>
</body>
</html>

在这里插入图片描述

③ 事件的冒泡
什么是事件的冒泡？
事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。

那么如何阻止事件冒泡呢？
在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。
练习：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            //冒泡就是事件的向上传导，子元素的事件被触发，父元素的响应事件也会触发
            //解决冒泡问题：return false;

            $("#div1").click(function () {
                alert("绑定div1的单机事件");
            });

            $("button").click(function () {
                alert("绑定button的单机事件");
                // false阻止事件向上传导,即div1的单击事件
                return false;
            });
        });
    </script>
</head>
<body>
        <div id="div1"><button>div内部的button</button></div>
</body>
</html>

在这里插入图片描述

④ javaScript 事件对象
事件对象，是封装有触发的事件信息的一个javascript 对象。
我们重点关心的是怎么拿到这个javascript 的事件对象。以及使用。

如何获取呢javascript 事件对象呢？
在给元素绑定事件的时候，在事件的function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为event。
这个event 就是javascript 传递参事件处理函数的事件对象。
练习：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
        //1.原生javascript 获取事件对象
        window.onload = function () {
           document.getElementById("btn1").onclick = function (event) {
                console.log(event);
           }
        }

        //2.jQuery 代码获取事件对象
        $(function () {
            $("#btn1").click(function (event) {
                console.log(event);
            });
        });

        //3.使用bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
        $(function () {
            $("#btn1").bind("mouseover mouseout",function (event) {
                if (event.type == "mouseover") {
                    console.log("鼠标移入");
                }else if (event.type == "mouseout"){
                    console.log("鼠标移出");
                }
            });
        });
    </script>
</head>
<body>
        <button id="btn1">button</button>
</body>
</html>

在这里插入图片描述

五、练习：事件图片跟随

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	body {
		text-align: center;
	}
	#small {
		margin-top: 150px;
	}
	#showBig {
		position: absolute;
		display: none;
	}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
		$("#small").bind("mouseover mouseout mousemove",function (event) {
			if (event.type == "mouseover") {
				// 鼠标移入时,展示大图片
				$("#showBig").show();
			} else if (event.type == "mouseout") {
				// 鼠标移出时,隐藏大图片
				$("#showBig").hide();
			} else if (event.type == "mousemove") {
				console.log(event);
				$("#showBig").offset({
					left:event.pageX+10,
					top:event.pageY+10
				});
			}
		});
	});
</script>
</head>
<body>

	<img id="small" src="img/small.jpg" />
	
	<div id="showBig">
		<img src="img/big.jpg">
	</div>

</body>
</html>

在这里插入图片描述

黑桃️
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jquery经典实例60例-动画实例
06-01
jquery经典实例60例-动画实例 jquery经典实例60例-动画实例 jquery经典实例60例-动画实例
day30_jQuery中的动画及案例练习（手风琴，美团外卖点餐，横向轮播）
ice-bear
10-07 317
（手风琴，美团外卖点餐，横向轮播）
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
10-21
主要介绍了jQuery模拟完美实现经典FLASH导航动画效果,通过jQuery响应鼠标事件动态操作页面元素样式实现flash切换的效果,非常经典实用,文末还提供了demo源码供读者下载学习或使用,需要的朋友可以参考下
JavaWeb之JQuery（Day04）JQuery的css操作、动画、事件
程序彤的博客
11-03 128
JQuery的css样式操作 addClass() 添加样式 removeClass() 删除样式 toggleClass() 有就删除，没有就添加样式 offset() 获取和设置元素的坐标 $("#big").offset({ left:event.pageX +10; top:event.pageY +10; }); Jquery的动画操作 通过jquery对象调用($核心函数("# . 标签名")创建对象) 回调函数：动画挖完成后自动调用的函数 show(可加ms,可加动画回调函数function
jQuery的css样式与动画操作
qq_51592187的博客
04-21 306
jQuery的css样式操作与动画操作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css样式操作</title> <style type="textćs"> div.Div{ width: 100px; height: 100px; } div.redDiv{ background-colo
javaweb html css3 jquery javascript oracle
05-20
javaweb html css3 jquery javascript oracle
javaWeb当当购书网(jsp+mysql+jquery+css)
05-29
本项目是一套基于javaWeb当当购书网，主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含：项目源码、项目文档、数据库脚本等，该项目附带全部源码可作为毕设使用。 项目都经过严格...
基于javaweb+jquery+mysql的仿猫眼订票系统
03-08
基于javaweb+jquery+mysql的仿猫眼订票系统
javaweb留言板css
10-10
javaweb 留言板css代码，学习时候上课时候，是需要用到的必要代码
javaweb练习项目
01-17
项目的原码，图片，依赖都有，只是作为学习用的，看看就好，图片都是百度那里下的。
jQuery——13——淡入淡出动画及小练习弹窗广告的关闭
x1037490413的博客
10-27 219
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
jQuery操作css样式、属性、动画、节点
weixin_30819163的博客
10-19 162
css样式操作： 　　1、设置单个样式: css(name, value) 　　2、设置多个样式:css(obj) 　　3、获取样式:css(name) <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title&...
jQuery动画效果大全
热门推荐
若水弹丸之地
12-20 1万+
一、show()方法和hide()方法 1.show()与hide() show()：根据hide()方法记住的display属性值来显示元素。 hide()   : 将该元素的display样式改为 "none"。 2.参数让元素动起来： 单纯的调用show()和hide()相当于css("display","none/block/inline"),不会有任何动画。如果希望调用元素
jQuery中的样式方法及动画
King的博客
08-04 188
笔记放在Github上，点击访问下载 jQuery是一个优秀的JavaScript库 jQuery样式相关方法 以下方法均不带单位px，是可以用于计算的数值 .height() 获取匹配元素集合中的第一个元素的当前计算高度值，可以传入数值设置 $("p").height(); $("p").height(20); .width() 为匹配的元素集合中获取第一个元素的当前计算宽度值或给每个匹配...
jquery js实现动画时钟
weixin_45747732的博客
10-22 224
css样式代码如下： <style> body, html { margin: 0; } .location { position: relative; width: 600px; ...
jQuery学习笔记03---CSS样式、jQuery事件
DKPT的博客
04-16 236
1、CSS样式操作 1.1、CSS类： addClass() 为每个匹配的元素添加指定的类名，添加样式 removeClass() 从所有匹配的元素中删除全部或者指定的类，删除样式 toggleClass() 如果存在（不存在）就删除（添加）一个类，有就删除，没有就添加样式 1.2、CSS: css() 访问匹配元素的样式属性。 1.3、位置： offset() 获取匹配元素在当前视口的相对偏移...
JQuery 实现动画与特效练习1
汉南最後の読書人
11-10 1181
1.简单的动画函数 简单的动画函数 input{ border:1px solid #060; font-size:14px; padding:4px; font-family:Arial, Helvetica, sans-serif; background-color:#999; color:#0FF; } $(
jQuery的一些动画案例
兜兜的博客
07-30 1904
本文主要写了几个关于jQuery的案例，有手机银行卡的tab切换，手风琴菜单栏制作，手风琴图片展示，淡入淡出图片展示，塔罗钟表以及九宫格抽奖块的制作。
jQuery中利用递归思想练习自定义动画
Json的知识梦工厂
06-23 733
技术QQ交流群:294088839         自定义动画             div{             width: 100px;             height: 100px;             background:red;             position: absolute;             top: 50
javaweb项目css样式失效
最新发布
05-30
可能是由于以下几个原因导致CSS样式失效： 1. CSS文件路径错误：请确保你的CSS文件路径正确，否则浏览器无法加载CSS文件。 2. CSS文件命名错误：请确保你的CSS文件名正确，如果文件名不正确，浏览器将无法加载CSS...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值