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

相关阅读:
自定义函数
 内置函数
 炸裂函数explode
-bash:ls:command not found，执行命令总是报找不到
 函数
 C#的lock用法
 获取客户端Ip地址方法
 Grunt基础
 常用Sql
HandleBars
原文地址：https://www.cnblogs.com/fuckily/p/6109626.html