1 HTML
是超文本标记语言,专门用来完成网页的制作
是由大量的 标记/标签 组成的,<???>
结构: 文档声明行, 头部分使用head标签, 体部分使用body标签(控制浏览器要展示的内容)
2 HTML的常用标签
2.1 标题 & 列表 & 图片标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 常用标签</title>
</head>
<body>
<!-- 3.图片标签
总结:src属性用来指定图片的路径,width属性用来指定图片的宽度,
单位是像素px,height属性用来指定图片的高度
-->
<img src="3.jpg" width="200px" height="20%"/>
<img src="3.jpg" width="200px" height="20%"/>
<img src="3.jpg" width="200px" height="20%"/>
<!-- 2.列表标签 有序:ol li 无序:ul li
有序:ol li ,ol用来定义有序列表orderlist ,li是列表项
无序:ul li ,ul用来定义无序列表unorderlist ,li是列表项
-->
<ol>
<li>我是1号元素</li>
<li>我是1号元素</li>
<li>我是1号元素</li>
</ol>
<ul>
<li>我是2号元素</li>
<li>我是2号元素</li>
<li>我是2号元素</li>
</ul>
<!-- 1.标题标签 h1大~h6小,自动换行,字体加粗. -->
<h1>我是1号标题</h1>
<h2>我是1号标题</h2>
<h3>我是1号标题</h3>
<h4>我是1号标题</h4>
<h5>我是1号标题</h5>
<h6>我是1号标题</h6>
</body>
</html>
2.2 a & input 标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 常用标签</title>
</head>
<body>
<!-- 4.input标签:输入框 -->
普通输入框:<input type="text"/> <br />
密码输入框:<input type="password"/> <br />
日期输入框:<input type="date"/> <br />
星期输入框:<input type="week"/> <br />
数字输入框:<input type="number"/> <br />
邮箱输入框:<input type="email"/> <br />
普通按钮:
<input type="button" value="保存"/>
<button>保存</button><br />
提交按钮:可以提交数据,指把前端的数据提交给后端
<input type="submit" value="提交"/>
<button type="submit">提交</button><br />
单选框:<input type="radio" />男 <br />
多选框:<input type="checkbox" />杨幂
<br />
<br />
<br />
<!-- 1.超链接标签
href属性用来指定跳转路径,target属性用来指定打开方式(默认是当前窗口_self)
-->
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<!-- 2.锚定:回到指定的位置,通过#获取name属性的值 -->
<a name="top">我是顶部</a>
<h3>北京富婆通讯录</h3>
<h3>北京富婆通讯录</h3>
<h3>北京富婆通讯录</h3>
<h3>北京富婆通讯录</h3>
<h3>北京富婆通讯录</h3>
<h3>北京富婆通讯录</h3>
<h3>北京富婆通讯录</h3>
<h3>北京富婆通讯录</h3>
<h3>北京富婆通讯录</h3>
<h3>北京富婆通讯录</h3>
<h3>北京富婆通讯录</h3>
<h3>北京富婆通讯录</h3>
<a href="#top">点我,回到顶部</a>
<!-- 3.实现图片的点击跳转 -->
<a href="http://www.baidu.com">
<img src="3.jpg" width="100px" height="80px"/>
</a>
</body>
</html>
2.3 table 标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 常用标签</title>
</head>
<body>
<!-- 2.练习表格: th:表头标签(加粗.居中) ,colspan:列合并, rowspan:合并行-->
<table border="1px" bgcolor="yellow" cellspacing="0">
<tr>
<th>总页面流量</th>
<th>共计来访</th>
<th>会员</th>
<th>游客</th>
</tr>
<tr>
<td>平均每人浏览</td>
<td colspan="3">1.58</td>
</tr>
</table>
<!-- 1.表格标签
总结:table是向网页中添加表格,tr是表格里的行,td是行里的列元素
属性:border用来设置边框,width设置宽度,height高度,
cellspacing单元格的间距 ,bgcolor是背景色
-->
<table border="2px" width="500px" height="100px"
cellspacing="0" bgcolor="pink">
<tr>
<td colspan="2">11</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td rowspan="2">23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</table>
</body>
</html>
2.4 form 表单标签
只有form标签可以提交数据. 表单标签form比表格标签多了提交功能.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 常用标签</title>
</head>
<body>
<form>
<h1>注册表单</h1>
<table width="500px" border="1px"
bgcolor="lightgray" cellspacing="0">
<tr>
<td>用户名:</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td>昵称:</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>邮箱:</td>
<td>
<input type="email" />
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" />男
<input type="radio" />女
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" />篮球
<input type="checkbox" />足球
<input type="checkbox" />乒乓球
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<!-- 下拉框 select option -->
<select>
<option>请选择</option>
<option>北京</option>
<option>上海</option>
</select>
</td>
</tr>
<tr>
<td>头像:</td>
<td>
<input type="file" />
</td>
</tr>
<tr>
<td>验证码:</td>
<td>
<input type="text" />
<img src="a.png" />
<button>点我换一张</button>
</td>
</tr>
<tr>
<td>自我描述:</td>
<td>
<textarea>这是文本域~</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit">提交</button>
<button type="reset">重置</button>
</td>
</tr>
</table>
</form>
</body>
</html>
2.5 其他标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 其他的常用标签2:-->
<!-- audio添加音频,controls属性用来使用控件
source的src属性用来指定文件的位置`
-->
<audio controls="controls">
<source src="jay.mp3"></source>
</audio>
<!-- video添加视频,controls属性用来使用控件 -->
<video controls="controls">
<source src="b.mp4"></source>
</video>
<!-- 其他的常用标签1:
相同点:都是可以包含大量的元素
区别:div和p是块元素,span是行元素
-->
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<p>我是p1</p>
<p>我是p1</p>
<p>我是p1</p>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
</body>
</html>
3 CSS
是专门用来修饰HTML网页的一个技术. 全称是层叠样式表stylesheet
使用位置:
1. 行内CSS: 是指给这行代码添加css的修饰
2. 内部CSS: 是指在head标签中使用style标签,添加添加css的代码
3. 外部CSS: 是指会单独生成.css文件,里面写css代码.哪个网页需要就引入到哪个网页里
语法:
选择器{ 属性名:属性值; 属性名:属性值; 属性名:属性值; 属性名:属性值; }
学习重点:
1,选择器有哪些
2,属性名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试css的出现位置</title>
<!-- 2.内部css. 选择器{ 属性名:属性值; 样式2;...} -->
<style>
/* 练习3:给所有div设置居中 */
div{
text-align:center;
}
/* 练习4:给所有span设置文字颜色 */
span{
color: #008000;
}
</style>
</head>
<body>
<!-- 1.行内CSS/内联CSS -->
<!-- 练习1:给div1加背景色 -->
<div style="background-color:#ADD8E6;">我是div1</div>
<div>我是div2</div>
<!-- 练习2:给div3加背景色 -->
<div style="background-color:#ADD8E6;">我是div3</div>
<span>我是span1</span>
<span>我是span2</span>
</body>
</html>
4 CSS选择器
CSS提供特殊语法,可以帮你选中元素
分类: 基本选择器(标签名,类class,id) + 高级选择器(分组,属性)
4.1 基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试css的选择器</title>
<style>
/* 1.标签名选择器:可以根据标签的名字选中元素 */
/* 练习1:给输入框加背景颜色*/
input{
background-color: #A9A9A9;
}
/* 2.类class选择器:给元素加class属性(值可以重复) + 通过.获取class属性的值 */
/* 练习2:给 我是div2和我是p2 字号变大*/
.a{
font-size: 30px;
}
/* 3.id选择器:给元素加id属性(值不重复) + 通过#获取id属性的值 */
/* 练习3: 把 我是div1 加一个红色边框*/
#c{
border-width: 2px;/* 宽度 */
border-style: dashed;/* 样式 */
border-color: red;/* 红色 */
border-radius: 25px;/* 圆角 */
}
</style>
</head>
<body>
<div id="c">我是div1</div>
<div class="a">我是div2</div>
<p>我是p1</p>
<p class="a">我是p2</p>
用户名: <input type="text"/>
密码: <input type="password"/>
</body>
</html>
4.2 高级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试css的选择器</title>
<style>
/* 练习1: 设置 我是P1 的文字透明度 */
#a{
opacity: 0.5;/*值是0~1的范围,值越大越清晰 */
}
/* 练习2: 把 我是a1 和 我是a2 的效果 */
a{
font-size: 30px;/* 字号 */
font-family: "微软雅黑"; /* 字体 */
}
/* 练习3: 把所有元素设置 字号 */
body{
font-size: 10px;
}
/* 分组选择器:可以使用多种选择器选中多个元素,多种选择器用逗号隔开 */
#a,.b,input{
font-size: 10px;
}
/* 属性选择器: */
[href]{ /* 选中那些有href的元素 */
color: red;
}
[type="text"]{ /* 选中那些有type的元素,而且值要是text才行 */
background-color: hotpink;
}
input[type="number"]{/* 选中input,那些有type的元素,而且值要是number才行 */
background-color: green;
}
</style>
</head>
<body>
<p id="a">我是P1</p>
<p class="b">我是P2</p>
<a href="#" class="b">我是a1</a>
<a href="#" class="b">我是a2</a>
姓名: <input type="text" placeholder="看这里...."/>
年龄: <input type="number" />
</body>
</html>
5 盒子模型
CSS认为HTML的所有元素,都是一个一个的盒子.
1,外边距: margin,盒子间的距离
2,内边距: padding,一个盒子里,内容和边框的距离
/* 输入框:宽度 高度 字的颜色 字的大小 */
.a{
width: 350px;
height: 30px;
font-size: 20px;
color: gray;
padding:10px ;
}
/* 提示文字:字的大小 缩进 透明度 */
.b{
font-size: 8px;
/* 内边距,是指内容和盒子边框的距离 */
padding-left:20px;
/* 外边距,是指盒子间的距离 */
margin:10px;
}
/* 按钮:宽度 高度 字的颜色 背景色 */
input[type="submit"]{
width: 370px;
height: 50px;
color: white;
background-color: red;
border-color: red;
font-size: 25px;
}
/* 我已阅读 */
#c{
/* margin: 30px; 上下左同时生效*/
margin-left: 30px;/* 单独设置左边距 */
margin-top: 20px;/* 单独设置上边距 */
margin-bottom: 20px;/* 单独设置下边距 */
}
/* 标题居中 */
h1{
/* text-align: center; */
margin-left: 110px;
}
6 JS
1. 全称是javascript,是脚本语言,只能在浏览器中运行.
2. js是一个基于对象和事件驱动的脚本语言.
基于对象:js也能像java一样通过new自定义js对象
事件驱动:js可以让网页动起来,什么时候要触发执行js代码
3. js的特点
直译式: 不需要编译过程
弱类型: js不关心类型
4. js出现位置:
行内JS:
内部JS:
外部JS:
7 JS的语法
7.1 基础语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 js的基础语法</title>
<!--在网页中加入一段js代码 -->
<script>
//3.JS的运算符
//? :
//练习:求两数里的大值
var h = 10;
var i = 20;
var j = h > i ? h : i ;
alert(j);
//&& ||
//1 && 2 ,要求1和2都是true,结果才是true
当1为false时,后面的2倍短路提高了效率
//1 || 2 ,要求1或者2有一个true,结果是true
当1为true时,后面的2倍短路提高了效率
//== != === !==
//===比较类型和值,==只比值
alert(1=='1');//true
alert('1'=='1');//true
alert(1==='1');//false
alert('1'===1);//false
alert(1===1);//true
//+= -=
var count = 1;
count++;
count=count+1;
count+=1;
//% /
alert(5%2);//取余
alert(5/2);//2.5
//++ --
var z = 5;
var c = z+++z;//相当于拿着z++的结果再+z,因为++优先级高
alert(c);//11
var x = 10;
x = ++x;
alert(x);//11
var y = 10;
y = y++;
alert(y);//10
//2.JS的变量:JS是弱类型的语言
//练习:交换变量值
var m = 10;
var n = 5;
var o = n;
n = m;
m = o;
alert(m);
alert(n);
var a = 10;//number
a = 1.1 ;//number
a = true ;//boolean
a = 'javascript' ;//string
alert(a);//javascript
//1.JS的数据类型:number/string/boolean/null/undefined
alert(2.4+3.6);//6,number
//在JS中,字符串可以用'' ""
alert('hello js');//string
alert("hello js");//string
alert(true);//boolean
alert(false);//boolean
alert(null);//null
alert(undefined);//undefined
</script>
</head>
<body>
</body>
</html>
7.2 JS的分支语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 js的语句</title>
<script>
//1.分支结构
//if..else
// 例子: 判断成绩所属的等级
var score = prompt('请在这里输入分数...') ;
if(score>=80 && score<=100){
// alert('优秀');
//输出到浏览器的控制台中
console.log('优秀');
}else if(score>=60 && score<80){
alert('中等')
}else if(score>=0 && score<60){
alert('不及格')
}else{
alert('输入有误')
}
//switch..case --- 了解!!
//判断用户输入的是几,提示今天是星期几...
var day = prompt('请输入星期几');
console.log(typeof day);//typeof查看day的类型,string
switch(day){
case '1':console.log('今天星期一');break;
case "2":console.log('今天星期二');break;
case "3":console.log('今天星期三');break;
case '4':console.log('今天星期四');break;
case '5':console.log('今天星期五');break;
case '6':console.log('今天星期六');break;
case '7':console.log('今天星期日');break;
}
//了解:typeof运算符查看类型
console.log(typeof 123);//number
console.log(typeof "123");//string
console.log(typeof true);//boolean
console.log(typeof 123+"abc");//numberabc
console.log(typeof 123+100);//number100
console.log(typeof (123+100));//number
</script>
</head>
<body>
</body>
</html>
7.3 JS的循环语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 js的语句</title>
<script>
//2.while循环
//练习1:如果你有1个亿,每天花500w,算算能花多少天
let days = 0;//记录天数
let money = 100000000;//记录钱
while(money>0){
money=money-5000000;//花钱
days++;//天数++
}
console.log(days);
//1.for循环
//练习3:打印1~10的里奇数的个数
let count=0;//奇数的个数
for(let i=1;i<=10;i++){
if(i%2 == 1){//过滤奇数
count++;//修改个数
}
}
console.log(count);
//练习2:打印1~10的总和
let sum = 0;//记录总和
for(let i=1;i<=10;i++){
sum = sum + i;//修改总和
}
console.log(sum);
//练习1:打印1~10
// for(var i=1; i<11 ; i++){//问题:变量的作用范围太大,超出范围还能用?????!!
for(let i=1; i<11 ; i++){//定义了有作用域的变量
console.log(i);
}
console.log(i);//var的i可以用(这是错误现象!),let的i会报错(这才是对的现象!)
</script>
</head>
<body>
</body>
</html>
7.4 JS的数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 js的数组</title>
<script>
//练习2:找出数组里的奇数数据
let m = [1.1,2,3,4,5,"张三"];
for(let i in m){//i是下标
if( m[i] % 2 == 1 ){//奇数
console.log(m[i]);
}
}
//练习1:统计整数数组中,偶数的总和
let x = [1,2,3,4,5,6];
let y = 0;//记录和
for(let i in x){//i是下标
if( x[i] % 2 == 0 ){//偶数
y = y + x[i];
}
}
console.log(y);
//1,定义数组
//方式1:
let a = new Array();//创建数组
console.log(a);//打印数组
console.log(a.length);//获取数组长度
//方式2:
let b = [];//创建数组
console.log(b);
console.log(b.length);
//2,添加数据
let c = new Array(1,1.1,true,"jack",null);
let d = [1,1.1,true,"jack",null];
console.log(c);
console.log(d);
//3,获取数据--根据下标遍历
//i是下标,c[i]是根据下标获取数据,c.length是数组的长度
for(let i = 0; i<c.length ;i++){
console.log(c[i]);
}
//foreach : for(int a : b)//a是数组里的数据,b是数组名
//forin : for(let a in b)//???
for(let i in c){//i是下标
console.log(i);//下标
console.log(c[i]);//下标对应的数据
}
//优势1:js是弱类型的语言,js的数组可以存放各种类型的数据(java里的Object[]也可以)
//优势2:js里的数组长度,随时可以变
c[100]='ok';
console.log(c);//
console.log(c.length);//101
</script>
</head>
<body>
</body>
</html>
7.5 JS的函数
7.5.1 定义函数调用函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 JS函数</title>
<script>
//练习1:封装函数,求数组里偶数的和
// function sum(){ //方式1
let sum = function(){ //方式2
//1,创建数组
let arr = [1,2,3,4,5,6,7,8];
//2,遍历数组
let sum2=0;//定义变量,记录和
//for(let i=0;i<arr.length;i++){
for(let i in arr){//i是下标,arr[i]是数据
//3,过滤偶数
if(arr[i] % 2 === 0){
//4,求和
sum2+=arr[i];
}
}
console.log(sum2);
}
//1,创建函数
//方式1:
function add(){
console.log("add..被调用成功!");
}
//方式2:
var a = function(){
console.log("a..被调用成功!");
}
//2,调用函数
add();
a();
</script>
</head>
<body>
<button οnclick="sum()">点我,获取数据</button>
</body>
</html>
7.5.2 函数传参
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 JS函数</title>
<script>
//改造练习1:封装函数,求数组里偶数的和
// function sum(){ //方式1
let sum = function(arr){ //方式2
//2,遍历数组
let sum2=0;//定义变量,记录和
//for(let i=0;i<arr.length;i++){
for(let i in arr){//i是下标,arr[i]是数据
//3,过滤偶数
if(arr[i] % 2 === 0){
//4,求和
sum2+=arr[i];
}
}
console.log(sum2);
}
//调用函数
let a =[4,5,6,7,8,89,10];
sum(a);
//1,创建函数
function print(x){
console.log(x);
}
function add(x,y){
console.log(x+y);
}
//2,调用函数
print('abc');
add(1,2);
</script>
</head>
<body>
</body>
</html>
7.5.3 函数的返回值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 JS函数</title>
<script>
//练习2:模拟set设置值 / get获取值
//创建函数
//set()把调用者传来的参数设置值
let name = '';
function set(x){
name = x;//设置值
}
//get()把值返回给调用者
function get(){
return name ;
}
//调用函数
set('jack'); //设置值
let name2 = get();//获取值
console.log(name2);
//练习1:创建函数,求1~10的和并返回
function save(){
let sum =0;
for(let i=1;i<=10;i++){
sum += i;
}
//谁要调用这个函数,谁即将保存着return的值
return sum;
}
let a2 = save();
console.log(a2);
//1,创建函数--通过return把结果返回给调用者
let add = function(x,y,z){
//通过return把结果返回给调用者
return x+y+z;
}
//2,调用函数
let a = add(1,2,3);
console.log(a);
</script>
</head>
<body>
</body>
</html>
7.6 JS对象
7.6.1 内置对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 js对象</title>
<script>
//1,JS的内置对象
function test1(){
//String对象的功能
let a = 'javascript';
console.log( a.length ); //获取字符串的长度
console.log( a.toUpperCase() ); //全转大写
let b = a.substring(1,5); //截取字符串[1,5)
console.log( b );
console.log( a.concat('hello ~') ); //拼串
//Math对象
console.log( Math.PI );//π的值
console.log( Math.random() ); //随机数0~1
console.log( Math.random() * 10 );
console.log( Math.round(1.9) );//对小数的处理,round四舍五入
console.log( Math.round(1.1) );//对小数的处理,round四舍五入
//Array对象
let c = [3,2,4,5,2];
console.log( c );
console.log( c.toString() );//打印数组里的数据
console.log( c.sort() ); //对数组排序,默认从小到大
//window对象--可以省略
window.alert(100);//弹出框
window.prompt(); //输入框
window.confirm() ;//确认框
//DOM
Document d = window.document;
//JSON
}
</script>
</head>
<body>
<!--2,调用函数 -->
<button οnclick="test1()">单击按钮</button>
</body>
</html>
7.6.2 自定义对象
方式一:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 js对象!!!!</title>
<script>
//练习:创建Car对象
function Car(){}
let c = new Car();
//动态的添加属性或者函数
c.color='red';
c.start=function(){
return '启动成功!'
}
//模拟tostring(),返回属性的值
c.tostring=function(){
//this代表当前的对象
return "["+this.color+"]" ;
}
console.log(c);
//调用属性或者函数
let str = c.tostring();
console.log(str);
let res = c.start();
console.log(res);
console.log( c.color );
//方式1!!:
//1,声明对象
function Person(){}
//2,创建对象
var p = new Person();
//3,动态的给对象绑定属性
p.name="rose";
p.age=20;
console.log(p);//Person {name: 'rose', age: 20}
//4,动态的给对象绑定函数
p.study = function(){
console.log(100);
}
console.log(p);//?
//5,调用对象的功能
console.log( p.name );
console.log( p.age );
p.study();
//方式2!!!!:
</script>
</head>
<body>
<button>点我,获取数据</button>
</body>
</html>
方式二:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 js对象!!!!</title>
<script>
//练习:创建JS对象对并调用
let person= {
name : "蔡徐坤",
like : "唱跳rap",
play : function(a){
return a;
}
}
console.log(person.name+person.like);
let a = person.play('篮球');
console.log(a);
//1,创建JS对象
let student = {
//属性名 : 属性值
name : "jack" ,
age : 18 ,
//函数名 : 函数声明
coding : function(){
console.log(100);
}
,
tostring:function(){
return this.name+","+this.age ;
}
}
//2,调用对象的功能
let res = student.tostring();
console.log(res);
student.coding();
console.log(student.name + student.age);
//{name: 'jack', age: 18, coding: ƒ}
console.log(student);
</script>
</head>
<body>
</body>
</html>
8 Json
是一种轻量级的 数据交互 格式.本质上就是一个字符串(文本).
作用: 用来完成 前后端 数据 交互的 格式 , 存储和管理 数据.
语法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 JSON串</title>
<!-- json用来把 前后的数据 进行交互 -->
<script>
//解决方案:如果能把一个json字符串转成js对象,就能通过对象调用属性啦--JSON对象
var c = '[{"name":"jack","age":"20"},{"name":"rose","age":"22"}]'
var jsobj = JSON.parse(c);//把json串转成js对象
console.log(jsobj);//得到一个数组
console.log(jsobj[0].name);//调用对象的属性,jack
console.log(jsobj[1].name);//调用对象的属性,rose
//3,json数组
console.log(c);
//需求:把json串里的 jack 和 rose获取到
console.log(c.substring(10,14));//jack
console.log(c.substring(37,41));//rose
//2,json对象
var b = '{"name":"18","age":"20"}';
console.log(b);
console.log(b.length);//获取长度
console.log(b.concat(100));//拼接
console.log(b.substring(1,5));//截取
//1,json字符串
var a = '"name":"熊大"' ;
console.log(a);
console.log(a.length); //获取长度
console.log( a.concat(123) ); //拼接
console.log( a.substring(2,6) ); //截取[2,6)
</script>
</head>
<body>
</body>
</html>
9 DOM
是由JS提供的技术, 用来像CSS的选择器一样, 使用JS提供的一套API, 就可以选中网页中的各种元素
会把HTML网页翻译成一个Document.
9.1 Document对象
window.document---获取Document对象
getElementById()---通过id属性的值,获取元素,只有一个
getElementsByName()---通过name属性的值,获取元素,会得到多个,存入数组
getElementsByClassName()---通过class属性的值,获取元素,会得到多个,存入数组
getElementsByTagName()---通过标签名,获取元素,会得到多个,存入数组
title--获取标题
innerHtml--获取内容
innerText--获取内容
10 Vue
是一个轻量级的 MVVM的框架.可以使用数据驱动/双向绑定,组件化,路由…
特点:
1, 综合了HTML CSS JS 技术
2, 渐进式的框架: 按需配置, vue.js + ???
3, 优化了DOM操作网页元素的方式, 使用了CSS的选择器
11 Vue的基础语法
11.1 运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="a">
算术运算符: {{3+2}} {{3-2}} {{3*2}} {{3/2}} {{3%2}}
三元运算符: {{age > 18 ? '成年人' : '未成年'}}
<div>字符串的内容是: {{str}}</div>
<div>字符串的长度是: {{str.length}}</div>
<div>字符串拼接后: {{str.concat(100)}}</div>
<div>字符串截取后: {{str.substring(1,3)}}</div>
</div>
<script>
new Vue({
el:"#a",
data:{
age:10,
str:'hello'
}
})
</script>
</body>
</html>
11.2 创建函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="a">
算术运算符: {{3+2}} {{3-2}} {{3*2}} {{3/2}} {{3%2}}
三元运算符: {{age > 18 ? '成年人' : '未成年'}}
<div>字符串的内容是: {{str}}</div>
<div>字符串的长度是: {{str.length}}</div>
<div>字符串拼接后: {{str.concat(100)}}</div>
<div>字符串截取后: {{str.substring(1,3)}}</div>
<div>调用函数:{{show()}}</div>
<div>函数传参:{{add(1,2)}}</div>
<div>函数的返回值:{{sum(1,2)}}</div>
</div>
<script>
new Vue({
el:"#a",
data:{
age:10,
str:'hello'
}
,
methods:{//vue里创建函数,必须放在methods里
//函数名:函数的声明
show(){
alert(1)
},
add(x,y){
alert(x+y)
},
//sum:function(x,y){
sum(x,y){ //效果同上,简写形式
return x+y;
}
}
})
</script>
</body>
</html>
11.3 解析复杂的数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试vue解析复杂的数据</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1>vue解析简单的数据: {{name}} {{age}}</h1>
<h1>vue解析对象的数据: {{person.name}} {{person.age}}
{{person.coding()}} {{person.tostring()}}
</h1>
<h1>vue解析数组的数据:{{hobby}} {{hobby[0]}} {{hobby[1]}} </h1>
<h1>vue解析数组的数据:{{list}} {{list[0]}} {{list[1]}}
{{list[0].name}} {{list[1].name}}
</h1>
</div>
<script>
new Vue({
el:"#app",
data:{
name : "jack",
age : 20,
//对象名:声明
person : {
name : "rose",
age : 18,
coding:function(){
alert(100)
},
tostring:function(){
return this.name+this.age ;
}
},
hobby:["足球","篮球"],
list:[
{name:"jack",age:20},
{name:"rose",age:10}
]
}
})
</script>
</body>
</html>
12 vue的data的三种写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue里data的三种写法</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1>解析对象的数据: {{person.name}} {{person.age}}</h1>
<h1>解析数组的数据: {{hobby[0]}} {{hobby[1]}}</h1>
</div>
<script>
new Vue({
el:"#app",
//data的数据用函数方式返回:将来方便组件化的思想
//data:function(){
data(){//效果同上,简写形式
return {
person:{
name:'tony',
age:20
},
hobby:["唱","跳rap"]
}
}
})
</script>
</body>
</html>
13 Vue指令
是一些特殊的命令, 都是vue提供的, 并且有标识:v-*
使用方式: 在标签上,当做一个属性来用
常见的指令: v-model v-if v-for v-bind v-on…
13.1 v-model & v-html & v-cloak
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue指令</title>
<script src="vue.js"></script>
<!-- 3.v-cloak指令:用来解决闪现的问题,
给数据渲染区添加v-cloak,选中有v-cloak属性的元素,然后隐藏
-->
<style>
[v-cloak]{
display: none;//隐藏
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h1>{{msg}}</h1>
<h1>{{msg}}</h1>
<h1>{{msg}}</h1>
<h1>{{msg}}</h1>
<!-- 1.v-model指令:实现了双向绑定/数据驱动 ,值是属性名 -->
<input type="text" v-model="msg"/>
<!-- 2.v-text/v-html指令:用来获取属性的值,后者可以解析HTML标签,值是属性名 -->
<div>{{name}}</div>
<div v-text="name"></div>
<div v-html="name"></div>
</div>
<script>
new Vue({
el:"#app",
data(){
return{
msg : 'hello vue~',
name:'<h1>jack</h1>'
}
}
})
</script>
</body>
</html>
13.2 v-if & v-show
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue的指令</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 1.v-if指令:用来完成判断,判断条件满足就展示,不满足不展示 -->
<p v-if="age >= 18">成年人</p>
<p v-if="age < 18">未成年人</p>
<!-- 2.v-show 和 v-if的区别??
判断条件满足就展示,不满足判断条件的元素 不会展示,
v-show会加载没有满足条件的元素,背后使用css的样式,让元素隐藏了.style="display: none;"
v-if根本就不会加载没有满足条件的元素
-->
<p v-show="age < 18">未成年人</p>
<!-- 3. v-if / v-else-if / v-else 指令:类似于java里的嵌套分支 -->
<p v-if="salary >= 1000000">金领</p>
<p v-else-if="salary >= 500000">白领</p>
<p v-else-if="salary >= 5000">蓝领</p>
<p v-else>屌丝</p>
</div>
<script>
new Vue({
el:"#app",
data(){
return {
age : 20,
salary : 2000
}
}
})
</script>
</body>
</html>
13.3 v-for & v-on
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue的指令</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 1.v-for指令:循环获取数据,
o in hobby其中o是数据,hobby是data里的数组名称
i是下标
-->
<p v-for="o,i in hobby">数据:{{o}} - 下标:{{i}}</p>
<ol>
<li v-for="o in hobby">{{o}}</li>
</ol>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<!-- v-for加在行上,就是会循环产生多行.
person in persons 其中,persons是数组名,person是数组里的数据
-->
<tr v-for="person in persons">
<!-- 获取person对象的name属性的值并展示 -->
<th v-html="person.name"></th>
<!--{{person.age}}获取person对象的age属性的值 -->
<th>{{person.age}}</th>
</tr>
</table>
<!-- 2.v-on指令:用来给元素添加vue的事件,
v-on:可以简写成一个@
click是单击,dblclick是双击
-->
<button v-on:click="show()">单击按钮</button>
<button v-on:dblclick="test()" >双击按钮</button>
<button @dblclick="test()" >双击按钮</button>
<!-- 点赞按钮,点一次就加1 -->
<button @click="sum()">点赞{{count}}</button>
</div>
<script>
new Vue({
el:"#app",
data(){
return{
hobby:["篮球","足球"],
persons:[
{name:"jack",age:20},
{name:"rose",age:30}
],
count:0 //记录点赞的次数
}
},
methods:{
show(){
alert(100);
},
test(){
alert(200);
},
sum(){ //计算点赞的次数
this.count++; //修改count变量的值,自增的过程
}
}
})
</script>
</body>
</html>
13.4 v-bind
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue的指令</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<a href="{{url}}">百度一下</a>
<!-- 1.v-bind指令: 把后面的值当变量来解析,获取变量的值,也可以简写 -->
<a v-bind:href="url">百度一下</a>
<a :href="url">百度一下</a> <!-- 同上,是简写形式-->
</div>
<script>
new Vue({
el:"#app",
data(){
return{
url:'http://www.baidu.com'
}
}
})
</script>
</body>
</html>
14 Vue组件
是Vue框架提供的一个功能, 扩展了HTML的标签.
使用: 像使用HTML标签一样,直接使用Vue组件就可以了.
好处: 提高了前端代码的复用性
分类:
1,全局组件 – Vue.component(组件名,组件的功能)
2,局部组件 – 给Vue对象添加新的属性components
14.1 全局组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 Vue组件component</title>
<script src="vue.js"></script>
</head>
<body>
<!-- 组件: 封装了前端的代码,提高了代码的复用性.
将来由各种小组件组成大网页
开发步骤: 创建组件(全局/局部) + 使用组件(像标签一样的用)
-->
<div id="app">
<!-- 2.使用组件 -->
<hello></hello>
</div>
<script>
//1.创建 全局组件
//组件名,组件功能(key是固定值template,value是组件的功能)
//vue对象的常用属性:::: el:挂载点, data:数据,methods:函数
Vue.component('hello',{
template:'<h1>你好</h1>'
})
new Vue({
el:"#app"
})
</script>
</body>
</html>
14.2 局部组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 Vue局部组件component</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<start></start>
</div>
<div id="a">
<!-- 2.使用局部组件:只能在指定的vue对象指定的数据渲染区来使用 -->
<start></start>
</div>
<script>
new Vue({
el:"#a"
})
//1.创建局部组件
new Vue({
el:"#app",
components:{
//组件名:组件内容
start : {
template:'<a href="https://www.baidu.com/">百度一下</a>'
}
}
})
</script>
</body>
</html>
15 Vue路由
根据用户即将要访问的请求方式,决定交给哪个 组件来处理这次请求.
开发步骤:
1, 导入vue.js文件
2, 导入vue-router.js文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 Vue路由router</title>
<!-- 1.导入核心js文件 -->
<script src="vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 3.使用路由 -->
<router-link to="/home">主页</router-link>
<router-link to="/help">帮助页</router-link>
<router-view></router-view>
</div>
<script>
/* 2.创建路由 */
/* 2.3.创建组件 */
let home={
template:'<h1>我是主页</h1>'
}
let help={
template:'<h1>我是帮助页</h1>'
}
/* 2.2.创建路由对象VueRouter */
let router = new VueRouter({
routes:[
//描述路由的具体规则,分发请求:根据请求匹配组件
// 请求路径 组件名
{path:"/home",component:home},
{path:"/help",component:help}
]
})
/* 2.1.创建vue对象,使用新属性 */
new Vue({
el : "#app",
//属性名:属性值(变量名)
//router : router
router //效果同上,只是简写形式
})
</script>
</body>
</html>
16 Vue的Ajax
1,全称是异步的js和xml,
2,同步和异步的区别?
同步:保证了数据的安全,牺牲了效率(排队)
异步:效率高,牺牲安全(不排队)
3,特点: 高效,局部刷新…异步访问…
Vue框架中,提供了关于原生Ajax的优化,叫axios,全称是ajax input output system.
4,开发步骤:
先导入axios.min.js文件 + 使用正确语法发起一个Ajax请求
5,语法:
axios.get(url,params).then( abc =>{ alert(abc); } )
//其中,参数,url必要的.params是请求参数可以省略. abc是表示请求成功后程序的返回值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue的axios技术</title>
<!-- 1.导入js文件 -->
<script src="vue.js"></script>
<script src="js/axios.min.js"></script>
</head>
<body>
<div id="app">
<button @click="show()">发起Ajax请求</button>
</div>
<script>
new Vue({
el:"#app",
methods:{
show(){
//发起一个Ajax请求
axios.get('https://www.w3school.com.cn/').then(
result => {
console.log(result);
}
)
}
}
})
</script>
</body>
</html>
17 Vue脚手架
17.1 Vue生命周期
三大阶段: 初始化阶段,服务中阶段,销毁阶段
生命周期函数/钩子函数:
1, 组件刚被创建时: beforeCreate created
2, 模板/挂载点 被加载时: beforeMount mouted
3, 组件被更新数据时: beforeUpdate updated
4, 销毁阶段: beforeDestroy destroyed
17.2 一些概念
npm: 是包管理器,从网站上,下载/更新/删除 一些包
webpack: 是一个快速构建(下载)前端项目的 工具. 快速的下载,打包,压缩…
17.3 安装nodejs
安装的过程就是下一步下一步就行.
安装完,使用DOS命令来检验安装的版本号:
node -v
17.4 修改npm网址
npm config get registry #查看npm下载的网址
npm config set registry https://registry.npm.taobao.org #修改npm下载的网址
17.5安装脚手架
C:\Users\WangYiBo>npm install vue-cli -g #下载脚手架,下载一路没有飘红ERR.
C:\Users\WangYiBo>vue -V #查看脚手架的下载版本
C:\Users\WangYiBo>where vue #查看下载好的位置
C:\Users\WangYiBo\AppData\Roaming\npm\vue
18 MVVM
是Vue框架的一种设计思想,实现代码间的松耦合.
19 Git
是一个版本控制的产品,可以管理项目的每个文件的每个版本的记录
特点:
分布式开发的系统
发布了无数的开源项目
19.1 Git中的重要角色
1, 工作空间: 存放了项目代码的地方
2, 本地索引: 保存了要即将上传的文件
3, 本地仓库: 存了有了索引的即将上传的文件
4, 远程仓库: Gitee服务器,最终要上传的目的地
上传流程:
5, 新增add:是指 从工作空间 新增到 本地索引
6, 提价commit: 是指 从本地索引 提交到 本地仓库
7, 推送push: 是指 从本地仓库 推送到 远程仓库
下载流程:
8, 克隆clone: 是指 从远程仓库 克隆到 本地仓库
19.2 准备工作
1, 安装Git.exe,下一步…
2, 去Gitee官网,注册账号
3, 工作空间: 在你的电脑里创建文件夹,存放即将上传的资源 ( E:\workspace\gitee )
4, 远程仓库: 在Gitee的官网,创建远程仓库, 保存你上传好的资源
(登录Gitee的官网,右上角点加号,新建仓库,输入仓库名/开源,创建)
19.3 上传
进到你的工作空间的文件夹里,执行以下命令:
#Git 全局设置:
git config --global user.name "cgblpx" #设置注册账号
git config --global user.email "2250432165@qq.com"#设置注册邮箱/手机号
#创建 git 仓库:
mkdir cgb2110 #创建文件夹
cd cgb2110 #进入文件夹
git init #初始化git
进入你的工作空间,创建一个1.txt,并编写内容
E:\workspace\gitee\cgb2110>git add . #提交当前文件夹(cgb2110)里的所有资源
E:\workspace\gitee\cgb2110>git commit -m "first commit" #提交,从本地索引到本地仓库,参数是提交的原因
E:\workspace\gitee\cgb2110>git remote add origin https://gitee.com/cgblpx/cgb2110.git
#绑定本地仓库 和 远程仓库的关系
E:\workspace\gitee\cgb2110>git push -u origin master #真正实现提交数据,提交成功了就刷新Gitee的官网
第一次提交 会弹出下面的用户名、密码框，填写码云的账号/手机号 就可以
20 Tomcat服务器
主要作用:
1, 你的项目资源必须放入 Tomcat里,才能被浏览器 看到
2, 接受这次请求,并处理请求
3, 如果浏览器需要一个结果, 服务器就需要返回一个结果
使用步骤
1,解压
2,开启服务器(必须配置好JAVA_HOME)
D:\Java\apache-tomcat-8.5.72\bin\startup.bat
3,关闭服务器
D:\Java\apache-tomcat-8.5.72\bin\shutdown.bat
4,测试
http://localhost:8080
21 Servlet
通过java代码实现的一段服务器的功能.
1, 接受浏览器的请求
2, 给浏览器做出响应
使用步骤:
1, 导入servlet-api.jar包(被springboot工程简化了)
2, 创建Servlet程序
3, 打开浏览器,按照正确的方式来访问Servlet程序
22 Servlet细则
22.1 继承结构
23 Request对象
1,用来接受请求,并且能够解析 请求参数.
GET方式: http://localhost:8080/user/userServlet?id=10&name=jack
POST方式: 数据不会在地址栏拼接的
2,常用的有两种:
ServletRequest 父接口
HttpServletRequest 子接口
package cn.tedu.cgb2110boot03.request;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Arrays;@WebServlet
public class RequestServlet01 extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);//和doGet干一样的活
}
//http://localhost:8080/RequestServlet01?name=jack&pwd=123
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("恭喜您,请求成功~~");
// Servlet解析请求参数HttpServletRequest
//1.getParameter()--根据参数名获取参数值
String s = request.getParameter("name");
String p = request.getParameter("pwd");
System.out.println(s+p);
//2.getParameterValues()--根据参数名获取参数值,可以获取多个值,存入数组
String[] datas = request.getParameterValues("like");
System.out.println( Arrays.toString(datas) );//[足球, 篮球]
//3.HttpServletRequest的其他API
System.out.println( request.getCharacterEncoding() );//获取请求使用的字符集UTF-8
System.out.println( request.getMethod() );//获取请求方式GET
System.out.println( request.getContextPath() );//获取项目名称(被缺省)
System.out.println( request.getRequestURI() );//要访问的资源路径/RequestServlet01
System.out.println( request.getRequestURL() );//包含着http://localhost:8080/RequestServlet01
System.out.println( request.getRemotePort() );//发起请求时的端口号
System.out.println( request.getQueryString() );//获取请求时携带的参数
}
}
24 请求转发
是服务器内部的过程,客户端感受不到.
过程: 浏览器 -> A----B
特点: 一次请求一次响应. 地址栏不会改变. 全程使用同一个Request对象.
实现: request.getRequestDispatcher(“B的访问规则”).forward(request,response);
25 Response对象
专门用来给浏览器做出响应.
本质上就是获取一个输出流,利用输出流写出数据
常用对象:
ServletResponse – 父接口
HttpServletResponse – 子接口
常用方法:
1, getWriter() – 获取字符流(只能写出字符数据)
2, getOutputStream() – 获取字节流(写出任意格式的数据)
3, setContentType() – 写出数据中,如果包含中文,解决中文乱码
4, sendRedirect() – 完成重定向
package cn.tedu.cgb2110boot03.response;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;//Servlet充当服务器:接受请求Request + 做出响应Response
// http://localhost:8080/resp/servlet01?id=10&name=张三
@WebServlet("/resp/servlet01")
public class ResponseServlet01 extends HttpServlet {
//如果是get请求,Servlet会自动调用doGet()
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//TODO 解析请求参数
String id = request.getParameter("id");
String name = request.getParameter("name");//响应时使用的默认的字符集iso-8859-1,为了防止响应时的中文乱码问题,加以下代码
response.setContentType("text/html;charset=utf8");
//响应解析到的数据
PrintWriter out = response.getWriter();
out.println(id);//提供了一个换行写出的功能
out.write(name);
}
}
26 重定向
和请求转发的过程有点相似.
过程: 浏览器访问A,A告诉浏览器继续访问B,由B返回结果
特点: 两次请求两次响应, 浏览器的地址栏会变 ,两个request/response , 可以重定向到任何资源
实现: response.sendRedirect(“目标资源的访问规则”)
27 过滤器Filter
对资源访问时可以添加拦截的条件. 如果满足条件 才能访问 目标资源.如果不满足条件,目标资源将不允许被访问.
开发步骤:
1, 实现Filter接口,并用注解开发
2, 重写三个抽象方法,init() / destroy() / doFilter()核心方法
3, 配置过滤器的条件
package cn.tedu.cgb2110boot03.filter;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import java.io.IOException;@WebFilter("/*")
public class Filter1 implements Filter {
public void destroy() {
}public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
System.out.println("Filter1...doFilter");
chain.doFilter(req, resp);//放行请求,有这行代码就可以访问目标资源
}public void init(FilterConfig config) throws ServletException {
}
}
28 Vue的钩子函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 Vue的生命周期</title>
<script src="http://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
</div>
<script>
let vm = new Vue({
el:"#app",
data(){
return{
msg:'hello vue!'
}
},
//vue生命周期的初始化阶段的钩子函数:
beforeCreate(){//还没new Vue时触发的
console.log('beforeCreate..');
},
created(){//刚new完Vue时触发的
console.log('created..');
} ,
//vue生命周期的服务阶段的钩子函数:(挂载,更新beforeUpdate/updated)
beforeMount(){//还没有解析插值表达式
console.log('beforeMount..');
console.log(this.$el);//获取el对应的dom节点的内容
} ,
mounted(){//刚解析插值表达式
console.log('mounted..');
console.log(this.$el);
} ,
//vue生命周期的销毁阶段的钩子函数:(销毁)
//需要在浏览器的控制台输入vm.$destroy()才会执行销毁阶段
beforeDestroy(){
console.log('beforeDestroy..');
},
destroyed(){
console.log('destroyed..');
}
})
</script>
</body>
</html>
8665
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
