DOM
JQuery是把DOM和JavaScript的功能封装了的模块，可以获取到网页元素并操作元素。
没有JQuery仅用DOM也能实现功能，但是需要考虑的就多了，如下例：
DOM的document.getElementById('i1'); 等价于 JQuery的$('#i1')，可见JQuery简化了。 #几乎所有的运维开发都能用JQuery，哪种情况不用JQuery呢，开发app的时候，app好多使用移动流量的，向服务器请求JQuery是会产生流量的，为了节省用户流量，app不会使用JQuery。
DOM存在浏览器兼容性问题，在chrome和firefox上没事，在IE上可能有问题，JQuery的出现也变相了解决了DOM兼容问题，你只需要用JQuery即可，不会产生浏览器不兼容的情况。
无特殊要求的话，用JQuery1.12及以上的版本，但不要用2.X的版本，因为从2.X开始就不支持IE9及以下的浏览器了，所以1.X的兼容性更好。
1.DOM介绍及应用
虽然做运维开发的话，几乎是用JQuery而不是DOM，但也要了解一下。
1.1 查找元素
直接查找：
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
间接查找：
parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
1.2 操作
1.2.1 内容
innerText 文本
outerText
innerHTML HTML内容
innerHTML
value 值
1.2.2 属性
attributes // 获取所有标签属性 setAttribute(key,value) // 设置标签属性 getAttribute(key) // 获取指定标签属性 removeAttribute(key) //删除指定标签属性
1.2.3 class操作
className // 获取所有类名 classList.remove(cls) // 删除指定类 classList.add(cls) // 添加类
1.2.4 标签操作
a. 创建标签
// 方式一 var tag = document.createElement('a') tag.innerText = "wupeiqi" tag.className = "c1" tag.href = "http://www.cnblogs.com/wupeiqi" // 方式二 var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"
b.操作标签
// 方式一 var obj = "<input type='text' />"; xxx.insertAdjacentHTML("beforeEnd",obj); xxx.insertAdjacentElement('afterBegin',document.createElement('p')) //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' // 方式二 var tag = document.createElement('a') xxx.appendChild(tag) xxx.insertBefore(tag,xxx[1])
1.2.5 样式操作
var obj = document.getElementById('i1') obj.style.fontSize = "32px"; obj.style.backgroundColor = "red";
1.2.6 实现输入框的鼠标点击事件
鼠标点击文本框，“请输入关键字”消失。
<body>
<input id="i1" type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur();" />
<input id="i2" type="text" value="text2" />
<script type="text/javascript">
function Focus(){
var tag = document.getElementById('i1');
if(tag.value.trim() == "请输入关键字"){
tag.value = "";
}
}
function Blur(){
var tag = document.getElementById('i1');
if(tag.value.trim().length == 0){
tag.value = "请输入关键字";
}
}
</script>
</body>
1.2.7 点击按钮后弹出对话框
<!DOCTYPE html> <html lang="en"> <head> <title>fazhan</title> <meta charset="UTF-8" /> <style> body{ margin:0; } .beijing{ height:2000px; background-color:green; } .hide{ display:none !important } .shade{ # 为保证这个阴影层能覆盖页面所有，所以定义了position:fixed，上下左右都是0。 position:fixed; top:0; bottom:0; left:0; right:0; background-color:rgba(0,0,0,.6); z-index:9; } .kong{ width:400px; height:200px; background-color:white; position:fixed; top:50%; left:50%; margin-left:-200px; margin-top:-100px; z-index:10; } </style> </head> <body> <div class="beijing"> <input id="anniu" type="button" value="点我" onclick="Click();"> </div> <div id="shade" class="shade hide"> </div> <div id="kong" class="kong hide"> //javascript:void(0);点击a标签时什么也不做。 <a href="javascript:void(0);" onclick="canClick();">取消</a> </div> <script type="text/javascript"> function Click(){ var t1 = document.getElementById('shade'); var t2 = document.getElementById('kong'); // 移除获取到的标签的class的hide值。 t1.classList.remove('hide'); t2.classList.remove('hide'); } function canClick(){ var t1 = document.getElementById('shade'); var t2 = document.getElementById('kong'); // 获取到的标签的class的值，添加hide。 t1.classList.add('hide'); t2.classList.add('hide'); } </script> </body> </html>
1.2.8 多选框的全选反选
<body>
<input type="button" value="全选" onclick="CheckAll()" />
<input type="button" value="取消" onclick="CheckCancel()" />
<input type="button" value="反选" onclick="CheckReverse()" />
<table>
<thead>
<tr>
<td>选择</td>
<td>用户列表</td>
<td>密码列表</td>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" id="c1" /></td>
<td>用户1</td>
<td>密码1</td>
</tr>
<tr>
<td><input type="checkbox" id="c2" /></td>
<td>用户2</td>
<td>密码2</td>
</tr>
<tr>
<td><input type="checkbox" id="c3" /></td>
<td>用户3</td>
<td>密码3</td>
</tr>
</tbody>
</table>
<script>
function CheckAll(){
var tag = document.getElementById('tb');
var trs = tag.children;
for(i=0;i<trs.length;i++){
trs[i].firstElementChild.firstElementChild.setAttribute('checked','checked');
}
}
function CheckCancel(){
var tag = document.getElementById('tb');
var trs = tag.children;
for(i=0;i<trs.length;i++){
trs[i].firstElementChild.firstElementChild.removeAttribute('checked');
}
}
function CheckReverse(){
var tag = document.getElementById('tb');
var trs = tag.children;
for(i=0;i<trs.length;i++){
var ck = trs[i].firstElementChild.firstElementChild;
if(ck.getAttribute('checked') == 'checked'){
ck.removeAttribute('checked');
}else{
ck.setAttribute('checked','checked');
}
}
}
</script>
</body>
上面的代码，是通过检测getAttribute('checked')是否有值来进行反选的，全选和取消也是通过获取属性来判断的，但是有个问题，通过这种方式全选，达到了在视觉上的选择，但是代码里并没有增加'checked'='checked'内容，所以对于已勾选的项目，它的ck.getAttribute('checked')也是null，因为代码里没有'checked'='checked'。所以下面的方法是通过obj.checked来判断的，更准确。
注：以后实现该功能尽量用obj.checked的方式，千万不要getAttribute和obj.checked混着用，肯定会出问题。
<body>
<input type="button" value="全选" onclick="CheckAll()" />
<input type="button" value="取消" onclick="CheckCancel()" />
<input type="button" value="反选" onclick="CheckReverse()" />
<table>
<thead>
<tr>
<td>选择</td>
<td>用户列表</td>
<td>密码列表</td>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" id="c1" /></td>
<td>用户1</td>
<td>密码1</td>
</tr>
<tr>
<td><input type="checkbox" id="c2" /></td>
<td>用户2</td>
<td>密码2</td>
</tr>
<tr>
<td><input type="checkbox" id="c3" /></td>
<td>用户3</td>
<td>密码3</td>
</tr>
</tbody>
</table>
<script>
function CheckAll(){
var tag = document.getElementById('tb');
var trs = tag.children;
for(i=0;i<trs.length;i++){
trs[i].firstElementChild.firstElementChild.checked = true;
}
}
function CheckCancel(){
var tag = document.getElementById('tb');
var trs = tag.children;
for(i=0;i<trs.length;i++){
trs[i].firstElementChild.firstElementChild.checked = false;
}
}
function CheckReverse(){
var tag = document.getElementById('tb');
var trs = tag.children;
for(i=0;i<trs.length;i++){
var ck = trs[i].firstElementChild.firstElementChild;
if(ck.checked){
ck.checked = false;
}else{
ck.checked = true;
}
}
}
</script>
</body>
1.2.9 点赞的特殊效果
<!DOCTYPE html> <html lang="en"> <head> <title>fazhan</title> <meta charset="UTF-8" /> <style> .item{ padding:50px; position:relative; } .item span{ position:absolute; top: 45px; left: 70px; opacity:1; font-size:15px; } </style> </head> <body> <div class="item"> #this指的是当前触发事件的标签 <a id="zan" onclick="zanClick(this)">1赞</a> </div> <div class="item"> <a id="zan" onclick="zanClick(this)">2赞</a> </div> <div class="item"> <a id="zan" onclick="zanClick(this)">3赞</a> </div> <div class="item"> <a id="zan" onclick="zanClick(this)">4赞</a> </div> <script> function zanClick(ths){ var top = 49; var left = 70; var op = 0.6; var fontSize = 18; var tag = document.createElement('span'); tag.innerText = '+1'; tag.style.position = 'absolute'; tag.style.top = top + 'px'; tag.style.left = left + 'px'; tag.style.op = op; tag.style.fontSize = fontSize + 'px'; ths.parentElement.appendChild(tag); //setInterval会返回一个值，这个值就是当前的定时器。 var interval = setInterval(function(){ top -= 10; left += 10; fontSize += 5; op -= 0.1; tag.style.top = top + 'px'; tag.style.left = left + 'px'; tag.style.op = op; tag.style.fontSize = fontSize + 'px'; if(op <= 0.2){ clearInterval(interval); ths.parentElement.removeChild(tag); } },1000); } </script> </body> </html>
总结：
this，当前触发事件的标签
createElement，创建标签
parentElement，获取父标签
appendChild，给标签添加子元素
removeChild，移除子元素
setInterval，设置定时器
clearInterval，删除定时器
1.2.10 页面输出、定时器、重定向
console.log 输出框 alert 弹出框 confirm 确认框 // URL和刷新 location.href 获取URL location.href = "url" 重定向 location.reload() 重新加载 // 定时器 setInterval 多次定时器 clearInterval 清除多次定时器 setTimeout 单次定时器 clearTimeout 清除单次定时器
confirm:
用户选择了确定就返回true，选择了取消就返回false。
setInterval：
<!DOCTYPE html> <html lang="en"> <head> <title>fazhan</title> <meta charset="UTF-8" /> <style> </style> </head> <body> <div id="status" style="color:red;"> </div> <input type="button" value="delete" onclick="DeleteFunc()"> <script> function DeleteFunc(){ var s = document.getElementById('status'); //给标签添加内容，过3秒后自动删除。 s.innerText = '删除成功'; setTimeout(function(){ s.innerText = ''; },3000) } </script> </body> </html>
1.2.11 返回顶部
<!DOCTYPE html> <html lang="en"> <head> <title>fazhan</title> <meta charset="UTF-8" /> <style> .sspan{ position:fixed; right:10px; bottom:10px; color:red; } .hide{ display:none !important; } </style> </head> # 没滚动一下滑轮，就触发一次方法，检测是否达到了一定高度，到了一定高度才显示“返回顶部” <body onscroll="CheckScroll()"> <div style="height:2000px;background-color:#dddddd;"> </div> <span class="sspan hide" id="fanhui" onclick="FanhuiFunc()">返回顶部<span> <script> function CheckScroll(){ var top = document.body.scrollTop; var t = document.getElementById('fanhui'); if(top >= 100){ t.classList.remove('hide'); }else{ t.classList.add('hide'); } } function FanhuiFunc(){ #document.body.scrollTop是获取当前窗口的滚动高度，设置为0表示回到顶部。 document.body.scrollTop = 0; } </script> </body> </html>
1.2.12 利用JS和DOM提交表单
document.geElementById('form').submit() #例子： <body> <form id="f1"> <input type="text" /> <a onclick="Submit()">提交</a> </form> <script> function Submit(){ var form = document.getElementById('f1'); form.submit(); } </script> </body>
1.3 事件
对于事件需要注意的要点：
- this
- event
- 事件链以及跳出
this标签当前正在操作的标签，event封装了当前事件的内容。
onkeydown:
<body>
<script>
window.onkeydown = function(event){
console.log(event);
}
</script>
</body>
在页面中嵌入了上面的代码，则随便按下一个键盘，在chrome的console里就会出来关于event的信息，包含按下的键对应的ASCII码，如ESC是“keyCode:27；key:Escape”，可以可以根据keyCode来判断用户输入了哪个键。
<head>
<title>fazhan</title>
<meta charset="UTF-8" />
<style>
.hide{
display:none !important;
}
</style>
</head>
<body>
<div>
<span id="span1" class="hide">123</span>
</div>
<script>
function f1(){
var tag = document.getElementById('span1');
tag.classList.remove('hide');
}
#当用户按下ESC后，页面显示123。
window.onkeydown = function(event){
if(event.keyCode == 27){
f1();
}
}
</script>
</body>
1.4 默认事件和自定义事件的优先级
1.4.1 a标签的默认事件是跳转、submit标签的默认事件是提交
<body>
<div>
<a href="https://www.baidu.com" onclick="f1()">点击</a>
<input type="submit" onclick="f1()" value="提交"/>
</div>
<script>
function f1(){
alert('123');
}
</script>
</body>
点了“点击”后，先弹出123框，点了确定后才跳转到www.baidu.com或者才提交表单，意思是自定义事件的优先级高于a标签和submit标签的默认事件。
1.4.2 checkbox标签的默认事件
<body>
<div>
<input type="checkbox" onclick="f1()" />
</div>
<script>
function f1(){
alert('123');
}
</script>
</body>
点了checkbox框后，先勾选的框，再弹出的123，所以checkbox的默认事件优先级高于自定义事件。
讲这个的作用：注册网站时，如果什么都没写，直接点提交，应该是先在本地检查输入内容合法性（自定义js），如果合法了才会提交表单，所以如果自定义了检验代码合法性的事件，就可以做到输入内容不合法就终止，合法了才提交。
