JavaScript基础总结（二）

js获取页面元素的属性

         1.获取浏览器的宽度和高度：

document.documentElement.clientHeight/document.documentElement.clientWidth

document.body.clientHeight/document.body.clientWidth

       2.获取元素的宽度和高度

element.offsetHeight/element.offsetWidth  绝对宽和高

element.clientHeight/ element.clientWidth  可用的宽和高

element.offsetTop/element.offsetLeft:    元素绝对定位后top值和Left值

       3.浏览器滚动的高度

document.documentElement.scrollTop

关于尺寸：
  
  关于尺寸问题分为两种情况，一种是在body下的尺寸。另一种是在div下的尺寸。
  
在div下：

  clienttWidth/Height:是对象内容的宽高。

  clienttWidth/Height:=自身的宽高+padding*2-滚动轴宽度(mac系统不需要，滚动轴不占宽度)

  clientTop：=border-top的宽。

  clientLeft：=border-left的宽。

 

  offsetWidth/Height：是对象的自身的宽高，包括滚动条、边线、padding，值会随着内容的输入而不断改变。 

  offsetWidth/Height=自身的宽高+padding*2+border*2=clientWidth/Height+border*2(如有滚动条时加上滚动条，mac系统除外) 

  offsetLeft：对象距父元素或浏览器窗口的左边距离。

  offsetTop： 对象距父元素或浏览器窗口的上边距离。

  offsetParent为定位的父元素，未定位时默认以body为父元素。

  在ie6/7中：offsetLeft=offsetParent的padding-left+当前元素的margin-left

  在ie8/9/9即chrome中：：offsetLeft=offsetParent的padding-left+offsetParent的margin-left+当前元素的margin-left+offsetParent的border-left

  在FireFox中：offsetLeft=offsetParent的padding-left+offsetParent的margin-left+当前元素的margin-left

 

  scrollWidth/Height:网页实际内容的宽高（包括带滚动条的隐蔽的地方）。

  scrollWidth/Height：所有浏览器是一致的。scrollHeight/Width=自身的宽高+padding*2。 

  scrollTop：设置或获取位于对象最顶端和父元素中可见内容的最顶端之间的距离(即网页被卷去的高)
  
在body下：

clientWidth/Height=自身的宽高+padding*2-滚动轴宽度(mac系统不需要，滚动轴不占宽度)

offsetWidth/Height=自身的宽高+padding*2+border*2=clientWidth/Height+border*2(如有滚动条时加上滚动条，mac系统除外) 

scrollWidth/Height:

1.给定宽高小于浏览器窗口时。

  scrollWidth/Height:通常时浏览器的宽高。

2.给定宽高大于浏览器窗口，且内容小于给定宽高时。

  scrollWidth/Height:=给定的宽高+其所有的padding、margin和border(宽是(上下)高是(左右))

3.给定宽高大于浏览器窗口，且内容大于给定宽高时。

  scrollWidth/Height:=内容宽度(大于给定宽高的那个内容)+其所有的padding、margin和border

获取可视区域： 

 document.documentElement.clientWidth|| document.body.clientWidth||window.innerWidth 

  document.documentElement.clientHeight|| document.body.clientHeight||window.innerHeight

获取网页卷进去的高度：
 

