Nearth===>WEB前端--第17课/JQuery/样式操作的代码

最新推荐文章于 2019-11-16 17:30:09 发布
最新推荐文章于 2019-11-16 17:30:09 发布
阅读量92 收藏
点赞数
分类专栏： WEB前端第三季/JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ly1716/article/details/102843261
版权

先看效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Nearth</title>
		<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body{
				background-color: pink;
			}
		</style>
		<script type="text/javascript">
			$(function(){
				$("#btn").click(function(){
					//第一种方式
					/* $("ul>li").css("backgroundColor","red");
					$("ul>li").css("fontSize","50px");
					$("ul>li").css("fontFamily","全新硬笔行书简");
					$("ul>li").css("color","blue");
					 */
					//第二种方式
					/* $("ul>li").css("backgroundColor","red").css("fontSize","50px").css("fontFamily","全新硬笔行书简").css("color","blue"); */
					//第三种方式
					$("ul>li").css({"backgroundColor":"red","fontSize":"50px","fontFamily":"全新硬笔行书简","color":"blue"});
				})
			})
		</script>
	</head>
	<body>
		<h1>-------样式操作的代码-------</h1>
		<hr style="color: #00FFFF;size:6px;">
		<input type="button" name="" id="btn" value="点击我,给你惊喜" />
		<ul>
			<li>红烧班主任</li>
			<li>清蒸班长</li>
			<li>水煮校长</li>
			<li>凉拌同学</li>
		</ul>
	</body>
</html>

今天也有在学习哟~~~~~~~~~~~~~~~小主人~~~~~~~~~~~~

码字界陈冠希
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Nearth-精品美女展示案列.rar
10-28
标题中的"Nearth-精品美女展示案列.rar"表明这是一个压缩包文件，其中包含了一个名为"Nearth"的精品美女展示案例。这个案例可能是基于Web技术，特别是JQuery库创建的一个交互式展示项目。JQuery是一个广泛使用的...
Nearth===>WEB前端--第24课/JQuery/动态创建元素（点击按钮，在div中添加一个超链接）
ly1716的博客
11-14 632
代码学习： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nearth</title> <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-...
Nearth===>WEB前端--第6课/JQuery/网页实现开关灯（小案例）
ly1716的博客
10-24 500
目的：点击按钮设置body的背景颜色，实现网页开关灯的效果 DOM的方式操作代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nearth</title> <script > window.onload=...
Nearth===>WEB前端--JQuery/精品美女展示案例
ly1716的博客
10-28 414
学了这么久的JQuery，是时候做点小小项目了 （该案例需要十二张美女图片，自己去找··················嘿嘿~~~~~） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery-3.3.1.min....
Nearth===>WEB前端--第26课/复选框选中问题（prop(),attr()方法的使用）
ly1716的博客
11-16 346
代码学习： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; ma...
Nearth===>WEB前端--第25课/JQuery/设置和获取表单元素的value(方法：val()的使用)
ly1716的博客
11-16 303
代码学习： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; ma...
Nearth===>WEB前端--第25课/JQuery/如何在div中设置超链接
ly1716的博客
11-16 272
学习代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; ma...
Nearth===>WEB前端--第18课/JQuery/基本动画操作--animate()，stop()函数的效果应用
ly1716的博客
11-06 245
基本动画操作--animate()，stop()函数的效果应用:(自己参考菜鸟教程网站进行学习,点击，进行学习·····) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nearth</title> <script src="j...
Nearth===>WEB前端--第24课/JQuery/动态清空元素以及复制元素6（empty(),clone(),append()）
ly1716的博客
11-16 242
小提示：这个代码可以帮助我们学习如何清空数据以及复制数据··········· 代码学习： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *...
Nearth===>WEB前端--第22课/JQuery/获取兄弟元素的方法1（next(),prev(),siblings()理论学习）
ly1716的博客
11-13 199
代码学习： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nearth</title> <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-...
Nearth===>WEB前端--第23课/JQuery/常见的动画案列2（方法:remove()的使用）
ly1716的博客
11-14 196
代码学习： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nearth</title> <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-...
Nearth===>WEB前端--第24课/JQuery/动态创建元素5（动态创建表格案列）
ly1716的博客
11-16 190
代码学习： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; ma...
Nearth===>WEB前端--JQuery/QQ美女联系列表(好友面板切换案列)
ly1716的博客
10-31 186
先看效果：（hi~~hi~~） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> ...
Nearth===>WEB前端--第23课/JQuery/动画案列4（animate(),回调函数（匿名函数））
ly1716的博客
11-14 168
代码学习： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nearth</title> <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-...
Nearth===>WEB前端--第18课/JQuery/基本动画操作----（隐藏，显示，隐藏显示切换，淡入，淡出，淡入淡出切换，滑入，滑出，滑动滑出切换）
ly1716的博客
11-06 160
基本动画操作----（隐藏，显示，隐藏显示切换，淡入，淡出，淡入淡出切换，滑入，滑出，滑动滑出切换）:(自己参考菜鸟教程网站进行学习,点击，进行学习·····) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nearth</title> ...
Nearth===>WEB前端--第21课/JQuery/链式编程1（基本使用方法以及断链）
ly1716的博客
11-13 156
链式编程： var obj=$("#dv").css("backgroundColor","red").html("<p>这是一个改变了的p</p>"); 断链： var obj=$("#dv").html().css("backgroundColor","red");//断链 console.log(obj);//报错 代码学习： <!DOCTY...
pi_heif-0.17.0-pp310-pypy310_pp73-macosx_12_0_x86_64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
mmexport1722080103662.jpg
07-27
mmexport1722080103662.jpg
matlab 20244a 6
07-27
matlab 20244a 6
据说所有程序员学习的第一个程序都是在屏幕上输出一句“hello world”，跟这个世界打个招呼。作为天梯赛中的程序员，你写的程序得高级一点，要能跟任意指定的星球打招呼。\n\n输入格式：\n输入在第一行给
03-16
定要打招呼的星球名称，为一个字符串，长度不超过20个字符。\n\n输出格式：\n输出一句话，表示向指定的星球打招呼，格式为：“Hello, XXX!”，其中XXX为输入的...\n\n输入样例：\nEarth\n\n输出样例：\nHello, Earth!
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码字界陈冠希

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值