一、js基础语法：
在html中写js代码要写在整个html标签后面，用script标签，alert（）；作用是弹出对话框；
代码示例：
<script type="text/javascript">
// alert作用是弹出对话框，所有的js代码也要使用英文状态下的符号，小括号中可以使用英文单引号或双引号来包裹文字
alert("呵呵，看我弹出来了");
</script>二、js找元素、标签、标记：
document代表页面文档；getElementById这种写代码的形式叫做驼峰命名法，使用id来获取页面中的元素、标签、标记；
代码示例：
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div >div1</div>
<div >div2</div>
</body>
</html>
<script type="text/javascript">
// document代表页面文档；getElementById这种写代码的形式叫做驼峰命名法，使用id来获取页面中的元素、标签、标记
('div1')
</script>三、js实体化三属性：
用js来设置盒子的宽、高、背景色
代码示例：
<script type="text/javascript">
// 想要设置谁，就必须先找到他，使用英文状态下的.来进行连接，最后的数值和前面的属性使用=连接，=前后使用空格只是为了美观，可有可无
('div2').='200px';
('div2').='200px';
('div2').='red';
</script>
四、js变量简化代码：
用var声明变量；
变量起名字时候注意事项：可以使用中文但是不推荐，也可以使用_和$符号，命名不可以使用数字开头；不允许使用js已经占用了的单词（保留字）；
代码示例：
<script type="text/javascript">
// ('div2').='200px';
// ('div2').='200px';
// ('div2').='red';
// var是声明变量；变量就是给数据请了一个代言人，今后只要出现变量名就代表等号之后的这堆代码
var dyr = ('div2').style;
// 变量起名字时候注意事项：可以使用中文但是不推荐，也可以使用_和$符号，命名不可以使用数字开头；不允许使用js已经占用了的单词（保留字）；
='200px';
='200px';
='red';
</script>五、js事件：
事件：在什么情况下做了什么事情
事件三要素：事件源.事件类型=匿名函数里面写的就是要执行的事情
先找到页面中的id元素后习惯性的把它保存在一个变量中方便后续的使用；
代码示例：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{width: 100px; height: 100px; background: #FFC0CB;}
</style>
</head>
<body>
<div ></div>
<input type="button" value="变宽" >
<input type="button" value="变高" >
<input type="button" value="变色" >
</body>
</html>
<script type="text/javascript">
// 事件：在什么情况下做了什么事情
// 事件三要素：事件源.事件类型=匿名函数里面写的就是要执行的事情
// 先找到页面中的id元素后习惯性的把它保存在一个变量中方便后续的使用；
var box = ('box');
var btn_w = ('btn_w');
var btn_h = ('btn_h');
var btn_c = ('btn_c');
// 以下是变宽代码
btn_w.onclick = function(){
// 这里写点击后要执行哪些命令
= "200px";
}
// 以下是变高代码
btn_h.onclick = function(){
= "200px";
}
// 以下是变色代码
btn_c.onclick = function(){
= "red";
}
</script>六、找页面标签的其他方法：
可以用类名，标签名和name属性来获取元素；其中 getElementsByClassName是找页面中class的方法，必须在后面添加[数字],数字从0开始计数； getElementsByTagName是用标签名获取元素，也要加[数字]；getElementsByName是用name属性的值来找元素，也需要加[数字]，name的值可以重复出现。
代码示例：
<body>
<div class="div1">有类名</div>
<div class="div1" name="hz">有类名</div>
<div>什么都没有</div>
<div name="hz">有name</div>
</body>
</html>
<script type="text/javascript">
// getElementsByClassName是找页面中class的方法，必须在后面添加[数字],数字从0开始计数
('div1')[0].onclick = function(){
alert();
}
// getElementsByTagName是用标签名获取元素，也要加[数字]
('div')[2].onclick = function(){
alert();
}
// getElementsByName是用name属性的值来找元素，也需要加[数字]，name的值可以重复出现；
('hz')[1].onclick = function(){
alert();
}
</script>七、js其他事件：
当点击div执行弹出对话框操作时：onclick代表单击事件；ondblclick代表双击事件； onmouseover代表鼠标移入事件；onmouseout 代表鼠标移出事件。
代码示例：
<body>
<div >单击</div>
<div >双击</div>
<div >鼠标移入</div>
<div >双击移出</div>
<!-- 需要js控制的时候再添加class或者id来找到此元素即可 -->
<div >我没效果</div>
</body>
</html>
<script type="text/javascript">
//点击div执行弹出对话框操作；
var div1 = ('div1');
= function(){
alert('单击事件被捕获');
}
var div2 = ('div2');
// ondblclick代表双击事件
= function(){
alert('双击事件被捕获');
}
var div3 = ('div3');
// onmouseover代表鼠标移入事件；
= function(){
alert('鼠标移入事件被捕获');
}
var div4 = ('div4');
// onmouseout 代表鼠标移出事件
= function(){
alert('鼠标移出事件被捕获');
}
</script>八、js书写位置：
js书写位置有三种：外链、行内、内嵌；
html中写js代码是行内js，html的标签属性值要使用双引号，里面的js代码要使用单引号 ；行内js强烈不推荐使用，因为没有实现代码的分离效果，语法修改不方便 ；
强烈推荐使用外链js，因为实现了代码的分离，修改会很方便；
外链js和内嵌js，先写的就先执行，后写的后执行 ；
代码示例：
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- html中写js代码是行内js，html的标签属性值要使用双引号，里面的js代码要使用单引号 ；行内js强烈不推荐使用，因为没有实现代码的分离效果，语法修改不方便 -->
<div onclick="alert('点我弹出，我是行内js')">点我呀</div>
</body>
</html>
<!-- 强烈推荐使用外链js，因为实现了代码的分离，修改会很方便-->
<!-- 外链js和内嵌js，先写的就先执行，后写的后执行 -->
<script type="text/javascript">
// 内嵌js
alert("我是内嵌js");
</script>
<!-- 外链js -->
<script type="text/javascript" src="">
// 一旦有src属性引入别的js文件了，这里的代码都会失效；
alert("我还弹出吗～no");
</script>九、js代码搬家：
将js代码写在head中，用；
代表所有窗口全部执行完毕；当页面的所有html内容都加载完毕后才执行此处的代码；
代码示例：
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{width: 100px; height: 100px; background: red;}
</style>
<script type="text/javascript">
// 代表所有窗口全部执行完毕；当页面的所有html内容都加载完毕后才执行此处的代码；
= function(){
var box = ('box');
= function(){
alert('点击成功');
}
}
</script>
</head>
<body>
<div ></div>
</body>
十、动态添加、删除
innerHTML作用是设置标签的中间内容；
代码示例：
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{width: 200px; height: 200px; background: #FFC0CB;}
</style>
<script type="text/javascript">
= function(){
var box = ('box');
var btn_add = ('btn_add');
var btn_del = ('btn_del');
btn_add.onclick = function(){
// 点击后设置div中的html显示文字
= '点击后此处文字才会被innerHTML设置成功';
}
// 点击删除按钮实现让文字清空效果
btn_del.onclick = function(){
= '';
}
// innerHTML作用是设置标签的中间内容
}
</script>
</head>
<body>
<div ></div>
<input type="button" value="添加" />
<input type="button" value="删除" />
</body>
十一、自定义函数语法：
函数、方法的定义：function 名字(){自己的js程序}; 如果想要执行这个函数中的js代码程序，必须要写函数名()才能执行函数中的命令；
代码示例：
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
= function(){
hi();
hi();
// 自定义函数的作用就是简化代码，实现重复性代码的简单调用
// 函数、方法的定义：function 名字(){自己的js程序}
// 如果想要执行这个函数中的js代码程序，必须要写函数名()才能执行函数中的命令；
// 函数（方法）的定义，js程序会优先执行；函数必须调用才可以执行其中的js代码：名字()；
function hi(){
alert('弹出');
}
// hi();
// hi();
}
</script>
</head>
十二、xml基础知识：
xml文件代表传输数据
新建一个xml文件，里面的标签全部是双标签，有大小写区分；
代码示例：
<!-- xml文件代表传输数据 -->
<ren>
<shengao>180</shengao>
<nianling>18</nianling>
<tizhong>
120
<pang>一般</pang>
</tizhong>
</ren>