基础知识

- JavaScript和Java没有任何关系，最多语法看起来有点像
- JavaScript原名ivescript，是一门动态类型，弱类型基于原型的脚本语言
- 和HTML复合使用，不能单独使用

JavaScript作用：

	- 页面特效
	- 前后交互
	- 后台开发（node）

JavaScript写在哪里

script标签里

	1.
	<head>
    <meta charset="UTF-8">
    <title>try</title>
    <script>
    	alert("wer");
	</script>
	</head>
	<body>
	<div>
	    <input type="button" value="点我" onclick="alert('bug')">
	</div>
	2.
	<head>
    <meta charset="UTF-8">
    <title>try</title>
	</head>
	<body>
	<div>
	    <input type="button" value="点我" onclick="alert('bug')">
	</div>
	<script>
    	alert("wer");
	</script>

外部的js文件内，然后引入

	<head>
    <meta charset="UTF-8">
    <title>try</title>
    <script src="js/a.js"></script>
	</head>
	<body>
	<div>
	    <input type="button" value="点我" onclick="alert('bug')">
	</div>
	a.js:
    alert("wer");

JS一些注意事项

	- 严格区分大小写
	- 每一行完整语句后面加分号
	- 变量名不能使用关键字和保留字
	- 代码要缩进，保持可读性
	- 注释用//

JS修改元素内容

	- 首先获取id为xxx的元素 document.getElementByld(" ");
	- var 是js定义变量的关键字,创建（声明变量），如果不加为全局变量
	- innerHTML和innerText可以修改/获取

JS获取元素

- 通过id获取元素:id
	- document.getElementById(" ");
- 通过class名字获取元素:class
	- document getElementsByClassName(" ");
- 通过标签名获取元素:tagName
	- document.getElementsByTagName(" ");
- 通过name的属性获取元素，一般用于input:name
	- document.getElementsByTagName(" ");
- 通过css选择器获取一个
	- document.querySelector(" ");
- 通过css选择器获取所有
	- document.querySelectorAll(" ");
	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>try</title>
	</head>
	<body>
	<div id="div1">
	    <input type="button" value="点我" onclick="alert('bug')">
	    <p id="p1">我是一句话</p>
	    <span class="s1">我也是一句话1</span>
	    <span class="s1">我也是一句话2</span>
	    <span>我也是一句话3</span>
	</div>
	<div>
	    <p name="xg">p1</p>
	    <span name="xg">我也是一句话4</span>
	    <span>我也是一句话5</span>
	    <span>我也是一句话6</span>
	</div>
	<script type="text/javascript">
	        alert("werfd");
	    // 通过ｉｄ获取元素
	    var a = document.getElementById("p1");
	    a.onclick = function () {
	        alert("通过ｉｄ");
	    }
	    // 通过标签名获取元素
	    var b = document.getElementsByTagName("span")[0];
	    b.onclick = function () {
	        alert("通过标签名");
	    }
	    // 通过ｃｌａｓｓ获取元素
	    var c = document.getElementsByClassName("s1")[1];
	    c.onclick = function () {
	        alert("通过class")
	    }
	    // 通过name属性获取元素
	    var d = document.getElementsByName("xg")[1];
	    d.onclick = function () {
	        alert("通过ｎａｍｅ")
	    }
	    // 通过class选择器获取
	    var e = document.querySelector("span"); #此处也可以索引
	    e.onclick = function () {
	        alert("ｃｌａｓｓ选择器选一个")
	    }
	    var f = document.querySelectorAll("#div1 span");    #此处也可以索引
	    #此时获取的是ｉｄ为ｄｉｖ１下的所有的ｓｐａｎ标签
	    console.log(f);		＃ｃｏｎｓｏｌｅ：控制台
	    f.onclick = function () {
	       alert("3245")
	    }
	</script>
	</body>
	</html>

简单事件()

JS的基础事件

- 单击事件：onclick
- 双击事件:ondblclick
- 鼠标划入:onmouseenter
- 鼠标划出:onmouseleave
- 窗口变化:onresize
window.onresize = function () {
   alert("3245")
}
- 改变下拉框:onchange

操作标签属性

1.合法属性的增删改查
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>try</title>
</head>
<body>
<div>
    <p id="p1" class="s1">我是一句话</p>
</div>
<script type="text/javascript">
   var a = document.getElementById("p1");
   // 增/改：无则增，有则改
   a.className="hahaha";
   // 查
   console.log(a.className);
   // 删除
   a.removeAttribute("class");
   console.log(a);
</script>
</body>
</html>
２．自定义属性的增删改查
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>try</title>
</head>
<body>
<di
    <p id="p1" class="s1">我是一句话</p>
</div>
<script type="text/javascript">
   var a = document.getElementById("p1");
   // 增/改　无则增，有则改
   a.setAttribute("age","m");
   // 查，查到返回ｔｒｕｅ，没查到返回ｆａｌｓｅ
   console.log(a.hasAttribute("age"));
   // 删除
   a.removeAttribute("age");
   console.log(a);
</script>
</body>
</html>

ＪＳ修改样式

Obj.style[变量]=变量值
1.

try

我是一句话

# 数据类型 ## JS的数据类型五种基本类型＋ｏｂｊｅｃｔ（复杂型） - 字符串：string，要用引号 var a = "123"; console.log(typeof a); - 数字:number var a = 123; console.log(typeof a); - 布尔:boolean var a = true; console.log(typeof a); - 未定义:undefined var a ; console.log(typeof a); - 空:null var a = null; #object console.log(typeof a); - 对象:object（复杂型） null类型进行typeof操作符后，结果是object，原因在于null类型被当做一个空对象引用

练习

作业

属性名：

属性值：

我就是我

JavaScript（JS）（一）