前言 菜鸟的前端学习2021年度总结
2021年11月中旬开始学习前端，快过年了，简单写下总结。
经过两个月的学习，粗略学习了一些html、css、JavaScript基础，年前放假前学了一点jQuery，从学css起也有每天整理笔记发博客，有时耐心仔细整理，有时偷懒简单“拿来”老师笔记。
前段基础的学习比想象中简单，但也不能骄傲，时刻警醒自己不能自满，挑战与困难永远存在在工作之后的实战中。
年后还将进行差不多3个月的学习，继续加油，继续努力，不负时光不负未来。
浏览器事件
<div style="width: 1500px;height: 1500px;background: cyan;"></div>
<script src="./jquery-1.12.4.js"></script>
<script>
/* 浏览器监听滚动事件 */
// $(window).scroll(function(){
// console.log('scrollLeft',$(document).scrollLeft() )
// console.log('scrollTop',$(document).scrollTop() )
// })
/* 浏览器监听浏览器尺寸发生变化 */
// $(window).resize(function(){
// console.log('我的尺寸变化了');
// console.log( $(window).width() )
// if( $(window).width() <600 ){
// $('div').css('background','red')
// }else{
// $('div').css('background','cyan')
// }
// })
</script>
复制代码
绑定事件
<style>
div{width:200px;height: 200px;background:cyan;}
</style>
<body>
<button>解绑点击事件</button>
<div></div>
<script src="./jquery-1.12.4.js"></script>
<script>
/* 绑定单个事件 */
// $('div').bind('click',function(){
// console.log('我绑定了点击事件')
// })
// $('div').bind('mouseover',function(){
// console.log('我绑定了鼠标移入事件')
// })
// $('div').bind('mouseout',function(){
// console.log('我绑定了鼠标移出事件')
// })
/* 绑定多个事件 */
$('div').bind({
click:function(){
console.log('我绑定了点击事件')
},
mouseover:function(){
console.log('我绑定了鼠标移入事件')
},
mouseout:function(){
console.log('我绑定了鼠标移出事件')
}
})
$('button').click(function(){
/* 解绑 */
// $('div').unbind('click')
/* 当unbind()不带参数时，表示移除所绑定的全部事件 */
$('div').unbind()
})
// $('div').mouseover(function(){
// console.log('我绑定了鼠标移入事件')
// })
// $('div').mouseout(function(){
// console.log('我绑定了鼠标移出事件')
// })
</script>
</body>
复制代码
动画animate
<style>
div{width:200px;height: 200px;background:cyan;position: absolute;left:20px;top:20px;}
</style>
<body>
<button>点我</button>
<div></div>
<script src="./jquery-1.12.4.js"></script>
<script>
$('button').click(function(){
// $('div').slideToggle('500')
$('div').fadeToggle('500')
})
$('div').click(function(){
/* $(selector).animate({params},speed,callback) */
// $('div').animate({
// left:'200px',
// top:'500px'
// },2000,function(){
// $(this).animate({
// left:'400px',
// top:'20px'
// },2000,function(){
// $(this).animate({
// left:'600px',
// top:'500px'
// },2000,function(){
// $(this).animate({
// left:'800px',
// top:'20px'
// },2000,function(){
// /* unbind 也可以操作click直接调用的事件 */
// $('div').unbind('click')
// })
// })
// })
// })
/* 可选。表示速度，默认为“0”，
可能值：毫秒（如1000）、slow、normal、fast */
/*
slideDown() 可以使元素逐步延伸显示
slideUp()则使元素逐步缩短直至隐藏
*/
// if($('div').css('display')=='block'){
// $('div').slideUp('500',function(){
// alert('向上收缩')
// })
// }else{
// $('div').slideDown('500',function(){
// alert('向下展开')
// })
// }
// if($('div').css('display')=='block'){
// $('div').fadeOut('500',function(){
// alert('我淡出了')
// })
// }else{
// $('div').fadeIn('500',function(){
// alert('我淡入了')
// })
// }
// $('div').toggle('slow');
})
</script>
</body>
复制代码
未来事件
<button id="btn1">点击添加学生</button>
<button id="btn2">解绑li点击事件</button>
<ul>
<li>我是学生1</li>
<li>我是学生2</li>
<li>我是学生3</li>
</ul>
<!-- 点击添加学生 点击li可以打印出对应的字 -->
<!-- 点击学生4 或者 5 也能答应出 对应的字 -->
<script src="./jquery-1.12.4.js"></script>
<script>
let count = 3;
$('#btn1').click(function(){
count++;
$('ul').append( $(`<li>我是学生${count}</li>`) )
})
/* 这样操作 对未来元素不能实现绑定 */
// $('li').click(function(){
// alert( $(this).text() );
// })
/* 使用bind 实现不了对未来元素的绑定 是老版本的用法
新版的使用on*/
/* 给已存在的body元素绑定 点击li的时候出现对应的事件 */
$('body').on('click','li',function(){
alert( $(this).text() );
})
$('#btn2').click(function(){
/* 使用off方法来解绑li的点击事件 */
/* 使用未来元素的方法绑定的方式不能实现使用li对off解绑
要使用 $('body').off('click')*/
// $('li').off('click')
})
</script>
复制代码
HTTP
<!--
超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议
设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法
一次HTTP操作称为一个事务，其工作过程可分为四步
-->
<!--
OPTIONS 返回服务器针对特定资源所支持的HTTP请求方法
HEAD 向服务器索要与GET请求相一致的响应，只不过响应体将不会被返回
GET 向特定的资源发出请求 一般用户请求数据会被经常使用
POST 向指定资源提交数据进行处理请求 一般用于登录 数据保密 还可以用与文件传输
PUT 向指定资源位置上传其最新内容 需要修改数据的时候和更新数据的时候
DELETE 请求服务器删除Request-URI所标识的资源 删除数据的时候使用
TRACE 回显服务器收到的请求，主要用于测试或诊断
CONNECT HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器
HTTP/1.1 例如：http:// HTTP/2 例如：https:// 加密 https://www.baidu.com/
PATCH 实体中包含一个表，表中说明与该URI所表示的原内容的区别
- GET（SELECT）：从服务器取出资源（一项或多项）。
- POST（CREATE）：在服务器新建一个资源。
- PUT（UPDATE）：在服务器更新资源（客户端提供改变后的完整资源）。
- PATCH（UPDATE）：在服务器更新资源（客户端提供改变的属性）。
- DELETE（DELETE）：从服务器删除资源。
- HEAD：获取资源的元数据。
- OPTIONS：获取信息，关于资源的哪些属性是客户端可以改变的。
-->
<!--
原生的方式
创建Ajax对象 var oAjax=new XMLHttpRequest();
连接到服务器 oAjax.open("GET","abc.txt",true);
发送请求send oAjax.send();
接收返回值
oAjax.onreadystatechange=function(){
if (oAjax.readyState==4 && oAjax.status==200){
alert("请求成功"+oAjax.responseText);
}
}
-->
复制代码
jq中使用ajax（初体验）
<button>登录</button>
<script src="./jquery-1.12.4.js"></script>
<script>
$('button').click(function(){
$.ajax({
url:"http://timemeetyou.com:8889/api/private/v1/login",
method:"post",
data:{
username:'admin',
password:'123456'
},
success:function(res){
/* success后面的方法里面的形参res表示后台返回的数据 */
console.log(res);
}
})
})
</script>
