Html和Css及Js错误常用集合

Posted on Edited on In Views:

car

Photo by Julian Hochgesang on Unsplash

Html

禁用referer

本地网站html图片或链接,跳过,隐藏,,删除,禁用referer

1
2
3
4
5
6
7
8
9
10
11
12
<meta name="referrer" content="never">
值的解释
never
always
origin
default
1.如果 referer-policy 的值为never：删除 http head 中的 referer；
2.如果 referer-policy 的值为default：如果当前页面使用的是 https 协议，而正要加载的资源使用的是普通的 http 协议，则将 http header 中的 referer 置为空；
3.如果 referer-policy 的值为 origin：只发送 origin 部分；
4.如果 referer-policy 的值为 always：不改变http header 中的 referer 的值，注意：这种情况下，如果当前页面使用了 https 协议，而要加载的资源使用的是 http 协议，加载资源的请求头中也会携带 referer。
————————————————
参考链接：https://blog.csdn.net/weixin_43627766/java/article/details/90311889

表单禁止自动填写

如何禁止注册表单的自动填写邮箱、密码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
语法
<input autocomplete="on|off">
属性值
值	描述
on	默认。规定启用自动完成功能。
off	规定禁用自动完成功能。
实例
启用自动完成功能的 HTML 表单（其中一个输入字段禁用了自动完成）：
<form action="demo_form.html" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
————————————————
参考链接：https://www.runoob.com/tags/att-input-autocomplete.html

Css

文字水平居中

1
<div style="text-align: center;">文字水平居中</div>

文本垂直水平居中

1
2
<div style="width:200px;height:100px;line-height: 100px;">文本垂直水平居中</div>
<div style="vertical-align: middle">文本垂直水平居中</div>

清除表格白边

1
2
3
table{
    border-collapse: collapse;
}

鼠标样式修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*url 需使用的自定义光标的 URL。

注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。

default 默认光标（通常是一个箭头）
auto    默认。浏览器设置的光标。
crosshair   光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）
move    此光标指示某对象可被移动。
e-resize    此光标指示矩形框的边缘可被向右（东）移动。
ne-resize   此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize   此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize    此光标指示矩形框的边缘可被向上（北）移动。
se-resize   此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize   此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize    此光标指示矩形框的边缘可被向下移动（南）。
w-resize    此光标指示矩形框的边缘可被向左移动（西）。
text    此光标指示文本。
wait    此光标指示程序正忙（通常是一只表或沙漏）。
help    此光标指示可用的帮助（通常是一个问号或一个气球）。*/
span{
	cursor: pointer;
}

div居中的几种方法

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
46
47
48
49
/*绝对定位和0*/
.box{
    width:50%;
    height: 50%;
    position: absolute;
    background:red;
    margin: auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
/*flex布局*/
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登陆</title>
    <style type="text/css">
        html{width: 100%;height: 100%;}  /*整个页面的居中*/
        body{
            width: 100%;
            height: 100%;
            display: flex;             /*flex弹性布局*/
            justify-content: center;
            align-items: center;
        }
        #login{
            width: 300px;
            height: 300px;
            border: 1px black solid;
            display: flex;
            flex-direction: column;        /*元素的排列方向为垂直*/
            justify-content: center;    /*水平居中对齐*/
            align-items: center;        /*垂直居中对齐*/
        }
    </style>
</head>
<body>
    <div id="login">
        <h1>登陆</h1>
        <input type="text"><br>
        <input type="password"><br>
        <button>确定</button>
    </div>
</body>
</html>
————————————————
参考链接：https://www.cnblogs.com/jing-tian/p/10969887.html

改变input框中placeholder颜色的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
input::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
    color: #BDCADA;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 适配火狐 */
    color: #BDCADA;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ 适配火狐 */
    color: #BDCADA;
}
input:-ms-input-placeholder { /* Internet Explorer 10+  适配ie*/
    color: #BDCADA;
}
————————————————
参考链接：https://blog.csdn.net/zeyu1021/article/details/44563393

删除超链接A标签下划线

1
2
3
4
5
6
a:link,a:visited{
 text-decoration:none;  /*超链接无下划线*/
}
a:hover{
 text-decoration:underline;  /*鼠标放上去有下划线*/
}

