对学过的JS、JQuery、Ajax、Axios进行的区分以及他们如何应用进行简单得总结。
1、首先JS是一门前端语言，而后三者可以理解为是他的延伸，所以在用后三者时，JS作为源头是可以在其中应用的。
2、JQuery是一个框架，它对JS进行了封装，使其更方便使用。Ajax和Axios可以结合它或直接原生JS应用，jQuery使得JS与Ajax的使用更加方便。
3、Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新，Axios可以说是Ajax的进阶。
JS:
先加载页面再加载js
window.onload=function(){
var box=document.getElementById(“box”);//抓取id名为box的元素
box.style.background=“blue”;
//改变背景颜色 对象box的属性background=
}
jquery:
1
2
3
| ready（）函数，先加载页面后激活的函数,类似window.onload=function(){}
$(document).ready(function () {
}
|
在html中的话需要引入
1
2
3
4
5
6
7
8
| <script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//设置单个属性
$('#box').css('border','2px solid red')
//box中的con 设置多个属性
$('#box .con').css({'border':'2px solid yellow','background':'white'})
})
|
1
2
3
4
5
6
7
8
9
10
11
| $('.con').hover(function(){
$(this).css('background','red')//移入变红 this代表.con这个对象
},function(){
$(this).css('background','yellow');//移出变黄
$('.con').off('click')
//清除con 的点击事件,使之只能出现一次
})
// .con的点击事件
$('.con').click(function(){
$(this).css('background','black')
})
|
1
| $("#name").val() //获取该id为name输入框中的值
|
1
| $('#message').html(res);//id为message的标签包裹的内容为res
|
Axios:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| post请求 路由
axios.post('{{route('home.comment.store')}}', {
content: this.comment.content,
article_id: '{{$article['id']}}'
}).then((response) => {//链式操作 成功响应
// console.log(response.data.comment);
//this调用属性 追加 应答中data的属性comment(vue语法)
this.comments.push(response.data.comment);
//将 markdown 转为 html
let md = new MarkdownIt();//给content赋值为html语法内容
// console.log(response.data.comment.content);
response.data.comment.content = md.render(response.data.comment.content)
// console.log(response.data.comment.content);
//清空 vue 数据
this.comment.content = '';
//清空编辑器内容
//选中所有内容从行从列到行到列
editormd.setSelection({line: 0, ch: 0}, {line: 99999999, ch: 999999999});
//将选中文本替换成空字符串
editormd.replaceSelection("");
})
},
|
Ajax:
JQuery中包含Ajax
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| 提交评论，运用Ajax
$(function () {
//form表单的submit事件
$('form').submit(function () {
//序列化 获取的 表单数据
var data = $('form').serialize();
// console.log(data);
//发送ajax请求
// var re='';
// $('inpute['name="username"']')
// $("input[name=username]").value(re);
$.ajax({
type:'post',//请求方式
url:'?a=add',//请求地址 本页面加载
data:{d:data},//要发送的请求数据 data代表着表单所有数据
dataType:'json',//返回的数据类型 JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式
//形参
success:function (res) {//成功回调
// alert(res);
console.log(res);
// console.log(res.username);
var content = '<dl>\n' +
'\t\t\t<dt>\n' +
'\t\t\t\t<img src="./resource/images/'+res.face+'"/>\n' +
'\t\t\t</dt>\n' +
'\t\t\t<dd class=\'head\'>\n' +
'\t\t\t\t<span>用户名'+res.username+'</span> <i>性别'+res.sex+'</i><b>发表于：</b> <i>'+res.time+'</i>\n' +
'\t\t\t</dd>\n' +
'\t\t\t<dd class=\'con\'>\n' +
'\t\t\t\t'+res.content+'\n' +
'\t\t\t\t<div style="float: right;">\n' +
'\t\t\t\t\t<a href="" class="btn btn-info">修改</a>\n' +
'\t\t\t\t\t<a href="javascript:;" onclick="del(this,'+res.key+')" class="btn btn-danger del">删除</a>\n' +
'\t\t\t\t</div>\n' +
'\t\t\t</dd>\n' +
'\t\t</dl>';
//将content字符串插入到内容后面
$('.content').append(content);
}
});
//阻止表单刷新
return false;
})
})
|