var scrollTop= document.documentElement.scrollTop || window.pageYOffset(可选) || document.body.scrollTop 

  window.pageXOffset/pageYoffset 整数只读属性。表示X/Y轴滚动条向右/下滚动过的像素数（表示文档向右/下滚动过的像素数）。IE不支持该属性，使用body元素的scrollLeft属性替代。
  
  浏览器内部的宽： innerWidth
  浏览器内部的高： innerHeight
  浏览器外部的宽： outerWidth
  浏览器外部的高： outerHeight
  网页可见区域宽： document.body.clientWidth;  (或innerWidth )
  网页可见区域高： document.body.clientHeight; (或innerHeight)
  网页可见区域宽： document.body.offsetWidth   (包括边线的宽);
  网页可见区域高： document.body.offsetHeight  (包括边线的宽);
  网页正文全文宽： document.body.scrollWidth;
  网页正文全文高： document.body.scrollHeight;
  网页被卷去的高： document.body.scrollTop;
  网页被卷去的左： document.body.scrollLeft;
  屏幕分辨率的高： window.screen.height;
  屏幕分辨率的宽： window.screen.width;
  浏览器顶端到屏幕顶端： window.screenTop;(在IE,Opera中Y轴为0时显示的是页面可见区域的距离，即浏览器工具栏的像素高度)
  浏览器左部到屏幕左部： window.screenLeft;
  屏幕可用工作区高度： window.screen.availHeight;
  屏幕可用工作区宽度：window.screen.availWidth;

 clientX/clientY 相对于浏览器(可视区左上角0,0.不包括顶部的标题栏。)的坐标 
  
  offsetX/offsetY 相对于事件源左上角(0,0)的坐标
  
  screenX/screenY 相对于设备屏幕左上角(0,0)的坐标。
  当是window.screenX/screenY时。screenX/screenY等于screenLeft/screenTop。
  
  pageX/pageY     相对于整个网页左上角(0,0.包括顶部的标题栏)的坐标
  
  x/y             在IE浏览器中如果进行动态定位时：相对于最内容包容元素的左上角(0,0)的坐标
                  在IE浏览器中未进行动态定位时x/y =clientX/clientY。
                  在其他浏览器中始终x/y =clientX/clientY。

js对事件作出反应

步骤：1.找事件源

      2.找事件：js中有哪些事件

      3.编写处理函数

属性	此事件发生在何时...
onabort	图像的加载被中断。
onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onerror	在加载文档或图像时发生错误。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。
onreset	重置按钮被点击。
onresize	窗口或框架被重新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。

绑定事件的方式：

1. 在html标签上绑定事件
2. 在js代码中： element.onmouseover = 处理函数
3. 在js代码中：element.addEventListener(“事件类型”,处理函数)；

   element.removeEventListener(“事件类型”,处理函数);

• BOM：浏览器对象

Window中的方法

1. alert():提示对话框
2. prompt():提示输入对话框，可以接受用户的输入
3. confirm():确认对话框，可以接受用户的选择
4. open():打开新窗口，在新窗口中可以window.opener获取父窗体对象
5. close():关闭窗体
6. setTimeout()
7. setInterval()
8. window.location.href=””:页面跳转
9. window.location.reload():重新加载
10. window.history.back();后退
11. window.history.forward()

• *表单对象
  1. 字符串string中的方法（参考java中的String）
  2. 正则表达式（参考Java中讲的正则）
  3. *js验证表单的方式
     1. 第一种：使用submit功能标签提交表单

οnsubmit=”return 处理函数()”

​​​​​​​第二种：使用普通标签提价表单：

                 οnclick=”函数()”   手动提交表单：formele.submit();

• 对象
  1. Date:日期
     1. new Date();多种构造方法
     2. 获取方法：

getDate()	以数值返回天（1-31）
getDay()	以数值获取周名（0-6）
getFullYear()	获取四位的年（yyyy）
getHours()	获取小时（0-23）
getMilliseconds()	获取毫秒（0-999）
getMinutes()	获取分（0-59）
getMonth()	获取月（0-11）
getSeconds()	获取秒（0-59）
getTime()	获取时间（从 1970 年 1 月 1 日至今）

​​​​​​​设置的方法

setDate()	以数值（1-31）设置日
setFullYear()	设置年（可选月和日）
setHours()	设置小时（0-23）
setMilliseconds()	设置毫秒（0-999）
setMinutes()	设置分（0-59）
setMonth()	设置月（0-11）
setSeconds()	设置秒（0-59）
setTime()	设置时间（从 1970 年 1 月 1 日至今的毫秒数）

 

1. 1. Array
      1. 1. 创建数组方式：三种
         2. 属性和方法