JavaScript
1. 基本语法
1.1 引入
- 内联试
<a href="javascript:void(0)" οnclick="alert('ok')">点击</a>
- 内嵌式
<script> alert('ok'); </script>
- 外链式
<script src="demo.js"></script>
1.2 调试输出
- alert():将内容通过对话框弹出到浏览器
- document.write():将内容直接输出到浏览器
- console.log():将内容输出到浏览器的控制台
1.3 语句
- javascript代码的末尾不必须添加分号,但是推荐加上
- javascript严格区分大小写
- javascript会忽略多余的空格
- javascript是脚本语言,浏览器在读取代码时,逐行的执行脚本代码。而对于传统的编程来说,会在执行前对所有代码进行编译(解释型语言)
- 程序都是从0开始计数
1.4 注释
- 单行注释:(双斜杠)//
- 多行注释:/**/
1.5 变量:
- 存储信息的“容器”
- 变量的命名规则:变量名由字母,数字,下划线和$组成,且不能以数字开头
// 申明变量 var username = 'zhangsan'; // 同时申明多个变量 var username = 'zhangsan', age = 30, sex = '男'; // 申明变量但是不赋值 var username; // 不使用var申明变量 username = 'zhangsan';
一个好的编程习惯是,在代码开始处,统一对需要的变量进行声明。
1.6 数据类型
字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined)
使用typeof检测数据类型
1.6.1 字符串(String)
- 使用单引号和双引号定义字符串
- 单双引号需要注意的内容
- 单双引号没有区别,都不解析变量
- 单双引号可以相互嵌套
- 不可以嵌套自身,除非使用转义字符转义
1.6.2 数字(Number)
- 整型
- 浮点型(计算的时候有计算损耗,不建议进行精确计算)
- NaN(Not a number)
- NaN与任何值运算都为NaN
- NaN与任何值都不想等,包括自身
- isNaN():判断一个值是否时NaN
1.6.3 布尔(Boolean)
- true
- false
1.6.4 数组
// 1. 创建数组的方式 var cars = new Array(); cars[0] = 'BMW'; cars[1] = 'BYD'; cars[2] = 'BenZ'; // 2.直接定义数组 var cars = new Array('BMW', 'BYD', 'Benz'); // 3.简单定义 var cars = ['BMW', 'BYD', 'Benz']; // 4.数组元素的值可以是任何值 var shoplist = ['zhangsan',20,true,null,undefined,[1,2,3],{}]; // 5.常用的一种复合数据(瀑布流,AngularJS中$scope.shoplist) var shoplist = [ {id:1,username:"zhangsan",age:20,sex:"男"}, {id:2,username:"lisi",age:18,sex:"女"}, {id:3,username:"wangwu",age:32,sex:"男"} ];
1.6.5 对象
// 1.{}定义对象(jquery中animate,$.ajax({})) var obj = { username:"zhangsan", age:20, sex:"男", say:function(){}, eat:function(){} } // 2.使用new Object()定义 var obj = new Object(); obj['username'] = 'zhangsan'; obj.age = 20; obj.say = function(){} // 3.使用构造函数定义 function Ball(){ this.x = 100; this.y = 100; this.radius = 50; this.draw = function(){} } // 通过new关键字生成对象 var b = new Ball();
1.6.6 Undefined
- 未定义的变量 alert(typeof age)
- 定义但是未赋值的变量 var sex; alert(typeof age)
1.6.7 Null
- 将值设置为null清空变量
1.7 数据类型的相互转化
1.7.1 转化为字符串
- String()
1.7.2 转化为布尔
- Boolean()
- ” 0 0.0 NaN false null undefined->false
- 其余都为真(’false’,’0’,’null’)
1.7.3 转化为数值 不包含进制之间的转化
- Number()
- 普通字符串->NaN
- 纯数字字符串,数值->原型输出
- 空字符串”,空格字符串’ ‘,null->0
- true->1 false->0
- undefined->NaN
- parseInt()
- 从第一个字符开始查找,直到找到非法字符(非数字)截止,返回找到的数字
- parseFloat()
- 从第一个字符开始查找,直到找到非法字符(除数字和第一个小数点之外的字符)截止,返回找到的数字
1.8 运算符
1.8.1 算术运算符 + - * / % ++ –
1.8.2 赋值运算符 = += -= *= /= %=
1.8.3 连接运算符 +
- +号两边是纯数字:+代表加法运算
- 除此之外,+都是连接运算
1.8.4 比较运算符 == === !=!== > < <= > >=
1.8.5 逻辑运算符
- &&(两真为真,其余都为假)
- ||(两假为假,其余都为真)
- ! (取反)
1.8.6 条件运算符(三元运算符)
3==3 ? value1 : value2;
1.9 流程控制:条件语句
1.9.1 if条件语句(范围判断)
// 定义变量 var age = 24; // 只有if判断 if (age
1.9.2 switch语句(具体值判断)
var month = 1; switch (month) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: console.log('31天'); break; case 4: case 6: case 9: case 11: console.log('30天'); break; case 2: console.log('28天'); break; default: console.log('输入的月份有问题'); }
2.0 流程控制-循环语句
2.0.1 for循环
for (var i = 0; i
2.0.2 while循环
var i = 0; while (i
2.0.3 do…while循环
var i = 0; do { console.log(i); i++; } while (i
2.0.4 for…in…循环
var data = {username:'张三',age:20,sex:'男'}; for (var i in data) { console.log(i+'===>'+data[i]); }
2.0.5 break和continue语句
// break:终止循环 for (var i = 0; i
2.1 正则表达式
2.1.1 元字符
- [0-9]:任意一个数字
- [a-z]:任意一个小写字母
- [x|y]:匹配x或者y(匹配其中的一个)
- [^0-9]:匹配一个任意非数字
- [\d]:任意一个数字
- [\s]:任意一个空白字符(\r\n\t)
- [\w]:约等于A-Za-z0-9_
- ^[a-z]{6,12}$:必须是6-12位的字母
2.1.2 量词
-
- 相当于{0,} 任意数量
-
- 相当于{1,} 至少一个
- ? 相当于{0,1} 至多一个
- {6,18}
2.1.3 模式修正符
- i:不区分大小写
- g:执行全局匹配
- m:执行多行匹配
2.2 JSON:只有属性的对象
2.2.1 JSON功能
存储和传输数据的格式
2.2.2 实例
// JS对象 // 与普通对象区别:只有属性,键用引号 {"username":"zhangsan", "age":20, "sex":"男"}
2.2.3 JSON方法
- 将JSON字符串转化为JSON对象:JSON.parse()
- 将Javascript对象转换为JSON字符串:JSON.stringify()
2.3 函数
2.3.1 函数定义
// 1.普通函数 function demo(){ console.log('第一种定义函数方式'); } // 2.匿名函数 (function(){ console.log('第二种定义函数方式'); })() // 3.使用Function定义函数 new Function('x','y','return x+y;');
2.3.2 函数的特点
- 普通函数在同一个script标签之内,可以先调用后定义,但是跨script标签则不支持
- 定义函数而不调用等于没写
- 同名函数会覆盖,不会报错
- 变量的作用域
- 在函数外申明的变量为全局变量,函数内可以直接调用
- 在函数内使用var申明的变量为局部变量,只能在函数内调用
- 在函数内直接定义变量为全局变量
- 参数个数
- 形参 > 实参:多余的形参的值为undefined
- 实参 > 形参:多余的实参被忽略
- argument函数内置对象
- 函数中内置的的所有参数组成的对象
2.3.3 函数分类
1.功能函数 执行一个功能,而不需要返回值 1.创建表格函数:createTable() 2.$.get('1.php',function(msg){ // 此处回调函数功能:判断用户名是否被注册,没有返回值 if (msg == 'yes') { spanObj.innerHTML = '该用名可用'; } else { spanObj.innerHTML = '该用户名已经被注册'; } }) 2.返回值函数 1.AngularJS中getShopIndex(id),getCartIndex(id)都是具有返回值的函数,返回对应的索引值 2.获取结果 function demo(){ return 'ok'; } var d = demo(); alert(d); // ??? function test(){ alert('ok'); } var t = test(); alert(t); // ???
2.4 内置对象
2.4.1 Array对象
- arr.length:长度
- arr.join():把数组中的所有元素放入一个字符串。
- arr.push():向数组的末尾添加一个或多个元素,并返回新的长度
- arr.pop():用于删除并返回数组的最后一个元素
- arr.shift():用于把数组的第一个元素从其中删除,并返回第一个元素的值
- arr.unshift():可向数组的开头添加一个或更多元素,并返回新的长度
- arr.sort([函数:排序规则]):用于对数组的元素进行排序。
- arr.reverse():用于颠倒数组中元素的顺序
- arr.indexOf():可返回某个指定的字符串值在字符串中首次出现的位置
- arr.lastIndexOf():可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索
- arr.slice(起始位置,结束位置):获取数组中指定的片段(不包含结束位置):可提取字符串的某个部分,并以新的字符串返回被提取的部分
- arr.splice(起始位置,长度):从数组中添加或删除元素。
- arr.every():检测数值元素的每个元素是否都符合条件。
- arr.map():通过指定函数处理数组的每个元素,并返回处理后的数组。
- arr.filter():检测数值元素,并返回符合条件所有元素的数组。
- arr.some():检测数组元素中是否有元素符合指定条件。
2.4.2 Boolean对象
2.4.3 Date对象
- var d = new Date()
new Date() new Date(时间戳) new Date('2016/8/19 5:28:30'):注意这种格式的兼容性 new Date(2016,7,19,5,28,19,178)
- d.getFullYear():年
- d.getMonth():月
- d.getDate():日
- d.getHours():小时
- d.getMinutes():秒
- d.getSeconds():毫秒
- d.getTime():时间戳
2.4.4 Math对象
属性
- PI:圆周率:属性就是 π,即圆的周长和它的直径之比。这个值近似为 3.141592653589793
方法
- abs():可返回数的绝对值
- ceil():执行的是向上取整计算,它返回的是大于或等于函数参数,并且与之最接近的整数
- floor():执行的是向下取整计算,它返回的是小于或等于函数参数,并且与之最接近的整数
- round():把一个数字舍入为最接近的整数
- max():两个指定的数中带有较大的值的那个数
- min():两个指定的数中带有较小的值的那个数
- random():介于 0 ~ 1 之间的一个随机数
2.4.5 Number对象
- MAX_VALUE:最大的数
- MIN_VALUE:最小的数
- toFixed():把 Number 四舍五入为指定小数位数的数字
2.4.6 String对象
- length:长度
- split():把一个字符串分割成字符串数组
- search():检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串
- match():在字符串内检索指定的值,或找到一个或多个正则表达式的匹配
replace():用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串
slice():可提取字符串的某个部分,并以新的字符串返回被提取的部分
- indexOf():某个指定的字符串值在字符串中首次出现的位置
- lastIndexOf():一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索
charAt():返回指定位置的字符
charCodeAt():指定位置的字母对应的Unicode编码
- String.formCharCode():将Unicode编码转为字符
2.4.7 RegExp对象
- reg.test(str):使用正则表达式检验str是否符合要求
2.BOM(Window对象)
2.1 全局属性和函数
- 所有的全局变量是window对象的属性
- 所有的全局函数是window对象的方法
- 系统方法
- alert()
- confirm()用于显示一个带有指定消息和 OK 及取消按钮的对话框
- prompt()提示用户输入的对话框
- moveBy():可相对窗口的当前坐标把它移动指定的像素、
- moveTo()把窗口的左上角移动到一个指定的坐标、
- resizeBy()按照指定的像素调整窗口的大小、
- resizeTo()、把窗口的大小调整到指定的宽度和高度
- scrollBy()按照指定的像素值来滚动内容、
- scrollTo()把内容滚动到指定的坐标
- open(‘1.html’,”,’width=200,height=”200’):打开一个新窗口
- close():关闭窗口
- setInterval()按照指定的周期(以毫秒计)来调用函数或计算表达式、
- setTimeout()在指定的毫秒数后调用函数或计算表达式、
- clearInterval()取消由 setInterval() 设置的 timeout、
- clearTimeout():取消由 setTimeout() 方法设置的 timeout
2.2 Navigator对象(浏览器相关的信息)
- appCodeName 返回浏览器的代码名。
- appName 返回浏览器的名称。
- appVersion 返回浏览器的平台和版本信息。
- cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。
- platform 返回运行浏览器的操作系统平台。
- userAgent 返回由客户机发送服务器的 user-agent 头部的值。
- userLanguage 返回 OS 的自然语言设置。
2.3 Screen对象(屏幕相关的信息)
- width
- height
- availHeight:返回显示屏幕的高度 (除 Windows 任务栏之外)。
- availWidth:返回显示屏幕的宽度 (除 Windows 任务栏之外)。
2.4 Frames对象:返回窗口中所有命名的框架
2.5 History对象(当前那浏览器的历史记录)
- length:返回浏览器历史列表中URL数目
- back():加载 history 列表中的前一个 URL。
- forward():加载 history 列表中的下一个 URL。
- go():加载 history 列表中的某个具体的页面
- history.pushState(data,”,下标) 与window.onpopstate()结合使用
2.6 Location对象(当前浏览器的url地址信息)
- hash:锚点 历史回退
location.hash = 下标;
data[下标] = 值;
window.onhashchange() - href
- reload()
3.HTML DOM对象
3.1 DOM Document对象
3.1.1 Form表单对象
- document.forms[0]
- document.forms['formName']
- document.formName
- 表单元素对象:formObj.inputName
3.1.2 Select对象
- 属性:
- disabled
- length
- selectedIndex
- 方法:
add()
remove()
3.1.2 table表格对象
- table.rows:获取表格行
- talbe.insertRow(index):添加行
- table.deleteRow(index):删除行
- row.cells:获取单元格对象
- row.insertCell(index):添加单元格
3.1.3 Cookie对象
document.cookie = 'username=zhangsan;expires=date;path=/;domain=qq.com;secure'
3.2 DOM 功能(通过功能确定DOM是做什么的)
3.2.1 获取并改变HTML标签
- document.getElementById()
- document.getElementsByTagName()
- document.getElementsByName()
- document.querySelector('css选择器#box .a div'):匹配复合条件的第一个元素
- document.querySelectorAll():匹配所有的复合条件的元素
- ID名直接获取(用于测试,不推荐用于正式环境)
3.2.2 获取并改变HTML属性
- obj.src
- obj.getAttribute():通过名称获取属性的值
- obj.setAttribute():创建或改变某个新属性
- obj.removeAttribute():删除指定的属性
3.2.3 获取并改变CSS样式
- obj.style.width:只能获取行内的样式,获取不到style标签和link标签之内的样式
- 获取最终的样式(兼容)
function getStyle(obj, attr){
return obj.currentStyle ? obj.currentStyle[attr] : document.defaultView.getComputedStyle(obj, null)[attr];
}
3.2.4 事件处理
3.2.4.1 鼠标事件
- onclick:单机
- ondblclick:双击
- oncontextmenu:右击
- onmouseover:移入
- onmouseout:移出
- onmousedown:按下
- onmouseup:抬起
- onmousemove:移动
3.2.4.2 键盘事件
- onkeydown:按下
- onkeyup:抬起
- onkeypress:在键盘按键被按下并释放一个键时发生
3.2.4.3 表单事件
- onfocus:聚焦
- onblur:失焦
- onsubmit:提交
- onchange:表单元素改变事件
- onreset:重置按钮被点击时
- onselect:文本被选定
3.2.4.4 框架对象事件
- onload:当页面加载完成的时候
- onunload:用户退出页面
- onresize:当页面大小发生改变的时候
- onerror:当图片加载失败的时候
- onabort:图像加载被中断
- onscroll:当页面发生滚动的时候
- 延迟加载:onscroll
3.2.4.5 鼠标键盘属性值
- altKey:Alt 键是否被按下并保持住了
- shiftKey:
- ctrlKey:
- clientX:鼠标指针向对于浏览器页面(或客户区)的水平坐标
- clientY:鼠标指针向对于浏览器页面(或客户区)的垂直坐标
3.2.4.6 事件冒泡
- stopPropagation()
- JS中e.cancelBubble = true
- jquery中 e.stopPropagation()/return false;
return false;代表终止函数,之后的代码将不执行 e.stopPropagation():阻止事件冒泡,之后的代码继续执行
3.2.4.7 千万要注意的事件默认行为(preventDefault自己查阅资料解决)
- 点击a链接默认跳转页面
- 点击提交按钮默认提交表单
- 点击鼠标右键出现右键菜单
// 阻止a链接跳转(如果要用a链接做点击事件,务必将这里禁止) <a href="javascript:;">百度</a> <a href="javascript:void(0);">百度</a> // 表单 formObj.onsubmit = function(){ // 如果要做表单验证或者Ajax提交 // 表单验证不通过,return false // 如果是ajax提交,return false return false; }
3.3 DOM 节点操作
3.2.1 标签元素的属性
- attributes:属性返回包含被选节点属性的 NamedNodeMap
className:属性可设置或返回元素的 class 属性
childNodes/children:所有子节点的集合/子节点
- firstChild/firstElementChild:第一个子节点/第一个元素子节点
- lastChild/lastElementChild:最后一个子节点/最后一个元素子节点
- nextSibling/nextElementSibling:下一个节点/下一个元素节点
- previousSibling/previousElementSibling:前一个兄弟节点/前一个元素节点
- parentNode:定位到一个节点,找到他的父节点
- nodeName:节点的名称
- nodeType:节点的类型。
nodeValue:节点的值。
innerHTML:获取或设置的是元素中的所有内容,包含标签
- clientWidth:获取浏览器的宽度
- clientHeight:获取浏览器的高度
- offsetHeight:获取div对象的高度(宽度 = 自身宽度+边框厚度+padding值)
- offsetWidth:获取div对象的宽度
- offsetLeft:获取div距离页面(父级元素有定位,则相对于父级元素)的左边距
- offsetTop:获取div距离页面(父级元素有定位,则相对于父级元素)的上边距
- scrollWidth:获取页面的总宽度
- scrollHeight:获取页面的总高度
- scrollTop:获取浏览器滚动的高度
- scrollLeft:获取浏览器滚动的宽度
3.2.2 标签元素的方法
- appendChild():向节点的子节点列表的末尾添加新的子节点
- insertBefore():在已有的子节点之前插入一个新的子节点
- replaceChild():用其他节点替换某个子节点
- removeChild():删除指定节点
- cloneNode():创建指定的节点的精确拷贝