一、js代码位置：
1、通常情况下，js位于<head></head>标签之内。
<script>
alert();
</script>2、放在单独的.js文件，然后再HTML中引入：
<script src=""> </script>二、基础知识：
1、注释：
//或者/* */
2、运算符：
（1）注意：
比较运算符：==（会自动转换数据类型）和===（不会自动转换数据类型）不同点。
3、数组：
js的数组是可以包括任意数据类型。
（1）创建：
new Array(1,2,3);
（2）方法：
.slice 截取数组的一部分
.pop 将数组中最后一个元素删掉
.push 将数组的末尾添加元素
.shift() 将array中的第一个元素删掉
.unshift() 将元素的头部添加元素
.sort()
4、对象：
5、字符串：
（1）多行字符串：
多行字符串可以使用``反引号来使用。
（2）模板字符串：
必须使用反字符串和花括号来表示：
1 <script type="text/javascript" >
2 // 'use strict';
3 var a='yang';
4 var b='song';
5 console.log(`你好！${a}`);
6 </script>（3）操作字符串：
三、函数：
1、map/reduce：
是array的方法，
1 <script type="text/javascript">
2 var a=[1,2,3,4,5];
3 function pow( x){
4 return x*x;
5 }
6 function add( x, y){
7 return x+y;
8 }
9 var resulrt=a.map(pow);
10 console.log(resulrt);
11 console.log(resulrt.reduce(add));
12 </script>2、filter函数：
接收一个函数作为参数，然后将不符合条件的元素删掉。
3、排序算法：
sort函数可以接收一个排序的函数，来定义排序的规则。
4、匿名函数：
()=>{//函数体};
5、生成器：
1 <script type="text/javascript">
2 //生成器
3 function* fac(max){
4 var
5 t,
6 a = 0,
7 b = 1,
8 n = 0;
9 while (n < max) {
10 yield a;
11 [a, b] = [b, a + b];
12 n ++;
13 }
14 return;
15 }
16 //var a=fac(5);
17 //console.log(a.next());
18
19 function* next_id() {
20
21 var n=1;
22 while(true){
23 yield n;
24 n++;
25 }
26 }
27
28 var c=next_id();
29 c.next();
30 console.log(c.next().value);
31
32 </script>四、正则表达式：
1、创建正则表达式：
（1）/正则表达式/
（2）new RegExp('正则表达式')
（3）判断是否匹配：
1 <script type="text/javascript">
2 var re = /^\d{3}\-\d{3,8}$/;
3 console.log(re.test('010-12345')); // true
4 re.test('010-1234x'); // false
5 re.test('010 12345'); // false
6 </script>2、切分字符串：
str.split('reg');
3、分组：
用reg.exec()提取分组：
1 var re = /^(\d{3})-(\d{3,8})$/;
2 re.exec('010-12345'); // ['010-12345', '010', '12345']
3 re.exec('010 12345'); // null五、json数据：
1、序列化：
使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
语法
JSON.stringify(value[, replacer[, space]])
2、反序列化：
varobjJSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');
六、面向对象编程
1、js使用原型继承方式来区分类和实例。
1 var Student = {
2 name: 'Robot',
3 height: 1.2,
4 run: function () {
5 console.log(this.name + ' is running...');
6 }
7 };
8
9 var xiaoming = {
10 name: '小明'
11 };
12
13 xiaoming.__proto__ = Student;
2、具体实现：
1 // 原型对象:
2 var Student = {
3 name: 'Robot',
4 height: 1.2,
5 run: function () {
6 console.log(this.name + ' is running...');
7 }
8 };
9
10 function createStudent(name) {
11 // 基于Student原型创建一个新对象:
12 var s = Object.create(Student);
13 // 初始化新对象:
14 s.name = name;
15 return s;
16 }
17
18 var xiaoming = createStudent('小明');
19 xiaoming.run(); // 小明 is running...
20 xiaoming.__proto__ === Student; // true七、浏览器对象：
1、DOM:
四种操作：
更新、遍历、删除、添加。
2、document.getElementById()可以唯一定位一个dom节点。
document.getElementsByTagName()，以及CSS选择器 document.getElementsByClassName()
3、更新dom：
使用innerHTML或者innerText
4、插入dom：
（1）如果插入的节点是空的，则可以直接插入HTML代码innerHTML='';
（2）若非空，则可使用两种方式：
·appendChild() 将子节点插入到父节点的最后。
示例：
1 <div id="list">
2 <p id="java">Java</p>
3 <p id="python">Python</p>
4 <p id="scheme">Scheme</p>
5 </div>
6 <script type="text/javascript">
7 var js=document.getElementById('list');
8 var node=document.createElement('p');
9 node.id='js';
10 node.innerText="JavaScript";
11 js.appendChild(node);
12 </script>
·insertBefore() 将子节点插入到指定位置。
parentElement.insertBefore(newElement, referenceElement);
5、删除一个节点：
（1）首先要获得该节点和他的父节点，然后电泳父节点的romoveChild()把自己删掉。
八、操作表单：
1、获取值：
// <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '用户输入的值'
2、对于复选框
// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
mon.checked; // true或者false
tue.checked; // true或者false3、设置值：
// <input type="text" id="email">
var input = document.getElementById('email');
input.value = 'test@example.com'; // 文本框的内容已更新 对于单选框和复选框，设置checked为true或false即可。
4、提交表单：
（1）通过submit提交表单：
1 <form id="test-form">
2 <input type="text" name="test">
3 <button type="button" onclick="doSubmitForm()">Submit</button>
4 </form>
5
6 <script>
7 function doSubmitForm() {
8 var form = document.getElementById('test-form');
9 // 可以在此修改form的input...
10 // 提交form:
11 form.submit();
12 }
13 </script>（2）使用onsubmit:
1 <!-- HTML -->
2 <form id="test-form" onsubmit="return checkForm()">
3 <input type="text" name="test">
4 <button type="submit">Submit</button>
5 </form>
6
7 <script>
8 function checkForm() {
9 var form = document.getElementById('test-form');
10 // 可以在此修改form的input...
11 // 继续下一步:
12 return true;
13 }
14 </script>5、操作文件：
九、JQUERY:
1、选择器：
$()
·按照ID来找：'#id'
·按照tag来找：
$(tagname)
·按照class来找：
$('.classname')
·按照属性来找：
$('[attrname=attrvalue]')
2、操作dom:
获取对象obj：
ob.text() 获取文本。
ob.html() 获取HTML代码
ob.css() 可以获取或者设置css属性。
修改class属性：
var div = $('#test-div');
div.hasClass('highlight'); // false， class是否包含highlight
div.addClass('highlight'); // 添加highlight这个class
div.removeClass('highlight'); // 删除highlight这个class
3、显示和隐藏DOM:
var a = $('a[target=_blank]');
a.hide(); // 隐藏
a.show(); // 显示
4、操作表单：
.val() 来获取和设置表单属性。
5、事件：
on方法用于绑定一个事件：
示例：1 /* HTML:
2 *
3 * <a id="test-link" href="#0">点我试试</a>
4 *
5 */
6
7 // 获取超链接的jQuery对象:
8 var a = $('#test-link');
9 a.on('click', function () {
10 alert('Hello!');
11 });鼠标事件
click: 鼠标单击时触发； dblclick：鼠标双击时触发； mouseenter：鼠标进入时触发； mouseleave：鼠标移出时触发； mousemove：鼠标在DOM内部移动时触发； hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。
键盘事件
键盘事件仅作用在当前焦点的DOM上，通常是<input>和<textarea>。
keydown：键盘按下时触发； keyup：键盘松开时触发； keypress：按一次键后触发。
其他事件
focus：当DOM获得焦点时触发； blur：当DOM失去焦点时触发； change：当<input>、<select>或<textarea>的内容改变时触发； submit：当<form>提交时触发； ready：当页面被载入并且DOM树完成初始化后触发。
事件触发条件：var input = $('#test-input');
input.change(function () {
console.log('changed...');
});6、动画：
.show(slow/fast)
.hide(毫秒时间)
7、AJAX:
