JS基础语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var a = 10;
var b = "123";
var c = '456';
var d = true;
var e = false;
var f = null;
var g;
console.log("5" == 5);
console.log("5" === 5);
console.log("5" != 5);
console.log("5" !== 5);
console.log(typeof (a));
console.log(Number(true));
console.log(Number(false));
console.log(Number("123"));
console.log(Number('abc'));
console.log(Number('a1'));
console.log(Number('1a'));
console.log(Number(''));
console.log(Number(' '));
console.log(Number(undefined));
console.log(Number(null));
console.log(String(undefined));
console.log(Boolean(-1));
console.log(Boolean(""));
console.log(3 + true);
console.log(3 + null);
console.log(true + "3");
console.log(3 - true);
console.log(3 + undefined);
console.log(parseInt(5.6));
console.log(parseInt("5.6"));
console.log(parseInt("34asd"));
console.log(parseInt("34as6"));
console.log(parseInt("a34sd"));
console.log(parseInt(15, 10));
var num = parseInt(Math.random() * (30 - 20 + 1) + 20);
console.log(num);
function Test(a, b){
console.log(a + b);
return a * b;
}
var t = Test(10, 20, 30);
console.log(t);
var fn = function(){
console.log("匿名函数1");
};
(function(){
console.log("匿名函数2");
})();
(function(){
console.log("匿名函数3");
}());
fn();
console.log("hello world");
</script>
<script type="text/javascript" src="index.js"></script>
</html>
<script type="text/javascript">
var items = document.getElementsByClassName('item');
var last = items[0];
for(var j = 0; j < items.length; j++){
items[j].index = j;
items[j].onclick = function(){
last.style.backgroundColor = "red";
this.style.backgroundColor = "blue";
last = this;
}
}
</script>
DOM的简单操作
<script type="text/javascript">
// 获取对象
var first = document.getElementById("first")
// 修改背景颜色
first.style.backgroundColor = "blue"
// 修改边框属性
first.style.border = "5px solid green"
// 修改外边距
first.style.margin = "100px auto"
// 旋转
first.style.transform = "rotate(45deg)"
// 获取、修改内容
first.innerHTML = "<p>福</p>"
first.innerText = "<p>福</p>"
console.log(first.innerHTML)
console.log(first.innerText)
// 通过类名获取一组元素
var userNames = document.getElementsByClassName("userName")
// userNames 是所有类名为 userName 的集合
userNames[0].value = "输入框"
console.log(userNames[0].value)
// 通过类名获取某个元素
var userName = document.getElementsByClassName("userName")[0]
// userNames 是所有类名为 userName 的集合
userName.value = "搜索框"
console.log(userName.value)
// 通过标签名获取
var button = document.getElementsByTagName("input")[1]
var temp = 1
// 添加点击方法,每次点击都会执行
button.onclick = function(){
console.log(userName.value)
userName.value = temp++
first.style.transition = "1s"
first.style.width = temp * 10 + "px"
first.style.height = temp * 10 + "px"
}
</script>
定时器
<script type="text/javascript">
setTimeout(function(){
}, 1000);
setTimeout(f, 1000);
function f(){
console.log("执行 f");
}
var timer = setInterval(function(){
console.log("循环定时器");
}, 2000);
setTimeout(function(){
clearInterval(timer);
}, 8000);
var first = document.getElementById("first");
first.onclick = function(){
var move = setInterval(function(){
first.style.left = first.offsetLeft + 5 + "px";
if (first.offsetLeft >= 500) {
clearInterval(move);
}
}, 20)
}
</script>
事件
鼠标事件
redDiv.onmousemove = function(){
console.log("鼠标移动的时候触发");
}
redDiv.onclick = function(){
console.log("单击事件");
}
redDiv.ondblclick = function(){
console.log("双击事件");
}
redDiv.onmousedown = function(){
console.log("鼠标按下事件");
}
redDiv.onmouseup = function(){
console.log("鼠标抬起事件");
}
redDiv.oncontextmenu = function(){
console.log("鼠标右击事件");
return false;
}
redDiv.onmouseover = function(){
console.log("over 移入");
}
redDiv.onmouseout = function(){
console.log("out 移出");
}
redDiv.onmouseleave = function(){
console.log("leave 移出");
}
redDiv.onmouseenter = function(){
console.log("enter 移入");
}
键盘事件
document.onkeydown = function(){
console.log("down键盘按下");
}
document.onkeypress = function(){
console.log("press 键盘按下");
}
document.onkeyup = function(){
console.log("键盘抬起事件");
}
表单
userName.onchange = function(){
console.log("change内容发生改变之后触发");
}
userName.oninput = function(){
console.log("input内容发生变化之后触发");
}
userName.onfocus = function(){
console.log("聚焦");
}
userName.onblur = function(){
console.log("失焦");
}
reg.onsubmit = function(){
console.log("提交");
return false;
}
reg.onreset = function(){
console.log("重置");
return false;
}
window 事件
window.onresize = function(){
console.log("窗口尺寸发生变化的时候触发");
}
window.onscroll = function(){
console.log("窗口内容滚动的时候触发");
}
window.onload = function(){
console.log("窗口加载完毕之后触发");
}
事件对象
<script type="text/javascript">
var redDiv = document.getElementsByClassName("redDiv")[0];
redDiv.onclick = function(){
var evObj = window.event || ev;
console.log(evObj.target);
console.log(evObj.clientY);
console.log(evObj.pageY);
console.log(evObj.offsetY);
}
document.onkeypress = function(ev){
console.log("press" + ev.keyCode);
}
document.onkeydown = function(ev){
console.log(ev.keyCode);
if (ev.keyCode == 66) {
console.log("按了 B");
}
if (ev.keyCode == 66 && ev.metaKey) {
console.log("按了 command + B");
}
}
</script>
动画
animation-name: run;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
事件捕获和冒泡
<script type="text/javascript">
var box = document.getElementsByClassName("box")[0];
var mid = document.getElementsByClassName("mid")[0];
var item = document.getElementsByClassName("item")[0];
box.addEventListener("click", function(){
console.log("box");
}, false);
mid.addEventListener("click", function(){
console.log("mid");
}, false);
item.addEventListener("click", function(ev){
ev.cancelBubble = true;
ev.stopPropagation();
if (ev.stopPropagation) {
ev.stopPropagation();
} else{
ev.cancelBubble = true;
}
console.log("小明");
ev.preventDefault();
ev.returnValue = false;
return false;
}, false);
</script>
事件绑定
<script type="text/javascript">
var redDiv = document.getElementsByClassName("redDiv")[0];
redDiv.addEventListener("click", f1, false);
redDiv.addEventListener("click", f2, false);
function f1(){
console.log(1);
}
function f2(){
console.log(2);
}
redDiv.removeEventListener("click", f2, false);
</script>