各位学者,希望你们在看的笔记的时候,能够多多指出错误,发表自己的观点,进行交流学习!!!
滑动动画:
向上滑动(隐藏):目标节点宽度不变,透明度不变,高度
逐渐变成0,最终display:none;
slideUp();
向下滑动(显示):目标节点宽度不变,透明度不变,高度
逐渐变成原来的高度,最终display:block;
slideDown();
滑动切换:
slideToggle();
代码演示:=>
<body>
<button id=”slideUp”>隐藏</button>
<button id=”slideDown”>显示</button>
<button id=”slideToggle”>切换</button>
<div style=”width: 100px;height: 100px;background-
color: #BBFFCC”></div>
<script type=”text/javascript”
src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
$( function () {
// 单击隐藏
$(‘#slideUp’).click(function() {
$(‘div’).slideUp(6000);
alert (‘我藏起来了’);
})
// 单击显示
$(‘#slideDown’).click(function() {
$(‘div’).slideDown(5000);
})
// 单击切换
$(‘#slideToggle’).bind(‘click’, function() {
$(‘div’).slideToggle(2000);
})
})
</script>
</body>
————–
淡入淡出:
淡出(隐藏):目标节点的尺寸不变,透明度有1变成0,最
终display:none;
fadeOut():
淡入(显示):目标节点的尺寸不变,透明度有0变成1,最
终display:block;
fadeIn();
切换:
fadeToggle();
终止动画执行:
$(‘选择器’).stop();
代码演示:=>
<body>
<button id=”fadeOut”>隐藏</button>
<button id=”fadeIn”>显示</button>
<button id=”fadeToggle”>切换</button>
<button id=”stop”>停止</button>
<div style=”width: 100px;height: 100px;background-
color: #BBFFCC”></div>
<script type=”text/javascript”
src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
$(function() {
// 单击隐藏
$(‘button:eq(0)’).click(function() {
$(‘div’).fadeOut(6000);
alert(‘我藏起来了’);
})
// 单击显示
$(‘button’).eq(1).click(function() {
$(‘div’).fadeIn(5000);
})
// 单击切换
$(‘button:eq(2)’).bind(‘click’, function() {
$(‘div’).fadeToggle(2000);
})
// 单击停止
$(‘#stop’).click(function() {
$(‘div’).stop();
})
})
</script>
</body>
———————-
自定义动画:
$(选择器).animate(样式对象,[duration],[ complete ]);(样式
对象:动画结束时的样式;duration:动画执行时间;complete:动
画结束时的 回调函数 )
代码演示:=>
<body>
<button id=”animate”>点我执行动画</button>
<div style=”width: 100px;height: 100px;background-
color: #BBFFCC;position: absolute”></div>
<script type=”text/javascript”
src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
$(function() {
// 单击隐藏
$(‘button’).click(function() {
$(‘div’).animate({
left: “150px”,
top: “150px”,
height: “50px”
},
3000)
});
$(‘button’).click(function() {
$(‘div’).animate({
top: “80px”,
bottom: “100px”,
height: “200px”
},
3000,
function() {
alert(‘动画执行结束!’)
})
});
})
</script>
</body>
——————————————————-
Ajax:=>
简介:即”Asynchronous Javascript And XML”(异步
JavaScript和XML一种创建交互式网页应用的网页开发技术);通
俗一点就是:通过代码向服务器发请求,这个请求就是异步请求;
同步;在一个任务进行时,不能开启其他的任务(单行线);
场景:在地址栏输入网址访问页面;a标记的跳转;
异步:在一个任务进行时,还可以开启其他的任务(多车道)
场景:聊天室;
XML:可扩展标记语言(标签可以自定义);
作用:支持页面的局部刷新;
优点:1,坚强服务器的压力;
2,提高用户体验
缺点:调试比较困难;
原理:
——————-
原理图
——————-
步骤:1,由事件触发,想服务器发送HTTP请求;
2,服务器接受请求,并根据请求参数,响应结果给客户;
3,客户端接受到响应后,刷新页面;
方法(函数):
所有的方法都必须有一个参数填网址
$.load():从服务器载入数据,将获的数据插入到指定的HTML
元素中;
语法:$load(url,[data],[complete]);(url为加载数据的请求
地址(可以是相对路径,绝对路径);data为请求参数;complete为
加载成功后的函数);
如果传递了第二参数data参数,是post请求,如果没有传递第二
参数,是get请求;
代码演示:=>
<body>
<button id=”slideUp”>load</button>
<div style=”width: 200px;height: 200px;background-
color: #CCAAAA”></div>
<script type=”text/javascript”
src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
$(function() {
// 单击按钮
$(‘button’).click(function() {
// 加载的内容舔加到div中,”load.html”为另外
一个文件
// 相对路径
// $(‘div’).load(‘load.html’);
// 绝对路径
$(‘div’).load
(‘
‘);
})
})
</script>
</body>
$.get();以get方式向服务器发送请求;
语法:$.get(url,[data],[complete]);
$.post();以post方式向服务器发送请求;
语法:$.post(url,[data],[complete]);
代码演示:=>
<body>
<button id=”slideUp”>使用post</button>
<div style=”width: 300px;height: 300px;background-
color: #BBFFCC”></div>
<script type=”text/javascript”
src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
$(function() {
// 单击按钮,使用post方法发送请求
$(‘button’).click(function() {
$.post(‘post.php’, //请求地址
{ id: 7 }, //请求参数
function(response, status, xhr) {
console.log(response);
console.log(status);
console.log(xhr);
$(‘div’).html(response); //在div打
印服务器响应结果
}
);
});
})
</script>
</body>
——————————————————-
json :=>
JavaScript Object Notation,JS对象标记,是一种轻量级的数
据交换格式;(不能在JS中用,像JS对象标记格式)
官网:
PHP与JSON: 对PHP变量进行编码 -> json_encode(变量);返回
对象
对PHP变量进行解码 -> json_decode(json);拥有第二参数
true,加上第二参数返回结果是数组
代码演示:=>
<?php
$blog = [
‘title’ => “博客标题”,
‘uid’ => 3,
];
// 对PHP变量进行编码->结果为:json格式对象
$json = json_encode($blog);
echo $json;
echo ‘<hr>’;
//对PHP进行解码->结果为:默认标准类对象,加第二参数true,
结果为数组
print_r(json_decode($json, true));
—————-
$.parseJSON() 将JSON转换成JS变量
代码演示:=>
<body>
<button id=”slideUp”>使用post</button>
<div style=”width: 300px;height: 300px;background-
color: #BBFFCC”></div>
<script type=”text/javascript”
src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
$(function() {
// 单击按钮,使用post方法发送请求
$(‘button’).click(function() {
$.post(‘post.php’, //请求地址
{ id: 7 }, //请求参数
function(response, status, xhr) {
console.log(response); //响应结果
console.log(status); //状态
console.log(xhr); //请求对象
//将JSON解析为JS变量
var blog = $.parseJSON(response);
console.log(blog);
$(‘div’).html(blog[0].title + blog
[0].uid); //在div打印服务器响应结果
}
);
});
})
</script>
</body>
——————————————————-
个人总结:前端使用JS要应用到PHP的响应效果,但是不能直接打
印出来,需要把PHP的效果应用json_encode()进行编码成json格
式对象,前端JS中再使用$.parseJSON()进行解析成JS变量方可
使用.(可能理解有误,仅供参考,大家进行交流)
———-
$.ajax();
语法: $.ajax({
type:’get/post’,
url:’请求地址’,
data:请求参数,
success:响应成功后的回调函数,
error:响应失败时的回调函数
});
参数:type:发送请求的方式,默认是get请求
url:ajax请求的地址;可以是相对地址,绝对地址,url
地址;
data:请求参数,其形式有:1,表单序列化:$(表单选择
器).serialize(); 2,字符串形式:”c=XXX&a=XXX”; 3,对象形式
:{C:XXX,a=XXX};
