JS DOM 对象
一、DOM 分类
DOM 分为 window 对象 和 document 对象
二、函数调用
1 自己封装的函数 调用只写函数名();数学函数 math 或 绝对值 调用 写 Math.abs()
2 函数和属性的调用(不一样)例如:
函数调用直接写函数名 window.函数名() ; 属性调用直接写属性名字就可以 windows.属性名() ;
三、什么是事件
事件就事先设置好的程序,被触发
Window对象
打开新窗口
window.open(“一”,“二”,“三”,“四”)
第一部分:页面地址
第二部分:打开方式_blank在新窗口,_self在自身打开
第三部分:控制窗口,用空格隔开
toolbar=no新打开的窗口无工具条 menubar=no无菜单栏 status=no无状态栏 width=100 height=100 宽度高度
left=100 打开的窗口距离左边多少距离 resizable=no窗口大小不可调 scrollbars=yes 出现滚动条
location=yes 有地址栏
关闭指定窗口
window.close();关闭当前窗口 a.close();关闭a窗口 array[i].close();关闭多个窗口,创建数组存储多个窗口
window.opnner.close();关闭打开窗口的源窗口
间隔和延时
window.setInterval("要执行的代码",间隔的毫秒数)
window.clearInterval(间隔的id); 循环一次之后用来清除隔几秒执行的代码
window.setTimeout("要执行的代码",延迟的毫秒数)
window.clearTimeout(延迟的id);清除setTimeout,一般延迟执行较为常用
1 <script> 2 function Show(){ 3 window.open("1.html","_blank"); 4 } 5 window.setInterval("Show()",3000); //每间隔3秒打开新窗口 6 </script>
页面操作
window.navigate("url") ;跳转页面; window.moveTo(x,y); 移动页面 window.resizeTo(宽,高); 调整页面
window.scrollTo(x,y);滚动页面至哪里。该方法可行,其他方法因浏览器原因,有不同表现
显示屏幕信息
Screen 对象包含有关客户端显示屏幕的信息
对象属性: height属性返回屏幕高度 width属性返回屏幕宽度
windows.history 对象
属性:length返回浏览器历史列表中的元素数量
用法:
.back();加载 history 列表中的前一个 URL,返回
.forward();加载 history 列表中的下一个 URL,前进
.go(n); 加载 history 列表中的某个具体页面。n是正数代表前进n个页面,n是负数代表后退n个页面
window.location对象
location 对象包含有关当前 URL 的信息
host 属性是一个可读可写的字符串,可设置或返回当前 URL 的主机名称和端口号
pathname 属性设置或返回当前 URL 的路径部分
port 属性设置或返回当前 URL 的端口部分
protocol 属性设置或返回当前 URL 的协议
search 属性设置或返回当前 URL 的查询部分(问号 ? 之后的部分)
hostname 属性设置或返回当前 URL 的主机名
href 属性设置或返回当前显示的文档的完整 URL
var s = window.location.href;获取当前 页面的地址
window.location.href="http://www.baidu.com";修改页面地址,会跳转页面
document对象
找元素的方法
1.通过id名找
document.getElementById("ID");
2.通过class名找
document.getElementsByClassName("CLASS");
3.标签名找
document.getElementsByTagName("标签名");
4.表单元素
document.getElementsByName("表单元素名");
操作内容
1.获取内容
var d1 = document.getElementById("d1")
2.修改内容
d1.innerText = "添加内容文字";
d1.innerHTML = "<u>修改标签加内容</u>";
操作属性
1.获取属性
var d3 = document.getElementById("d3")
2.添加属性
d3.setAttribute("属性名","属性值");
3.移除属性
d3.removeAttribute("属性名");
操作样式
1.获取样式
var d1 = document.getElementById("d1");
2.修改样式
d1.style.backgroundcolor = "red";
事件
鼠标事件
onclick 鼠标点击 ondbonlclick 鼠标双击 onmousedown 事件会在鼠标按键被按下时发生
onmouseup 事件会在鼠标按键被松开时发生 onmouseover 事件会在鼠标指针移上时发生
onmousemove 事件会在鼠标指针移动时发生 onmouseout 事件会在鼠标指针移出指定的对象时发生
窗口图片
onresize 事件会在窗口或框架被调整大小时发生 onunload 事件在用户退出页面时发生
onload 事件会在页面或图像加载完成后立即发生 onerror 事件会在文档或图像加载过程中发生错误时被触发
onabort 事件会在图像加载被中断时发生
表单元素
onselect 事件会在文本框中的文本被选中时发生 onblur 事件会在对象失去焦点时发生
onchange 事件会在域的内容改变时发生 onfocus 事件在对象获得焦点时发生
onsubmit 事件会在表单中的确认按钮被点击时发生 onreset 事件会在表单中的重置按钮被点击时发生
键盘事件
onkeydown 事件会在用户按下一个键盘按键时发生 onkeyup 事件会在键盘按键被松开时发生
onkeypress 事件会在键盘按键被按下并释放一个键时发生 event.keyCode;属性返回
onkeypress事件触发的键的值的字符代码,或者onkeydown 或 onkeyup事件的键的代码
event. which 属性返回onkeypress事件触发的键的值的字符代码,或者onkeydown 或 onkeyup事件的键的代码
详细的键值表:
常数名称 | 十六进制值 | 十进制值 | 对应按键 |
VK_LBUTTON | 01 | 1 | 鼠标的左键 |
VK_RBUTTON | 02 | 2 | 鼠标的右键 |
VK-CANCEL | 03 | 3 | Ctrl+Break(通常不需要处理) |
VK_MBUTTON | 04 | 4 | 鼠标的中键(三按键鼠标) |
VK_BACK | 08 | 8 | Backspace键 |
VK_TAB | 09 | 9 | Tab键 |
VK_CLEAR | 0C | 12 | Clear键(Num Lock关闭时的数字键盘5) |
VK_RETURN | 0D | 13 | Enter键 |
VK_SHIFT | 10 | 16 | Shift键 |
VK_CONTROL | 11 | 17 | Ctrl键 |
VK_MENU | 12 | 18 | Alt键 |
VK_PAUSE | 13 | 19 | Pause键 |
VK_CAPITAL | 14 | 20 | Caps Lock键 |
VK_ESCAPE | 1B | 27 | Ese键 |
VK_SPACE | 20 | 32 | Spacebar键 |
VK_PRIOR | 21 | 33 | Page Up键 |
VK_NEXT | 22 | 34 | Page Domw键 |
VK_END | 23 | 35 | End键 |
VK_HOME | 24 | 36 | Home键 |
VK_LEFT | 25 | 37 | LEFT ARROW 键(←) |
VK_UP | 26 | 38 | UP ARROW键(↑) |
VK_RIGHT | 27 | 39 | RIGHT ARROW键(→) |
VK_DOWN | 28 | 40 | DOWN ARROW键(↓) |
VK_Select | 29 | 41 | Select键 |
VK_PRINT | 2A | 42 | |
VK_EXECUTE | 2B | 43 | EXECUTE键 |
VK_SNAPSHOT | 2C | 44 | Print Screen键(抓屏) |
VK_Insert | 2D | 45 | Ins键(Num Lock关闭时的数字键盘0) |
VK_Delete | 2E | 46 | Del键(Num Lock关闭时的数字键盘.) |
VK_HELP | 2F | 47 | Help键 |
VK_0 | 30 | 48 | 0键 |
VK_1 | 31 | 49 | 1键 |
VK_2 | 32 | 50 | 2键 |
VK_3 | 33 | 51 | 3键 |
VK_4 | 34 | 52 | 4键 |
VK_5 | 35 | 53 | 5键 |
VK_6 | 36 | 54 | 6键 |
VK_7 | 37 | 55 | 7键 |
VK_8 | 38 | 56 | 8键 |
VK_9 | 39 | 57 | 9键 |
VK_A | 41 | 65 | A键 |
VK_B | 42 | 66 | B键 |
VK_C | 43 | 67 | C键 |
VK_D | 44 | 68 | D键 |
VK_E | 45 | 69 | E键 |
VK_F | 46 | 70 | F键 |
VK_G | 47 | 71 | G键 |
VK_H | 48 | 72 | H键 |
VK_I | 49 | 73 | I键 |
VK_J | 4A | 74 | J键 |
VK_K | 4B | 75 | K键 |
VK_L | 4C | 76 | L键 |
VK_M | 4D | 77 | M键 |
VK_N | 4E | 78 | N键 |
VK_O | 4F | 79 | O键 |
VK_P | 50 | 80 | P键 |
VK_Q | 51 | 81 | Q键 |
VK_R | 52 | 82 | R键 |
VK_S | 53 | 83 | S键 |
VK_T | 54 | 84 | T键 |
VK_U | 55 | 85 | U键 |
VK_V | 56 | 86 | V键 |
VK_W | 57 | 87 | W键 |
VK_X | 58 | 88 | X键 |
VK_Y | 59 | 89 | Y键 |
VK_Z | 5A | 90 | Z键 |
VK_NUMPAD0 | 60 | 96 | 数字键0键 |
VK_NUMPAD1 | 61 | 97 | 数字键1键 |
VK_NUMPAD2 | 62 | 98 | 数字键2键 |
VK_NUMPAD3 | 62 | 99 | 数字键3键 |
VK_NUMPAD4 | 64 | 100 | 数字键4键 |
VK_NUMPAD5 | 65 | 101 | 数字键5键 |
VK_NUMPAD6 | 66 | 102 | 数字键6键 |
VK_NUMPAD7 | 67 | 103 | 数字键7键 |
VK_NUMPAD8 | 68 | 104 | 数字键8键 |
VK_NUMPAD9 | 69 | 105 | 数字键9键 |
VK_MULTIPLY | 6A | 106 | 数字键盘上的*键 |
VK_ADD | 6B | 107 | 数字键盘上的+键 |
VK_SEPARATOR | 6C | 108 | Separator键 |
VK_SUBTRACT | 6D | 109 | 数字键盘上的-键 |
VK_DECIMAL | 6E | 110 | 数字键盘上的.键 |
VK_DIVIDE | 6F | 111 | 数字键盘上的/键 |
VK_F1 | 70 | 112 | F1键 |
VK_F2 | 71 | 113 | F2键 |
VK_F3 | 72 | 114 | F3键 |
VK_F4 | 73 | 115 | F4键 |
VK_F5 | 74 | 116 | F5键 |
VK_F6 | 75 | 117 | F6键 |
VK_F7 | 76 | 118 | F7键 |
VK_F8 | 77 | 119 | F8键 |
VK_F9 | 78 | 120 | F9键 |
VK_F10 | 79 | 121 | F10键 |
VK_F11 | 7A | 122 | F11键 |
VK_F12 | 7B | 123 | F12键 |
VK_NUMLOCK | 90 | 144 | Num Lock 键 |
VK_SCROLL | 91 | 145 | Scroll Lock键 |
上面没有提到的:(都在大键盘) | |||
VK_LWIN | 91 | 左win键 | |
VK_RWIN | 92 | 右win键 | |
VK_APPS | 93 | 右Ctrl左边键,点击相当于点击鼠标右键,会弹出快捷菜单 | |
186 | ;(分号) | ||
187 | =键 | ||
188 | ,键(逗号) | ||
189 | -键(减号) | ||
190 | .键(句号) | ||
191 | /键 | ||
192 | `键(Esc下面) | ||
219 | [键 | ||
220 | 键 | ||
221 | ]键 | ||
222 | ‘键(引号) |