js基础知识学习
一、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、反序列化：
var obj = JSON.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或者false
3、设置值：
// <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:
