一, 函数
函数的三要素:
- 函数名
做到见名知意
利用驼峰命名法
- 参数
形参: 在函数内部就是一个普普通通的变量
实参: 调用函数的时候传递过去的具体的参数的值, 就是实参
- 返回值
函数执行结束之后, 根据具体的业务需求来决定是否给函数的调用者返回值
return
return 的作用:
1. 给调用返回值
2. 立即结束函数
全局变量和局部变量
声明的位置: 函数内还是函数外
声明提前
二,数组
/* 计算 n! 阶乘
n! = n * (n - 1) * (n - 2) * ... 2 * 1
= n * (n - 1)!
* */
function jc(n){
if (n == 1) return 1;
return n * jc(n - 1);
}
console.log(jc(4));
/*
4 * 6
3 * 2
2 * 1
*/
// 1 + 2+ ... + 99 + 100
比较两个数组, 其实是比较的两个数组的地址值是否一样. (== === 是一样的.)
如果一边是数组, 一边是基本类型的数据. (==) 会有类型的转换. 先把数组用 toString() 转换成字符串之后再比
用 children(子元素节点列表) 可去除空节点
eg: 通过 Element 元素的 childNodes 属性获取到这个元素下面的所有直接子节点
var nodes = document.getElementById("div").childNodes;
firstChild 属性:获取一个元素的第一个子节点; --->firstChildElementChild
lastChild 属性:获取一个元素的最后一个子节点; --->lastChildElementChild
parentNode 属性:获取一个元素的父节点. --->parentElement
previousSibling 属性:获取一个元素的上一个兄弟节点 --->previousElementSibling
nextSibling 属性:获取一个元素的下一个节点 --->nextElementSibling
--->childElementCount 子元素数量
Node 关系 --- 修改操作
1,createTextNode():创建文本节点
eg:var textNode=document.createTextNode("我是一个开心的文本!!!");
2,createElement(nodename): 创建元素节点
eg:var div=document.createElement("div");
3,appendChild() : 给一个元素追加 child 节点, 添加的 child 进去之后一定是 lastChild
4,insertBefore() : 在一个节点前插入新节点
参数 1:要插入的新节点; 参数 2:目标节点.会把参数 1 节点插入这个节点之前.
eg: 把 newItem 添加到 languageList 的第 1 个子节点之前 languageList.insertBefore(newItem, list.firstChild);
5,removeChild(): 移除子节点
6,replaceChild():替换子节点
node.replaceChild(newnode,oldnode) 参数 1:新节点; 参数 2:旧节点
7,cloneNode():克隆节点
该方法将复制并返回调用它的节点的副本.如果传递给它的参数是 true,它还将递归复制当前节点的所有子孙节点(即为深度克隆).否则,它只复制当前节点(即为浅客隆)
元素属性操作
1,getAttribute(): 获取属性值
返回元素指定属性的值
参数:元素的某个属性的名 (id, className, title)
2,setAttribute(): 设置属性值
element.setAttribute(attributename,attributevalue)
作用:创建或改变某个新属性.如果指定属性已经存在, 则只设置该值.如果属性不存在,则创建该属性并设置属性值.
参数 1:属性名
参数 2:新的属性值
3,removeAttribute() : 移除属性;
参数:必需.规定要删除的属性名.
获取内部样式表和外部样式表
> 1. 对 ie 浏览器:对象. currentSytle["属性名"]> 2. 其他浏览器:window.getComputedStyle(对象,null)["属性名"]>
offsetWidth,offsetHeight 获取宽和高,包括 border 和 padding,其实是这个元素的实际占据的空间.但是只能获取不能修改
offsetLeft,offsetTop
参照物 -- 父元素 (offsetParent)
element.offsetParent:返回元素的偏移容器. 会一直在父级容器中找,直到找到定位的父容器,否则这个就是 body
element.offsetHeight:返回元素的高度 height+padding+border.
element.offsetWidth:返回元素的宽度 width+padding+border
element.offsetLeft:返回元素的水平偏移位置. 是相对于参照物父容器的偏移量
element.offsetTop:返回元素的垂直偏移位置. 是相对于参照物父容器的偏移量
注意:上面的这些值都是只读的,不能修改!
七,事件
事件的三个要素:
1. 事件源:(用谁去触发这个事)一般为名词,即事件的发起者;
2. 事件对象:(如何发生这件事)一般为动词,如鼠标经过,点击后,按键盘等;
3. 事件处理程序:(发生了什么事).
两种事件流:冒泡流和捕获流
DOM 事件流:"DOM2 级事件" 规定的事件流包括三个阶段:事件捕获阶段,处于目标阶段 和 事件冒泡阶段.
"DOM0 级事件" 只能在冒泡阶段来处理事件,且一个事件只能有一个事件处理程序.
事件处理程序:,就是响应事件的函数.事件处理程序的名字是以 "on" 开头的.
删除事件处理程序: ocument.getElementById(id).onclick = null; 使用这种方法可以删除 html 事件和 DOM0 事件.
事件对象 event
1,onload 事件和 onunload 事件:
onload 当页面完全加载后在 window 里触发, 当图像完全加载后在 img 元素上触发;
onunload 与 onload 相反, 当页面完全卸载时触发, 但只有在 IE 支持
2,onresize 事件: 页面进行缩放的时候在 window 触发
3,onscroll 事件: 滚轮事件, 当页面滚动的时候在 window 触发
4,onfocus(获得焦点) 事件和 onblur(失去焦点) 事件:
onfocus(获得焦点) 事件: 当元素获得焦点时触发.这个事件可以发生在任何的元素上.而且这个事件 不会冒泡 (也就是不会再往上层传递)
onblur 事件: 当元素失去焦点是触发.和 onfucs 对应.这个事件也不冒泡
5,onclick 事件:鼠标点击事件
6,onmouseover 和 onmouseout 事件(onmouseenter 事件和 onmouseleave 事件,推荐使用这两个事件,因为他们不会冒泡):
onmouseover 事件(onmouseenter 事件):当鼠标移动到一个元素的上方时触发.
onmouseout 事件(onmouseleave 事件):当鼠标从一个元素的上方移走的时候触发.
7,onmousedown 事件 onmouseup 事件:
onmousedown 事件:当用户按下任意鼠标按钮时触发.
onmouseup 事件:用户释放鼠标按钮时触发.
8,onmousedown 事件: 当用户按下任意鼠标按钮时触发.不能通过键盘触发
9,键盘事件
keydown:当用户按下键盘上的 == 任意键时触发 ==,而且如果按住不放的话,会重复触发此事件.(监听到的字符不区分大小写)
keypress:当用户按下键盘上的 == 字符键时 == 触发,而且如果按住不放的话,会重复触发此事件.(监听到的字符区分大小写)
keyup:当用户 == 释放键盘上的键 == 时触发.
DOM2 级事件处理:
addEventListener() 和 removeEventListener():绑定监听事件和移除监听事件, 所有 DOM 节点中都包含这两个方法,并且它们都接受 3 个参数
1. 要处理的事件名 (例如:click,focus 等. 注意: 这里写事件名字的时候不能带 on)
2. 作为事件处理程序的函数
3. 一个布尔值.最后这个布尔值参数如果是 true ,表示在捕获阶段调用事件处理程序;如果是 false ,表示在冒泡阶段调用事件处理程序.
注意:可以给一个元素多次添加同一个事件的多个处理程序,浏览器会按照添加的顺序执行;
移除监听器 (处理程序) 的时候,必须和注册时使用的是同一个函数.否则移除失败,如果注册和移除都是使用的匿名函数,那么一定会移除不起作用;
大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,这样可以最大限度地兼容各种浏览器.最好只在需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段.(如果不是特别需要,不建议在
事件捕获阶段注册事件处理程序) .
event 对象的高级属性:
1,offsetX 和 offsetY:当前光标相对于那个触发元素的边界的 X,Y 坐标.即光标相对于触发元素的左上角的坐标.(把左上角的位置看做原点 0,0).
eg:
2,screenX 和 screenY:当前光标相对于屏幕边缘的 x,y 坐标.即相对于屏幕左上角的坐标.(可以看出是绝对坐标)
3,clientX 和 clientY:当前光标相对于浏览器窗口客户区域左上角的坐标,即参考原点是浏览器当前显示区域的左上角,这个原点不会滚动.
4,pageX 和 pageY:当前光标相对于页面的左上角显示区域,即参考原点是当前页面的左上角. 注意当页面滚动的时候这个原点会随着滚动.
注意:pageX 和 pageY 和整个页面的左上角有关,与元素的位置无关.如果页面进行的滚动,即使光标没有任何移动,那么 pageY 也会变化.而这种情况下 clientY 是没有变化的.
event:
1,target:是指的点击区域的最内侧的那个元素
2,currentTarget:把事件注册在谁身上, currentTarge 就是谁
3,stopPropagation(): 阻止事件传播
4,preventDefault(): 阻止事件的默认行为
eg:
百度一下
5,stopImmediatePropagation():立即阻止事件的进一步捕获或冒泡,同时阻止任何事件处理程序被调用(DOM3 级事件中新增)
6,bubbles :表示事件是否允许冒泡
八,日期和时间
两种时间:GMT 时间:GMT(Greenwich mean time )格林尼治标准时间;
UTC 时间:UTC(Coordinated **U**niversal Time) 协调世界时间,它是以原子时秒长为基础,在时刻上尽量接近于世界时的一种时间计量系统.
创建日期对象:
1,获取当前日期字符串形式
> 直接调用 Date() 函数 (注意首字母大写).返回的是表示当前日期和时间的字符串.传参数无效,不需要传入参数.
> 注意:得到的仅仅是个 String 类型的字符串
2,使用关键字 new 调用 Date() 构造函数,创建的对象表示当前日期 var now = new Date();
创建指定字符串日期对象:格式:new Date("字符串格式日期"),具体可以有以下几种写法
1,英文月 日, 年 时: 分: 秒 例如:May 23, 2016 09:00:00 表示为:var d = new Date("May 23, 2016 09:00:00");
2,年 - 月 - 日 例如:2016-11-11 表示为:var d= new Date("2016-11-11");
3,年 / 月 / 日 例如:2016/11/11 表示为:var d = new Date("2016/11/11");
创建指定毫秒值的日期对象: new Date(指定的毫秒值)--> 这个毫秒值是指的从 1970 年 1 月 1 日 0:0:0 开始算的毫秒值
通过参数传入年月日时分秒来创建日期对象: new Date(年, 月 [, 日, 时, 分, 秒])
注意:
年月必须有,日时分秒可以省略.(1 日,0 分,0 秒)
月份的范围是 0-11. 0 表示 1 月份.所以我们经常要 month-1 来让它回到正常的月份
如果设置的月日分秒超过了范围,则自动进行增减操作.例如:如果一个月只有 31 天,你如果传入 32,则自动调整为下个月的 1 号
日期继承的 3 个方法:
1,toString() 方法:返回带有时区信息的日期和时间.直接输出一个日期对象的时候,就相当于调用了 toString() 方法再输出
2,toLocalString 方法:返回符合本地习惯的日期和时间格式 eg:var date = new Date();console.log(date.toLocaleString()); // 2016/11/9 上午 11:28:01
3,valueOf() 方法:
注意:该方法不返回字符串,而是返回的代表这个时间的毫秒值;
一般用用来比较两个日期的大小,且日期早的小于日期晚的.
Date 对象的常用方法:
1,getTime() 和 setTime(毫秒值):getTime() 返回日期的毫秒值,与 valueOf() 一样;setTime(毫秒值) 以毫秒数设置日期,会改变整个日期;
2,getFullYear() 和 setFullYear(年份):getFullYear() 取得 4 位数的年份; setFullYear() 设置日期的年份,必须是 4 为数字的年份, 否则将来获取的年份是不对的.
3,getMonth() 和 setMonth(月份): getMonth() 取得月份.范围是:0-11,且 0 表示 1 月份; setMonth(月份) 设置月份;
4,getDate() 和 setDate(日):getDate() 获取一个月中的第几天 (1-31)
eg:var date = new Date();console.log(date.getMonth()); // 如果是 11 月份则返回 10
date.setMonth(2); // 设置月份为 3 月 console.log(date.toLocaleString());
setDate(日) 设置一个月中的第几天,setDate() 的正常范围是 1-31, 如果为 0 则表示设置到上一个月的最后一天的现在时间点
5,getDay(): 获取是星期几 0 代表星期日 6 代表星期 6
注意:星期没有 setDay() 的方法,它只有只读的方法.
6,getHours()和 setHours(小时): getHours()获取小时数 (0-23); setHours(小时) 设置小时数,如果设置的值超过 23 则更改月份中的日期,小于 0 则减少日期数;
7,getMinutes() 和 setMinutes(分钟):getMinutes()获取分钟数 (0-59); setMinutes(分钟) 设置分钟数,如果超过 60 或小于 0 则自动增或减小时;
8,getSeconds() 和 setSeconds(秒):getSeconds() 获取秒数(0-59); setSeconds(秒数) 设置秒数,如果超过 60 或小于 0,则自动增或减分钟数;
9,getMilliSeconds() 和 setMilliSeconds(毫秒值):getMilliSeconds() 获取毫秒值 (0-999); setMilliSeconds(毫秒值) 设置毫秒值 .
日期格式化方法
1,toDateString() ——> 以特定于实现的格式显示星期几,月,日和年;
2,toTimeString() ——> 以特定于实现的格式显示时,分,秒和时区;
3,toLocaleDateString() ——> 以特定于地区的格式显示星期几,月,日和年;
4,toLocaleTimeString() ——> 以特定于地区的格式显示时,分,秒;
5,toUTCString() ——> 以特定于实现的格式完整的 UTC 日期.
来源: http://www.qdfuns.com/notes/48922/348012f95419e93b1fc1202e7c6a9f63.html