css3圆角

1
2
border-radius:上 右 下 左;
border-radius: 15px 50px 30px 5px:

css3盒子阴影

1
2
3
4
5
6
7
8
9
10
11
值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

box-shadow: 10px 10px 5px #888888;
————————————————
参考链接：https://www.runoob.com/cssref/css3-pr-box-shadow.html

rgba

1
2
3
4
5
6
7
8
值	描述
red	定义红色值，取值范围为 0 ~ 255，也可以使用百分比 0% ~ 100%。
green	定义绿色值，取值范围为 0 ~ 255，也可以使用百分比 0% ~ 100%。
blue	定义蓝色值，取值范围为 0 ~ 255，也可以使用百分比 0% ~ 100%。

alpha - 透明度	定义透明度 0（透完全明） ~ 1（完全不透明）
————————————————
参考链接：https://www.runoob.com/cssref/func-rgba.html

filter(滤镜)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
默认值:	none
继承:		no
动画支持:	是。详细可查阅 CSS 动画 https://www.runoob.com/cssref/css-animatable.html
版本:		CSS3
JavaScript 语法:		object.style.WebkitFilter="grayscale(100%)" 

高斯模糊
img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}
————————————————
日期:2020/10/22
参考链接：https://www.runoob.com/cssref/css3-pr-filter.html

outline（轮廓）

1
2
3
4
5
6
7
8
9
10
11
12
13
属性值
值	描述
outline-color	规定边框的颜色。参阅：outline-color 中可能的值。
outline-style	规定边框的样式。参阅：outline-style 中可能的值。
outline-width	规定边框的宽度。参阅：outline-width 中可能的值。
inherit	规定应该从父元素继承 outline 属性的设置。

input{
	outline:#00FF00 dotted thick;
}
————————————————
日期:2020/10/22
参考链接：https://www.runoob.com/cssref/pr-outline.html

悬浮按钮

transform: translateX(-50%); 重点，不然左右不能居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.float-btn{
  position: fixed;
  bottom: 30px;
  left: 50%;
  right: 50%;
  border: solid 1px #666;
  border-radius: 30px;
  width: 50px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  padding: 0 10px;
  transform: translateX(-50%);
}

Js

常用

1
2
3
4
// 字符串转数组
'nobige.cn'.split('.')
// 数组转字符串	
['nobige','cn'].join('.')

类型转换

类型转换,Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值。

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
//查看类型
//	typeof 操作符来查看 JavaScript 变量的数据类型
typeof "John"                 // 返回 string
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null                   // 返回 object

