一,HTML标签
–超链接标签:在网页中跳转的效果
百度一下
<!-- 超链接标签a
href属性用来,跳转到指定的网址
target属性用来,指定打开方式(默认_self,新窗口_blank)
-->
<a href="https://www.baidu.com" target="_blank"> 百度一下 </a> <ol>
<li> <a target="_blank" href="#"> 全国新冠疫苗接种剂次超7亿 </a> </li>
<li> <a target="_blank" href="#"> 美国公布首批疫苗全球分配计划 </a> </li>
</ol>
<!-- 锚定:使用a标签实现回到顶部 -->
<a name="top">我是顶部</a>
<h3>如何套取富婆的欢心</h3>
<h3>如何套取富婆的欢心</h3>
<h3>如何套取富婆的欢心</h3>
<a href="#top"> ^回到顶部 </a>
--input标签:实现在网页中输入不同类型的数据
<!-- input标签:类型很多,实现类各种类型的数据的输入 -->
<input type="text"/> <!-- 普通的文本-->
<input type="password"/> <!-- 密码-->
<input type="number"/> <!-- 纯数字-->
<input type="button" value="点我"/> <!-- 按钮-->
<input type="radio"/>北京 <!-- 单选-->
<input type="checkbox"/> Anglelababa <!-- 多选-->
<input type="week"/> <!-- 日期-->
<input type="submit"/> <!-- 提交按钮-->
<input type="email" /> <!-- 邮箱-->
<input type="date" /> <!-- 日期 年月日-->
--表格标签:实现在网页中插入一个表格
<table border="1px" cellspacing="0" bgcolor="antiquewhite" width="30%" align="center">
<tr>
<td colspan="2">11</td> <!-- colspan是列合并,合并2列-->
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td rowspan="2">23</td> <!-- rowspan是行合并,合并2行 -->
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</table>
--表单标签:form标签，专门用来向服务器提交数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签</title>
</head>
<body>
<!-- form表单用来给服务器发送数据,GET POST,默认是GET -->
<form>
<table border="1px" cellspacing="0" bgcolor="gainsboro">
<tr>
<td colspan="2"> <!-- 合并列 -->
<h2 align="center">注册表单</h2> <!-- 居中-->
</td>
</tr>
<tr>
<td>用户名：</td>
<td>
<input type="text" placeholder="请输入用户名" name="username"/>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" placeholder="请输入密码" name="pwd"/>
</td>
</tr>
<tr>
<td>确认密码：</td>
<td>
<input type="password" placeholder="请输入密码" name="repwd"/>
</td>
</tr>
<tr>
<td>昵称：</td>
<td>
<input type="password" placeholder="请输入昵称" name="nick"/>
</td>
</tr>
<tr>
<td>邮箱：</td>
<td>
<input type="email" placeholder="请输入邮箱" name="email"/>
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<!-- 性别想实现单选,name值必须一样, value等于几就向服务器几-->
<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="hobby" value="1"/>篮球
<input type="checkbox" name="hobby" value="2"/>足球
<input type="checkbox" name="hobby" value="3"/>乒乓球
</td>
</tr>
<tr>
<td>城市：</td>
<td>
<select name="city"> <!-- 下拉框-->
<option value="1">北京</option> <!-- 下拉选项-->
<option value="2">上海</option>
<option value="3">广州</option>
</select>
</td>
</tr>
<tr>
<td>头像：</td>
<td>
<input type="file" />
</td>
</tr>
<tr>
<td>验证码：</td>
<td>
<input type="text" />
<img src="a.jpg" />
<input type="button" value="点我换一张"/>
</td>
</tr>
<tr>
<td>自我描述：</td>
<td>
<textarea>
请输入描述信息...
</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>
--其他标签:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>H5</title>
</head>
<body>
<!-- 块元素 div p h1~h6
行内元素 span input a img
-->
<div>6月3日0-24时，全省新增本土确诊病例7例，广州报告6例，佛山报告1例；另有本土无症状感染者转确诊病例2例，广州报告。新增本土无症状感染者1例，广州报告。</div>
<div>6月3日0-24时，全省新增本土确诊病例7例，广州报告6例，佛山报告1例；另有本土无症状感染者转确诊病例2例，广州报告。新增本土无症状感染者1例，广州报告。</div>
<div>6月3日0-24时，全省新增本土确诊病例7例，广州报告6例，佛山报告1例；另有本土无症状感染者转确诊病例2例，广州报告。新增本土无症状感染者1例，广州报告。</div>
<div>6月3日0-24时，全省新增本土确诊病例7例，广州报告6例，佛山报告1例；另有本土无症状感染者转确诊病例2例，广州报告。新增本土无症状感染者1例，广州报告。</div>
<div>6月3日0-24时，全省新增本土确诊病例7例，广州报告6例，佛山报告1例；另有本土无症状感染者转确诊病例2例，广州报告。新增本土无症状感染者1例，广州报告。</div>
<p>6月3日0-24时，全省新增本土确诊病例7例，广州报告6例，佛山报告1例；另有本土无症状感染者转确诊病例2例，广州报告。新增本土无症状感染者1例，广州报告。</p>
<p>6月3日0-24时，全省新增本土确诊病例7例，广州报告6例，佛山报告1例；另有本土无症状感染者转确诊病例2例，广州报告。新增本土无症状感染者1例，广州报告。</p>
<p>6月3日0-24时，全省新增本土确诊病例7例，广州报告6例，佛山报告1例；另有本土无症状感染者转确诊病例2例，广州报告。新增本土无症状感染者1例，广州报告。</p>
<span>6月3日0-24时，全省新增本土确诊病例7例，广州报告6例，佛山报告1例；另有本土无症状感染者转确诊病例2例，广州报告。新增本土无症状感染者1例，广州报告。</span>
<span>6月3日0-24时，全省新增本土确诊病例7例，广州报告6例，佛山报告1例；另有本土无症状感染者转确诊病例2例，广州报告。新增本土无症状感染者1例，广州报告。</span>
<span>6月3日0-24时，全省新增本土确诊病例7例，广州报告6例，佛山报告1例；另有本土无症状感染者转确诊病例2例，广州报告。新增本土无症状感染者1例，广州报告。</span>
<!-- 插入音频文件 controls使用默认控件 source指定文件位置-->
<audio controls="controls">
<source src="jay.mp3"></source>
</audio>
<!-- 插入视频 controls使用默认控件 source指定文件位置 loop循环播放-->
<video controls="controls" loop="loop">
<source src="b.mp4"></source>
</video>
</body>
</html>
--小票练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小票</title>
</head>
<body>
<div>顾客联</div>
<div>请您留意取餐账单号</div>
<div>自取顾客联</div>
<div>永和大王（北三环西路店）</div>
<div>010-62112313</div>
<div>--结账单--</div>
<div>账单号：P000009</div>
<div>账单类型：食堂</div>
<div>人数：1</div>
<div>收银员：张静</div>
<div>开单时间：2018-04-17 07:24:11</div>
<div>结账时间：2018-04-17 07:24:22</div>
<hr />
<table>
<tr>
<td>数量</td>
<td>品项</td>
<td>金额</td>
</tr>
<tr>
<td>1</td>
<td>玉米肉松蛋饼<br/>1X--玉米肉松蛋饼<br/>1X--现磨豆浆</td>
<td>8.00</td>
</tr>
</table>
<hr />
<table>
<tr>
<td>合计</td>
<td>8.0</td>
</tr>
<tr>
<td>微支付</td>
<td>8.0</td>
</tr>
</table>
<hr />
<div>打印时间：2018-04-17 07:24:23</div>
<hr />
<div>根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整.</div>
</body>
</html>
--总结
h1~h6是标题标签
table表格标签 tr行 td列
input输入标签
div/span/p 段落标签
img/video/audio 图片/视频/音频标签
a 超链接标签
width宽度 height高度 bgcolor背景色 border边框 cellspacing单元格距离
align位置 colspan合并列 rowspan合并行 ...
二,CSS
–1,概述
专门用来修饰网页的效果的,样式表stylesheet
–2,语法
选择器{ 修饰的效果 }
body{ width:800px; bgcolor:red; }
–3,使用的位置
–第一种是在 HTML 的标签里使用 style属性
测试 css的样式
–第二种是在 head 的标签里使用 style标签
–第三种是在 head 的标签里使用 link标签引入一个css文件
–先创建一个css文件:右键-新建css文件
p{ / 选中网页中的p元素设置效果/
color:deeppink;
font-weight: 200;
}
–在html里引入css:
–HTML代码
<!-- 引入一个css文件 rel用来指定文件的类型是固定值 href用来指定文件的位置-->
<link rel="stylesheet" href="html7.css"/>
<!-- style标签是html提供的 -->
<style>
/* 这个是css的注释 */
/* 语法: 选择器{ 效果 } */
span{
color:green ; /* 设置字的颜色*/
font-size: 30px;
}
</style>
</head>
<body>
<div style="color:red ; font-size:50px; ">测试 css的样式 的第1种写法</div>
<span>测试 css的样式的第2种写法</span>
<span>测试 css的样式的第2种写法</span>
<span>测试 css的样式的第2种写法</span>
<p>测试 css的样式的第3种写法</p>
</body>
</html>
--CSS代码
p{
color:deeppink;
font-weight: bold;
}
--4,选择器:选中网页中的指定元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css选择器</title>
<!-- 在html中加css代码 -->
<style>
/*1. 标签名选择器,选中标签是body的元素 */
body{
width: 300px; /* 设置网页的宽度*/
}
/*2. 标签名选择器,选中标签是div的元素 */
div{
background-color: #008000; /* 背景色*/
}
/*3. class选择器:给指定元素加class属性+通过.获取class的值 */
.a{ /* 获取了网页里class=a的元素*/
background-color: #FF1493;
}
</style>
</head>
<body>
<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>
<span class="a">我是span1</span>
<span>我是span2</span>
<span class="a">我是span3</span>
<p>我是p1</p>
<p>我是p2</p>
<p>我是p3</p>
<a href="#">我是a1</a>
<a href="#">我是a2</a>
</body>
</html>
--5,属性
–
作业:练习html4.html文件,敲三遍
扩展:
–1,form表单提交数据的两种方式:
–收集用户在网页中填写的信息,发送给服务器
–get方式:数据都在地址栏展示,不安全,有大小的限制
–http://127.0.0.1:8848/cgb2104/html4.html?username=jack&pwd=123
–如果想要提交数据,必须给标签配置 name属性
–username是网页中 name属性的值
–jack 是网页中 用户输入的值
–post方式:看不到数据,安全,没有大小限制
| 第二天 |
|---|
一,HTML练习
--1,网页文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习form</title>
</head>
<body>
<!-- 把form里的数据提交给服务器get/post
method属性用来指定数据的提价方式,默认是get
action属性用来指定数据要提交给哪个服务器处理
-->
<form method="get" action="#">
<table>
<tr>
<td> <h3>用户注册</h3> </td>
</tr>
<tr>
<td>
<input type="text" placeholder="用户名" name="user"/>
</td>
</tr>
<tr>
<td>支持中文、字母、数字、“-”、“_”的组合，4-20个字符</td>
</tr>
<tr>
<td>
<input type="password" placeholder="设置密码" name="pwd"/>
</td>
</tr>
<tr>
<td>建议使用数字、字母和符号两种以上的组合，6-20个字符</td>
</tr>
<tr>
<td>
<input type="password" placeholder="确认密码" name="repwd"/>
</td>
</tr>
<tr>
<td>两次密码输入不一致</td>
</tr>
<tr>
<td>
<input type="number" placeholder="验证手机" name="phone"/>
或
<a href="#">验证邮箱</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
我已阅读并同意
<a href="#">《京淘用户注册协议》</a>
</td>
</tr>
<tr>
<td>
<input type="submit" value="立即注册"/>
</td>
</tr>
</table>
</form>
</body>
</html>
二,CSS选择器
–1,标签名选择器:通过标签的名字,选择元素
–2,class选择器:先给元素添加class属性,再通过.获取class的值
–3,id选择器:先给元素添加id属性,再通过#获取id的值
–4,分组选择器:用不同的选择器选中很多元素
–5,属性选择器:按照标签的属性的值选择元素
–6,测试
<style>
/*1. 利用标签名选择器,修饰div的样式,添加背景色 */
div{
background-color: #FF1493;
text-indent: 60px;/* 首行缩进 */
}
/*2. 利用class选择器(先加class属性,然后通过.获取class的值),修饰p和span的样式,加大字号 */
.x{
font-size: 50px;
}
/*3. 利用id选择器(先加id属性,然后通过#获取id的值),修饰a的样式,居中,字的颜色 */
#m{
text-align: center;
color: #008000;
}
/*4. 分组选择器:用不同的选择器选中很多元素,再修饰 */
.x , #m {
background-color: aqua; /* 设置背景色*/
}
/*5. 给所有input设置背景色为蓝色 */
input{
background-color: blue;
}
/*6. 属性选择器:按照标签的属性的值选择元素,给所有input type="text" 的设置背景色为红色 */
input[type="text"] {
background-color: red;
}
</style>
</head>
<body>
<input type="text" placeholder="用户名"/>
<input type="text" placeholder="昵称"/>
<input type="password" placeholder="密码"/>
<input type="password" placeholder="确认密码"/>
<div>我是div</div>
<p class="x">我是p</p>
<span class="x">我是span</span>
<a id="m">我是a</a>
</body>
</html>
三,盒子模型
–1,概述
css认为HTML是由每个盒子组成的
–2,使用
–边框:盒子的边框,可以设置粗细 颜色 实线/虚线 border:2px dashed red;
–内边距:内容和边框的距离 padding:20px;
–宽度高度:设置内容的宽度高度 width:10px;height:10px;
–外边距:盒子和盒子的距离 margin:10px;
四,综合练习
–1,小票
–创建css文件,写css代码
/* 统一网页的风格 /
body{
font-size: 20px;/ 字号 /
width: 400px;/ 宽度 /
}
/ 设置字号加大 /
.please{
font-size: 30px;/ 字号 /
}
/ 设置文字居中 /
.me{
/ text-align: center; 文字居中*/
/* text-indent: 100px; 首行缩进*/
padding-left:80px ; /* 内边距,左边距 /
}
/ 设置文字的首行缩进和边距 /
#readme{
text-indent: 20px;
margin-top: 50px;
}
hr{
border:1px dashed black;/ 虚线 */
}
--创建html文件,写html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小票</title>
<!-- 引入外部的css文件 -->
<link rel="stylesheet" href="regist.css"/>
</head>
<body>
<div>顾客联</div>
<div class="please">请您留意取餐账单号</div>
<div class="me">自取顾客联</div>
<div>永和大王（北三环西路店）</div>
<div>010-62112313</div>
<div class="me">--结账单--</div>
<div class="please">账单号：P000009</div>
<div>账单类型：食堂</div>
<div>人数：1</div>
<div>收银员：张静</div>
<div>开单时间：2018-04-17 07:24:11</div>
<div>结账时间：2018-04-17 07:24:22</div>
<hr/>
<table>
<tr>
<td>数量</td>
<td>品项</td>
<td>金额</td>
</tr>
<tr>
<td>1</td>
<td>玉米肉松蛋饼<br/>1X--玉米肉松蛋饼<br/>1X--现磨豆浆</td>
<td>8.00</td>
</tr>
</table>
<hr />
<table>
<tr>
<td width="220px">合计</td>
<td>8.0</td>
</tr>
<tr>
<td>微支付</td>
<td>8.0</td>
</tr>
</table>
<hr />
<div>打印时间：2018-04-17 07:24:23</div>
<hr />
<div id="readme">根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整.</div>
</body>
</html>
--2,注册
--创建css文件,写css代码
/* 左边距,统一字号 */
form{
margin-left: 100px;
font-size: 15px;
}
/* input的宽度高度 和内边距 */
input{
width: 400px;
height: 30px;
padding: 10px;
padding-left: 30px;
font-size: 20px;
}
/* 小文字的字号,灰色 */
.q{
font-size: 10px;
color: gray;
text-indent: 30px;
}
/* 把checkbox设置 */
input[type="checkbox"]{
width: 20px;
height: 20px;
margin: 20px;
}
/* 按钮宽度高度 背景色 白字 居中 */
input[type="submit"]{
width: 450px;
height: 60px;
background-color: firebrick;
color: white;
text-align: center;
border: 1px solid firebrick;
}
/* 用户注册 文字居中 */
h1{
text-indent: 150px;
}
--创建html文件,写html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习form</title>
<!-- 引入外部的css文件 -->
<link rel="stylesheet" href="regist2.css" />
</head>
<body>
<!-- 把form里的数据提交给服务器get/post
method属性用来指定数据的提价方式,默认是get
action属性用来指定数据要提交给哪个服务器处理
-->
<form method="get" action="#">
<table>
<tr>
<td> <h1>用户注册</h1> </td>
</tr>
<tr>
<td>
<input type="text" placeholder="用户名" name="user"/>
</td>
</tr>
<tr>
<td class="q">支持中文、字母、数字、“-”、“_”的组合，4-20个字符</td>
</tr>
<tr>
<td>
<input type="password" placeholder="设置密码" name="pwd"/>
</td>
</tr>
<tr>
<td class="q">建议使用数字、字母和符号两种以上的组合，6-20个字符</td>
</tr>
<tr>
<td>
<input type="password" placeholder="确认密码" name="repwd"/>
</td>
</tr>
<tr>
<td class="q">两次密码输入不一致</td>
</tr>
<tr>
<td>
<input type="number" placeholder="验证手机" name="phone"/>
或
<a href="#">验证邮箱</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
我已阅读并同意
<a href="#">《京淘用户注册协议》</a>
</td>
</tr>
<tr>
<td>
<input type="submit" value="立即注册"/>
</td>
</tr>
</table>
</form>
</body>
</html>
五,JS
–1,概述
提高浏览器和用户的交互性.让浏览器动起来.
JS跨平台,只要有浏览器就可以执行JS
–2,语法
–弱类型的语言: var a = 10; a = 1.2;
–运算符:±*/ += -= == != === !==
–分支结构:if…else if…
–循环结构:for while for…in
–函数:有参 有返回值
–数组:长度可变 + 存各种类型的数据
–3,测试
<div onclick="alert(100);">我是div</div>
</body>
</html>
–
扩展
–1,HTTP协议
–用来规定请求数据发送给服务器的格式,规范服务器给响应数据的格式
–请求数据的格式
请求头:
要访问哪个服务器,谁发起的请求,请求使用的语言,使用的浏览器,ip地址…
–响应数据的格式
响应头:
响应使用的编码,要响应的数据的长度…
–2,前端的查询网址:
https://www.w3school.com.cn
https://www.runoob.com/
| 第三天 |
|---|
一,解析URL
–1,代码
package cn.tedu.jdbc;
import java.util.Arrays;
import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
public class TestGetUrl {
//服务器:解析用户发来的数据
public static void main(String[] args) {
String url="http://127.0.0.1:8848/cgb2104/regist.html?user=jack&pwd=123&repwd=123&phone=135";
//1. 按照?切割字符串 ,得到a[]
String[] a = url.split("\\?");
//[http://127.0.0.1:8848/cgb2104/regist.html, user=jack&pwd=123&repwd=123&phone=135]
System.out.println(Arrays.toString(a));
// 2. 重点解析第二部分字符串, a[1]
String s = a[1]; //user=jack&pwd=123&repwd=123&phone=135
// 3. 按照&切割字符串,得到b[]
String[] b = s.split("&");
//[user=jack, pwd=123, repwd=123, phone=135]
System.out.println(Arrays.toString(b));
// 5. 把user作为key,jack作为value存入map
Map<String,String> map = new ConcurrentHashMap<>();
// 4. 遍历b数组,按照=切割字符串
for (String ss : b) { //user=jack
String c[] = ss.split("=") ;
String key = c[0];//user
String value = c[1];//jack
map.put(key,value);
}
//{phone=135, pwd=123, repwd=123, user=jack}
System.out.println(map);
String name = map.get("user") ;
System.out.println(name);
//拿着name去查库.jdbc
}
}
二,JS
–1,概述
提高网页的交互性
–2,出现的位置
–行内js::
单击弹框
–内部js::把js代码用script标签,出现在head里
–外部js::引入外部的js文件
–3,测试
<!-- 3. 引入外部js src属性用来指定JS文件的位置-->
<script src="js1.js"></script>
<!--2. 内部js 在HTML里嵌入JS代码 -->
<script>
alert(666);
alert(666);
</script>
</head>
<body>
<!--1. 行内js -->
<div onmouseenter="alert(100);">点我弹框</div>
<div>点我弹100</div>
</body>
</html>
--4,基本语法
--创建HTML文件,引入js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 JS语法</title>
<!-- 引入JS文件 -->
<script src="js1.js"></script>
</head>
<body>
</body>
</html>
--创建js文件,写js代码
//4. JS的语句
//if..else if...else switch...case for while
//死循环:::: 条件永远成立 OOM
// while(true){}
// for(;;){}
//用while打印[1,100]
var g=1;
while(g<=100){
console.log(g);
g++;
}
var sum = 0 ;//定义变量,记录偶数和
var count = 0 ;//定义变量,记录奇数个数
for (var i = 1; i <=100; i++) {
if(i % 2 == 1){//过滤出来奇数
count++;//是奇数就+1
// count=count+1;
// count+=1;
}
if(i % 2 == 0){//过滤出来偶数
// sum = sum + i ;//偶数就求和
sum += i ; //求和
}
}
console.log("[1,100]里的偶数和是: "+sum);
console.log("[1,100]里的奇数个数是: "+count);
// 例子: 接收用户输入的数字，判断数字给出提示
//从浏览器接受到的数据默认都是string类型,变成number类型--parseInt()
var num = parseInt( prompt("请输入数字") ) ;
switch(num){
case 1 : console.log("春天"); break;
case 2 : console.log("夏天"); break;
case 3 : console.log("秋天"); break;
case 4 : console.log("冬天"); break;
}
// 例子: 接收用户输入的成绩，判断成绩所属的等级
var score = prompt("请输入成绩");
if(score>=80 && score<=100){
console.log("优秀");
}else if(score>=60 && score<80){
console.log("中等");
}else if(score>=0 && score<60){
console.log("不及格");
}else{
console.log("输入有误");
}
// var l = 3;
// if(l==3){
// console.log(1); //输出到浏览器的控制台上(要按f12才能看见)
// }else{
// alert(0); //直接在浏览器上弹框
// }
// //3. JS的运算符
// //typeof用来获取数据类型
// var k = 10;
// alert(typeof k);
// k=1.1;
// alert(typeof k);
// k="hello js";
// alert(typeof k);
// var max = 5 > 10 ? 0 : 1 ;
// alert(max);//求两个数里的大值
// var i = 25;
// alert(i % 10); //求25的个位数 ,取余
// alert(i / 10); //2.5
// i = i++; //先运算再自增
// alert(i);//25
// var j = 10 ;
// j += 10 ; // j = j + 10;
// alert(j); //20
// alert(1 == 1);
// alert( 1 == '1' );//true,比值
// alert( 1 === '1' );//false,比值和类型
// //2. JS的变量: var 变量名 = 变量值
// var b = 10;
// b=6.6 ;
// b="hello";
// var c = 1.1;
// var d = true;
// var e = null;
// alert(b);
// alert(c);
// alert(d);
// alert(e);
// //交换变量的值(prompt接受浏览器输入的值)
// var f = prompt("请输入一个数字") ;
// var g = prompt("请输入另一个数字") ;
// var h = g ;
// g = f ;
// f = h ;
// alert(f);
// alert(g);
// //1. JS是弱类型的语言,也有一些数据类型包括:number/string/boolean/null/undefined
// alert(10);
// alert(1.1);
// alert(1.1+2.9);//得到4,自动类型转换
// alert(2-0.1);
// //string类型的数据可以被写成::: "??" '???'
// alert("Hello");
// alert('Hello');
// //boolean类型的数据只有两个值 true false
// alert(true);
// alert(false);
// alert(null);
// //undefined:使用了没赋值的变量
// var a ;
// alert(a);
--5,高级语法
/* 测试js的高级语法:数组+函数 */
//3. js定义函数:: function 函数名(参数列表){函数体}
//方式1
function method(){
console.log(100);
}
//方式2,还没定义就先调用会报错:method2 is not a function
var method2 = function(){
console.log(200);
}
//定义 含参 函数
function method3(a,b){
console.log(a+b);
}
function method4(a,b){
console.log(a+b);
}
//定义 有返回值 函数
function method5(a,b){
//把结果返回给调用者
return a*b ;
}
//4. js调用函数
var x = method5(10,2);
console.log(x);//x记录method5返回的结果
method();
method2();
method3(1,2.1);
method4(1,"jack");
//1. js定义数组
var a = [];
var b = new Array();
b = new Array(1,1.1,"hi",'hello',true,null,9.1);
console.log(b.length);
//js里数组的长度,可以随时修改
a = [1,2,3,4,5,6] ;
console.log(a);
console.log(a[0]+"==============");
console.log(a.length);
//js里数组的数据类型丰富
a = [1,1.1,"hi",'hello',true,null,9.1];
console.log(a);
console.log(a.length);
//2. js遍历数组
/* i是下标, 从0开始到长度-1截止, 下标++ */
for(var i = 0 ; i < a.length ;i++){
// 根据下标获取a数组里的数据
console.log(a[i]);
}
// 求数组里的数据的和
var c = [1, 2.5, 3, 4, 5.3];
var sum = 0 ;//定义变量,记录和
for (var i = 0; i < c.length; i++) {
sum = sum + c[i] ;
}
console.log(sum);
/* 增强for循环 for...in */
for(var i in c){
console.log(c[i]);
}
// 随时改变数组的长度
c[100] = 0 ;
console.log(c.length); //101
| 第四天 |
|---|
一,JS创建对象
–1,代码
<!-- 在HTML里嵌入JS代码 -->
<script>
//方式2:
var p2 = {
"name" : "jack", // 动态添加属性
"age" : 20 , // 动态添加属性
"sex" : "男", // 动态添加属性
"study": function(){ // 动态添加函数
console.log(10);
}
}
console.log(p2);
p2.study(); //调用函数
//方式1:
// 声明对象
function Person(){ }
// 创建对象
var p = new Person();
// 动态添加属性
p.name="jack";
p.age=18;
console.log(p);
console.log(p.name); //jack
console.log(p.age); //18
// 动态添加函数
p.study=function(){
console.log(100);
} ;
console.log(p);
//练习: 含参...有返回值的
p.eat=function(a){
console.log(a);
}
p.sleep=function(a,b){
return a*b;
}
//调用函数
p.study();//100
p.eat(10);
var x = p.sleep(10,20);
console.log(x);
</script>
</head>
<body>
</body>
</html>
二,DOM
–1,概述
用来把整个HTML文件当做一个document文档对象,解析每个元素
–2,常用API
getElementById() – 通过id获取元素,就一个
getElementsByName() – 通过name获取元素,获取到很多[]
getElementsByTagName() – 通过标签名获取元素,获取到很多[]
getElementsByClassName() – 通过class获取元素,获取到很多[]
innerText – 获取元素的文字
innerHTML – 获取元素的文字
–3,测试
<!-- 在HTML里添加JS代码 -->
<script>
function fun(){
//1. 获取id=a的元素 getElementById
// var x = window.document.getElementById("a");
// x.innerText ="<h1>我变了...</h1>" ; //修改了标签里的文字
// console.log(x.innerText); //获取了标签里的文字
// x.innerHTML ="<h1>我变了...</h1>" ; //修改了标签里的文字
// console.log(x.innerHTML); //获取了标签里的文字
//innerText 和 innerHTML的区别? 后者可以解析HTML代码/标签
//2. 获取name="me"的元素 getElementsByName
var y = document.getElementsByName("me");
console.log( y[0].innerText );//我是div1
//3. 获取span的元素 getElementsByTagName
var z = document.getElementsByTagName("span");
z[2].innerText="我变了..";
console.log( z[2].innerText );
//4. 获取class="cls"的元素 getElementsByClassName
var o = document.getElementsByClassName("cls");
console.log( o[0].innerHTML );
}
</script>
</head>
<body>
<div id="a" name="me">我是div1</div>
<div onclick="fun();">我是div2</div>
<a name="me">我是a</a>
<span id="b" class="cls">我是span1</span>
<span name="me">我是span2</span>
<span class="cls">我是span3</span>
</body>
</html>
三,Jquery
–1,概述
就是为了简化了JS代码,尤其是DOM
–2,优势
–3,语法
$(选择器).事件()
–4,入门案例
<!--1. 在html里引入jquery的文件 -->
<script src="jquery-1.8.3.min.js"></script>
<script>
<!-- 点击id=d的元素时,获取span里的文字 -->
function f(){
//js
// var a = document.getElementsByClassName("s");
// console.log( a[0].innerText );
//2. jq::: $(选择器)
var b = $(".s");
// console.log( b[0].innerText );
console.log( b.text() );
}
</script>
</head>
<body>
<div id="d" onclick="f();">我是div</div>
<span class="s">我是span</span>
</body>
</html>
--5,文档就绪
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery文档就绪函数</title>
<!-- 1.引入jQuery文件 -->
<script src="jquery-1.8.3.min.js"></script>
<script>
<!-- 2. 当网页全部加载完成时(文档就绪函数), 再用资源,不然的话可能用到null会报错的-->
// $(document).ready(function(){
$(function(){ //简写形式
var a = document.getElementById("h");
console.log( a.innerText );
});
</script>
</head>
<body>
<h1 id="h">我是h1</h1>
</body>
</html>
--6,选择器:基于CSS选择器
--标签名选择器:$("div")--选中网页中标签名是div的一批元素
--class选择器:$(".a")--选中网页中class=a的一批元素
--id选择器:$("#a")--选中网页中id=a的一个元素
--分组选择器:$("div,.a,#b")--选中网页中标签名是div的和class=a的和id=b的一批元素
--属性选择器:$("input[type='text']")--选中type='text'的输入框
--7,事件:单击/双击/鼠标滑过...
--click单击事件
--dbclick双击
--mouseenter鼠标进入
--mouseleave鼠标离开
--keydown按下键盘
--8,测试:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 JQuery的选择器和事件</title>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(function(){ //简写的文档就绪
//id选择器,选中 id="d1"的元素,并绑定单击事件
$("#d1").click(function(){
//标签名选择器,选中a标签,并隐藏 hide() / show()
$("a").hide();
});
//双击h1
$("#d2").dblclick(function(){
$("a").show();//显示a标签
})
});
$(function(){ //文档就绪
// 练习:单击a标签,隐藏所有p标签
$("a").click(function(){
$("p").hide();
});
//练习:单击h1,给div加背景色css
$("h1").click(function(){
$("div").css("background-color","pink");
});
});
</script>
</head>
<body>
<div id="d1">我是div</div>
<a>我是a</a>
<span class="m">我是span</span>
<h1 id="d2">我是h1</h1>
<p class="m">我是p1</p>
<p>我是p2</p>
</body>
</html>
扩展:
–1,JQuery报错:Uncaught ReferenceError: $ is not defined
检查JQuery文件的引入路径或者文件名是否正确
| 第五天 |
|---|
一,Json
–1,概述
是轻量级的 客户端 和 服务器之间 数据交换的格式
本质上就是一个字符串
–2,格式
–普通的json串 “k” : “v”
–json对象 {“k” : “v” , “k” : “v” , “k” : “v”}
–json数组 [{“k”:“v” , “k”:“v” , “k”:“v”},{“k”:“v” , “k”:“v” , “k”:“v”}]
–3,测试
<!-- 在网页中,添加JS代码 -->
<script>
var p = ' "name":"jack" ' ; //1. 简单的json字符串
console.log(p);
console.log(p.length); //获取字符串的长度
p = ' { "name":"jack" , "age":"20" , "sex":"男" } ' ; //2. json对象
console.log(p);
console.log(p.concat(123)); //拼接字符串
p = '[{"name":"rose","age":"20"} , {"name":"jack","sex":"女" }]' ; //3. json数组
console.log(p);
//4. json字符串 和 js对象 互转:: 利用工具类JSON
//json字符串 转成 js对象(为了调用对象的属性.函数):: js对象 = JSON.parse(字符串)
var obj = JSON.parse(p);
console.log(obj) ; //是数组,可以用下标获取每个对象
console.log(obj[0].age) ; //20,调用属性的值
console.log(obj[1].name) ; //jack,调用属性的值
//js对象 转成 json字符串(为了调用字符串的功能):: 字符串 = JSON.stringify(js对象)
var str = JSON.stringify(obj);
console.log(str) ;
console.log(str.length) ; //获取长度
console.log(str.concat("abc")) ; //拼接字符串
console.log(str.substring(5)) ; //截取字符串
</script>
</head>
<body>
</body>
</html>
二,Ajax
–1,概述
为了提高浏览器的响应速度,ajax可以实现异步访问(不必等待上一次的结果),局部刷新 (只刷新局部,而不是整个网页)
–2,语法
–使用JQuery提供的ajax技术,
–导入JQuery的函数库
–使用
$.ajax({
type:“post” , //请求的方式get/post
url: “https://p.3.cn/prices/mgets” , //请求的地址
contentType: “json” , //要发送的数据的类型
data: {“name”:“jack”}, //要访问地址时携带的数据
dataType: “jsonp”, //返回数据的类型
success: function(data) { //执行成功后调用的
console.log(data);
}
error: function(data) { //执行失败后调用的
console.log(data);
}
});
–3,测试
<!--1. 引入jQuery的函数库 -->
<script src="jquery-1.8.3.min.js"></script>
<!--2. 使用ajax -->
<script>
$(function(){//文档就绪函数
$.ajax({ //指定参数的值就可以
type: "POST" , //指定请求方式get post
url: "https://p.3.cn/prices/mgets" , //指定请求地址
contentType: "application/json;charset=utf-8" , //发送数据的类型
data:{ "skuIds": "J_100003717483" } , //拼接的参数
dataType: "jsonp" , //响应的数据的类型
success: function(data){
//data已经被转换成了js对象,可以直接解析属性的值
console.log(data); //打印了服务器返回的数据
console.log(data[0].p); //解析返回的数据,p的值
console.log(data[0].op); //解析返回的数据,op的值
},
error: function(data){
alert("访问失败.");
}
})
});
</script>
</head>
<body>
</body>
</html>
三,Maven
–1,概述
项目管理工具.主要是管理jar包.包括:jar包的下载,安装,保存.
–2,概念
–远程仓库/中央仓库:就是一个国外的网址,全球的人都会访问.
–镜像仓库:就是一个国内的网址,一些大公司去连接中央仓库下载好所有jar包,存到自己 的服务器里.(华为/阿里/网易…)
–本地仓库:需要自己创建一个文件夹,存从镜像仓库里下载好的一些jar包.
–坐标:存jar包的唯一定位的方式.
–groupId指定了jar包的组id
–artifactId指定了jar包的项目id
–version指定了jar包的版本
–添加jar包/添加依赖:
mysql
mysql-connector-java
5.1.32
–检查:
去本地仓库找,是否有下载好的XXX.jar文件,有才能用里面的工具类.
没有就不能用,还会报错ClassNotFoundException
–!!!3,使用
–解压maven3.6的压缩包
–修改conf/settings.xml配置文件
–镜像仓库:配置了阿里的网址
–本地仓库:有默认值(在c盘),也可以自己配置位置,以后就存下载好的jar包
–在IDEA里创建maven项目
File-New-Project-选择maven-next-输入项目名称和组id-Finish
–在IDEA里配置maven
File-Settings-Build…-Maven-改三处(解压的位置/settings.xml/本地仓库)-ok
–在maven项目里添加依赖
打开pom.xml文件-指定jar包的坐标-刷新(右上角的maven里有小图标)
–创建测试类
package cn.tedu;
//测试jdbc,如果工具都能正常使用,说明jar包下载成功了
//如果工具不能使用,说明jar包没下载成功
public class TestJDBC {
public static void main(String[] args) throws ClassNotFoundException {
Class.forName(“com.mysql.jdbc.Driver”);
System.out.println(“jar包添加并下载成功啦~~~~”);
}
}
--4,目录结构
--src/main/java --存正确的java代码
--src/main/resources --存资源文件
--src/test/java --存要测试的java代码
--pom.xml --添加jar包的依赖的坐标
3874
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
