木舟0基础学习Java的第二十四天(CSS,JS，Jquery)

devtools/2024/9/22 16:52:04/

CSS

内部样式：

标签选择器：直接应用于HTML标签

类选择器：可以在页面当中多次使用

id选择器：同一个id选择器在同一页面中只能调用一次

选择器优先级：id选择器>类选择器>标签选择器

html 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* style 标签选择器 */h1{color: red;font-size: 300px;}</style></head><body><h1>你好</h1></body>
</html>

外部样式：

css 

css">      /* 外部样式 写在css中*//* style 标签选择器 */h1{color: red;font-size: 100px;}/* 类选择器 */.A{color: orange;font-size: 50px;}/* id选择器 */#a{color: pink;font-size: 10px;}

行内样式：

html 

<body><span style="color: aqua;font-size: 50xp;">木舟</span><!-- 行内样式 一般不用--></body>

样式优先级：行内样式>内部样式>外部样式

开发常用：

 css

css">*{/* 清除内外边距 */margin: 0xp;padding: 0xp;
}
span{color: green;/* 设置颜色 */font-size: 50xp;/* 设置字体大小 */text-align: center;/* 字体居中 */text-indent: 20xp;/* 首行缩进 */line-height: 25xp;/* 行高 */text-decoration: underline;/* 添加下划线 */text-decoration: line-through;/* 添加删除线 一般商品打折时使用 */
}
a{text-decoration: none;}/* 去掉下划线 */

超链接样式：

html 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link href="../css/超链接样式.css" rel="stylesheet" type="text/css"/></head><body><a href="#" >点击跳转页面</a><p/><ul><li>木</li><li>舟</li><li>日</li><li>记</li></ul></body>
</html>

css 

css">a:active{color: blue;/* 鼠标点击未释放变色 */
}
body{background-color: burlywood;/* 添加背景颜色 */background-image: url(../images/a.png);/* 添加背景图片 默认图片平铺*/background-repeat:no-repeat;/* 不平铺  repeat-x或-y 是横纵方向平铺*//* background: white url(../images/a.png) 205px 10px no-repeat; *//* 简写 */
}
li{font-size: 100px;color: red;/* list-style: none; *//* 去除列表前的点 */list-style-image:url(../images/QQ图片20240809205429.gif) ;/* 列表前的点替换为图片 */
}

盒子模型：

独占一行

边框 内边距 外边距 内容

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div{/* border-color:red; *//* 设置边框颜色 *//* border-color:red blue orange greenyellow; *//* 边框顺序为上右下左 *//* border-style:solid; *//* 设置边框为实线 虚线为dashed*//* border-width:20px; *//* 设置边框粗细 *//* border-width:20px 25px 30px 35px; *//* 顺序为上右下左 */border: 9px red solid;/*简写 先设置粗细 然后颜色 最后虚线实线  */margin: 10px;/* 外边距 */margin: 0px auto;/* 网页居中对齐 */padding-left:200px ;/* 内边距 */}</style></head><body><div>你好</div><div>你好</div></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>盒子</title><style type="text/css">div{border: red 1px solid;display: inline;/* 将div变成内部属性 */}strong{border: blue 1px solid;display: block;/* 将strong转为块级元素 */}li{list-style: none;/* 去除圆点 */float: left;/* 让标签向右飘 */background-color: red;/* 添加标签背景 */margin-left: 20px;/* 标签间距 */}</style></head><body><div>盒子</div><strong>内部属性</strong><ul><li>你好</li><li>你好</li><li>你好</li></ul><div><ul><li>蔬菜</li><li>水果</li><li>肉类</li></ul></div></body>
</html>

JS

JS全称JavaScript  是一种基于对象，事件驱动的脚本语言

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>javascript</title></head><body><script type="text/javascript">document.write("这是第一个js小页面<br/>")document.write("Hello,javascript!<p/>")document.write("<h1>Hello,javascript!</h1>")</script></body>
</html>

弹窗

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>弹窗</title><script type="text/javascript">function dianji(){alert('你好')}</script></head><body><input type="button"  value="弹出消息框" onclick="javascript:alert('你好啊')" /><input type="button"  value="弹出消息框" onclick="dianji()" /></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">prompt("提示信息","输入框的默认信息");</script></body>
</html>

typeof的使用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>typeof的使用</title></head><body><script type="text/javascript">var width,height=10,name="rose";var date=new Date();/* 声明时间 */var arr=new Array();/* 获取数组 */document.write("width:"+typeof(width)+"<br/>");/* width:undefined width没有赋值 返回undefined */document.write("height:"+typeof(height)+"<br/>");/* height:number 返回number类型*/document.write("name:"+typeof(name)+"<br/>");/* name:string 返回string类型*/document.write("date:"+typeof(date)+"<br/>");/* date:object */document.write("arr:"+typeof(arr)+"<br/>");/* arr:object 返回object类型 */document.write("true:"+typeof(true)+"<br/>");/* true:boolean 返回boolean类型 */</script></body>
</html>

分割

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>分割</title></head><body><script type="text/javascript">var fruit="apple,orange,peach,banana";var arrList=fruit.split(",");var str=arrList.join("-");document.write("分割前："+fruit+"<br/>");document.write("使用\"-\"重新连接后："+str);</script></body>
</html>

string

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>string</title></head><body><script type="text/javascript">var str="abc defg hijkl mn opqrst uvwxyz";var len=str.length;document.write(len);/* 获取字符串长度 空格也算 */document.write(str.charAt(5));/* 获取索引为5的字符 */document.write(str.substring(4,15));/* 截取索引4-15的字符 */</script></body>
</html>

循环

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>循环</title></head><body><script type="text/javascript">var t=prompt("请输入一个整数：");/* 网页提示相当于Scanner */if(t>5){for(var i=t;i>0;i--){for(var j=0;j<i;j++){document.write("*&nbsp;&nbsp;");}document.write("<br/>")}}</script></body>
</html>

转型

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>转型</title></head><body><script type="text/javascript">var op1=prompt("请输入第一个数字：");var op2=prompt("请输入第二个数字："," ");var p1=parseInt(op1);/* 将数字转为Int */var p2=parseInt(op2);var result=p1+p2;document.write(p1+"+"+p2+"="+result)</script></body>
</html>

无参函数

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>无参函数</title></head><body><input type="button" value="点击显示5次欢迎学习js" onclick="study()"/><!-- onclick="study()"无参函数 --><script type="text/javascript">function study(){for(var i=0;i<5;i++){document.write("<h4>欢迎学习js</h4>")}/* var i=1;while(i<2){alert("你觉得你能杀死我？");} */}</script></body>
</html>

有参函数

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>有参函数</title></head><body><input type="button" value="点击显示5次欢迎学习js" onclick="study(prompt('请输入显示多少次',''))"/><!-- onclick="study()"无参函数 --><script type="text/javascript">function study(count){for(var i=0;i<count;i++){document.write("<h4>欢迎学习js</h4>")}}</script></body>
</html>

