• DOM、BOM 操作超级集合


    本章内容:

    • 定义
    • 节点类型
    • 节点关系
    •  选择器
    • 样式操作方法style
    • 表格操作方法
    • 表单操作方法
    • 元素节点ELEMENT
    • 属性节点attributes
    • 文本节点TEXT
    • 文档节点 Document
    • 位置操作方法
    • 定时器
    • 弹出框
    • location
    • 其它
    • 事件操作
    • 实例

    定义

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。

    节点类型

     12中节点类型都有NodeType属性来表明节点类型

    节点类型描述
    1 Element 代表元素
    2 Attr 代表属性
    3 Text 代表元素或属性中的文本内容。
    4 CDATASection 代表文档中的 CDATA 部分(不会由解析器解析的文本)。
    5 EntityReference 代表实体引用。
    6 Entity 代表实体。
    7 ProcessingInstruction 代表处理指令。
    8 Comment 代表注释。
    9 Document 代表整个文档(DOM 树的根节点)。
    10 DocumentType 向为文档定义的实体提供接口
    11 DocumentFragment 代表轻量级的 Document 对象,能够容纳文档的某个部分
    12 Notation 代表 DTD 中声明的符号。

    节点关系

    nodeType 返回节点类型的数字值(1~12)
    nodeName 元素节点:标签名称(大写)、属性节点:属性名称、文本节点:#text、文档节点:#document
    nodeValue 文本节点:包含文本、属性节点:包含属性、元素节点和文档节点:null
    parentNode 父节点
    parentElement 父节点标签元素
    childNodes 所有子节点
    children 第一层子节点
    firstChild 第一个子节点,Node 对象形式
    firstElementChild 第一个子标签元素
    lastChild 最后一个子节点
    lastElementChild 最后一个子标签元素
    previousSibling 上一个兄弟节点
    previousElementSibling 上一个兄弟标签元素
    nextSibling 下一个兄弟节点
    nextElementSibling 下一个兄弟标签元素
    childElementCount 第一层子元素的个数(不包括文本节点和注释)
    ownerDocument 指向整个文档的文档节点
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="t">
            <span></span>
            <span id="s">
                <a></a>
                <h1>Nick</h1>
            </span>
            <p></p>
        </div>
        <script>
            var tT = document.getElementById("t");
            console.log(tT.nodeType,tT.nodeName,tT.nodeValue); //1 "DIV" null
            console.log(tT.parentNode); //<body>...</body>
            console.log(tT.childNodes); //[text, span, text, span#s, text, p, text]
            console.log(tT.children); //[span, span#s, p, s: span#s]
    
            var sT = document.getElementById("s");
            console.log(sT.previousSibling); //#text, Node 对象形式
            console.log(sT.previousElementSibling); //<span></span>
            console.log(sT.nextSibling); //#text
            console.log(sT.nextElementSibling); //<p></p>
            console.log(sT.firstChild); //#text
            console.log(sT.firstElementChild); //<a></a>
            console.log(sT.lastChild); //#text
            console.log(sT.lastElementChild); //<h1>Nick</h1>
    
            console.log(tT.childElementCount); //3
            console.log(tT.ownerDocument); //#document
    
        </script>
    </body>
    </html>
    View Code

    节点关系方法:

    hasChildNodes()  包含一个或多个节点时返回true

    contains()  如果是后代节点返回true

    isSameNode()、isEqualNode()  传入节点与引用节点的引用为同一个对象返回true

    compareDocumentPostion()  确定节点之间的各种关系

    数值     关系 
    1      给定节点不在当前文档中
    2      给定节点位于参考节点之前
    4      给定节点位于参考节点之后
    8      给定节点包含参考节点
    16    给定节点被参考节点包含
    compareDocumentPostion() 节点对应关系
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="t">
            <span></span>
            <span id="s">
                <a></a>
                <h1>Nick</h1>
            </span>
            <p></p>
        </div>
        <script>
            var tT = document.getElementById("t");
            var sT = document.getElementById("s");
    
    
            console.log(tT.hasChildNodes()); //true
            console.log(tT.contains(document.getElementById('s'))); //true
            console.log(tT.compareDocumentPosition(document.getElementById('s'))); //20,因为s被tT包含,所以为16;而又在tT之后,所以为4,两者相加为20.
            console.log(tT.isSameNode(document.getElementById('t'))); //true
            console.log(tT.isEqualNode(document.getElementById('t'))); //true
            console.log(tT.isSameNode(document.getElementById('s'))); //false
        </script>
    </body>
    </html>
    View Code

    选择器

    getElementById()

    一个参数:元素标签的ID
    getElementsByTagName() 一个参数:元素标签名
    getElementsByName() 一个参数:name属性名
    getElementsByClassName() 一个参数:包含一个或多个类名的字符串

    classList

    返回所有类名的数组

    • add (添加)
    • contains (存在返回true,否则返回false)
    • remove(删除)
    • toggle(存在则删除,否则添加)
    querySelector() 接收CSS选择符,返回匹配到的第一个元素,没有则null
    querySelectorAll() 接收CSS选择符,返回一个数组,没有则返回[]
    <!--getElementById()-->
        <div id="t"></div>
        <script>
            var tT = document.getElementById('t');
            console.log(tT);
        </script>
    
    
    <!--getElementsByTagName()-->
        <div id="t">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <script>
            var tT = document.getElementsByTagName('div');
            console.log(tT); //[div#t, div, div, div, t: div#t]
            console.log(tT[0]); //<div id="t">...</div>
            console.log(tT.length); //4
        </script>
    
    
    <!--getElementsByName()-->
        <div name="nick"></div>
        <script>
            var tT = document.getElementsByName("nick");
            console.log(tT); //[div]
        </script>
    
    
    <!--getElementsByClassName()-->
        <div class="t">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <script>
            var tT = document.getElementsByClassName('t');
            console.log(tT); //[div.t]
            console.log(tT[0]); //<div id="t">...</div>
            console.log(tT.length); //1
        </script>
    
    
    <!--classList-->
        <div class="t t2 t3"></div>
        <script>
            var tT = document.getElementsByTagName('div')[0];
            tTList = tT.classList;
            console.log(tT); //<div class="t t2 t3"></div>
            console.log(tTList); //["t", "t2", "t3"]
            tTList.add("t5");
            console.log(tTList.contains("t5")); //true
            tTList.remove("t5");
            console.log(tTList.contains("t5")); //false
            tTList.toggle("t5");
            console.log(tTList.contains("t5")); //true
        </script>
    
    
    <!--querySelector()-->
        <div class="t t2 t3"></div>
        <div class="t" id="t"></div>
        <div name="nick"></div>
        <script>
            var tT = document.querySelector("div");
            console.log(tT); //<div class="t t2 t3"></div>
            var tI = document.querySelector("#t");
            console.log(tI); //<div class="t" id="t"></div>
            var tC = document.querySelector(".t");
            console.log(tC); //<div class="t t2 t3"></div>
            var tN = document.querySelector("[name]");
            console.log(tN); //<div name="nick"></div>
        </script>
    
    
    <!--querySelectorAll()-->
        <div class="t t2 t3"></div>
        <div class="t" id="t"></div>
        <div name="nick"></div>
        <script>
            var tT = document.querySelectorAll("div");
            console.log(tT); //[div.t.t2.t3, div#t.t, div]
            var tI = document.querySelectorAll("#t");
            console.log(tI); //[div#t.t]
            var tC = document.querySelectorAll(".t");
            console.log(tC); //[div.t.t2.t3, div#t.t]
            var tN = document.querySelectorAll("[name]");
            console.log(tN); //[div]
        </script>
    View Code

     

    样式操作方法style

    style.cssText 可对style中的代码进行读写
    style.item() 返回给定位置的CSS属性的名称
    style.length style代码块中参数个数
    style.getPropertyValue() 返回给定属性的字符串值
    style.getPropertyPriority() 检测给定属性是否设置了!important,设置了返回"important";否则返回空字符串
    style.removeProperty() 删除指定属性
    style.setProperty() 设置属性,可三个参数:设置属性名,设置属性值,是否设置为"important"(可不写或写"")
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="t" style="background-color: yellow;  100px; height: 100px">8</div>
    
        <script>
            var tT = document.getElementById("t");
            console.log(tT.style.cssText); // 100px; height: 100px; background-color: yellow;
            tT.style.cssText = "background-color: yellow;  200px; height: 200px"; //修改属性
            console.log(tT.style.cssText); // 200px; height: 200px; background-color: yellow;
            console.log(tT.style.item("0")); //background-color
            console.log(tT.style.length); //3
            console.log(tT.style.getPropertyValue("background-color")); //yellow
            console.log(tT.style.getPropertyPriority("background-color")); //空字符串
            console.log(tT.style.removeProperty("width")); //200px
            tT.style.setProperty("width","200px",""); //设置属性,第三个值为important优先值,可不写
            
        </script>
    </body>
    </html>
    View Code

    表格操作方法

    createTHead()

    创建<thead>元素,返回引用

    deleteTHead()

     删除<thead>元素

    createTBody()

    创建<tbody>元素,返回引用

    insertRow(0)

    插入<tr>元素,从0开始

    deleteRow(pos)

     删除指定位置的行

    insertCell(0)

    插入<td>元素,从0开始

    deleteCell(pos)

     删除指定位置的单元格

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script>
            var table = document.createElement("table");
            table.border = "1px";
            table.width = "150px";
    
            var theadt = table.createTHead();
            var tbody = table.createTBody();
    
            var trH0 = theadt.insertRow(0);
            trH0.insertCell(0).appendChild(document.createTextNode("姓名"));
            trH0.insertCell(1).appendChild(document.createTextNode("年龄"));
    
            var trB0 = tbody.insertRow(0);
            var trB1 = tbody.insertRow(1);
            trB0.insertCell(0).appendChild(document.createTextNode("nick"));
            trB0.insertCell(1).appendChild(document.createTextNode("18"));
            trB1.insertCell(0).appendChild(document.createTextNode("jenny"));
            trB1.insertCell(1).appendChild(document.createTextNode("21"));
    
            trB0.deleteCell(1);
    
            console.log(table);
            document.body.appendChild(table);
        </script>
    </body>
    </html>
    View Code

    表单操作方法

    document.forms

    获取所有表单

    .submit()

    提交表单
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="https://www.baidu.com/s" method="get">
            <input type="text" name="wd" />
            <input type="button" value="百度一下" onclick="this.disable=true;BaiDu(this);" />
        </form>
    
        <script>
            var form = document.forms;  //获取所有表单
            var formOne = form[0];
            console.log(form);
            console.log(formOne);
    
            function BaiDu(ths) {
                var inputBaiDu = ths;
                inputBaiDu.parentNode.submit();
            }
        </script>
    </body>
    </html>
    View Code

    元素节点ELEMENT

    nodeType:1

    nodeName 访问元素的标签名
    tagName 访问元素的标签名
    createElement() 创建节点
    appendChild() 末尾添加节点,并返回新增节点
    insertBefore() 参照节点之前插入节点,两个参数:要插入的节点和参照节点
    insertAfter() 参照节点之后插入节点,两个参数:要插入的节点和参照节点
    replaceChild() 替换节点,两个参数:要插入的节点和要替换的节点(被移除)
    removeChild() 移除节点
    cloneNode() 克隆,一个布尔值参数,true为深拷贝,false为浅拷贝
    importNode() 从文档中复制一个节点,两个参数:要复制的节点和布尔值(是否复制子节点)
    insertAdjacentHTML()

    插入文本,两个参数:插入的位置和要插入文本

    • "beforebegin",在该元素前插入
    • "afterbegin",在该元素第一个子元素前插入
    • "beforeend",在该元素最后一个子元素后面插入
    • "afterend",在该元素后插入
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="t">
            <span id="one"></span>
            <span id="s">
                <a></a>
                <h1>Nick</h1>
            </span>
            <p></p>
        </div>
        <script>
            var tT = document.getElementById("t");
    
            //appendChild()
            var a1New = document.createElement('a');
            tT.appendChild(a1New);
            console.log(tT.lastElementChild); //<a></a>
    
            //insertBefore()
            var a2New = document.createElement('a');
            a2New.className = 't'; //设置css样式
            a2New.id = 'oneNew';
            a2New.innerText = 'jenny'; //设置标签中间文本
            tT.insertBefore(a2New,document.getElementById('one'));
            console.log(tT.firstElementChild); //<a class="t">jenny</a>
    
            //replaceChild()
            var a3New = document.createElement('h3');
            tT.replaceChild(a3New,document.getElementById('oneNew'));
            console.log(tT.firstElementChild); //<h3></h3>
    
            //removeChild()
            tT.removeChild(tT.firstElementChild);
            console.log(tT.firstElementChild); //<span id="one"></span>
    
            //cloneNode()
            var clNo = tT.cloneNode(true);
            console.log(clNo); //<div id="t">...</div>
    
            //importNode()
            var imNoT = document.importNode(tT,true);
            console.log(imNoT.firstChild); //#text
            var imNoF = document.importNode(tT,false);
            console.log(imNoF.firstChild); //null
    
            //insertAdjacentHTML()
            tT.insertAdjacentText("beforebegin","beforebegin");
            tT.insertAdjacentText("afterbegin","afterbegin");
            tT.insertAdjacentText("beforeend","beforeend");
            tT.insertAdjacentText("afterend","afterend");
        </script>
    </body>
    </html>
    View Code
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>title</title>
    </head>
    <body>
        <div id="t" class="tClass" title="tTitle" lang="en" dir="ltr"></div>
    
        <script>
            var tN = document.getElementById("t");
            console.log(tN.nodeType); //1
            console.log(tN.tagName); //DIV
            console.log(tN.nodeName); //DIV
            console.log(tN.id); //t
            console.log(tN.title); //tTitle
            console.log(tN.lang); //en
            console.log(tN.dir); //ltr
            console.log(tN.className); //tClass
    
            var dirNew = document.createElement("div");
            dirNew.className = "tC";
            dirNew.innerText = "Nick";
            console.log(dirNew); //<div class="tC">Nick</div>
        </script>
    </body>
    </html>
    View Code

    属性节点attributes

    nodeType:2

    attributes

    获取所有标签属性
    getAttribute() 获取指定标签属性
    setAttribute() 设置指定标签属
    removeAttribute() 移除指定标签属

    var s = document.createAttribute("age")

    s.nodeValue = "18"

    创建age属性

    设置属性值为18

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="t" class="s1 s2" name="nick"></div>
    
        <script>
            var tT = document.getElementById("t");
    
            console.log(tT.attributes); //NamedNodeMap {0: id, 1: class, 2: name, length: 3}
            console.log(tT.attributes.id); //id="t"
            console.log(tT.attributes.class); //class="s1 s2"
    
            console.log(tT.attributes.getNamedItem("name")); //name="nick"
            console.log(tT.attributes.removeNamedItem("class")); //class="s1 s2"
            console.log(tT.attributes.getNamedItem("class")); //null
            var s = document.createAttribute("age"); //创建属性
            s.nodeValue = "18"; //设置属性值
            console.log(tT.attributes.setNamedItem(s));
            console.log(tT.attributes); //NamedNodeMap {0: id, 1: name, 2: age, length: 3}
            console.log(tT.attributes.item("1")); //name="nick"
        </script>
    </body>
    </html>
    View Code
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="t" class="s1 s2" name="nick"></div>
    
        <script>
            var tT = document.getElementById("t");
    
            console.log(tT.attributes); //NamedNodeMap {0: id, 1: class, 2: name, length: 3}
            console.log(tT.attributes.id); //id="t"
            console.log(tT.attributes.class); //class="s1 s2"
    
            console.log(tT.getAttribute("name")); //nick
            tT.setAttribute("age",18);
            console.log(tT.getAttribute("age")); //18
            tT.removeAttribute("age");
            console.log(tT.getAttribute("age")); //null
        </script>
    </body>
    </html>
    View Code

    文本节点TEXT

    nodeType:3

    innerText 所有的纯文本内容,包括子标签中的文本
    outerText 与innerText类似
    innerHTML 所有子节点(包括元素、注释和文本节点)
    outerHTML 返回自身节点与所有子节点
    textContent 与innerText类似,返回的内容带样式
    data 文本内容
    length 文本长度
    createTextNode() 创建文本
    normalize() 删除文本与文本之间的空白
    splitText() 分割
    appendData() 追加
    deleteData(offset,count) 从offset指定的位置开始删除count个字符
    insertData(offset,text) 在offset指定的位置插入text
    replaceData(offset,count,text) 替换,从offset开始到offscount处的文本被text替换
    substringData(offset,count) 提取从ffset开始到offscount处的文本
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="t">Nick</div>
    
        <script>
            var tT = document.getElementById("t");
            var tTOne = tT.firstChild;
            console.log(tTOne.nodeType); //3
    
            console.log(tTOne.data); //Nick
            console.log(tTOne.length); //4
    
            var tTNew = document.createTextNode("18");
            console.log(tTNew.nodeType,tTNew.data); //3 "18"
    
            tTOne.appendData("18");
            console.log(tTOne.data); //Nick18
            tTOne.deleteData(4,2);
            console.log(tTOne.data); //Nick
            tTOne.insertData(0,"jenny");
            console.log(tTOne.data); //jennyNick
            tTOne.replaceData(0,5,"18");
            console.log(tTOne.data); //18Nick
            var tTSub = tTOne.substringData(2,6);
            console.log(tTSub); //Nick
        </script>
    </body>
    </html>
    View Code
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="t">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    
        <script>
            var tT = document.getElementById("t");
            console.log(tT.innerText); //1、2、3
            console.log(tT.outerText); //1、2、3
            console.log(tT.innerHTML); //<div>1</div>、<div>2</div>、 <div>3</div>
            console.log(tT.outerHTML); //<div id="t">、<div>1</div>、<div>2</div>、<div>3</div>、</div>
            console.log(tT.textContent); //1、2、3(带样式)
        </script>
    </body>
    </html>
    View Code

    文档节点 Document

    nodeType:9

    document.documentElement 代表页面中的<html>元素
    document.body 代表页面中的<body>元素
    document.doctype 代表<!DOCTYPE>标签
    document.head 代表页面中的<head>元素
    document.title 代表<title>元素的文本,可修改
    document.URL 当前页面的URL地址
    document.domain 当前页面的域名
    document.charset 当前页面使用的字符集
    document.defaultView 返回当前 document对象所关联的 window 对象,没有返回 null
    document.anchors 文档中所有带name属性的<a>元素
    document.links 文档中所有带href属性的<a>元素
    document.forms 文档中所有的<form>元素
    document.images 文档中所有的<img>元素
    document.readyState 两个值:loading(正在加载文档)、complete(已经加载完文档)
    document.compatMode

    两个值:BackCompat:标准兼容模式关闭、CSS1Compat:标准兼容模式开启

    write()、writeln()、

    open()、close()

    write()文本原样输出到屏幕、writeln()输出后加换行符、

    open()清空内容并打开新文档、close()关闭当前文档,下次写是新文档

    位置操作方法

    document.documentElement.offsetHeight

    文档总高度

    document.documentElement.clientHeight

    文档占当前屏幕高度

    document.documentElement.clientWidth

    文档占当前屏幕宽度

    offsetHeight

    自身高度(height + padding + border)

    scrollHeight

    文档高度(height + padding)

    offsetTop

    距离上级标签定位高度(magin)

    clientTop

    border高度(border)

    offsetParent

    父级定位标签,元素

    scrollTop

    滚动高度

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .zg {
                height: 1000px;
                position: relative;
                border: 3px solid transparent;
            }
            .dg {
                height: 500px;
                padding-top: 10px;
                margin-top: 20px;
                border: 2px solid transparent;
            }
        </style>
    </head>
    
    <body onscroll="Scroll()">
        <div id="zg" class="zg">
            <div id="dg" class="dg">
    
            </div>
        </div>
    
        <script>
            var zg = document.documentElement.offsetHeight;
            console.log(zg); //1000、文档总高度
            var dg = document.documentElement.clientHeight;
            console.log(dg); //667,可变、文档占屏幕高度
    
            var dgBox = document.getElementById("dg");
            console.log(dgBox.offsetHeight); //514 (padding,border)、自身高度
            console.log(dgBox.scrollHeight); //510(padding)、文档高度
            console.log(dgBox.offsetTop);  //20 (magin)、距离上级定位高度
            console.log(dgBox.clientTop); //2(border)、border高度
            console.log(dgBox.offsetParent); //<div id="zg" class="zg">...</div>元素、父级定位标签
    
            function Scroll() {
                console.log(document.body.scrollTop); //滚动高度
            }
        </script>
    </body>
    </html>
    View Code

    定时器

    setInterval 多次定时器(毫秒计时)
    clearInterval 清除多次定时器
    setTimeout 单次定时器
    clearTimeout 清除单次定时器
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <input type="button" value="Interval" onclick="Interval();" />
        <input type="button" value="StopInterval" onclick="StopInterval();" />
        <script>
            function Interval() {
                s1 = setInterval(function () {
                    console.log(123);
                }, 1000);
                s2 = setInterval(function () {
                    console.log(456);
                }, 2000);
                console.log(1);
            }
            function StopInterval() {
                clearInterval(s1);
                clearInterval(s2);
            }
        </script>
    </body>
    </html>
    定时器示例

    弹出框

    alert() 弹出框
    confirm()

    确认框

    返回值:true、false

    prompt()

    输入框

    两个参数:提示的文本和输入的默认值,返回值:输入的值、""、null

    var result = prompt("What is your name?" ,"Nick");
    if(result != null){
        alert("welcome,"+result);    
    }
    console.log(result)
    prompt

    location

    location.href

    location.href = "url"

    获取URL

    重定向

    location.assign("http://www.cnblogs.com/suoning")

    重定向到URL

    location.search = "wd=suoning"

    修改查询字符串(百度搜索)

    location.hostname

    服务主机名,例:www.cnblogs.com

    location.pathname

    路径,例:suoning

    location.port

    端口号

    location.reload()

    重新加载

    其它

    navigator 包含有关浏览器的信息
    screen 包含有关客户端显示屏幕的信息
    history 包含用户(在浏览器窗口中)访问过的 URL
    window.print();

    显示打印对话框

    //后退一页
    history.go(-1)
    //前进一页
    history.go(1);
    //前进两页
    history.go(2);
    //无参数时,刷新当前页面
    history.go()
    
    //后退一页
    history.back()
    //前进一页
    history.forward()
    history 方法

    事件操作

    实例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <input type="text" placeholder="请输入内容" />
        <input type="text" class="style_before" value="请输入内容" onfocus="Focus(this)" onblur="Blur(this)" />
        <!--onfocus鼠标点进去事件、onblur鼠标点出去事件-->
    
        <script>
            function Focus(ths) {
                var th = ths;
                if (th.value == "请输入内容"){
                    ths.value = "";
                    ths.className = "style_after";
                }
    
            }
            function Blur(ths) {
                var th = ths;
                if (th.value == "请输入内容" || th.value.trim().length == 0){
                    ths.value = "请输入内容";
                    ths.className = "style_before";
                }
            }
            
        </script>
    </body>
    </html>
    
    搜索框
    搜索框
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="str_one" style="height: 150px; color: red; font-size: 50px; text-align: center; line-height: 150px"><b> &nbsp;瓜子花生款泉水,抽烟喝酒大保健&nbsp; </b></div>
    
        <script>
            setInterval( function () {
            str = document.getElementById("str_one");
            str_text = str.innerText;
    
            first_char = str_text[0];
            sub_char = str_text.slice(1,str_text.length);
            new_str = sub_char + first_char;
    
            str.innerText = new_str;
            },500);
        </script>
    </body>
    </html>
    跑马灯
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .style_before {
                color: lightgrey;
            }
            .style_after {
                color: black;
            }
        </style>
    </head>
    <body>
        <h3>爱好</h3>
        <div>
            <ul id="i1">
                <li><input type="checkbox" value="1">篮球</li>
                <li><input type="checkbox" value="2">足球</li>
                <li><input type="checkbox" value="3">乒乓球</li>
            </ul>
        </div>
        <button onclick="Cheakall()">全选</button>
        <button onclick="Cancleall()">取消全选</button>
        <button onclick="Reversall()">反选</button>
        <script>
            function Cheakall() {
                var i1 = document.getElementById("i1");
                var cheak = i1.getElementsByTagName("input");
                for (i=0;i<cheak.length;i++) {
                    cheak[i].checked = true;
                }
            }
            function Cancleall() {
                var i1 = document.getElementById("i1");
                var cheak = i1.getElementsByTagName("input");
                for (i=0;i<cheak.length;i++) {
                    cheak[i].checked = false;
                }
            }
            function Reversall() {
                var i1 = document.getElementById("i1");
                var cheak = i1.getElementsByTagName("input");
                for (i=0;i<cheak.length;i++) {
                    if (cheak[i].checked) {
                        cheak[i].checked = false;
                    }else {
                        cheak[i].checked = true;
                    }
                }
            }
        </script>
    </body>
    </html>
    全选、反选
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .hide {
                display: none;
            }
            .c1 {
                position: fixed;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background: rgba(0,0,0,.6);
                z-index: 2;
            }
            .c2 {
                position: fixed;
                 400px;
                height: 300px;
                top: 50%;
                left: 50%;
                z-index: 3;
                margin-top: -150px;
                margin-left: -200px;
                background-color: white;
                text-align: center;
                padding-top: 150px;
            }
        </style>
    </head>
    <body>
        <div><input type="button" value="登录" onclick="hihi()"></div>
        <div id="cc1" class="c1 hide"></div>
        <div id="cc2" class="c2 hide">
            <div>用户名:<input type="text"></div>
            <div>密 码:<input type="text"></div>
            <input type="button" value="确定">
            <input type="button" value="取消" onclick="hisl()">
        </div>
    
        <script>
            function hihi() {
                document.getElementById("cc1").classList.remove("hide");
                document.getElementById("cc2").classList.remove("hide");
            }
            function hisl() {
                document.getElementById("cc1").classList.add("hide");
                document.getElementById("cc2").classList.add("hide");
            }
        </script>
    </body>
    </html>
    模态对话框
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                margin: 0;
                background-color: #dddddd;
            }
            .w{
                margin: 0 auto;
                 980px;
            }
            .pg-header{
                background-color: black;
                color: white;
                height: 48px;
            }
            .pg-body .menu{
                position: absolute;
                left: 200px;
                 180px;
                background-color: white;
                float: left;
            }
            .pg-body .menu .active{
                background-color: #425a66;
                color: white;
            }
            .pg-body .fixed{
                position: fixed;
                top: 10px;
            }
            .pg-body .content{
                position: absolute;
                left: 385px;
                right: 200px;
                background-color: white;
                float: left;
            }
            .pg-body .content .item{
                height: 900px;
            }
        </style>
    
    </head>
    <body onscroll="Hua();">
        <div class="pg-header">
            <div class="w"></div>
        </div>
        <div class="pg-body">
            <div id="menu" class="menu">
                <ul>
                    <li>第一章</li>
                    <li>第二章</li>
                    <li>第三章</li>
                </ul>
            </div>
            <div id="content" class="content">
                <div class="item">床前明月管</div>
                <div class="item">疑是地上霜</div>
                <div class="item" style="height: 100px">我是郭德纲</div>
            </div>
        </div>
    
        <script>
            function Hua() {
                var xo = document.getElementById("menu");
                var huaGao = document.body.scrollTop;
                if (document.body.scrollTop>48){
                    xo.classList.add("fixed");
                }else {
                    xo.classList.remove("fixed");
                }
    
                var bod = document.body.offsetHeight;
                var conAbs = document.getElementsByClassName("content")[0].offsetHeight;
                var ck = document.documentElement.clientHeight;
    //            console.log((bod + conAbs) == (ck + huaGao));
                if ((bod + conAbs) == (ck + huaGao)) {
                    var lenLi = xo.getElementsByTagName("li");
                    for (var i=0;i<lenLi.length;i++){
                        if (i == lenLi.length - 1){
                            lenLi[i].className = "active";
                        }else {
                            lenLi[i].className = "";
                        }
                    }
                    return
                }
    
    
                var item = document.getElementById("content").children;
                for (var i=0;i<item.length;i++){
                    var currentItem = item[i];
                    var currentItemBodyTop = currentItem.offsetTop + currentItem.offsetParent.offsetTop;
                    var currentItemWindowTop = currentItemBodyTop - huaGao;
    
                    var currentHeight = currentItem.offsetHeight;
                    var bottomHeight = currentItemBodyTop + currentHeight;
    
                    var ziJi = xo.getElementsByTagName("li")[i];
                    if (currentItemWindowTop<0 && huaGao < bottomHeight){
                        ziJi.className = "active";
                    } else {
                        ziJi.className = "";
                    }
    
                }
            }
    
    
        </script>
    </body>
    </html>
    书签章节
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            ul{
                list-style: none;
                padding: 0;
                margin: 0;
            }
            ul li{
                float: left;
                background-color: #2459a2;
                color: white;
                padding: 8px 10px;
            }
            .clearfix:after{
                display: block;
                content: '.';
                height: 0;
                visibility: hidden;
                clear: both;
            }
            .hide{
                display: none;
            }
            .tab-menu .title{
                background-color: #dddddd;
            }
            .tab-menu .title .active{
                background-color: #0099dd;
                color: black;
            }
            .tab-menu .content{
                border: 1px solid #dddddd;
                min-height: 150px;
            }
            ul li:hover {
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div style=" 400px; margin: 0 auto;">
            <div class="tab-menu">
                <div class="title clearfix">
                    <ul>
                        <li target="h1" class="active" onclick="Show(this);">索尼</li>
                        <li target="h2" onclick="Show(this);">谷歌</li>
                        <li target="h3" onclick="Show(this);">腾讯</li>
                    </ul>
                </div>
                <div id="content" class="content">
                    <div con="h1">1...</div>
                    <div con="h2" class="hide">2...</div>
                    <div con="h3" class="hide">3...</div>
                </div>
            </div>
        </div>
    
        <script>
            function Show(ths) {
                var Showli = ths;
                var littarget = Showli.getAttribute("target");
                var liclass = Showli.parentNode.children;
                for (var i=0;i<liclass.length;i++) {
                    if (liclass[i].getAttribute("target") == littarget) {
                        liclass[i].classList.add("active");
                    }else {
                        liclass[i].classList.remove("active");
                    }
                }
                var liycontent = document.getElementById("content").children;
                for (var i=0;i<liycontent.length;i++) {
                    if (liycontent[i].getAttribute("con") == littarget) {
                        liycontent[i].className = "";
                    }else {
                        liycontent[i].className = "hide";
                    }
                }
            }
        </script>
    </body>
    </html>
    菜单
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .go-top {
                position: fixed;
                right: 28px;
                bottom: 19px;
                 38px;
                height: 40px;
                background-color: aliceblue;
            }
            .hide {
                display: none;
            }
        </style>
    </head>
    <body onscroll="Func();">
        <div style="height: 2000px"></div>
        <div id="i2" class="go-top hide">
            <a onclick="GoTop();">返回顶部</a>
        </div>
        <script>
            function Func() {
                var scrolltop = document.body.scrollTop;
                var ii = document.getElementById("i2");
                if (scrolltop>300) {
                    ii.classList.remove("hide");
                }else {
                    ii.classList.add("hide");
                }
            }
            function GoTop() {
                document.body.scrollTop = 0;
            }
        </script>
    </body>
    </html>
    返回顶部
  • 相关阅读:
    P2569 [SCOI2010]股票交易 dp 单调队列优化
    luogu P4516 [JSOI2018]潜入行动
    7.12 NOI模拟赛 积性函数求和 数论基础变换 莫比乌斯反演
    luogu P2607 [ZJOI2008]骑士 tarjan dp
    7.11 NOI模拟赛 graph 生成函数 dp 多项式
    luogu P1973 [NOI2011]NOI 嘉年华 dp
    HTML-01文档
    修改服务器为Root直接登录
    strust2--postman遇到的ognl问题
    python-13-函数
  • 原文地址:https://www.cnblogs.com/suoning/p/5656922.html
Copyright © 2020-2023  润新知