Dom
文档对象模型(Document Object Model,缩写DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口。
HTML DOM 定义了访问和操作 HTML 文档的标准方法。
DOM 将 HTML 文档表达为树结构。
我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。
1. HTML DOM 树
2.查找元素
1、直接查找
<script> document.getElementById('id'); //根据ID获取一个标签,在文档中改值必须唯一 document.getElementsByName('name'); //根据name属性获取标签集合,类似于id,name是给元素分配名字,但区别于ID,不是必须唯一. document.getElementsByClassName('classname'); //根据class属性获取标签集合 document.getElementsByTagName('div'); //根据标签名获取标签集合元素 #nav; //id=nav的元素 通过CSS选择器选取元素 div; //所有<div>元素 通过CSS选择器选取元素 .warning; //所有在class属性之中包含了warnning的元素 通过CSS选择器选取元素 //也可以使用属性选择器: p[lang='en']; //所有使用英文的段落 如<p lang='en'> *[name='tom'] //所有包含name=tom的属性的元素 //组合使用: div, #log //所有<div>元素,以及id=log的元素 //文档中的所有的元素, document.all() document.all[0] //文档中的第一个元素 document.all["navbar"] //id或name未navbar的元素 </script>
2. 间接查找
parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
3. 节点和元素的区别
- Node: 既包含元素又包含内容
- Element: 只包含元素
PS:换行也是元素
4. 操作
1) 值
innerText //文本 outerText //
outerHTML // innerHTML //HTML内容value // 值
<body> <div id="hehe"> <p>1</p>; <p>2</p> <p>3</p> </div> <script> var tag = document.getElementById('hehe'); console.log(tag.innerText); </script> </body> //代码执行结果: 1 2 3
<body> <div id="hehe"> <p>1</p>; <p>2</p> <p>3</p> </div> <script> var tag = document.getElementById('hehe'); console.log(tag.innerHTML); </script> </body> //执行结果; <p>1</p> <p>2</p> <p>3</p>
<body> <div id="hehe"> <p>1</p>; <p>2</p> <p>3</p> </div> <script> var tag = document.getElementById('hehe'); console.log(tag.value); </script> </body> //结果: undefined
<body> <div id="hehe"> <p>1</p>; <p>2</p> <p>3</p> </div> <script> var tag = document.getElementById('hehe'); console.log(tag.outerHTML); </script> </body> //结果: <div id="hehe"> <p>1</p>; <p>2</p> <p>3</p> </div>
2) Class操作
className //获取所有类名 classList.add //添加类 classList.remove //删除类
<body id="body" class="Iambody"> <div class="hehe"> <p>1</p>; <p>2</p> <p>3</p> </div> <div class="haha"> <a>4</a> <a>5</a> </div> <script> var tag = document.getElementById('body'); var a = tag.className; console.log(a); </script> </body> //结果: Iambody
<body id="body" class="Iambody"> <div class="hehe"> <p>1</p>; <p>2</p> <p>3</p> </div> <div class="haha"> <a>4</a> <a>5</a> </div> <script> var tag = document.getElementById('body'); var a = tag.className; tag.classList.add('NewClass'); console.log(tag); </script> </body> //结果: <body id="body" class="Iambody NewClass"> <div class="hehe"> <p>1</p>; <p>2</p> <p>3</p> </div> <div class="haha"> <a>4</a> <a>5</a> </div> <script> var tag = document.getElementById('body'); var a = tag.className; tag.classList.add('NewClass'); console.log(tag); </script> </body>
<body id="body" class="Iambody"> <div class="hehe"> <p>1</p>; <p>2</p> <p>3</p> </div> <div class="haha"> <a>4</a> <a>5</a> </div> <script> var tag = document.getElementById('body'); var a = tag.className; tag.classList.add('NewClass'); tag.classList.remove('Iambody'); console.log(tag); </script> </body> //执行结果: <body id="body" class="NewClass"> <div class="hehe"> <p>1</p>; <p>2</p> <p>3</p> </div> <div class="haha"> <a>4</a> <a>5</a> </div> <script> var tag = document.getElementById('body'); var a = tag.className; tag.classList.add('NewClass'); tag.classList.remove('Iambody'); console.log(tag); </script> </body>
3)属性
//获取属性: getAttribute(属性名) //设置属性: setAttribute(属性名) //移除属性: removeAttribute(属性名) //全选,反选,取消的时候用: tb.checked = true || flase; PS: 不要和上述的几个属性混搭,否则会出bug;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="CheckAll();"/> <input type="button" value="取消" onclick="Cancel();"/> <input type="button" value="反选" onclick="Reverse();"/> <table border="1px"> <thead> <tr> <th>序号</th> <th>巴拉</th> <th>PIUPIU</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox"/></td> <td>22</td> <td>33</td> </tr> <tr> <td><input type="checkbox"/></td> <td>22</td> <td>33</td> </tr> <tr> <td><input type="checkbox"/></td> <td>22</td> <td>33</td> </tr> <tr> <td><input type="checkbox"/></td> <td>22</td> <td>33</td> </tr> <tr> <td><input type="checkbox"/></td> <td>22</td> <td>33</td> </tr> <tr> <td><input type="checkbox"/></td> <td>22</td> <td>33</td> </tr> </tbody> <script> function CheckAll(){ //先找到表格内容 var tb = document.getElementById('tb'); var tr = tb.children; console.log(tr); //而后循环 for(i=0;i<tr.length;i++){ //console.log(tr[i].firstElementChild.firstElementChild); ck = tr[i].firstElementChild.firstElementChild; //ck.setAttribute('checked','checked'); //也可以使用 ck.checked = true; } } function Cancel(){ //先找到表格内容 var tb = document.getElementById('tb'); var tr = tb.children; console.log(tr); //而后循环 for(i=0;i<tr.length;i++){ //console.log(tr[i].firstElementChild.firstElementChild); ck = tr[i].firstElementChild.firstElementChild; //ck.removeAttribute('checked'); //也可以使用 ck.checked = false; } } function Reverse(){ //先找到表格内容 var tb = document.getElementById('tb'); var tr = tb.children; console.log(tr); //而后循环 for(i=0;i<tr.length;i++){ //console.log(tr[i].firstElementChild.firstElementChild); ck = tr[i].firstElementChild.firstElementChild; //console.log(ck.checked); if(ck.checked){ ck.checked=false; }else{ ck.checked=true; } //也可以使用ck.checked = true; } } </script> </table> </body> </html>
4)实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="i1" value="请输入关键字" onfocus="Focus();" onblur="Blur();" /> <input id="i2" type="text" value="提交"/> <script type="text/javascript"> //捕捉焦点 function Focus(){ var tag = document.getElementById("i1"); if(tag.value == '请输入关键字'){ tag.value = ''; console.log('focus'); } } //失去焦点时的函数操作 function Blur(){ var tag = document.getElementById("i1"); var va = tag.value.trim(); if(va.length == 0){ tag.value = '请输入关键字'; console.log('blur'); } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .item{ position: relative; padding: 30px; } /*.item span{*/ /*position: absolute;*/ /*top: 30px;*/ /*left: 52px;*/ /*opacity: 1;*/ /*}*/ </style> </head> <body> <div class="item"> <a onclick="Favor(this);">赞1</a> </div> <div class="item"> <a onclick="Favor(this);">赞2</a> </div> <div class="item"> <a onclick="Favor(this);">赞3</a> </div> <script> function Favor(ths){ //ths==> 形参this, ==> 谁触发事件就是谁 console.log(ths); //添加span标签 var position = 'absolute'; var top = 30; var left = 52; var opacity= 1; var fontSize = 10; var tag = document.createElement('span'); //+1内容 tag.innerText = '+1'; tag.top = top + "px"; tag.left = left + "px"; tag.opacity = opacity; tag.fontSize = fontSize + "px"; tag.position = position; //获取父标签,追加tag ths.parentElement.appendChild(tag); //创建定时器 var interval = setInterval(function () { top -= 10; left += 10; opacity -= 0.1; fontSize += 5; //重新赋值 tag.style.top = top + "px"; tag.style.left = left + "px"; tag.style.opacity = opacity; tag.style.fontSize = fontSize + "px"; tag.style.position = position; if(opacity == 0){ //移除定时器 clearInterval(interval); //移除+1标签 ths.parentElement.removeChild(tag); } },50); } </script> </body> </html>
计时器: setInterval(funcation(){ },50) clearInterval() 定时器: setTimeout() clearTimeout() 创建标签, 定时器(大小,位置,透明度) 1. this , 特殊的形参--》 触发事件的标签 2. createElement 3. appendChild 4. setInterval创建定时器 clearInterval删除定时器 5. removeChild
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none !important; } .shadow{ position: fixed; top:0; bottom: 0; left:0; right: 0; background-color: rgba(0,0,0,.6); z-index:100; } .modal{ background-color: aliceblue; height: 200px; 400px; position: fixed; left:50%; top:50%; margin-left: -200px; margin-top: -100px; z-index: 101; } </style> </head> <body> <div style="height: 2000px; background-color: #dddddd; margin: 0"> <input type="button" value="点我呀,点我呀!" onclick="ShowModal();"/> </div> <div id="shadow" class="shadow hide"></div> <div id="modal" class="modal hide"> <!--如果a标签什么都不做的话,就是用下面的语法javascript:void(0);来做占位符,类似于Python中的pass;--> <a href="javascript:void(0);" onclick="HideModal();">取消</a> </div> <script> function ShowModal(){ var t1 = document.getElementById('shadow'); var t2 = document.getElementById('modal'); t1.classList.remove('hide') t2.classList.remove('hide') } function HideModal(){ var t1 = document.getElementById('shadow'); var t2 = document.getElementById('modal'); t1.classList.add('hide') t2.classList.add('hide') } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .backtop{ position: fixed; right: 20px; bottom:20px; color:red; } .hide{ display: none; } </style> </head> <!--返回顶部实例--> <body onscroll="BodyScroll();"> <div style="height: 2000px;background-color: #dddddd"></div> <div id="back" class="backtop hide" onclick="BackTop();">返回顶部</div> <script> function BackTop(){ document.body.scrollTop = 0; //直接返回顶部 } function BodyScroll(){ console.log('heihei'); var tag = document.getElementById('back'); var s = document.body.scrollTop; if(s >= 100){ //距离顶部大于100像素的时候显示, 显示时只要移除hide样式即可 tag.classList.remove('hide'); }else{ tag.classList.add('hide'); } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="status" style="color:red;"></div> <input type="button" onclick="DeleteEmail();" value="删除所选邮件"/> <script> function DeleteEmail(){ var tag = document.getElementById('status'); tag.innerText="删除成功"; setTimeout(function(){ tag.innerText = ''; },5000) } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <!--检验用户输入是否合法--> <body> <form action="http://www.baidu.com/"> <input type="text" id="username"> <input type="submit" value="提交" onclick="return SubmitForm();"/> <!--onclick中的return意义在于, 如果执行函数返回值是true的话,继续执行,如果为False的话,会中断执行,不再往后继续--> </form> <script> function SubmitForm(){ var user = document.getElementById('username'); if(user.value.length > 0){ //可以提交 return true; }else{ //输入为空,不能提交 alert('用户输入用户名不能为空!'); return false; } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ 200px; height: 600px; border: 1px solid #dddddd; overflow: auto; } .menu .item .title{ height: 40px; line-height: 40px; background-color: #2459a2; color: white; } </style> </head> <body> <div class="menu"> <div class="item"> <div class="title" onclick="ShowMenu(this);">菜单一</div> <div class="body"> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> </div> </div> <div class="item"> <div class="title" onclick="ShowMenu(this);">菜单二</div> <div class="body hide"> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> </div> </div> <div class="item"> <div class="title" onclick="ShowMenu(this);">菜单三</div> <div class="body hide"> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> </div> </div> </div> <script src="plugin/jquery-1.12.4.js"></script> <script> function ShowMenu(ths){ //将Dom转换为JQuery --> $(ths) //先找到下一个标签,移除hide $(ths).next().removeClass('hide'); //找到父标签,再找到父标签的兄弟标签,而后找所有父标签中的子子孙孙中查找body,添加hide $(ths).parent().siblings().find('.body').addClass('hide'); } </script> </body> </html>
5)标签操作
创建标签
// 方式一, 对象方式创建,也是推荐的方式 var tag = document.createElement('a'); tag.innerText = "Tom"; tag.className = "c1"; tag.href = "http://www.cnblogs.com/dbq"; // 方式二 var tag = "<a class='c1' href='http://www.cnblogs.com/dbq'>Tom</a>";
操作标签
<div id ='pa'>piupiupiu</div> <script> var p = document.getElementById('pa'); var obj = "<input type='text' />"; p.insertAdjacentHTML('beforeEnd',obj); p.insertAdjacentElement('afterBegin',document.createElement('p')); </script> //注意:第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' //执行结果: <div id="pa"><p></p>piupiupiu<input type="text"></div> //方式二: <div id ='pa'>piupiupiu</div> <script> var p = document.getElementById('pa'); var tag = document.createElement('a'); p.appendChild(tag); p.insertBefore(tag,p[1]); </script> //执行结果 <div id="pa">piupiupiu<a></a></div>
6) 样式操作
<div id="hehe">hehehe</div> <script> var tag = document.getElementById('hehe'); tag.style.fontSize = '30px'; tag.style.color = 'green'; </script>
7) 位置操作
总文档高度 document.documentElement.offsetHeight 当前文档占屏幕高度 document.documentElement.clientHeight 自身高度 tag.offsetHeight 距离上级定位高度 tag.offsetTop 父定位标签 tag.offsetParent 滚动高度 tag.scrollTop /* clientHeight -> 可见区域:height + padding clientTop -> border高度 offsetHeight -> 可见区域:height + padding + border offsetTop -> 上级定位标签的高度 scrollHeight -> 全文高:height + padding scrollTop -> 滚动高度 特别的: document.documentElement代指文档根节点 */
8) 提交表单
<input id='form' type="text" /> <script> document.getElementById('form').submit(); </script>
9) 其他操作
console.log 输出框 alert 弹出框 confirm 确认框 // URL和刷新 location.href 获取URL location.href = "url" 重定向 location.reload() 重新加载 // 定时器 setInterval 多次定时器 clearInterval 清除多次定时器 setTimeout 单次定时器 clearTimeout 清除单次定时器
10) 事件,非常重要
属性 | 当以下情况发生时,出现此事件 | FF | N | IE |
---|---|---|---|---|
onabort | 图像加载被中断 | 1 | 3 | 4 |
onblur | 元素失去焦点 | 1 | 2 | 3 |
onchange | 用户改变域的内容 | 1 | 2 | 3 |
onclick | 鼠标点击某个对象 | 1 | 2 | 3 |
ondblclick | 鼠标双击某个对象 | 1 | 4 | 4 |
onerror | 当加载文档或图像时发生某个错误 | 1 | 3 | 4 |
onfocus | 元素获得焦点 | 1 | 2 | 3 |
onkeydown | 某个键盘的键被按下 | 1 | 4 | 3 |
onkeypress | 某个键盘的键被按下或按住 | 1 | 4 | 3 |
onkeyup | 某个键盘的键被松开 | 1 | 4 | 3 |
onload | 某个页面或图像被完成加载 | 1 | 2 | 3 |
onmousedown | 某个鼠标按键被按下 | 1 | 4 | 4 |
onmousemove | 鼠标被移动 | 1 | 6 | 3 |
onmouseout | 鼠标从某元素移开 | 1 | 4 | 4 |
onmouseover | 鼠标被移到某元素之上 | 1 | 2 | 3 |
onmouseup | 某个鼠标按键被松开 | 1 | 4 | 4 |
onreset | 重置按钮被点击 | 1 | 3 | 4 |
onresize | 窗口或框架被调整尺寸 | 1 | 4 | 4 |
onselect | 文本被选定 | 1 | 2 | 3 |
onsubmit | 提交按钮被点击 | 1 | 2 | 3 |
onunload | 用户退出页面 | 1 | 2 | 3 |
对于事件需要注意的要点:
- this
- event
- 事件链以及跳出
this标签当前正在操作的标签,event封装了当前事件的内容。
实例:
<!DOCTYPE html> <html> <head> <meta charset='utf-8' > <title>拥有时不知珍惜,失去时方觉可惜。——请珍惜每一滴水。 </title> <script type='text/javascript'> function Go(){ var content = document.title; var firstChar = content.charAt(0) var sub = content.substring(1,content.length) document.title = sub + firstChar; } setInterval('Go()',1000); </script> </head> <body> </body> </html>
onfocus, 获取焦点, 等于一个函数,就是捕捉 onblur, 离开焦点 onclick, 点击 1. this, 当前触发事件的标签 2. 全局事件绑定, windows.onKeyDown = funcation(); 3. event, 特殊参数,包含了事件的相关的内容 4. 默认事件 比如a标签默认动作,跳转 比如submit默认动作,提交 优先级: 自定义优先级比默认优先级高,如:a、submit标签 checkbox的是默认事件先执行,自定义事件后执行 <input type="submit" value="提交" onclick="return SubmitForm();"/> <!--onclick中的return意义在于, 如果执行函数返回值是true的话,继续执行,如果为False的话,会中断执行,不再往后继续-->
PS: 如果a标签什么都不做的话,就是用下面的语法javascript:void(0);来做占位符,类似于Python中的pass;
jQuery
jQuery是一个类库(Python中的叫做模块),jQuery能帮助我们在文档中找到关心的元素,并且对这些元素进行操作:添加内容、编辑HTML属性和CSS属性、定义事件处理程序,以及执行动画。还拥有Ajax工具来动态发起HTTP请求,以及一些通用的工具函数来操作对象和数组。
jQuery基础:
jQuery蒂尼了一个全局函数:jQuery(),在类库的使用中,还有一个快捷别名: $ ,这是唯一的两个变量。
var divs = $("div") //返回0个或多个DOM元素,这就是jQuery对象。
版本:
- 1.12.. --> ..
- 2.x --- IE9已不再支持,so,建议使用1.12
查找
选择器
- 基本选择器
- #id id选择器
- element 标签选择器
- .class 类选择器
- * 所有
- #i1,#i2,#i3 组合选择器
层级选择器:
- 中间有空格, 层级选择器 #i1 .c1就是从 #i1中的的子子孙孙中找
- > 从儿子中找
- +next 下一个
- ~sibilant 兄弟中找
操作:
CSS
属性的操作
- html()
- text()
- val()
文本的操作
事件
底层一样,但是在此基础上JQuery还做了优化
1. 如何使用JQuery绑定
2. 当文档加载完毕后,自动执行! ###重要!
$(function(){ ... })
3. 延迟绑定:
$("ul").delegate("l1","click",funcation(){
...
})
现增加,现绑定
PS: 一定要先找到父标签,ul,相当于选择器
4. return false; 后面也就不提交了,和Dom里一样;
扩展:
- $.xxx来执行, 如 $.login
- form表单验证
Ajax:
AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术),指的是一套综合了多项技术的浏览器端网页开发技术。Ajax的概念由杰西·詹姆士·贾瑞特所提出
大白话:偷偷发请求
执行JQuery:
- JQuery.xxx
- $.xxx
JQuery的循环
.each()
参考:
http://www.cnblogs.com/wupeiqi/articles/5643298.html