目录
0.码仙励志
如果你看到面前的阴影,别怕,那是因为你的背后有阳光
1.alert(); 弹框
用法:
<script>
alert("天生我才必有用");
</script>
2.console.log(); 在控制台输出
用法:
<script>
console.log("天生我才必有用");
</script>
3.WebStorm 常用快捷键
- CTRL+Alt+L 格式化代码
- Alt+F12 快速打开浏览器
- Alt+鼠标左键 批量修改代码
- CTRL+鼠标左键 查看函数的用法
4.typeof 获取变量类型
用法:
<script>
var a = 10;
var b = "bb";
console.log(typeof a);
console.log(typeof b);
</script>
5.常用的类型转换
1.parseInt(); 转整数
用法:
<script>
var a = "12";
var b = "a12";
var c = "12a";
var d = "1a2";
console.log(parseInt(a));
console.log(parseInt(b));
console.log(parseInt(c));
console.log(parseInt(d));
</script>
2.pasreFloat(); 转小数
<script>
var a = "1.2";
var b = "a1.2";
var c = "1.2a";
var d = "1.2a2";
console.log(parseFloat(a));
console.log(parseFloat(b));
console.log(parseFloat(c));
console.log(parseFloat(d));
</script>
3.Number(); 转数字
<script>
var a = "1.2";
var b = "12";
var c = "1.2a";
var d = "a12";
console.log(Number(a));
console.log(Number(b));
console.log(Number(c));
console.log(Number(d));
</script>
4.Boolean(); 转布尔类型
<script>
console.log(Boolean(2));
console.log(Boolean(1));
console.log(Boolean(0));
console.log(Boolean(-1));
console.log(Boolean(-2));
</script>
6.NaN 不是一个数字
用法:
<script>
console.log(isNaN(5));
console.log(isNaN("5"));
console.log(isNaN("Hello"));
</script>
7.undefined 未定义
用法:
定义一个变量,没有赋值,就是undefined
<script>
var a;
console.log(a);
</script>
8.prompt(); 输入框
用法:
<script>
var age = prompt("请输入年龄");
console.log(age);
</script>
9.document.write(); 在浏览器页面中显示
<script>
document.write("天生我才必有用");
document.write("<a style='color: red'>千金散尽还复来</a>");
</script>
10.定义数组的方式
<script>
var arr1 = [];
var arr2 = new Array();
</script>
参数:
1.new Array(); 2.new Array(size); 3.new Array(element0, element1, ..., elementn);
- 参数 size 是期望的数组元素个数。返回的数组,length 字段将被设为 size 的值。
- 参数 element ..., elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时,新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。
11.arguments 伪数组
可以当作数组使用
<script>
function f1() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum = sum + arguments[i];
}
return sum;
};
//可以自动获取参数的值和个数
console.log(f1(10, 20, 30));
console.log(f1(10, 20, 30, 40, 50));
</script>
12.instanceof 判断对象类型
语法:对象 instanceof 类型的名字
<script>
var date = new Date();
var arr = new Array();
console.log(date instanceof Date);
console.log(arr instanceof Array);
console.log(date instanceof Array);
console.log(arr instanceof Date);
</script>
13.disabled 禁用 input 元素
- 被禁用的 input 元素既不可用,也不可点击。
- disabled 属性无法与 <input type="hidden"> 一起使用。
<body>
<input type="text">
<input type="text" disabled="disabled">
</body>
14.阻止超链接跳转
点击超链接后不能正常跳转
<body>
<a href="https://www.baidu.com" onclick="return false">百度</a>
</body>
15.confirm 确定及取消按钮的对话框
confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
<script>
var flag = confirm("是否继续");
</script>
点击确定,flag的值就是true;点击取消,flag的值就是flase;
16.onload 页面加载完毕触发
因为onload事件在页面加载完毕后才触发,所以不会报错
<body>
<script>
window.onload = function () {
document.getElementById("btn").onclick = function () {
alert("码仙");
};
};
</script>
<input type="button" value="按钮" id="btn"/>
</body>
17.bind(对象) 改变函数执行时this的指向
<body>
<input type="button" value="按钮1" id="btn1">
<input type="button" value="按钮2" id="btn2">
<script>
document.getElementById("btn1").onclick = function () {
console.log(this.id);//btn2
}.bind(document.getElementById("btn2"))
</script>
</body>