目前已简单的学习了一些HTML,css,JavaScript,jQuery知识
前端学习是一个漫长的过程,学习实践并行才能加深对知识的认识和领悟
接下来要学习好vue以及小程序开发,vue的重要程度可想而知,希望自己能不忘初心。2022找到一个不错的工作!
互联网飞速发展,日新月异,需要前端人不停的更新学习自己的知识,才能更上一层楼!
jq中的事件
$('.div1').mouseenter(function(){
$(this).css('background','green')
})
$('.div1').mouseleave(function(){
$(this).css('background','yellow')
})
/* mouseover和mouseout在进入子元素区域时也会触发 */
/* mouseenter和mouseleave在进入子元素区域时不会触发 */
/* hover由mouseover和mouseout组成 */
$('.div1').hover(function(){
console.log('hover');
})
jq中的ajax
$('button').click(function(){
//通过HHTP请求加载远程数据
$.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);
}
})
})
jq的未来事件
$('#btn1').click(function(){
$('li:last').after($('<li>我是学生'+i+'</li>'));
i++;
})
/* 使用bind实现不了对未来元素的绑定,是老版本的方法 */
$('body').on('click','li',function(){
alert($(this).text())
})
$('#btn2').click(function(){
/* 用off方法实现li的解绑事件 */
$('body').off('click')
})
# 5.http JQ的ajax:
<body>
<!--
超文本传输协议(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);
}
}
-->
<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后面的方法里面的形参表示后台返回的数据 */
console.log(res);
}
})
})
</script>
</body>