前言
第一次写博客，就总结一下今天学的课程。
一、HTML5
老师做了个微博评论留言案例主要功能由js，MySQL来实现，具体细节没听。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新浪微博-jQuery基础</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery-1.12.4.js"></script>
<!-- <script src="js/jquery.cookie.js"></script>-->
<script src="js/index.js"></script>
</head>
<body>
<div class="nav">
<img src="images/nav.png" alt="">
</div>
<div class="content">
<img src="images/left.png" alt="" class="left">
<div class="center">
<textarea class="comment"></textarea>
<input type="button" value="发布" class="send" disabled>
</div>
<img src="images/my.png" alt="" class="right">
<div class="messageList">
<!-- <div class="info">-->
<!-- <p class="infotext"> 原因不明】美国黑人因遭警察暴力死亡持续发酵，当事警察肖文原定6月1日出庭受审日期被推迟，-->
<!-- 原因不明；肖文被控犯有三级谋杀罪和过失杀人罪↓↓3分钟看“黑人之死”始末 ↓↓这些天，美国究竟发生了什么？-->
<!-- </p>-->
<!-- <p class="infoOperation">-->
<!-- <span class="infoTime">2020-6-2 22:46:4</span>-->
<!-- <span class="infoHandle">-->
<!-- <a href="javascript:;" class="agree">0</a>-->
<!-- <a href="javascript:;" class="disagree">0</a>-->
<!-- <a href="javascript:;" class="delete">删除</a>-->
<!-- </span>-->
<!-- </p>-->
<!-- </div>-->
</div>
</div>
<div class="page">
<!-- <a href="javascript:;" class="cur">1</a>-->
<!-- <a href="javascript:;">2</a>-->
<!-- <a href="javascript:;">3</a>-->
</div>
</body>
</html>
js部分
$(function() {
// 1.监听输入框的实时输入事件
$('.comment').on('propertychange input', function() {
// 判断输入框是否有输入内容，如果输入了内容那么将发布按钮解禁，如果没有输入内容那么将发布按钮禁止
if ($(this).val().length > 0) {
$('.send').prop('disabled', false);
} else {
$('.send').prop('disabled', true);
}
});
// 2.监听发布按钮的点击事件
$('.send').click(function() {
// 2.1 获取输入的内容
let value = $('.comment').val();
// 2.2 发送AJAX请求
$.ajax({
type: 'get',
url: 'weibo.php',
data: 'act=add&content=' + value,
success: function(msg) {
/*
'{error: 0, id: 10, time: 1620272577, acc: 0, ref: 0}'
'{"a": "Hello", "b": "World"}'
*/
// let obj = JSON.parse(msg);
// let obj = eval('('+msg+')');
// 2.3 将JSON数据转化成对象
let obj = eval(`(${msg})`);
// 2.4 将输入的内容添加到对象中
obj.content = value;
// 2.5 创建一条微博
let item = createElement(obj);
// 2.8 将数据绑定到节点上
item.get(0).obj = obj;
// 2.6 将创建的微博添加到列表中
$('.messageList').prepend(item);
// 2.7 将输入框清空
$('.comment').val('');
// 2.9发送完微博之后手动禁用发布按钮
$('.send').prop('disabled', true);
// 2.10 发送一条新的微博之后删除当前界面最后一条微博
if ($(".info").length > 6) {
$('.info:last-child').remove();
}
// 2.11 重新获取页数
getMsgPage();
},
error: function(e) {
console.log(e.status);
}
})
});
// 3.一进入页面就加载数据
let number = getCookie('pageNumber') || 1;
getMsgList(number);
function getMsgList(number) {
// 将之前一页的数据清空
$('.messageList').html('');
$.ajax({
type: 'get',
url: 'weibo.php',
data: 'act=get&page=' + number,
success: function(msg) {
// 3.1 将JSON数据转化为数组
let obj = eval(`(${msg})`);
// 3.2 遍历数组
obj.forEach(function(value, index) {
// 3.3 创建一条微博
let item = createElement(value);
item.get(0).obj = value;
// 3.4 将创建的微博添加到列表中
$('.messageList').append(item);
})
},
error: function(e) {
console.log(e.status);
}
})
}
// 4.顶微博
$('.messageList').on('click', '.agree', function() {
// 4.1 点击之后前段页面点赞数加1
$(this).html(parseInt($(this).html()) + 1);
// 4.2 获取当前这条微博上绑定的数据
let obj = $(this).parents('.info').get(0).obj;
// 4.2发送AJAX请求将数据库中这条微博的点赞数加1
$.ajax({
type: 'get',
url: 'weibo.php',
data: 'act=acc&id=' + obj.id,
success: function(msg) {
console.log(msg);
},
error: function(e) {
alert(e.status);
}
})
});
// 5.踩微博
$('.messageList').on('click', '.disagree', function() {
// 4.1 点击之后前段页面点赞数加1
$(this).html(parseInt($(this).html()) + 1);
// 4.2 获取当前这条微博上绑定的数据
let obj = $(this).parents('.info').get(0).obj;
// 4.2发送AJAX请求将数据库中这条微博的点赞数加1
$.ajax({
type: 'get',
url: 'weibo.php',
data: 'act=ref&id=' + obj.id,
success: function(msg) {
console.log(msg);
},
error: function(e) {
alert(e.status);
}
})
});
// 6.删除微博
$('.messageList').on('click', '.delete', function() {
// 6.1 点击之后删除界面中的这条微博
$(this).parents('.info').remove();
// 6.2 获取当前这条微博上绑定的数据
let obj = $(this).parents('.info').get(0).obj;
// 6.3 发送请求删除数据库中对应的这条微博
$.ajax({
type: 'get',
url: 'weibo.php',
data: 'act=del&id=' + obj.id,
success: function(msg) {
console.log(msg);
},
error: function(e) {
alert(e.status);
}
});
// 6.4 删除微博之后重新获取当前页的数据
getMsgList($('.info>.cur').html());
// 6.5 删除微博之后重新获取页码
getMsgPage();
});
// 7.获取页数
getMsgPage();
function getMsgPage() {
$('.page').html('');
$.ajax({
type: 'get',
url: 'weibo.php',
data: 'act=get_page_count',
success: function(msg) {
// 7.1 将JSON数据转化成对象
let obj = eval(`(${msg})`); // {count: 4}
for (let i = 0; i < obj.count; i++) {
// 7.2 创建节点
let $page = $(`<a href="javascript:;">${i + 1}</a>`);
// 7.4 默认第一个节点处于激活状态
if (i === number - 1) {
$page.addClass('cur');
}
// 7.3 将创建的节点添加到page中
$('.page').append($page);
}
},
error: function(e) {
alert(e.status);
}
})
}
// 8.监听页码的点击事件
$('.page').on('click', 'a', function() {
// 8.1 状态切换
$(this).addClass('cur');
$(this).siblings().removeClass('cur');
// 8.2 获取当前页的数据
getMsgList($(this).html());
//8.3通过cookie保存当前的点击页码
setCookie('pageNumber',$(this).html());
})
});
// 定义一个方法创建一个节点（创建一条微博）
function createElement(obj) {
let item = $(
`<div class="info">
<p class="infotext">${obj.content}</p>
<p class="infoOperation">
<span class="infoTime">${formatTime(obj.time)}</span>
<span class="infoHandle">
<a href="javascript:;" class="agree">${obj.acc}</a>
<a href="javascript:;" class="disagree">${obj.ref}</a>
<a href="javascript:;" class="delete">删除</a>
</span>
</p>
</div>`
);
return item;
}
// 定义方法格式化时间
function formatTime(time) {
let date = new Date(time * 1000);
let year = date.getFullYear();
let month = date.getMonth() + 1;
if (month < 10) {
month = '0' + month;
}
let day = date.getDate() + '';
if (day.length < 2) {
day = '0' + day;
}
let hours = date.getHours();
hours = hours < 10 ? '0' + hours : hours;
let minutes = (date.getMinutes() + '').padStart(2, '0');
let seconds = (date.getSeconds() + '').padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
// console.log(window.location.pathname); // /network/cookie/02-setCookie.html
// console.log(window.location.pathname.lastIndexOf('/'));
// let index = window.location.pathname.lastIndexOf('/');
// let curPath = window.location.pathname.slice(0, index);
// console.log(curPath); // /network/cookie
// console.log(document.domain);
setCookie('name', 'zs', 1, '/');
setCookie('age', '333');
function setCookie(key, value, day, path, domain) {
// http://127.0.0.1/network/index.html /network/index.html
// 处理保存的路径
// if(!path) {
// let index = window.location.pathname.lastIndexOf('/');
// let curPath = window.location.pathname.slice(0, index);
// path = curPath;
// }
let index = window.location.pathname.lastIndexOf('/');
let curPath = window.location.pathname.slice(0, index);
path = path || curPath;
// 处理domain
domain = domain || document.domain; // 127.0.0.1
// 处理时间
if(!day) {
document.cookie = `${key}=${value};path=${path};domain=${domain}`;
} else {
let date = new Date();
date.setDate(date.getDate() + day);
document.cookie = `${key}=${value};expires=${date.toUTCString()};path=${path};domain=${domain}`;
}
}
// console.log(document.cookie);
console.log(getCookie('age'));
function getCookie(key) {
// console.log(document.cookie); // age=333; name=zs
// 将获取到的多个cookie通过;切割成单个cookie保存到数组中
let res = document.cookie.split(';');
// console.log(res); // ["age=333", " name=zs"]
// 遍历数组分别拿到每一个cookie数据
for (let i = 0; i < res.length; i++) {
// console.log(res[i]); // age=333 name=zs
// 将每一条cookie数据再通过=切割成key，value存放到数组中
let temp = res[i].split('=');
// console.log(temp); // ['age', '33'] ['name', 'zs']
// 判断关键字key，拿到对应的value
if(temp[0].trim() === key) {
return temp[1];
}
}
}
delCookie('age');
delCookie('name', '/');
// 默认情况下只能删除保存在默认路径下的cookie数据，如果想删除指定路径下的cookie，那么在删除的时候也需要指定对应的路径。
function delCookie(key, path) {
setCookie(key, getCookie(key), -1, path);
}
二、建模C4D
做了一个3D的"暑假"文字标题
三、PHP
运用MVC也做了一个留言板和登录案例，并实现前台和后台交互。（代码没保存）
四、Javascript
学习了DOM，BOM与API
API：
API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能，而Web API与API是浏览器提供的一套操作浏览器功能和页面元素的API
document.title='设置新标题'; //设置页面标题
console.log(document.title); //获取页面标题
document.write('<h> 网页内容</h>'); //将字符串载入页面
DOM：
DOM是指文档对象模型，作用是通过js代码操作标签。通过它访问HTML文档的所有元素。
文档（document）：可以把一个页面当成一个文档
元素（element）：页面中的所有标签都是元素
节点（node）：网页中的所有内容。如：元素节点，属性节点，文本节点，注释节点等
<div id="div1">
<p>1</p>
<p class="p2">2</p>
</div>
<script>
var x=document.getElementById("div1");
console.log(x); //输出1，2
</script>
<div id="div1">
<p>1</p>
<p class="p2">2</p>
</div>
<script>
var a=document.getElementsByClassName("p2");
console.log(a);
</script>
结果如下：（上面这种可以理解为是一种伪数组，可以像数组一个用索引来访问元素，但又不完全是数组而是一个集合）
`
总结
6296
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
