JavaScript学习总结

一、 函数

函数的三要素:

* 函数名

做到见名知意
利用驼峰命名法

* 参数

形参: 在函数内部就是一个普普通通的变量
实参: 调用函数的时候传递过去的具体的参数的值, 就是实参

* 返回值

函数执行结束之后, 根据具体的业务需求来决定是否给函数的调用者返回值
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));
  / 46
  3 *2
  2 *1
  */

// 1 + 2+ ... + 99 + 100

#二、数组
比较两个数组, 其实是比较的两个数组的地址值是否一样. (== === 是一样的.)
如果一边是数组, 一边是基本类型的数据. (==) 会有类型的转换.先把数组用toString()转换成字符串之后再比

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 Universal 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(月份) 设置月份；
eg：var date = new Date();console.log(date.getMonth()); //如果是11月份则返回 10
date.setMonth(2); // 设置月份为3月 console.log(date.toLocaleString());
4、getDate()和setDate(日)：getDate() 获取一个月中的第几天(1-31)
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 日期。