作用域

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>作用域</title></head><body onload="second()"><script type="text/javascript">var i=20;function first(){var i=5;for(var j=0;j<i;j++){document.write("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+j)}}function second(){var t=prompt("请输入一个数字：","")if(t>i){document.write(t);}else{document.write(i);first()}}</script></body>
</html>

foreach遍历数组

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>foreach遍历数组</title></head><body><script type="text/javascript">var fruit=["apple","banana","peach","orange"];for(var i in fruit){document.write(fruit[i]+"<br/>");}/* foreach */</script></body>
</html>

js输出图片

document.write("<img src='images/th.jpg'>");

四则运算

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>四则运算</title></head><body><input type="button" value="计算两数运算结果" onclick="account()"/><!-- 无参函数 --><script type="text/javascript">function account(){var op1=prompt("请输入第一个数字：","");var sign=prompt("请输入运算符号:","");var op2=prompt("请输入第二个数字：","");var result;var p1=parseInt(op1);var p2=parseInt(op2);switch(sign){case "+":result=p1+p2;break;case "-":result=p1-p2;break;case "*":result=p1*p2;break;case "/":result=p1/p2;break;case "%":result=p1%p2;break;default:alert("运算符有误！")break}alert("两数运算结果是："+p1+sign+p2+"="+result)}</script></body>
</html>

验证

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>验证邮箱</title></head><body><script type="text/javascript">function validateEmail(email){var indexs=email.indexOf("@");if(email.length>0){if(indexs==-1||email.indexOf(".")==-1){alert("邮箱地址必须包含@和.")}else{var name=email.substring(0,indexs);alert("邮箱名称正确，邮箱名："+name);}}else{document.write("邮箱不能为空");}}validateEmail(prompt("请输入正确的邮箱地址：","muzhou@163.com"))</script></body>
</html>

省市联动 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>省市联动</title><script type="text/javascript">var provinces=[["沈阳市","大连市","鞍山市","营口市"],["吉林市","长春市","四平市","辽源市"],["齐齐哈尔市","哈尔滨市","大庆市","佳木斯市"],];function selectProvince(){var province=document.getElementById("province");var value=province.value;//从数组中取出相对应的城市var citys=provinces[value];var citySelect=document.getElementById("city");//清空select中的optioncitySelect.options.length=0;for(var i=0;i<citys.length;i++){var cityText=citys[i];//创建option节点var option1=document.createElement("option");//创建城市文本var textNode=document.createTextNode(cityText)//将option节点与城市文本关联option1.appendChild(textNode);//添加到城市select中citySelect.appendChild(option1);}}</script></head><body><select onchange="selectProvince()" id="province"><option value="-1">请选择</option><option value="0">辽宁省</option><option value="1">吉林省</option><option value="2">黑龙江省</option></select><select id="city"></select></body>
</html>

图片轮播

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>图片轮播</title><script type="text/javascript">var index=0;function changeImg(){//获取要切换的图片元素var img=document.getElementById("img1");//计算当前要切换到第几张图片var curIndex=index%4+1;//0 1 2 3img.src="images/"+curIndex+".jpg";//1 2 3 4index++;}function init(){setInterval("changeImg()",1000);}</script></head><body onload="init()"><img src="./images/QQ图片20240809205429.gif" id="img1"/></body>
</html>

Jquery

使用方法 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script></head><body><h1>你好</h1></body><script type="text/javascript">/* $ 取值 ()里可以是单引号 也可以是双引号*/$('h1').css("background-color","red");</script>
</html>

省市联动

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">var provinces=[["沈阳市","大连市","鞍山市","营口市"],["吉林市","长春市","四平市","辽源市"],["齐齐哈尔市","哈尔滨市","大庆市","佳木斯市"],];$(function(){$("#province").change(function(){var citys=provinces[this.value];//清空$("#city").empty();//遍历$(citys).each(function(i,n){$("#city").append("<option>"+n+"</option>")});});});</script></head><body><select id="province"><option value="-1">请选择</option><option value="0">辽宁省</option><option value="1">吉林省</option><option value="2">黑龙江省</option></select><select id="city"></select></body>
</html>

隔行换色

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>隔行换色</title><script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$("tr:even").css("background-color","pink")/* even偶数 */$("tr:odd").css("background-color","chartreuse")/* odd奇数 */});</script></head><body><table border="1" width="75%"><tr><th>Header</th><th>Header</th><th>Header</th></tr><tr><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td></tr></table></body>
</html>


http://www.ppmy.cn/devtools/96306.html

相关文章

培训学校课程管理系统-计算机毕设Java|springboot实战项目

培训学校课程管理系统-计算机毕设Java|springboot实战项目

&#x1f34a;作者&#xff1a;计算机毕设匠心工作室 &#x1f34a;简介&#xff1a;毕业后就一直专业从事计算机软件程序开发&#xff0c;至今也有8年工作经验。擅长Java、Python、微信小程序、安卓、大数据、PHP、.NET|C#、Golang等。 擅长&#xff1a;按照需求定制化开发项目…
阅读更多...
uniapp-部分文件中文乱码

uniapp-部分文件中文乱码

一、问题 在开发时遇到&#xff0c;部分页面的中文显示乱码&#xff0c;如图 搜索了一下解决方法&#xff0c;这里记录一下 二、问题原因&#xff1a; 页面的编码格式不是 utf-8 造成的 三、解决方法 打开出现乱码页面选择编译器左上角的文件 > 以指定编码重新打开 选择U…
阅读更多...
React状态管理：react-redux和redux-saga(适合由vue转到react的同学)

React状态管理：react-redux和redux-saga(适合由vue转到react的同学)

注意&#xff1a;本文不会把所有知识点都写一遍&#xff0c;并不适合纯新手阅读 首先Redux是一种状态管理方案&#xff0c;本身和react并没有什么联系&#xff0c;redux也可以结合其他框架来用。 react-redux是基于react的一种状态管理实现&#xff0c;他不像vuex那样直接内置在…
阅读更多...
WO Mic 手机变身免费麦克风

WO Mic 手机变身免费麦克风

目录 一、主要特点 1.支持多种连接方式 2.应用广泛 3.低延迟 4.简易配置 5.自动连接 6.音频格式 二、软件下载 三、软件安装 四、系统连接 五、测试 直播的时候，上课的时候，会议的时候……突然发现没有麦克风或者电脑麦克风有故障，这可怎么办呢？今天给大家介绍一…
阅读更多...
计算机毕业设计选题推荐-医院问诊系统-Java/Python项目实战

计算机毕业设计选题推荐-医院问诊系统-Java/Python项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…
阅读更多...
深兰科技创始人陈海波入选“2024先锋科创家?硬科技商业先锋榜”

深兰科技创始人陈海波入选“2024先锋科创家?硬科技商业先锋榜”

8月14日&#xff0c;2024先锋科创家系列榜单揭晓&#xff0c;深兰科技创始人、董事长陈海波先生凭借创新精神和商业洞察力成功入选&#xff0c;荣登“2024先锋科创家•硬科技商业先锋榜”。 该榜单评选由财联社《科创板日报》联合上海科学技术情报研究所(ISTIS)共同发起&#x…
阅读更多...
milvus helm k8s开启监控

milvus helm k8s开启监控

https://milvus.io/docs/monitor.md 文章写的很清晰 &#xff0c;我这边做一下个人补充&#xff0c;初版可能只是配置&#xff0c;具体的grafana 监控报表后期补一下。 架构如下&#xff1a; values.yaml 配置 enabled: true 改为true metrics:enabled: trueserviceMonitor:…
阅读更多...
解决使用uniapp时，uni.switchTab跳转标签页面不刷新的问题

解决使用uniapp时，uni.switchTab跳转标签页面不刷新的问题

我们在使用uni.switchTab跳转到标签页面时&#xff0c;并不会触发这个标签页面的onLoad方法。这是因为在 uni-app中&#xff0c;uni.switchTab用于跳转到指定的标签&#xff08;tab&#xff09;页面。由于标签页面是单实例的&#xff0c;即无论何时切换到该标签页面&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023