js获取自定义data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="tree" data-leaves="47" data-plant-height="2.4m"></div>
</body>
</html>
<script>
/* -----js的data方法------ */
var tree = document.getElementById("tree");
//getAttribute()取值属性
console.log(tree.getAttribute("data-leaves"));
console.log(tree.getAttribute("data-plant-height"));
//setAttribute()赋值属性
tree.setAttribute("data-leaves", "48");
//data-前缀属性可以在JS中通过dataset取值，更加方便
console.log(tree.dataset.leaves);
console.log(tree.dataset.plantHeight);
//赋值
tree.dataset.plantHeight = "3m";
tree.dataset.leaves--;
//新增data属性
tree.dataset.age = "100";
//删除，设置成null，或者delete
// tree.dataset.leaves = null;
delete tree.dataset.age;
/* ------jQuery的data方法------ */
var $tree = $('#tree');
console.log($tree.data("plant-height"));
</script>join()
join() 方法用于把数组中的所有元素放入一个字符串，返回一个新的字符串，不影响原数组。
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
arr.join(',') //1,2,3,4,5,6,7,8,9
arr.join('.') //1.2.3.4.5.6.7.8.9shift()
定义和用法
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
返回值
数组原来的第一个元素的值。
shift() 方法移除数组的第一项。
注释： shift() 方法会改变数组的长度。
注释： shift 方法的返回值是被移除的项目。
注释： shift() 方法会改变原始数组。
提示： 如需删除数组的最后一项，请使用 pop() 方法。
repalce()
定义和用法
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
stringObject.replace(regexp/substr,replacement)| 参数 | 描述 |
|---|---|
| regexp/substr | 必需。规定子字符串或要替换的模式的 RegExp 对象。请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象。 |
| replacement | 必需。一个字符串值。规定了替换文本或生成替换文本的函数。 |
返回值
一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。
说明
字符串 stringObject 的 replace() 方法执行的是查找并替换的操作。它将在 stringObject 中查找与 regexp 相匹配的子字符串，然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。
replacement 可以是字符串，也可以是函数。如果它是字符串，那么每个匹配都将由字符串替换。但是 replacement 中的 $ 字符具有特定的含义。如下表所示，它说明从模式匹配得到的字符串将用于替换。
split()
定义和用法
split() 方法用于把一个字符串分割成字符串数组。
语法
stringObject.split(separator,howmany)| 参数 | 描述 |
|---|---|
| separator | 必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。 |
| howmany | 可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。 |
返回值
一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 stringObject 分割成子串创建的。返回的数组中的字串不包括 separator 自身。
但是，如果 separator 是包含子表达式的正则表达式，那么返回的数组中包括与这些子表达式匹配的字串（但不包括与整个正则表达式匹配的文本）。
提示和注释
注释： 如果把空字符串 (“”) 用作 separator，那么 stringObject 中的每个字符之间都会被分割。
注释： String.split() 执行的操作与 Array.join() 执行的操作是相反的。
js获取时间相关的方法
1.时间戳转日期
将时间戳转换为年-月-日-时-分-秒格式 和 获取当前时间
function FormatDateTime(time) {
var date = new Date(time);
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
var h = date.getHours();
h = h < 10 ? ('0' + h) : h;
var minute = date.getMinutes();
var second = date.getSeconds();
minute = minute < 10 ? ('0' + minute) : minute;
second = second < 10 ? ('0' + second) : second;
return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
};
//去掉参数time，即可获取当前时间
// 其他写法：
function GetTime(time) {
var date = new Date(time);
var Y = date.getFullYear() + '-';
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
return Y + M + D + h + m + s;
};
//不带参数的，即获取当前时间
function GetNowFormatDate() {
var date = new Date();
var seperator1 = "-";
var seperator2 = ":";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
" " + date.getHours() + seperator2 + date.getMinutes() +
seperator2 + date.getSeconds();
return currentdate;
}
//获取今天的日期(不包括时分秒)
function getNowDay() {
var currentDate = new Date();
currentDate.setTime(currentDate.getTime());
var month = (currentDate.getMonth() + 1) < 10 ? '0' + (currentDate.getMonth() + 1) : (currentDate.getMonth() + 1);
var day = (currentDate.getDate()) < 10 ? '0' + (currentDate.getDate()) : (currentDate.getDate());
var nowday = currentDate.getFullYear() + "-" + month + "-" + day;
return nowday
}2.获取上个月日期
function getLastMonth() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
if (month == 0) {
year = year - 1;
month = 12;
}
return year + "-" + month + "-" + '01';
};3.获取上个月月底日期
function getLastMonthAndDay() {
var nowDate = new Date();
var year = nowDate.getFullYear();
var month = nowDate.getMonth();
if (month == 0) {
month = 12;
year = year - 1;
}
var lastDay = new Date(year, month, 0);
var yyyyMMdd = year + "-" + month + "-" + lastDay.getDate();
return yyyyMMdd
}4.获取下一个月
/**
* @date 格式为yyyy/mm/dd的日期，如：2014/01/25
*/
function getNextMonth(date) {
var arr = date.split('/');
var year = arr[0]; //获取当前日期的年份
var month = arr[1]; //获取当前日期的月份
var day = arr[2]; //获取当前日期的日
var days = new Date(year, month, 0);
days = days.getDate(); //获取当前日期中的月的天数
var year2 = year;
var month2 = parseInt(month) + 1;
if (month2 == 13) {
year2 = parseInt(year2) + 1;
month2 = 1;
}
var day2 = day;
var days2 = new Date(year2, month2, 0);
days2 = days2.getDate();
if (day2 > days2) {
day2 = days2;
}
if (month2 < 10) {
month2 = '0' + month2;
}
var t2 = year2 + '/' + month2 + '/' + day2;
return t2;
}5.时间倒计时
function ShowLeftTime(year, month, date) {
//得出剩余时间
var now = new Date();
var endDate = new Date(year, month - 1, date);
var leftTime = endDate.getTime() - now.getTime();
var leftsecond = parseInt(leftTime / 1000);
var day = Math.floor(leftsecond / (60 * 60 * 24));
var hour = Math.floor((leftsecond - day * 24 * 60 * 60) / 3600);
var minute = Math.floor((leftsecond - day * 24 * 60 * 60 - hour * 3600) / 60);
var second = Math.floor(leftsecond - day * 60 * 60 * 24 - hour * 60 * 60 - minute * 60);
//显示剩余时间
document.getElementById("demo").innerHTML = "距离" + year + "年" + month + "月" + date + "日" + "还有" + day + "天" + hour + "小时" + minute + "分" + second + "秒";
}6.输出今天是星期几
var str = "今天是星期" + "日一二三四五六".charAt(new Date().getDay());
alert(str);7.js根据字符串中间空格把字符串分割成数组
如果一个字符串中间又很多空格，而且有的空格是按空格键打出来的，有个是按tab键打出来的
比如下面这个字符串
let str = "a b c d e f"如果直接分割
str.split("")你会得到如下
['a', ' ', 'b', ' ', ' ', 'c', ' ', ' ', ' ', 'd', '\t', 'e', '\t', 'f'] 可以看出空格键会被解析成 ‘’ ,而tab键打出的空格会被解析成 ‘\t’
所以应该用正则表达式来进行切割，如下
str.split(/\s+/)这样就会得到想要的效果了
['a', 'b', 'c', 'd', 'e', 'f']tips:
new RegExp(/\s/)可校验字符串中是否存在空格，用法如下:reg.test(str)
如何判断一个变量是否为数组
arr.constructor === Array //为true说明是数组类型
arr instanceof Array //为true则是数组类型
Object.prototype.toString.call(arr) === '[object Array]'; //为true为数组类型
Array.isArray(arr) //为true则为数组类型正则表达式，清楚字符串前后空格
var str = " hello ";
str = str.replace(/^s*|s*$/g, '');
alert(str);cookie
//获取cookie
export function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return (arr[2]);
else
return null;
}
//设置cookie,增加到vue实例方便全局调用
export function setCookie(c_name, value, expiredays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
};
//删除cookie
export function delCookie(name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
if (cval != null)
document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
};router-link
1.不带参数
name,path都行, 建议用name
路由配置 path: "/home/:id" 或者 path: "/home:id"
不配置path ,第一次可请求,刷新页面id会消失
配置path,刷新页面id会保留
html 取参 $route.params.id
script 取参 this.$route.params.id
2.2 query传参数 (类似get，url后面会显示参数)
路由可不配置
html 取参 $route.query.id
script 取参 this.$route.query.id
3.this.$router.push() (函数里面调用)
3.1. 不带参数
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
3.2. query传参
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
html 取参 $route.query.id
script 取参 this.$route.query.id
3.3. params传参
this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name 
