注：本文为初学js时的笔记，未详细检查，仅作为本人学习记录查阅，内容可能有瑕疵。
js功能
1.数据的验证
2.将动态内容写入到网页中（ajax）
3.可对事件做出响应
4.可读写html中的内容
5.可检测浏览器（是手机还是电脑访问，谷歌浏览器可以模拟手机界面）
6.模拟动画
js特点
面向对象编程oop：Object oriented programming
不仅可以写在<head>也可写在<body>里
从上向下解析，从上面开始执行
引入方式
A.嵌入式调用
<script type=“text/javascript”></script>
B.可以在超链接或是重定向的位置调用javascript代码
格式："javascript:alert('我是超链接')"
重定向格式：action="javascript:alert('我是表单')"
C.在事件后面进行调用
D.调用外部javascript文件
格式： <script src=“js.js” type=“text/javascript”></script>
输出工具
A.alert();
B.document.write()
C.prompt(“提示文字”,“默认值”)
命名规范
严格区分大小写;变量名字必须以字母,下划线或美元符开头(不能数字开头);不能用关键字或保留字命名；
第二个开始每个单词首字母大写(驼峰),每个单词之间加下划线(都是为了更好识别);变量的命名要有意义;
六大数据类型
1.undefined被声明但没有赋值
2.null没有这个变量
3.数值类型
4.字符串类型：用引号包起来的都是字符串
5.布尔值
6.object对象： var hd={} 很多属性（变量）和方法（函数）的集合体
注意：如果变量被重新声明，但是没有被重新赋值，那么变量值是不变的
>>>>检测数据类型:
var hd;
var re=typeof hd;
document.write(re);
运算符
算术运算符，关系运算符(比较运算符)，赋值运算符，逻辑运算符，三元运算符
js运算能力一般，一般不用来进行精准运算
==只判断内容，不判断类型
===不但比较值是否相等，还比较类型是否相等
！=只判断内容
！==都判断
注意：Undefine，Null 假
Boolean 就是本身的值
Number 除了0以外都是真的
String 除了空字符串以外都是真的
对象 真
函数
创建
1.function 函数名([参数1],[参数2]....){
函数体
[retrun]
}
2.用自变量的形式创建函数
var tringle= function(){ }
>>>>带参函数的创建：
1.想清楚功能
2.搭建函数框架
3.确定需要的参数
4.安排处理流程
调用
1.函数名()
2.触发调用对象.事件=function (){}
3.自调用 (finction hd(){})()(闭包中可能用到)
注意：NAN：not a number
实参比形参个数多可以调用，但是多余的会被忽略,若实参比形参少，没有对应形参，就是undefined
变量的作用域
全局变量
局部变量：在函数内用var声明的变量（缺少一个都是全局变量）
Js内置顶层函数
1.Number()转换成数值类型
A.如果是布尔值，false为0，true为1
B.如果是数字，转换成为本身。将无意义的后导0去掉。
C.如果是undefined 转换为NaN : not a number
D.如果是字符串
a.如果字符串当中只有数字，转换为10进制(忽略前导0和后导0)
b.如果是有效的规范的浮点型，转换为浮点值(忽略前导0和后导0)
c.如果是空字符串，则转换为0
d.如果是其他的值，返回NaN
2.parseInt() 将字符串转换为整型
3.parseFloat() 转换为小数
4.isNaN() 判断一个数能否转换为数值类型，如果能转换成数值返回假，不能转换成数值类型，返回真。
5.eval() 用javascript语法来解析字符串内容
对象
创建：
1.用原生形式创建对象（json形式）
var sunflower={
color:yellow,
size:high,
eat:function(){alert(“瓜子”)；}
}
Delete 对象.属性：删除属性
2.构造函数方式创建对象
Function huawei(){
this.size=’5.5寸’，
this.color.=’白色’，
this.call=function(){
alert(‘能打电话）；
}
}
varhuaweiv8= new huawei();
新增，修改属性，方法：
Huaweiv8.color=’金色’；
内置对象：
1.数组对象
属性：Length 设置或返回数组元素的数目
1.数组对象.push( ) 向数组的末尾添加新的元素，返回值是新数组的长度
2.数组对象.unshift( ) 向数组的开头加入新的元素，返回值是新数组的长度
3.数组对象.pop( ) 删除数组的最后一个元素，返回删除的元素
4.数组对象.shift( ) 删除数组的第一个元素，返回删除的元素
5.数组元素.splice(起始位置,数量,添加的元素)，用于插入、删除或替换数组的元素（万能函数）
6.数组.slice(开始，结束)数组的分割，slice不改变原数组，只会返回新的结果。slice截取数组的时候，只包含开始，不包含结束
，结束为负n代表倒数第n个。
7.将数组转换成字符串
var re=shuiguo.join(‘’);
8.数组的连接，将两个数组连接在一起
var re=shuiguo.concat(jingdian);
注意：Js中没有数组类型，数组是对象类型
数组里单个元素可以是任何类型的数据
>>>>向数组中添加元素的方法
1.push（)等顶级函数
2. a[str.length]=' '; //直接赋值
2.字符串对象
属性 Length
获取类型
1.字符串.charAt(num) 返回在指定位置的字符。
2.字符串.charCodeAt(num) 返回指定位置的字符的Unicode编码
3.String.fromCharCode() 将unicode编码转成原始字符
查找类型
1.字符串.indexOf() 返回首次出现的位置
2.字符串.lastIndexOf() 返回最后出现的位置
3.字符串.match() 在字符串中检索指定的值，返回的值就是指定的值，查找有无相关字符
4.字符串.replace(目标值，替换值)替换。默认值替换第一个找到的字符
截取类型
1.字符串.slice(start,end) 从指定的开始位置，到结束位置(不包括)的所有字符串。如果不指定结束位置，则从指定的开始位置，取到结尾。
2.字符串.substr(start,length) 从指定的位置开始取指定长度的字符串。如果没有指定长度，从指定开始的位置取到结尾。
转换类型
1.字符串.split()；分割成数组
2.字符串.toLowerCase();转换为小写。
3.字符串.toUpperCase()；大写
3.数学对象
1.取绝对值Math.abs();
2.取近似整数
Math.round()四舍五入（结果一定是整数）
Math.floor()向下取舍
Math.ceil()向上取舍
3.取随机数
Math.random() 取（0，1）间的随机小数
Math.random()*(y-x)+x 取（x，y）之间的随机小数
Math.floor(Math.random()*(y+1-x)+x) 取（x，y）之间的随机整数，概率相同
4.日期对象
GMT格林尼治时间
UTC协调世界时，javascript DATE使用UTC(w)1970,1,1,0,0,0,0所经过的毫秒数，之前为负，之后为正。取值范围为 285616年。
创建日期对象
var dateobj=new Date();
var time=new Date();不传参数为当前计算机时间
var time=new Date(2014,9,20,10,30,20);传入特定时间（注：月份从零开始计算0~11月）
获取日期信息的方法
getFullYear()获得日期对象中的年份
getMonth()获得日期对象中的月份 (0 ~ 11)
getDate()获得日期对象中的日信息 (1 ~ 31)
getHours()获得日期对象中的小时 (0 ~ 23)
getMinutes()获得日期对象中的分钟 (0 ~ 59)
getSeconds()获得日期对象中的秒数 (0 ~ 59)
getDay()获得日期是周几 (0代表周天，1-6分别代表周1-6)
getTime()获得日期对象中的日期与 1970 年 1 月 1 日相差的毫秒数（比较重要）
设置日期的方法
setFullYear()设置日期对象中的年份（四位数字）。
setMonth()设置日期对象中月份 (0 ~ 11)。
setDate()设置日期对象中月的某一天 (1 ~ 31)。
setHours()设置日期对象中的小时 (0 ~ 23)。
setMinutes()设置日期对象中的分钟 (0 ~ 59)。
setSeconds()设置日期对象中的秒钟 (0 ~ 59)。
setTime()以毫秒设置 Date 对象
定时器
setInterval(函数名，时间) 每隔设定时间执行一次，一直执行
作用：设置轮播图
写法：
1.setInterval(hi,2000);
2.setInterval(function(){},时间);
setTimeout(函数名，时间) 设定时间后执行，仅一次
写法与上面一样
停止定时器（鼠标放在轮播图上就不动了）
clearInterval(定时器名);
clearTimeout(定时器名);
栗子: setTimeout(function(){
clearTimeout(timer);
alert('清除定时器完毕');
},3000)
事件
常用事件
1.常用的鼠标事件
onclick鼠标单击事件
ondblclick鼠标双击事件
onmousedown鼠标按下时的事件（拖拽）
onmouseup鼠标抬起时的事件
onmousemove鼠标移动事件，在内部移动也触发
onmouseover鼠标移入事件
onmouseout鼠标离开时的事件
2.键盘事件
onkeyup抬起键时的事件
onkeydown按下键时的事件
onkeypress按下并放开任何字母数字键时发生
3.表单事件
onsubmit点击提交按钮时发生的事件
onblur失去焦点时发生的事件
onfocus获得焦点时发生的事件
onchange内容发生变化并失去焦点时触发的事件
4.页面事件 onload
需要用js操作body里元素的时候要用window.onload
5.窗体事件 onresize
6.滚动条事件 onscroll
绑定事件
1.在脚本中绑定
document.getElementById("hd").οnclick=function(){
alert('pp你好');
}
2.直接在HTML元素绑定
<divid="hd" οnclick="hi()"></div>
事件监听
多个事件监听不会被覆盖，多个绑定事件会被覆盖
addEventListener是W3C的标准方法,不支持IE低版本
document.getElementById("hd").addEventListener('click',function(){
alert("触发");
})
低版本ie解决方案：
document.getElementById("hd").attachEvent('onclick',function(){
alert('低版本IE才能触发');
})
>>>>兼容方案
if(document.all){ //判断浏览器
document.getElementById("hd").attachEvent('onclick',function(){
alert('低版本IE才能触发');
})
}else{
document.getElementById("hd").addEventListener('click',function(){
alert("W3C触发");
})
}
js组成部分
1.ECMA语法
2.bom浏览器对象模型
3.dom文档对象模型
浏览器对象模型——BOM
用于描述对象与对象之间层次关系的模型。BOM由多个对象组成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。
window对象包含history对象，location对象，document对象，frames对象，navigator对象……
window对象
alert();prompt();confirm();
history对象
属性:length 返回浏览器历史列表中的URL数量。
方法：history.back()加载history列表中的前一个URL（history的主要用法，例n秒后返回上一页）
history.forward()加载 history 列表中的下一个
history.go(number) -1时返回上一个
location对象
三种跳转（页面没找到，n秒钟跳到***）：
location.replace('http://houdunren.com');
location.assign('http://houdunren.com');
location.href='http://houdunren.com';
刷新页面（应用：n秒后重玩）
location.reload();
都是跟定时器配合使用
document对象
一、属性 document.title返回或设置当前文档的标题
二、方法（抓元素）:
getElementById(idname)
getElementsByTagName(tagname)
getElementsByName(name)
getElementsByClassName()
Document.getElementById(“”).getElementByClassName(“ ”);
注意：通过id抓住的元素只有一个，但是通过class/tagname/name抓住的元素会以数组的形式返回，哪怕只抓到一个元素
var ps=document.getElementsByClassName(“”); //数组
for(var i=0;i<ps.length;i++){
ps[i].style.color=“red”;
}
DOM
对html元素的样式(颜色、大小、位置等等)、内容、属性来进行动态的改变和操作。
操作内容
1.innerHTML 用来设置或获取标签内的所有内容
2.innerText 用来设置或获取标签内的文字内容（只有IE）
3.textContent用来设置或获取对象起始和结束标签内的文字内容 (W3C)
兼容写法：
1.前面有~~if(document.all){}else{}
2.var con=title.innerText ||title.textContent ;
操作元素特定属性：
获取：对象.属性 设置：对象.属性 = 属性值
特定属性：ID、CLASS、A标签的href属性、IMG标签的src属性等
获得任意属性
对象.getAttribute(属性名)
设置任意属性：
对象.setAttribute(属性名，属性值)
获取样式
获得行内样式方法：document.getElementById("hd").style.width;
注：元素.style.css样式的写法只能获得元素的行内样式
行内样式和外部样式通用的获取方法：
对象.currentStyle.CSS样式：IE用来获得实际的样式属性
getComputedStyle(对象,null).CSS样式：火狐用来获得实际的样式属性,只能获取不能设置
>>>>程序输出调试方法：
1.alert()；
2.document.title= ; 可以在标题栏看到值的变化
3.console.log( ); 将每次信息输出到控制台
DOM模型
HTML文档中的所有节点组成了一个文档树模型，HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。这些节点相互联系，相互影响，构成一个完整的页面，我们称之为模型。
HTML文档中的每个成分都是一个节点。 整个文档是一个文档节点 每个 HTML 标签是一个元素节点包含在 HTML 元素中的文本是文本节点 每一个 HTML 属性是一个属性节点注释属于注释节点
获得节点关系的属性
对象.parentNode 获得父节点的引用
对象.childNodes 获得子节点的集合
对象.firstChild 获得第一个子节点的引用
对象.lastChild 获得最后一个子节点的引用
对象.nextSibling 获得下一个兄弟节点的引用
对象.previousSibling 获得上一个兄弟节点的引用
一．创建元素节点
1>创建空元素节点document.createElement("元素标签名");
2>创建属性节点对象.setAttribute(属性名,属性值)
3>创建文本节点 对象.innerHTML="";
二．追加到页面当中
父对象.appendChild(追加的对象) 在指定元素节点的最后一个子节点之后添加节点
父对象.insertBefore(要插入的对象,之前的对象) 插入到某个对象之前
三．删除节点
父对象.removeChild(删除的对象) 如果确定要删除节点，最好也清空内存 对象=null;
四．修改(替换)节点
父对象.replaceChild(新节点,被修改的节点);
五．复制节点
待复制的节点.cloneNode()方法创建指定节点的副本。该方法有一个参数（true 或 false）。如果设置为true,所有的子节点也会克隆，否则只会克隆本节点。
获得元素属性
位置
offsetTop，offsetLeft 返回元素相对于父元素的left top值
1.设定了position 属性。如果是有定位属性的元素，获得的直接是他的left，top值
2.没有设定position 属性，参照离他最近的定位属性来获得结果
尺寸
offsetWidth，offsetHeight获得元素实际的高度和宽度(加上边框的宽度)
获得可见区域的高度和宽度
document.documentElement.clientWidth
document.documentElement.clientHeight
具有滚动条元素的属性
scrollTop
scrollLeft
scrollHeight
scrollWidth
对象.οnscrοll=function(){};滚动条事件
事件对象用来记录一些事件发生时的相关的信息的对象
1.只有当事件发生的时候才产生，只能在处理函数内部访问
2.处理函数运行结束后自动销毁。
如何获取事件对象
IE：window.event
FF:对象.on事件=function(e){}
兼容解决办法：varev=window.event||e;
关于鼠标事件
相对于浏览器位置的
clientX 当鼠标事件发生的时候，鼠标相对于浏览器左侧的距离
clientY 当鼠标事件发生的时候，鼠标相对于浏览器Y轴的位置
相对于事件源的位置
IE: offsetX 、offsetY
FF: layerX、layerY
注意：使用layerX和layerY时需要给事件源元素添加定位属性
关于键盘事件
keyCode 获得键盘码
altKey判断是否按下alt键，按下是true反之是false布尔值
ctrlKey
shiftKey
事件流:当页面元素触发事件的时候，该元素的容器以及整个页面都，会按照特定顺序响应该元素的触发事件，事件传播的顺序叫做事件流程。
事件流的分类
1.冒泡型事件(所有的浏览器都支持) 由明确的事件源到最不确定的事件源依次向上触发。 2.捕获型事件(IE不支持 w3c标准火狐) 不确定的事件源到明确的事件源依次向下触发。
阻止事件流(事件对象)
IE: 事件对象.cancelBubble=true;
火狐: 事件对象.stopPropagation();
阻止浏览器默认行为
IE：事件对象.returnValue = false;
火狐：事件对象.preventDefault();
重定向来阻止默认事件：<a href=”javascript:void(0);”></a>
Tips:
保存页面
Ctrl,点击src就能打开网页中图片进行保存
Ctrl+s
Alt出现菜单栏，将页面另存/直接在页面ctrl+s,选择全部，保存。
扫一扫
2803
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
