JS 可以写到哪里
位置一，</head/> 前面 使用 <script></script> 标签
引入 js 文件，使得 js 文件和 html 文件分离，一个 js 文件可以被多个 html 使用。
位置二，内嵌 js 不能和 引入 js 文件糅杂使用
1
| <script src="static/js1/a.js"></script>
|
注意：必须写双标签，否则引入 js 无效，而且如果引入了 js，就会去加载引入的js，在引入 js 代码的标签中写代码无效。
上述代码的含义：当 html 解析到 src 会重新发送请求，如上图。
位置三
1
| <a href="javascript:alert('位置三')">点击</a>
|
打印
1
2
3
4
5
| console.log(a);
console.info(a);
console.warn(a);
console.error(a);
console.debug(a);
|
运算符
在逻辑运算符中，0、””、false、NaN、undefined、null 表示为 false，其他数据都为 true
一些特殊的 js 代码
1
2
3
4
5
6
7
8
9
10
11
| 1 && console.log(1);
function fun(x) {
x = x || 1;
console.log(x);
}
fun(null);
|
BOM
—
BOM 是 browser object model 的缩写，简称浏览器对象模型
location
1
2
|
location.href = "www.baidu.com"
|
弹窗
1
2
3
4
5
6
|
alert(1);
var result = prompt('你的贵姓？');
console.log(result);
|
1
2
| var result = confirm('你幸福吗？');
console.log(result);
|
定时器：
1
2
3
4
5
6
7
8
9
10
11
|
setTimeout(function () {
console.log(1)
}, 2000)
setInterval(function () {
alert(3);
}, 2000)
|
5庙后跳转页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<span id="s">5</span>秒后跳转
<script>
setInterval(function () {
var spanEle = document.getElementById('s');
// 改变 span 元素中间的值
var val = spanEle.innerHTML;
if (val == 1) {
location.href = 'www.baidu.com';
}
spanEle.innerHTML = val - 1;
}, 1000)
// 清除定时器
clearTimeout(time);
clearInterval(timer);
</script>
|
关于计时器
jQuery 完成表单校验
jquery 库，jquery-validation/jquery.validate.min.js
自定义提示语句
messages_cn.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| jQuery.extend(jQuery.validator.messages, {
required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"),
minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"),
rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
min: jQuery.validator.format("请输入一个最小为 {0} 的值")
});
|
引入和使用
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
| <script type="text/javascript" src="/js/plugins/jquery-validation/jquery.validate.min.js"></script>
<script type="text/javascript" src="/js/plugins/jquery-validation/message/messages_cn.js"></script>
$('#editForm').validate({
rules: {
name: {
required: true,
minlength: 1
},
password: {
required: true,
rangelength: [4, 6]
},
repassword: {
equalTo: "#password"
},
age: {
digits: true,
range: [18, 65]
},
email: {
required: "邮箱必填",
email: "邮箱格式不正确"
}
},
messages: {
name: {
required: "用户必填",
minlength: "用户名长度必须大于5个"
}
},
submitHandler:function(form) {
$('#editForm').ajaxForm(function (data) {
if (data.success) {
$.messager.confirm("温馨提示", "保存成功", function () {
window.location.href = "/employee/list"
})
} else {
$.messager.alert("温馨提示", data.message)
}
})
}
})
|
上述校验只有对原生的和同步请求有效。对异步请求和插件提交请求无效。
没有明确调用 submit() 或者按钮不是 submit 按钮，默认都无效
1
2
3
4
5
6
7
8
9
10
11
| submitHandler:function(form) {
$('#editForm').ajaxForm(function (data) {
if (data.success) {
$.messager.confirm("温馨提示", "保存成功", function () {
window.location.href = "/employee/list"
})
} else {
$.messager.alert("温馨提示", data.message)
}
})
}
|
覆写 submitHandler 才可以进行校验并自己提交，必须自己提交因为，submitHandler 已经覆盖了原来的方法，无法自动提交了。
遍历选出要删除的数据的 id
1
2
3
4
5
6
7
| var checks = $('.selectOne:checked');
$.each(checks, function(index, checkbox)) {
$(checkBox).data('id');
})
<td><input type="checkbox" class="cb selectOne" data-id="${entity.id}"></td>
|
