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{ 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),如果合法了才会提交表单,所以如果自定义了检验代码合法性的事件,就可以做到输入内容不合法就终止,合法了才提交。