//	constructor 属性返回所有 JavaScript 变量的构造函数。
"John".constructor                 // 返回函数 String()  { [native code] }
(3.14).constructor                 // 返回函数 Number()  { [native code] }
false.constructor                  // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
{name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor             // 返回函数 Date()    { [native code] }
function () {}.constructor         // 返回函数 Function(){ [native code] }

//将数字,布尔值转换为字符串
//	全局方法 String() 可以将数字转换为字符串。
//	该方法可用于任何类型的数字，字母，变量，表达式：
//实例
String(x)         // 将变量 x 转换为字符串并返回
String(123)       // 将数字 123 转换为字符串并返回
String(100 + 23)  // 将数字表达式转换为字符串并返回
String(false)        // 返回 "false"
String(true)         // 返回 "true"
Date()      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
String(new Date())      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

//将数字,布尔值,日期转换为字符串
x.toString()
(123).toString()
(100 + 23).toString()
false.toString()     // 返回 "false"
true.toString()      // 返回 "true"
(new Date()).toString()   // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

//方法	描述
toExponential()	把对象的值转换为指数计数法。
toFixed()	把数字转换为字符串，结果的小数点后有指定位数的数字。
toPrecision()	把数字格式化为指定的长度。

//Date方法
//方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。

//将字符串转换为数字
Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0
Number("")        // 返回 0
Number("99 88")   // 返回 NaN

//方法	描述
parseFloat()	解析一个字符串，并返回一个浮点数。
parseInt()	解析一个字符串，并返回一个整数。

//将布尔值转换为数字
//全局方法 Number() 可将布尔值转换为数字。
Number(false)     // 返回 0
Number(true)      // 返回 1

//将日期转换为数字
//	全局方法 Number() 可将日期转换为数字。
d = new Date();
Number(d)          // 返回 1404568027739

//	日期方法 getTime() 也有相同的效果。
d = new Date();
d.getTime()        // 返回 1404568027739

————————————————
参考链接：https://www.runoob.com/js/js-type-conversion.html

JavaScript 刷新当前页面

1
2
3
4
5
6
7
8
location.reload();

window.location.replace("https://nobige.cn")

//页面自动刷新：把如下代码加入<head>区域中,content为要等待刷新的秒数
<meta http-equiv="refresh" content="5">
————————————————
参考链接：https://www.runoob.com/w3cnote/js-refresh-current-page.html

JavaScript获取时间戳与时间戳转化

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
Javascript 获取当前时间戳（毫秒级别）：
第一种方法：
var timestamp1 = Date.parse( new Date());
结果：1470220594000

第二种方法：
var timestamp2 = ( new Date()).valueOf();
结果：1470220608533

第三种方法：
var timestamp3 = new Date().getTime();
结果：1470220608533
第一种获取的时间戳是精确到秒，第二种和第三种是获取的时间戳精确到毫秒。
获取指定时间的时间戳：
new Date("2016-08-03 00:00:00");

时间戳转化成时间：
function timetrans(date){
 var date = new Date(date*1000);//如果date为13位不需要乘1000
 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;
}
————————————————
参考链接：https://segmentfault.com/a/1190000006160703

JS设置CSS样式的几种方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//1. 直接设置style的属性  某些情况用这个设置 !important值无效
	如果属性有'-'号，就写成驼峰的形式（如textAlign）  如果想保留 - 号，就中括号的形式  element.style['text-align'] = '100px';
element.style.height = '100px';

//2. 直接设置属性（只能用于某些属性，相关样式会自动识别）
element.setAttribute('height', 100);
element.setAttribute('height', '100px');

//3. 设置style的属性
element.setAttribute('style', 'height: 100px !important');

//4. 使用setProperty  如果要设置!important，推荐用这种方法设置第三个参数
element.style.setProperty('height', '300px', 'important');

//5. 改变class   比如JQ的更改class相关方法
//	因JS获取不到css的伪元素，所以可以通过改变伪元素父级的class来动态更改伪元素的样式
element.className = 'blue';
element.className += 'blue fb';

//6. 设置cssText
element.style.cssText = 'height: 100px !important';
————————————————
参考链接：https://www.cnblogs.com/LiuWeiLong/p/6058059.html

骚操作

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
0==false
1==true

//	短路运算-使用||
'nobige' || 0	//	"nobige"

//	短路运算-使用&&
if (isOnline) {
  postMessage();
}
isOnline && postMessage();

//	临时变量
var temp = a; a = b; b = temp;	// 传统，但需要借助临时变量
a ^= b; b ^= a; a ^= b; 	// 需要两个整数
void 0 == undefined

//	只有0为真
!0==true

// 非零都是为假
!1==false

// 字符查找判断
~'nobige.cn'.indexOf('com')

// 浮点转整数,正负数均可.
parseInt(num)

// 使用情况要看数字是否会溢出，小数字建议使用
~~num
num >> 0
num << 0
num | 0

//10位随机字符
Math.random().toString(16).substr(2)

//	随机颜色
'#'+Math.random().toString(16).substr(2, 6)

//	美化 console
console.info("%cNobige", "color: #181818; font-size: 30px; font-family: sans-serif");

//	三木运算
var a = x > 0 ? !0 : !1

//	字符串转数字
n = +'18'

//	数字转字符串
n = 18+''

//	数组截取
var array = [0, 1, 2, 3, 4, 5];
array.length = 3;
console.log(array);	// [0, 1, 2]

//	批量变量赋值
var a = 1, b = a, c = b;

//	闭包
!(function(){
    //code...
})();

// 滚动条控制
document.documentElement.scrollTop

奇偶数判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 普通写法,多采用取模(%)的方法
2 % 2 = 0 // 偶数
3 % 2 = 1 // 奇数
num % 2 === 0 ? '偶数' : '奇数'

/*
* & 运算符的写法
* &以特定的方式组合操作二进制数中对应的位
* 如果对应的位都为1，那么结果就是1
* 如果任意一个位是0 则结果就是0
* 
* */
// 1的二进制表示为: 00000000 00000000 00000000 00000001
// 3的二进制表示为: 00000000 00000000 00000000 00000011
2 & 1 = 0
3 & 1 = 1
num & 1 === 0 ? '偶数' : '奇数'
————————————————
日期:2020/10/22
参考链接：https://my.oschina.net/u/3419683/blog/4354654

判断是否为空Null

1
2
3
4
5
6
7
var a=''
if([null, undefined, ''].includes(a)){
	console.log('is null')
}
if(~[null, undefined, ''].indexOf(a)){
	console.log('is null')
}

时间戳转日期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// "2020-10-26 15:23:45"
function time(time = +new Date()) {
    var date = new Date(time + 8 * 3600 * 1000); // 增加8小时
    return date.toJSON().substr(0, 19).replace('T', ' ');
}
// "2020.10.26 15:23:45"
function time(time = +new Date()) {
    var date = new Date(time + 8 * 3600 * 1000);
    return date.toJSON().substr(0, 19).replace('T', ' ').replace(/-/g, '.');
}
————————————————
日期:2020/10/26
参考链接：https://segmentfault.com/a/1190000015992232
————————————————
日期:2020-10-26
参考链接：https://www.cnblogs.com/CyLee/p/5992673.html

javascript书签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
javascript:(
	//code...
)();

// 例如
javascript:(function () {
var txt = "————————————————\n日期:"+new Date().toISOString().substr(0,10)+"\n参考链接："+window.location.href;prompt('参考',txt)
})();

// https://favor.fund.eastmoney.com/ QDII 参考
javascript:(function () {
var a=0,aN=0;
jQuery.each(jQuery("#position_shares > div.poptableWrap > table").find('tr'), function(index, val) {
    var x = jQuery(this).find('td:nth-child(2)').text(),
    y = jQuery(this).find('td:nth-child(3)').text(),
    xAll = jQuery("#position_shares > div.poptableWrap > p > span.sum-num").text();
    y = y.replace('%','');
    xAll = xAll.replace('%','')/100;
    aN = y>0?aN+1:aN;
    a+=x.replace('%','')/10*y*xAll;
});
alert('预计涨幅：'+a+'\n涨的个数：'+aN);
})();

html拼接

1
2
3
4
5
6
7
8
9
// 用引号
``
// 变量用 ${}
var txt = `
    ————————————————
    日期:${new Date().toISOString().substr(0,10)}
    参考链接：${window.location.href}
    `
// 原样输出，换行+制表符

关键词

1
2
3
4
5
// 字符分割
String('nobige.cn').split('.')

// 跳出当前循环
continue

禁止Debug

让JS控制台永远Debuger状态，禁止F12控制台调试JavaScript

加密前手动添加各个位置效果会更好,最好配合无限循环

1
2
3
4
5
6
7
8
9
// 禁用JavaScript调试代码
(function (a) {
    return (function (a) {
        return (Function('Function(arguments[0]+"' + a + '")()'))
    })(a)
})('bugger')('de', 0, 0, (0, 0));
//  ————————————————
//  日期:2022-01-18
//  参考链接：https://blog.oioweb.cn/28.html

获取URL参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/**
* 获取get参数
**/
var getUrlParam = function (name){
    // 获取参数
    var url = window.location.search;
    // 正则筛选地址栏
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    // 匹配目标参数
    var result = url.substr(1).match(reg);
    //返回参数值
    return result ? decodeURIComponent(result[2]) : null;
}

数组转URL参数

1
2
3
4
5
6
7
8
9
10
/**
* 数组转URL
* */
var arr2url = function (x) {
    var y = [];
    Object.entries(x).forEach(([a, b]) => {
    y.push(a + '=' + b);
    });
    return '?' + y.join('&');
}

Arguments 对象

arguments 是一个对应于传递给函数的参数的类数组对象。

IE 3+

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function func1(a,b) {
  console.log(arguments[0]);
  // expected output: 1

  console.log(arguments[1]);
  // expected output: 2

  console.log(arguments[2]);
  // expected output: 3
}

func1(1, 2, 3);
> 1
> 2
> 3

Object.keys()

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。

IE 9+

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

1
2
3
4
5
6
7
// simple array
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

Object.prototype.hasOwnProperty()

hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是，是否有指定的键)

