一、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: