对js学习后的一些总结心得

原创 zhongxiaoyou 随笔 javascript 248阅读 2018-01-16 11:41:12 举报

一、 函数

函数的三要素:

  • 函数名
    做到见名知意
    利用驼峰命名法
  • 参数
    形参: 在函数内部就是一个普普通通的变量
    实参: 调用函数的时候传递过去的具体的参数的值, 就是实参
  • 返回值
    函数执行结束之后, 根据具体的业务需求来决定是否给函数的调用者返回值
    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
</script>
</body>
</html>
<!--
函数的递归调用:
recursive
在一个函数的内部调用这个函数的自己, 就叫函数的递归调用

  1. 自己调用自己
  2. 递归一定得有结束条件,
  3. 随着递归的深入,一定要能够到达结束条件
    -->

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

<script>
var arr = [10, 20, 30, 4, 5, 7, 1, 2, 6, 19, 19];
var sum = 0;
for (var i = 0; i < arr.length; i++){
if (i % 2 == 0 && isPrime(arr[i])){
sum += arr[i];
}
}
console.log(sum);

// 求出一个数组所有的质数的和
function isPrime(num){
if (num <= 1) return false;
for (var i = 2; i < num; i++){
if (num % i == 0){
return false;
}
}
return true;
}
</script>
</body>
</html>
<!--
数组的遍历: (traverse)
1、使用普通的循环(for) (while):
eg: var arr = [10, 20, 30, 4, 5, 7, 1, 2, 6, 19, 19, 20];
arr.forEach(function (ele, index, a){
console.log(a === arr);
console.log(ele, a);
})
2、 for...in (用来遍历数组不常用)
eg:for(var i in arr){
console.log(arr[i], i);
}
3、用for...in遍历出来的是数组的下标
4、 for...of循环 : es6新增
遍历出来的是数组中的每一个元素
只能读取到元素, 不能修改数组中的元素
eg: for(var e of arr){
console.log(e);
}
console.log(arr);

5、 是数组对象提供的一种遍历: arr.forEach()
eg:arr.forEach(function(e){
alert(e);
})

把数组转换成字符串

  1. toString()
    把每个元素转成字符串之后,再用, 连起来
  2. join("?")
    用参数的中的字符把元素拼接起来.

<script>
var arr = [10, 20, 30];
arr.push(100); // 在数组的尾部添加元素
arr.push(200, 300, 400);
console.log(arr);
var e = arr.pop(); // 删除数组中的最后一个元素. 返回值就是删除的那个元素
console.log(e);
console.log(arr.pop());; // 删除数组中的最后一个元素
console.log(arr.pop());; // 删除数组中的最后一个元素
console.log(arr);
</script>
<!--
push(新的元素): 向数组的尾部追加元素
pop(): 删除数组的最后一个元素

js中的数据结构比较少, 在以前只有一个数组.


先进后出 first in last out (FILO)

队列 先进先出 first in first out (FIFO)

<script>
var arr = [10, 20, 30];
arr.unshift(100); // 在数组的头部添加元素
arr.unshift(200, 300); // 在数组的头部添加元素
console.log(arr); // 200, 300, 100, 10...
arr.shift(); // 删除数组头部元素.(下标为0 的元素)
arr.shift(); // 删除数组头部元素.(下标为0 的元素)
console.log(arr);
</script>
</body>
</html>
<!--
unshift(): 在头部添加
shift():删除头部元素

push(): 在尾部追加
pop(): 删除尾部的元素.

队列:
先进先出 first in first out FIFO

用普通的for删除数组中的所有元素
for(; arr.length > 0;){
arr.pop();
//arr.shift()
}*

var n = 10;
var arr = [100, 200];
function foo(a, b){
a = 1;
b[0] = 1000;//赋值是会改变arr的位置的
}

/ function foo(a, b){
a = 1;
b = [0, 0];//这是在创建b数组,跟arr无关
b[0] = -1;
}
/
foo(n, arr);
console.log(n); //10
console.log(arr[0]); // 1000 100

arr.reverse(); 在原数组上直接倒置
注意:

倒置操作是对原数组本身做了操作,返回的也是原数组对象,并不是一个新创建的数组。

indexOf(item): 从前面开始向后查找 item 第一次出现的位置

lastIndexOf(item): 从尾部开始向前查找 item 第一次出现的位置
如果找不到元素,则返回 -1

indexOf(item, fromBack): 从第二个参数的位置开向后始查找 item 第一次出现的位置
返回的是在数组中第一次出现的位置. 元素在数组中不存在, 则返回 -1

lastIndexOf(item, fromForward): 从第二个参数的位置开始向前查找 item 第一次出现的位置

arr.concat(arrayX,arrayX,......,arrayX)该方法用于连接两个或多个数组。至少传入一个参数,参数可以是数组也可以是元素。该方法是返回的一个新的数组,原数组没有做任何改变
eg:var newArr = arr1.concat["a", "b", "c"] 表示把数组arr1与参数连接起来,并返回连接后的新数组

arr.slice(start,end) : 截取数组,并返回截取到的新数组
注意:该方法包括下标为start的元素;
end要大于start,否则截取不到元素;
如果是负数表示从尾部开始截取: -1表示最后一个元素;
该方法是返回的一个新的数组.

数组添加、替换、删除方法
arr.splice(index,howmany,item1,.....,itemX) 该方法向/从数组中添加/删除/替换元素,然后返回被删除的元素组成的数组
index参数是整数,规定添加/删除元素的位置,使用负数可从数组结尾处规定位置。
howmany参数是要删除的元素数量。如果设置为 0,则不会删除元素。 如果添加元素这里应该是0
item参数是向数组添加的新项目。如果要添加元素或者替换元素则有此项.如果添加元素那么howmany为0,如果替换元素那么howmany为要替换的个数
eg: arr.splice(arr.length, 0, 100); // push
arr.splice(-1, 1); // pop
arr.splice(0, 0, 100); // unshift
arr.splice(0, 1); // shift

数组排序算法:
1)冒泡排序
function maoPao(arr) {
for(var i = 0; i < arr.length - 1; i++){
for(var j = 0; j < arr.length - i - 1; j++){
if(arr[j] > arr[j + 1]){
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
}

2)选择排序
function selectSort(arr){
for (var i = 0; i < arr.length - 1; i++){
var minIndex = j;
for (var j = j + 1; j < arr.length; j++){
if (arr[minIndex] > arr[j]){
minIndex = i;
}
}
if (minIndex != i){
var temp = arr[i];
arr[i] = arr[minIndex];
arr[minIndex] = temp;
}
}
}

利用arr.sort(sortby) 方法用于对数组的元素进行排序,但注意的是它按照编码表排序,并不太符合我们的预期
因此可以利用下面的方式来排序
//升序函数
function sortAsc(a, b){
return a - b; //a > b 就返回正数
}
// 降序函数
function sortDesc(a, b){
return b - a; //a > b 就返回负数
}

数组的检测:
Array.isArray(arr)方法 , 如果arr是数组,则返回true,否则返回false

利用instanceof运算符返回一个 Boolean 值,指出对象是否是特定构造函数的一个实例。在ifrmafe有bug

 三、字符串:

字符串常用方法
s.charAt(index)方法:表示字符串中某个位置的数字,即字符在字符串中的下标。
返回值:返回的是指定位置的字符。但是Javascript没有字符类型,其实返回的是长度为 1 的字符串。

s.charCodeAt(index)方法:返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。

字符串连接方法
s.concat(stringX,stringX,...,stringX) 方法用于连接两个或多个字符串。
+方法

s.indexOf(searchvalue,fromindex)方法:可返回某个指定的字符串值在字符串中首次出现的位置.
s.lastIndexOf(searchvalue,fromindex)方法:可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。

s.substring(start,stop) 方法用于提取字符串中介于两个指定下标之间的字符。
start参数为一个非负的整数,规定要提取的子串的第一个字符在 s中的位置。必填
stop参数一个非负的整数。如果省略该参数,那么返回的子串会一直到字符串的结尾。截取到的结果中,不包括stop位置的元素。选填

s.substr(start, length) 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
start参数 必需。要抽取的子串的起始下标。必须是数值。允许负数
length参数可选。子串中的字符数。必须是数值。如果省略了该参数,那么返回从 stringObject 的开始位置到结尾的字串。

s.slice(start,end)方法:可提取字符串的某个部分,并以新的字符串返回被提取的部分。
注意:这个方法与substring使用方式一样,只是slice允许负值。

字符串大小写转换方法
s.toUpperCase 字符串中所有的字符转变成为大写
s.toLowerCase 字符串中的所有的字符转变成小写

s.trim()方法:只是去除字符串的首尾的所有空白字符,字符串内部的空白字符不做任何处理;

字符串替换、匹配、搜索方法

s.replace(regexp/substr,replacement)方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串
regexp/substr参数是要替换的子字符串,replacement参数是用来替换文本或生成替换文本的函数

s.match(匹配值) :在字符串内检索指定的值.

  • 注意:匹配的参数只有一个,要么正则表达式,要么是字符串项

s.search(要搜索的参数)方法:

  • 匹配的参数只有一个,要么是正则表达式,要么是字符串
  • 返回值:第一个匹配项的索引下标,否则返回-1,始终从字符串的头部开始查找,忽略全局

s.localeCompare(other)方法:

  • 如果字符串在字母表中应该排在字符串参数之前,则返回一个负值;
  • 如果字符串的等于字符串参数,返回0;
  • 如果字符串在字母表中应该排在字符串参数之后,则返回一个正数;
    eg:var s = "b";var compare = s.localeCompare("aaa"); alert(compare);//b在字符串参数a之前,所以返回正数,其实是 1

字符串切割方法
s.split(separator,howmany)方法:用于把一个字符串分割成字符串数组。
separator参数:必需。字符串或正则表达式,从该参数指定的地方分割 s。
howmany参数:可选。指定返回的数组的最大长度。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度.
eg:s.split(" "); 使用 " " 空格来切割字符串

四、Math对象

常用属性:

  • Math.PI : π的值
  • Math.E: 自然对数的底数

常用方法:

  • Math.abs(x) : 返回x的绝对值
  • Math.max(任意个数值) :返回传入的数值中的最大值
  • Math.min(任意个数值) :返回传入的数值中的最小值
  • Math.ceil(number) : 返回大于等于number的最小整数(向上取整) eg:Math.ceil(13.1) //14
  • Math.floor(number) : 返回小于等于number的最大整数(向下取整)
  • Math.round(number): 四舍五入
  • Math.pow(x, y) : 返回 x的y次乘方 eg:Math.pow(2, 3) //即2^3=8
  • Math.random() : 返回 0-1之间的随机小数。包括0,但是不包括1
  • Math.sqrt(x) : 返回x的平方根 √∥ eg:Math.sqrt(4) //2
  • Math.sin(x) 正弦; Math.cos(x) 余弦; Math.tan(x) 正切
    eg:console.log(Math.sin(Math.PI / 4)); // 45度的正弦
    console.log(Math.cos(Math.PI / 4)); // 45度的余弦
    console.log(Math.tan(Math.PI / 4)); // 45度的正切
 五、 BOM操作

BOM: Browser Object Model 浏览器对象模型
BOM 的核心对象是 window ,它表示浏览器的一个实例。在浏览器中, window 对象有双重角色,
它既是通过 JavaScript 访问浏览器窗口的一个接口,又是 ECMAScript 规定的 Global 对象。

window窗口大小

有三种方式获取浏览器的窗口大小:(浏览器的视口,不包括工具栏和滚动条)
1)window.innerHeight - 浏览器窗口的内部高度 ; window.innerWidth - 浏览器窗口的内部宽度

2)document.documentElement.clientHeight document.documentElement.clientWidth

3)为了兼容浏览器的版本可以使用下面的代码(可以涵盖所有的浏览器:
var w = window.innerWidth || document.documentElement.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight;
alert("窗口宽度:" + w + "\n窗口高度:" + h);

调整窗口大小:

  • window.resizeTo(with, height) :调整到指定的大小
  • resizeBy(deltW, deltH) :增加指定值的窗口的宽和高

打开窗口
open(URL,name,features)方法:用于打开一个新的浏览器窗口或查找一个已命名的窗口。
eg: win = window.open("http://www.yztcedu.com";, "", "width=400, height=400, toolbar = no, menubar = no,left = 200, right = 200");

  • open方法返回打开的那个窗口的window对象,可以调用close方法关闭新打开的窗口。

window中的定时器(超时调用和周期调用)(重点)

  1. window.setTimeout()--超时调用

/
setTimeout(code,millisec)
参数1:要执行代码。一般传入一个函数。(当然也可是字符串形式的代码,但是不建议使用)
参数2:多长时间后执行参数1中的代码。 单位毫秒
/
eg:
<script type="text/javascript">
//传入函数时,函数名不要加括号。(因为方法不是我们调用,是引擎帮助我们调用)
// setTimeout方法会返回一个值,表示超时调用的id,可以在任务执行前取消任务。
var timeOutId = window.setTimeout(go, 3000); // 3秒中之后执行函数go中的代码
function go () {
window.open("http://www.yztcedu.com";)
}
window.clearTimeout(this.timerId); //取消这个超时调用,如果超时调用已经执行完毕,就什么也不会发生。
</script>

  1. setInterval--周期调用(间隙调用)

/*
setInterval(code,millisec)
参数1:每隔一段时间执行一次的代码。 一般是一个函数
参数2:周期性执行的时间间隔。 单位毫秒

*/
<body>
<h1 id="time"></h1>
<script type="text/javascript">
//显示时间,每秒钟变化一次。
window.setInterval(function() {
var timeElement = document.getElementById("time"); //找到h1标签
var msg = new Date().toLocaleString();
timeElement.innerHTML = msg; //设置h1标签中的值
}, 1000);
</script>
</body>
//清除间隔定时器
window.clearInterval(id);

window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。

window中常用事件
1)onload---加载事件
当整个页面加载完成的时会触发该事件。
语法:window.onload = function(){} 或者 window.onload = 方法名

2)onscroll---滚动事件
当窗口发生滚动会触发该事
语法:window.onscroll = function(){} 或者 window.onscroll = 方法==名==;
1)document.body.scrollTop: 只支持chorme,火狐和ie不支持,
2)document.documentElement.scrollTop ie和火狐支持 chrome不支持
3)为了兼容浏览器的版本可以使用下面的代码(可以涵盖所有的浏览器:
document.documentElement.scrollTop || document.body.scrollTop

 六、 DOM概念

DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。
document节点是每个文档的根节点,document节点下面只有一个 html节点,我们称之为文档元素。(documentElement);

DOM节点分类:
共有12中节点类型,经常用到的而比较重要的节点有以下五个:
节点类型 节点数字值
元素 1
属性 2
文本 3
注释 8
文档 9

节点属性(特性)
nodeName:节点名:

  • 元素节点的 nodeName 与标签名相同
  • 属性节点的 nodeName 与属性名相同(元素.getAttributeNode(“属性名”)获取属性节点)
  • 文本节点的 nodeName 始终是 #text(通过元素的子节点获取)
  • 注释节点的nodeName是#comment(通过元素的子节点获取)
  • 文档节点的 nodeName 始终是 #document

nodeValue:节点值

  • 元素节点的 nodeValue 是 undefined 或 null
  • 属性节点的 nodeValue 是属性值
  • 文本节点的 nodeValue 是文本本身
  • 注释节点的nodeValue是注释里面的内容
  • 文档节点的nodeValue 是null

nodeTyp:节点类型

  • 元素 element 1
  • 属性 attr 2
  • 文本 text 3
  • 注释 comments 8
  • 文档 document 9

DOM核心对象---document对象
document 对象是 window 对象的一个属性,因此可以将其作为全局对象来访问。

  • nodeType 的值为 9;
  • nodeName 的值为 "#document" ;
  • nodeValue 的值为 null ;
  • parentNode 的值为 null ;
  • ownerDocument 的值为 null ;

1、获取节点的6个方法:
1)document.getElementById(id);
2)document.getElementByTagName(tagName);
3)document.getElementByClassName(tagName);
4)getElementByName(name);这个是通过标签的name属性的值来获取元素的。由于会出现多个元素name属性的值相等,所以返回的可能是多个Element组成的集合.

注意:不是所有的元素都有name属性,只有表单标签才有。
5)querySelector(css选择器);匹配指定 CSS 选择器的第一个元素
6)querySelectorAll(css选择器);获取所有满足条件的元素

2、获取documentElement元素
documentElement属性以一个元素对象返回一个文档的文档元素。HTML 文档返回对象为HTML元素。
document.documentElement.nodeName // html
document.documentElement.nodeValue // null
document.documentElement.nodeType // 1

节点与节点之间的关系(重点)
父(parent)节点:父节点拥有任意数量的子节点
子(child)节点:子节点拥有一个父节点
兄弟(sibling)节点:同级的子节点被称为同胞(兄弟或姐妹)。同胞是拥有相同父节点的节点
根 (root)节点:一个文档只能有一个根节点。对html文档来说,根节点就是documentElement。根节点不可能有父节点

childNodes属性:获取一个元素的所有子节点. --->用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:<body>
<div></div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
div.addEventListener("mousemove", function (event) {
console.log('offsetX:' + event.offsetX + ", offsetY:" + event.offsetY);
}, false);
</script>
</body
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:<body>
<a href="http://www.baidu.com">百度一下</a>;
<script>
var a = document.querySelector("a");
a.onclick = function (event){
event.preventDefault();// 阻止默认行为
}
</script>
</body>

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 日期。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复