IE 5.5+

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty

1
2
3
4
5
6
7
8
9
10
11
12
const object1 = {};
object1.property1 = 42;

console.log(object1.hasOwnProperty('property1'));
// expected output: true

console.log(object1.hasOwnProperty('toString'));
// expected output: false

console.log(object1.hasOwnProperty('hasOwnProperty'));
// expected output: false

Array.prototype.map()

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成

IE 9+

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

1
2
3
4
5
6
7
8
9
10
11
const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

// 跳出当前循环
return 
// 跳出循环，无

Array.prototype.filter()

filter() 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。

IE 9+

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

1
2
3
4
5
6
7
8
9
10
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

// 跳出当前循环
return 
// 跳出循环，无

for…in

for...in语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。

IE 3+

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var obj = {a:1, b:2, c:3};

for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

// 兼容性：初始化函数表达式,使用一个初始化表达式（i=0）在一个for...in循环中：
var obj = {a: 1, b: 2, c: 3};
for (var i = 0 in obj) {
  console.log(obj[i]);
}
// 1
// 2
// 3

方法

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
// 语言元素 描述 
abs // 方法 返回一个数的绝对值。
  
acos // 方法 返回一个数的反余弦。
  
anchor // 方法 在对象的指定文本两端加上一个带 NAME 属性的 HTML 锚点。
 
