了解JavaScript
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
JavaScript作用
JavaScript通常用来操作HTML页面的
html骨架(页面结构)，css是样式(元素大小、颜色、位置、隐藏或显示等)，js是行为(部分动画效果、页面与用户交互等)
JS写在哪
尽量写在window.onload 里面
<script>
window.onload = function () {}
</script>
定义变量
<script type="text/html">
// 1. 定义变量
var name, age, sex;
name = '毛利';
age = 18;
sex = '男'
console.log(name);
console.log(age);
console.log(sex);
alert("hello 我叫毛利");//弹窗 调试代码
console.log("hello 我叫毛利");//打印 调试代码
</script>
获取元素
-
通过id获取元素，
document.getElementById() -
通过className获取元素(不支持IE8及以下)
~.getElementsByClassName() -
通过标签名获取元素
~.getElementsByTagName() -
通过选择器的写法获取元素（不兼容IE7及以下）
~.querySelector()`` ~.querySelectorAll() -
通过name值获取
document.getElementsByName()通过 name的属性获取元素，一般用于input
注意点
获取的是一堆元素的集合，设置操作的时候要通过下标（索引、序号）拿到对应的某一个 从0开始 除了用id获取元素外，其他必须加下标
补充点：
innerHTML
设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身)
innerText
设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身）
简单事件
- 左键单击
onclick - 左键双击
ondblclick - 鼠标移入
onmouseover/onmouseenter - 鼠标移出
onmouseout/onmouseleave
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="div">我是div</div>
</body>
<script>
window.onload = function () {
var div =document.getElementsByClassName("div")
div[0].onmouseover = function () {
this.innerHTML = "鼠标移入了";
};
div[0].onmouseleave = function () {
this.innerHTML = "鼠标移出了";
}
div[0].onclick = function () {
this.innerHTML = "鼠标点击了";
}
}
</script>
js操作元素的标签属性
<script>
window.onload = function () {
var div =document.getElementsByClassName("div")
div[0].onclick = function () {
// this.style.cssText = "background: yellow";
this.style.backgroundColor = 'yellow'
}
}
</script>
例子练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
* {
margin: 0;
padding: 0;
}
div{
margin-bottom: 25px;
}
div input{
height: 30px;
margin-left: 10px;
padding-left: 5px;
}
div input[type=button]{
width: 170px;
padding-left: 0;
margin-left: 75px;
}
div.box{
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
margin: 50px;
background: #33aa75;
}
</style>
</head>
<body>
<div>
属 性：<input type="text" placeholder="请输入你的属性">
</div>
<div>
属性值：<input type="text" placeholder="请输入你的属性值">
</div>
<div>
<input type="button" value="设置属性">
</div>
<div class="box">
我是毛利
</div>
<script>
var aInput = document.getElementsByTagName("input");
// alert(aInput.length);
var aBox = document.getElementsByClassName("box");
aInput[2].onclick = function () {
var key = aInput[0].value;
var val = aInput[1].value;
// alert(key);
// alert(val);
aBox[0].style[key] = val;
aInput[0].value = "";
aInput[1].value = "";
}
aBox[0].onmouseenter = function () {
this.innerText = "hello"
}
aBox[0].onmouseleave= function () {
this.innerText = "我是毛利"
}
</script>
</body>
</html>