首页 > 代码库 > JavaScript
JavaScript
JS是基于对象和事件驱动的脚本语言，作用在客户端（浏览器）上
1、JS的特点
交互性
安全性：（不可以访问本地的硬盘）
跨平台性：浏览器就可以解析js的文件
2、JS组成
（1）ECMAScript 标准（js的语法，变量，函数）
（2）BOM （Browser Object Model） 浏览器对象模型
（3）DOM （Document Object Model） 文档对象模型
3、语法
把JS和HTML的结合一起
方式一：
HTML的文件提供了一个标签 <script type="text/javascript">js的代码</script>，标签可以放在HTML文件的任意位置上。
方式二：引入外部的文件，有一个外部的文件。编写js文件
<script src="http://www.mamicode.com/引入js文件（相对路径）" >
如果script通过src的属性引入了外部的文件，里面的js代码就不会执行了
var 声明变量
基本数据类型
Undefined、Null、Boolean、Number 和 String
String 字符串类型
双引号和单引号都代表的是字符串
Number 数字类型
不区分整数和小数
Null 空，给引用赋值的
Undefined 未定义（声明变量，没有赋值）
typeof() 判断当前变量是什么类型的数据
运算符
算术运算符
0或者null是false，非0或者非null是true，默认用1表示
比较运算符
== 比较值是否相同
=== 比较值和类型是否相同
数组
声明数组
1 var arr = [12,34,55]; 2 var arr = new Array(5); 3 var arr = new Array(2,3,4)
数组的属性
长度：length
数组的长度是可变的
方法
function 方法名称(参数列表 (num,str)){ return; }
参数列表：不能使用var关键字
返回值：可写可不写的，如果有写返回值，如果没有，返回值可以省略不写
动态函数
1 function getSum(){ 2 return 50; 3 }
js提供了内置对象 Function
匿名函数
没有名称的函数
1 function(){ 2 return 50; 3 }
全局变量：在<script>标签内部定义的变量，全局变量
局部变量：在函数的内部定义的变量，局部变量
对象和API
String 对象
声明
1 var str = "abc"; 2 var str = new String("abc");
属性：
length：字符串的长度
方法:
和HTML相关的方法
1 bold() // 使用粗体显示显示字符串 2 fontcolor(color) // 参数是必须的，设置字体的颜色 3 fontsize(size) //设置字体的大小（1-7） 4 italics() // 斜体 5 link(url) // 设置链接 6 sub() //下标 7 sup() // 上标
和java中String对象类似的
1 charAt(index) // 返回指定位置的字符 2 indexOf(str,fromIndex) // 检索字符串，没有返回-1 3 lastIndexOf(str,fromIndex) // 从后向前检索字符串 4 replace(要替换的字符串,替换成啥) 5 substring(start,stop) // 截取字符串 6 substr(start,length) // 截取字符串，从哪开始，截取多长
Array对象
声明数组
1 var arr = [12,33]; 2 var arr = new Array(4,4);
属性：
length：长度
方法：
1 concat(元素，数组); // 返回新的数组 2 join(s) // 通过s标识（-），进行分隔，返回字符串 3 pop() // 删除末尾的元素，返回最后一个元素 4 push() // 向末尾添加元素，返回新数组的长度 5 sort() // 排序的方法
Date日期对象
var date = new Date(); // 当前的日期
方法：
1 toLocaleString() // 转换本地的日期格式 2 toLocaleDateString() // 只包含日期 3 toLocaleTimeString() // 只包含时间 4 5 getDate() // 返回一个月中的某一天（1-31） 6 getDay() // 返回一周中的某一天(0-6) 7 getMonth() // 返回月份（0-11） 8 getFullYear() // 返回年份 9 10 getTime() // 返回毫秒数 11 setTime() // 通过毫秒数获取日期 12 13 parse(str) // 解析字符串，返回毫秒数
Math对象
1 ceil(x) // 上舍入 2 floor(x) // 下舍入 3 round(x) // 四舍五入 4 random() // 0-1的随机数
RegExp对象
正则表达式对象
应用：编写注册的表单，对表单输入的内容进行校验
1 var reg = new RegExp("表达式"); // （开发中不经常使用） 2 var reg = /表达式/ // 开发中经常使用 3 var reg = /^表达式$/ // 开发中经常使用 4 5 exec(string) // 不经常使用，如果匹配，返回匹配的结果 6 test(string) // 如果匹配，返回是true，如果不匹配，返回是false 7 if(reg.test("abc"))
全局函数
使用全局函数，不需要任何的对象
全局函数可以拿过来使用
global帮着管理全局函数
1 eval() // 可以解析字符串，执行字符串中间的js代码 2 isNaN() // 判断是否是非数字值 3 parseInt() // 解析字符串，返回整数 4 5 encodeURI() // 进行编码 6 decodeURI() // 解析解码 7 8 encodeURIComponent() 9 decodeURIComponent() 10 11 escape() 12 unescape()
BOM 浏览器对象模型（Brower Object Model）
Window 窗口对象
Navigator 和浏览器版本相关的对象
userAgent // 获取浏览器的相关的信息 window.navigator.userAgent // window可以省略不写
Screen 和屏幕相关的对象
History 和浏览器历史相关
1 back() // 返回上一个页面 2 forward() // 去下一个页面 3 go() // 传1等于forward,传-1等于back
Location 和浏览器地址相关的对象
href // 获取和设置浏览器的路径
事件
onclick 点击事件
Document 文档对象
1 alert() // 弹出提示框 2 confirm("参数") // 询问框，提供俩按钮，确定和取消；如果点击是确定，返回true，如果点击取消，返回false 3 moveBy() // 移动浏览器 4 setInterval("函数",毫秒值) // 定时相关的，每隔毫秒值执行一次函数，返回唯一的id值 5 setTimeout("函数",毫秒值) // 到了毫秒值后执行一次函数，返回唯一的id值 6 clearInterval(id的值) // 清除定时 7 clearTimeout() 8 close() // 关闭浏览器的窗口 9 open() // 打开浏览器窗口
属性
opener 返回对创建此窗口的窗口的引用
win open() 弹出baidu的窗口
document对象方法
document.getElementById("nameId"); // 获取到是input标签的对象
DOM 文档对象模型（Document Object Model）
文档：标记型文档（HTML/XML）
对象：封装属性和行为（方法）
模型：共性特征的体现
DOM解析HTML
通过DOM的方法，把HTML全部（元素（标签）、文本、属性）都封装成了对象
<span id="spanId">文本</span>
DOM想要操作标记型文档先解析
DOM解析HTML（浏览器就可以HTML）
DHTML不是一种编程语言
html ：封装数据。 <span>展示给用户的数据</span>
css ：设置样式（显示效果）
dom ：操作HTML（解析HTML）
js ：提供逻辑（判断语句，循环语句）
Document：代表整个文档
方法
1 getElementById("id的值"); // 通过元素的id的属性获取元素（标签）对象。 2 getElementsByName("name属性值"); // 通过名称获取元素对象的集合（返回数组） 3 getElementsByTagName("标签名称"); // 通过标签名称获取元素对象的集合（返回数组） 4 write("文本的内容（html的标签）") // 把文本内容写到浏览器上 5 createElement("元素名称"); // 创建元素对象 6 createTextNode("文本内容") // 创建文本对象 7 appendChild("子节点") // 添加子节点
Element对象
获取元素对象
1 getAttribute("属性名称"); // 获取属性的值 2 setAttribute("属性名称","属性的值"); // 设置或者修改属性的值 3 removeAttribute("属性名称"); // 删除属性
获取元素下的所有子节点
ul.getElementsByTagName();
Node节点对象
nodeName ：节点名称
nodeType ：节点类型
nodeValue ：节点的值
parentNode 获取父节点（永远是一个元素节点）
IE6-8
1 firstChild // 第一个节点 2 lastChild // 最后一个节点 3 nextSibling // 下一同级节点 4 previousSibling // 上一同级节点
IE9-11 Chrome FireFox
1 firstElementChild // 第一个节点 2 lastElementChild // 最后一个节点 3 nextElementSibling // 下一同级节点 4 previousElementSibling // 上一同级节点
1 <ul> 2 <li>北京</li> 3 </ul> 4 // 如果通过ul获取北京的子节点，使用是 ul.firstElementChild; 获取北京的子节点（IE9-11 Chrome FireFox） 5 // 但是如果IE6-8，需要使用firstChild;
1 <span id="spanId"> 2 文本内容 3 </span> 4 // 使用span的标签获取span中间的文本内容（也是对象）,需要使用firstChild;（不管是什么浏览器）
方法
1 hasChildNodes() // 检查是否包含子节点 2 hasAttributes() // 检查是否包含属性 3 appendChild(node) // 父节点调用，在末尾添加子节点 4 insertBefore(new,old) // 父节点调用，在指定节点之前添加子节点 5 replaceChild(new,old) // 父节点调用，替换节点 6 removeChild(node) // 父节点调用,删除节点 7 cloneNode(boolean) // 不是父节点调用,复制节点,boolean如果是true，复制子节点,如果是false，不复制子节点，默认是false
innerHTML ：获取和设置文本内容。
属性
获取文本内容
设置文本内容
事件
onclick 点击事件
onload 加载事件
onfocus 获取焦点事件
onblur 失去焦点事件
全选/全不选/反选的练习
1 <input type="checkbox" /> 2 // 指定默认值：checked 只要出现在<input type="checkbox" />,对号就勾上了。
鼠标移动的事件
onmousemove
onmouseout
onmouseover
鼠标点击事件
onclick 单击
ondblclick 双击
加载和卸载
onload 加载
onunload 卸载
获取焦点和失去焦点
onfocus 获取焦点
onblur 失去焦点
键盘
onkeyup 按下抬起
改变事件
onchange
控制表单的提交
onsubmit
JavaScript