apply // 方法 应用对象的一个// 方法，用当前对象代替另一对象。
 
asin // 方法 返回一个数的反正弦。
  
atan // 方法 返回一个数的反正切。
  
atan2 // 方法 返回从 X 轴到点 （y, x）的角度（以弧度为单位）。
 
atEnd // 方法 返回一个表明枚举算子是否处于集合结束处的 Boolean 值。
 
big // 方法 在String 对象的文本两端加入 HTML 的<BIG>标识。
 
blink // 方法 将 HTML 的 <BLINK> 标识添加到 String 对象中的文本两端。
 
bold // 方法 将 HTML 的 <B> 标识添加到String 对象中的文本两端。
 
call // 方法 应用对象的一个// 方法，用当前对象代替另一对象。
 
ceil // 方法 返回大于或等于其数值参数的最小整数。
  
charAt // 方法 返回位于指定索引位置的字符。
 
charCodeAt // 方法 返回指定字符的 Unicode 编码。
 
compile // 方法 将一个正则表达式编译为内部格式。
 
concat // 方法（Array） 返回一个由两个数组合并组成的新数组。
 
concat // 方法（String） 返回一个包含给定的两个字符串的连接的 String 对象。
 
cos // 方法 返回一个数的余弦。
  
decodeURI // 方法 返回一个已编码的通用资源标识符 (URI) 的解码版。
 
decodeURIComponent // 方法 返回一个已编码的通用资源标识符 (URI) 的解码版。
 
dimensions // 方法 返回 VBArray 的维数。
 
escape // 方法 对 String 对象编码，以便在所有计算机上都能阅读。
  
eval // 方法 对 JScript 代码求值然后执行之。
 
exec // 方法 在指定字符串中执行一个匹配查找。
 
exp // 方法 返回 e （自然对数的底） 的幂。
  
fixed // 方法 将 HTML 的<TT> 标识添加到String 对象中的文本两端。
  
floor // 方法 返回小于或等于其数值参数的最大整数。
  
fontcolor // 方法 将 HTML 带 COLOR 属性的<FONT>标识添加到 String 对象中的文本两端。
 
fontsize // 方法 将 HTML 带 SIZE 属性的<FONT>标识添加到 String 对象中的文本两端。
 
fromCharCode // 方法 返回 Unicode 字符值的字符串。
 
getDate // 方法 使用当地时间返回 Date 对象的月份日期值。
 
getDay // 方法 使用当地时间返回 Date 对象的星期几。
 
getFullYear // 方法 使用当地时间返回 Date 对象的年份。
 
getHours // 方法 使用当地时间返回 Date 对象的小时值。
 
getItem // 方法 返回位于指定位置的项。
 
getMilliseconds // 方法 使用当地时间返回 Date 对象的毫秒值。
 
getMinutes // 方法 使用当地时间返回 Date 对象的分钟值。
 
getMonth // 方法 使用当地时间返回 Date 对象的月份。
 
getSeconds // 方法 使用当地时间返回 Date 对象的秒数。
 
getTime // 方法 返回 Date 对象中的时间。
 
getTimezoneOffset // 方法 返回主机的时间和全球标准时间（UTC）之间的差（以分钟为单位）。
 
getUTCDate // 方法 使用全球标准时间（UTC）返回 Date 对象的日期值。
 
getUTCDay // 方法 使用全球标准时间（UTC）返回 Date 对象的星期几。
 
getUTCFullYear // 方法 使用全球标准时间（UTC）返回 Date 对象的年份。
 
getUTCHours // 方法 使用全球标准时间（UTC）返回Date 对象的小时数。
 
getUTCMilliseconds // 方法 使用全球标准时间（UTC）返回Date 对象的毫秒数。
 
getUTCMinutes // 方法 使用全球标准时间（UTC）返回 Date 对象的分钟数。
 
getUTCMonth // 方法 使用全球标准时间（UTC）返回 Date 对象的月份值。
 
getUTCSeconds // 方法 使用全球标准时间（UTC）返回Date对象的秒数。
 
getVarDate // 方法 返回 Date 对象中的 VT_DATE。
 
getYear // 方法 返回 Date 对象中的年份。
 
hasOwnProperty // 方法 返回一个 Boolean 值，表明对象是否具有指定的名称。
 
indexOf // 方法 返回在 String 对象中第一次出现子字符串的字符位置。
 
isFinite // 方法 返回一个 Boolean 值，表明某个给定的数是否是有穷的。
 
isNaN // 方法 返回一个 Boolean 值，表明某个值是否为保留值 NaN （不是一个数）。
 
isPrototypeOf // 方法 返回一个 Boolean 值，表明对象是否存在于另一对象的原型链中。
 
italics // 方法 将 HTML的 <I> 标识添加到 String 对象中的文本两端。
 
item // 方法 返回集合中的当前项。
 
join // 方法 返回一个由数组中的所有元素连接在一起的 String 对象。
 
lastIndexOf // 方法 返回在 String 对象中子字符串最后出现的位置。
 
lbound // 方法 返回在 VBArray 中指定维数所用的最小索引值。
 
link // 方法 将带 HREF 属性的 HTML 锚点添加到 String 对象中的文本两端。
 
localeCompare // 方法 返回一个值，表明两个字符串在当前区域设置下是否相等。
 
log // 方法 返回某个数的自然对数。
 
match // 方法 使用给定的正则表达式对象对字符串进行查找，并将结果作为数组返回。
 
max // 方法 返回给定的两个表达式中的较大者。
 
min // 方法 返回给定的两个数中的较小者。
 
moveFirst // 方法 将集合中的当前项设置为第一项。
 
moveNext // 方法 将当前项设置为集合中的下一项。
 
parse // 方法 对包含日期的字符串进行分析，并返回该日期与1970年1月1日零点之间相差的毫秒数。
 
parseFloat // 方法 返回从字符串转换而来的浮点数。
 
parseInt // 方法 返回从字符串转换而来的整数。
 
pop // 方法 删除数组中的最后一个元素并返回该值。
 
pow // 方法 返回一个指定幂次的底表达式的值。
  
push // 方法 向数组中添加新元素，返回数组的新长度。
 
random // 方法 返回一个 0 和 1 之间的伪随机数。
 
replace // 方法 返回根据正则表达式进行文字替换后的字符串的拷贝。
 
reverse // 方法 返回一个元素反序的 Array 对象。
 
round // 方法 将一个指定的数值表达式舍入到最近的整数并将其返回。
 
search // 方法 返回与正则表达式查找内容匹配的第一个子字符串的位置。
 
setDate // 方法 使用当地时间设置 Date 对象的数值日期。
  
setFullYear // 方法 使用当地时间设置 Date 对象的年份。
 
setHours // 方法 使用当地时间设置 Date 对象的小时值。
 
setMilliseconds // 方法 使用当地时间设置 Date 对象的毫秒值。
 
setMinutes // 方法 使用当地时间设置 Date 对象的分钟值。
  
setMonth // 方法 使用当地时间设置 Date 对象的月份。
  
setSeconds // 方法 使用当地时间设置 Date 对象的秒值。
  
setTime // 方法 设置 Date 对象的日期和时间。
 
setUTCDate // 方法 使用全球标准时间（UTC）设置 Date 对象的数值日期。
 
setUTCFullYear // 方法 使用全球标准时间（UTC）设置 Date 对象的年份。
 
setUTCHours // 方法 使用全球标准时间（UTC）设置 Date 对象的小时值。
 
setUTCMilliseconds // 方法 使用全球标准时间（UTC）设置 Date 对象的毫秒值。
 
setUTCMinutes // 方法 使用全球标准时间（UTC）设置 Date 对象的分钟值。
 
setUTCMonth // 方法 使用全球标准时间（UTC）设置 Date 对象的月份。
 
setUTCSeconds // 方法 使用全球标准时间（UTC）设置 Date 对象的秒值。
 
setYear // 方法 使用 Date 对象的年份。
 
shift // 方法 删除数组中的第一个元素并返回该值。
 
sin // 方法 返回一个数的正弦。
 
slice // 方法 (Array) 返回数组的一个片段。
 
slice // 方法 (String) 返回字符串的一个片段。
 
small // 方法 将 HTML 的<SMALL> 标识添加到 String 对象中的文本两端。
 
sort // 方法 返回一个元素被排序了的 Array 对象。
  
splice // 方法 从数组中删除元素，若必要，在相应位置处插入新元素，返回被删除的元素。
 
split // 方法 将一个字符串分割为子字符串，然后将结果作为字符串数组返回。
 
sqrt // 方法 返回一个数的平方根。
 
strike // 方法 将 HTML 的<STRIKE> 标识添加到String 对象中的文本两端。
 
sub // 方法 将 HTML 的 <SUB> 标识放置到 String 对象中的文本两端。
 
substr // 方法 返回一个从指定位置开始并具有指定长度的子字符串。
 
substring // 方法 返回位于 String 对象中指定位置的子字符串。
  
sup // 方法 将 HTML 的 <SUP> 标识放置到 String 对象中的文本两端。
 
tan // 方法 返回一个数的正切。
 
test // 方法 返回一个 Boolean 值，表明在被查找的字符串中是否存在某个模式。
 
toArray // 方法 返回一个从 VBArray 转换而来的标准 JScript 数组。
 
toDateString // 方法 返回以字符串形式表示的日期。
 
toExponential // 方法 返回一个字符串，该字符串包含一个以指数形式表示的数字。
 
toFixed // 方法 返回一个字符串，表明一个用 fixed-point 形式表示的数字。
 
toGMTString // 方法 返回一个转换为使用格林威治标准时间（GMT）的字符串的日期。
  
toLocaleDateString // 方法 返回一个以字符串形式表示的日期
//  该日期与主机环境的当前区域设置相适应。
 
toLocaleLowercase // 方法 返回一个字符串，
// 其中所有的字母字符都被转换成小写（考虑主机环境的当前区域设置）。
 
toLocaleTimeString // 方法 返回一个以字符串形式表示的时间，该时间与主机环境当前区域设置相适应。
 
toLocaleString // 方法 返回一个转换为使用当地时间的字符串的日期。
 
toLocaleUppercase // 方法 返回一个字符串，其中所有的字母字符都被转换成大写（考虑主机环境的当前区域设置）。
 
toLowerCase // 方法 返回一个所有的字母字符都被转换为小写字母的字符串。
 
toPrecision // 方法 返回一个字符串，
//  该字符串包含用指定位数的指数或 fixed-point 形式表示的数字。
 
toString // 方法 返回一个对象的字符串表示。
 
toTimeString // 方法 返回一个以字符串形式表示的时间。
 
toUpperCase // 方法 返回一个所有的字母字符都被转换为大写字母的字符串。
 
toUTCString // 方法 返回一个转换为使用全球标准时间（UTC）的字符串的日期。
 
ubound // 方法 返回在 VBArray 的指定维中所使用的最大索引值。
 
unescape // 方法 对用escape // 方法编码的 String 对象进行解码。
  
unshift // 方法 返回一个数组，在该数组头部插入了指定的元素。
 
UTC // 方法 返回 1970年1月1日零点的全球标准时间
    //（UTC） （或 GMT）与指定日期之间的毫秒数. 
valueOf // 方法 返回指定对象的原始值。

Document

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
46
47
48
document.activeElement  // 返回当前获取焦点元素
document.addEventListener() // 向文档添加句柄
document.adoptNode(node)    // 从另外一个文档返回 adapded 节点到当前文档。
document.anchors    // 返回对文档中所有 Anchor 对象的引用。
document.baseURI    // 返回文档的绝对基础 URI
document.body   // 返回文档的body元素
document.close()    // 关闭用 document.open() 方法打开的输出流，并显示选定的数据。
document.cookie // 设置或返回与当前文档有关的所有 cookie。
document.createAttribute()  // 创建一个属性节点
document.createComment()    // createComment() 方法可创建注释节点。
document.createDocumentFragment()   // 创建空的 DocumentFragment 对象，并// 返回此对象。
document.createElement()    // 创建元素节点。
document.createTextNode()   // 创建文本节点。
document.doctype    // 返回与文档相关的文档类型声明 (DTD)。
document.documentElement    // 返回文档的根节点
document.documentMode   // 返回用于通过浏览器渲染文档的模式
document.documentURI    // 设置或返回文档的位置
document.domain // 返回当前文档的域名。
document.embeds // 返回文档中所有嵌入的内容（embed）集合
document.forms  // 返回对文档中所有 Form 对象引用。
document.getElementsByClassName()   // 返回文档中所有指定类名的元素集合，作为 NodeList 对象。
document.getElementById()   // 返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName()    // 返回带有指定名称的对象集合。
document.getElementsByTagName() // 返回带有指定标签名的对象集合。
document.images // 返回对文档中所有 Image 对象引用。
document.implementation // 返回处理该文档的 DOMImplementation 对象。
document.importNode()   // 把一个节点从另一个文档复制到该文档以便应用。
document.inputEncoding  // 返回用于文档的编码方式（在解析时）。
document.lastModified   // 返回文档被最后修改的日期和时间。
document.links  // 返回对文档中所有 Area 和 Link 对象引用。
document.normalize()    // 删除空文本节点，并连接相邻节点
document.normalizeDocument()    // 删除空文本节点，并连接相邻节点的
document.open() // 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
document.querySelector()    // 返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll() // 是 HTML5中引入的新方法，// 返回文档中匹配的CSS选择器的所有元素节点列表
document.readyState // 返回文档状态 (载入中……)
document.referrer   // 返回载入当前文档的文档的 URL。
document.removeEventListener()  // 移除文档中的事件句柄(由 addEventListener() 方法添加)
document.renameNode()   // 重命名元素或者属性节点。
document.scripts    // 返回页面中所有脚本的集合。
document.strictErrorChecking    // 设置或返回是否强制进行错误检查。
document.title  // 返回当前文档的标题。
document.URL    // 返回文档完整的URL
document.write()    // 向文档写 HTML 表达式 或 JavaScript 代码。
document.writeln()  // 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。
// ————————————————
// 日期:2021-03-25
// 参考链接：https://www.runoob.com/jsref/dom-obj-document.html

Jquery

代替js字符拼接

1
2
3
4
5
6
7
$('<div/>',{
    text: 'Div text',
    class: 'className'
}).appendTo('#parentDiv');
————————————————
日期:2020/10/22
参考链接：https://stackoverflow.com/questions/268490/jquery-document-createelement-equivalent

表单重置

1
2
3
4
5
6
7
//在form表单中添加一个隐藏的reset按钮， 
<button type="reset" style="display:none;"></button> 
//然后通过trigger来触发reset按钮 
$("button[type='reset']").trigger("click");//触发reset按钮 //通过form表单的dom对象的reset方法来清空$('form')[0].reset();
————————————————
日期:2021-11-01
参考链接：https://blog.csdn.net/biedazhangshu/article/details/50731295

Layui

layui清空,重置表单数据的数据

1
layui.form.render();