课后心得&&主题班会感悟

最新推荐文章于 2021-09-30 19:28:22 发布

py1018592579

最新推荐文章于 2021-09-30 19:28:22 发布

阅读量506

点赞数 1

本文链接：https://blog.csdn.net/py1018592579/article/details/83626071

版权

jQ与js的相互转化

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<h1 id="hh1" class="hh1">1</h1>
	<h1>1</h1>
	<h1 class="hh1">1</h1>
	<h1>1</h1>
	<h1 class="hh1">1</h1>
	<a class="hh1">xxx</a>
</body>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
	var hh1 = document.getElementById("hh1");
	//js 转 jq
	var jqhh1 = $(hh1);
	jqhh1.css("font-size","200px");
	console.log(jqhh1);
	//jq 转 js
	var jh11 = jqhh1[0];
	jh11.style.color = "red";

	//jq具备css属性；js才具备style属性

	//取出h1标签下面的所有class为hh1的标签
	var h1hh1 = $("h1.hh1");
	console.log(h1hh1);
</script>
</html>

jQ的效果：隐藏/显示/转换、淡入/淡出/转换、滑动、动画等

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<h1 id="hh1">一寸光阴一寸金</h1>
	<button id="but1">click me 隐藏</button>
	<button id="but2">click me 显示</button>
	<button id="but3">转换</button>
	<button id="but4">动画</button>
</body>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
	//隐藏显示

	$(document).ready(function() {
		$("button").click(function() {
			$("#hh1").hide();
		})
	})
	$(function() {
		$("#but1").click(function() {
			$("h1").hide();
		});
		$("#but2").click(function() {
			$("h1").show();
		})
	})
		

	//淡入、淡出、转换 callback?
	$(function() {
		$("#but1").click(function() {
			$("h1").fadeOut("slow");
		});
		$("#but2").click(function() {
			$("h1").fadeIn("fast");
		});
		$("#but3").click(function() {
			$("h1").fadeToggle();
		});	
		$("#but2").click(function() {
			$("h1").fadeTo("fast",0.5);
		});	
	})

	
	//滑动
	$(function() {
		$("#but1").click(function() {
			$("h1").slideUp()
		});
		$("#but2").click(function() {
			$("h1").slideDown()
		});
		$("#but3").click(function() {
			$("h1").slideToggle()
		});
	})

	
	//动画
	$(function() {
		$("#but4").click(function() {
			$("h1").animate({fontSize:'200px'});
		})
	})
</script>
</html>

课后小结

1. jQ是一个JS库，jQ极大地简化了JS编程，所以只要把JavaScript学透彻，jQuery就很容易学习。

2. jQ与js的相互转化在某些特定的场景是非常重要的，要注意的点是js与jQ分别适用哪些属性，例如style 属性只能适用于js,而css才能适用于jQ，所以能够熟练的相互转化，在编程过程中非常重要。

3. 老师要求预习jQ具备哪些效果，比如：隐藏、显示、转换、淡出、淡入等等，其实这些都大同小异，只需要熟练掌握js里面的一些属性，记清楚jQ的适用属性，就能够熟练运用，最后一点jQ里面最重要的就是$(function(){})结构。

班会主题分享

1. 人本良善

每一个人活着都有其存在的价值和意义，请不要用自己片面的视角和个人的眼光去审视或者看待一件事或一个人，因为你没有资格去随便评价任何人，包括你自己。或许你不经意间的一句玩笑话，害的别人身败名裂亦或是家破人亡；或许你电脑前敲击的几下键盘，害的别人如过街老鼠般人人喊打…这些都是你承担的起的吗？回答是肯定的：no！所以在事情没有明确定论之前请看住自己的手与管住自己的嘴，莫要害人害己；哪怕是事情有了最终的定论，也不要得理不饶人，要懂得宽恕与原谅。究其根本：人本良善！

2. 光阴荏苒，时间易逝，把握当下，做好自己

20岁出头，一个冲动的年纪；一个具备爆发力的年纪；一个充满激情且富有挑战的年纪；亦或是一个机遇与危险并存的年纪。在这样一个具备多次元化的年纪，我们应该做些什么？在这样一个新鲜感十足的年纪，我们怎么做才能无悔青春？在这样一个令人迷茫繁华错乱的年纪，我们又应该以什么为目标，为之前行？一切的一切，都是那么的未知，都是那么的充满挑战，又是那么的憧憬。所以，此时此刻，我们应该做的是：一步一个脚印，一天一个小目标，慢慢的去深入，慢慢的去感受，慢慢的去发现自己的美，慢慢的去明白自己的追求，慢慢的去适应现在的年纪，慢慢的融入现在的社会，慢慢的完善自己，慢慢的有所改变。当你走完前面的每一步，最后你将会无悔自己的20岁，你将无悔自己的青春，把握当下，做好自己！

py1018592579

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
课后心得&&主题班会感悟

jQ与js的相互转化&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &lt;h1 id="hh1" class="hh1"&gt;1&lt;/h1&gt; &am
复制链接

扫一扫