0417前端笔记——孤叹汝念之殇

一.时间函数

setTimsetTimeout(): 在指定的毫秒数后调用函数或计算表达式。

通过返回的标识也可以clearTimeout(id)来清除指定函数的执行。

eout(): 在指定的毫秒数后调用函数或计算表达式。

通过返回的标识也可以clearTimeout(id)来清除指定函数的执行。

2.方法：

重复执行定时器

            setInterval

            每隔多长时间执行一次函数,重复行

            setInterval(function(){

              },时间)

          延迟执行定时器

          setTimeout()

          延迟多长时间以后执行一次

          setTimeout(function(){

            ...要执行的代码..

          },时间)

          时间:毫秒数

二.history对象

1.初步理解

history 对象是历史对象。包含用户（在浏览器窗口中）访问过的 URL。history 对象是window 对象的一部分，可通过 window.history 属性对其进行访问。

history对象的属性：length，返回浏览器历史列表中的 URL 数量。

2.history对象的方法：

back()：加载history 列表中的前一个 URL。

forward()：加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个url。

go(number|URL): URL 参数使用的是要访问的 URL。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。go(-1)，到上一个页面。

3.例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>history03</title>

</head>

<body>

    <button id="btn1">回到上一个界面</button>

    <button id="btn2">回到上上一个界面</button>

    <script>

        var btn1=document.getElementById("btn1");

        var btn2=document.getElementById("btn2");

        btn1.onclick=function(){

            window.history.go(-1);

        };

        btn2.onclick=function(){

            window.history.go(-2);

        };

    </script>

</body>

</html>

三.location 对象

1.初步理解：

location 对象是window对象之一，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。也可通过window.location 属性来访问。

location 对象的属性href：设置或返回完整的 URL

2.location 对象的方法

reload()：重新加载当前文档。

replace()：用新的文档替换当前文档。

3.例子

<input type="button" value="刷新" onclick="window.location.reload();" />

<input type="button" name="" id="" value="shsxt官网" onclick="open_sxt();" />

<script type="text/javascript">

      function open_sxt() {

          // 用新的文档替换当前文档

          alert(window.location.href); // 获取完整的url

          window.location.href = "http://www.shsxt.com";

          // 用新的文档替换当前文档

window.location.replace("http://www.baidu.com");

      }

    </script>

四.DOM

1.初步了解

DOM 文档对象模型

            DOM赋予我们可以操作页面的能力

            可以创建,插入,修改,删除元素等等

          Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成，组成一个节点树。

        2 节点:

节点类型HTML内容例如

文档节点文档本身整个文档 document

元素节点所有的HTML元素<a>、<div>、<p>

属性节点HTML元素内的属性id、href、name、class

文本节点元素内的文本 hello

注释节点HTML中的注释<!-- -->

            html页面中的所有内容的都是节点,而dom就是用来操作节点

          3. 获取节点:

                1.document.getElementById("id值")

                    根据元素的id属性值,获取到唯一一个元素节点

                2.主语.getElementsByTagName("元素名")

                    根据元素名字获取一组元素

                    主语:document|父节点

                3.主语.getEelementsByClassName("class属性值")

                    根据与class属性值获取一组元素

                4.getElementsByName()

                根据name属性值获取dom对象数组，常用于多选获取值

例子：

var div1=document.getElementById("div1");

    div1.style.background="red";

    根据标签名字获取一组元素,注意要一个一个节点操作  主语是document

  var divs=document.getElementsByTagName("p");

      divs[0].style.color="blue";

      根据标签名字获取节点  主语:父节点

      var div2=div1.getElementsByTagName("div");

      div2[0].style.border="1px solid red";

      根据class属性获取一组元素

        var eles=document.getElementsByClassName("yellow");

        var eles2=div1.getElementsByClassName("yellow");

      for(var e in eles){

          eles[e].style.background="yellow";

      }

      eles2[0].style.background="pink";

4.创建节点和插入节点


1）创建节点:createElement()

          参数:元素标签名

        主语:document

          返回值:新节点

        插入节点 appendChild()

          追加元素,在父节点中的最后位置追加

          参数:要插入的节点

          主语:父节点

        返回值:追加的节点

        插入节点insertBefore(childNode1,ChildNode2)

        参数:

            childNode1 要插入的节点

              ChildNode2 父节点中的指定子节点

          主语:父节点

          返回值:返回第一个参数,要插入的节点

          注意:ChildNode2参数的值为null,undefined,实现的是追加的效果

2）插入节点：

wite（） 将任意的字符串插入到文档中

appendChild() 向元素中添加新的子节点，作为最后一个子节点

insertBefore()向指定的已有的节点之前插入新的节点

newItem：要插入的节点

exsitingItem：参考节点 

需要参考父节点

例子：

创建节点

var div=document.createElement("div");

        console.log(div);

添加图签

<button onclick="addImg();">添加图片</button>

<div id="container"></div>

<script type="text/javascript">

        添加图片

        functionaddImg()

{

            创建img元素

            var img = document.createElement("img");

            设置属性第一种方式

            设置img元素的src属性

            img.src =

"http://www.baidu.com/img/bd_logo1.png";


            设置属性第二种方式

            setAttribute() 方法添加指定的属性，并为其赋指定的值。

            设置img元素的src属性

            img.setAttribute('src', 'http://www.baidu.com/img/bd_logo1.png');

            img.style.width= '540px';

            img.style.height= '258px';

            获取div元素

            var container= document.getElementById("container");

            将img元素节点追加到div元素中

            container.appendChild(img);

        }

    </script>

5.间接查找节点

方法|属性              描述

childNodes        返回元素的一个子节点的数组

firstChild            返回元素的第一个子节点

lastChild              返回元素的最后一个子节点

nextSibling        返回元素的下一个兄弟节点

parentNode        返回元素的父节点

previousSibling  返回元素的上一个兄弟节点

例子：

<body>

    <div id="box">

        <div>我是大哥</div>

        <div class="er">我是二哥

            <p>我是p1</p>

            <p>我是p2</p>

            <p>我是p3</p>

        </div>

        <div>我是三哥</div>

    </div>

    <script>

        var div2=document.getElementsByClassName("er")[0];

        childNodes 返回元素的一个子节点的数组  包括文本节点

        console.log(div2.childNodes); //所有子节点

        console.log(div2.children);  //元素节点

        firstChild 返回元素的第一个子节点

        console.log(div2.firstChild);  //文本节点

        lastChild 返回元素的最后一个子节点

        console.log(div2.lastChild);  //文本节点

        地一个和最后一个元素子节点

        console.log(div2.firstElementChild);  //p1

        console.log(div2.lastElementChild);  //p3

        nextSibling 返回元素的下一个兄弟节点

        console.log(div2.nextSibling);

        previousSibling 返回元素的上一个兄弟节点

        console.log(div2.previousSibling);

        上一个|下一个元素兄弟节点

        console.log(div2.nextElementSibling);

        console.log(div2.previousElementSibling);

        parentNode 返回元素的父节点

        console.log(div2.parentNode);

    </script>

6.替换节点

方法：replaceChild(newNode, oldNode) 描述：用新的节点替换旧的节点

第一种：获取父节点，然后用新的节点替换旧节点

      父节点.replaceChild(newNode, oldNode);

第二种：通过旧节点定位到父节点，然后用新的节点替换旧节点

oldNode.parentNode.replaceChild(newNode, oldNode);

例子：

<div id="dv">

<button type="button"id="btn">我是一个按钮</button><br/>

<button type="button"onclick="replace_child();">替换</button>

<script type="text/javascript">

        functionreplace_child()

{

            第一种方式：获取父节点，然后用新的节点替换旧节点

            获取button元素

            var btn = document.getElementById('btn');

            创建p元素

            var p = document.createElement('p');

            p.innerText= '我是一个段落';

            获取到父元素div用p元素替换button元素

            var dv = document.getElementById('dv');

            dv.replaceChild(p,btn);


            第二种方式：通过旧节点定位到父节点，然后用新的节点替换旧节点

            用p元素替换button元素

            btn.parentNode.replaceChild(p, btn);

        }

    </script>

7.克隆节点

var 复制好的节点 = 被复制的节点.cloneNode([true/false]);

true：深度克隆，可以克隆结构和内容

false(默认值)：只克隆结构

方法：cloneNode() 描述：复制节点

例子：

<ul id="src_ul">

        <li>red</li>

        <li>yellow</li>

        <li>blue</li>

</ul>

    <button onclick="copy();">复制</button>

<hr />

<div id="copy_div"></div>

<script type="text/javascript">

        functioncopy() {

            获取要复制的元素

            var src_ul = document.getElementById("src_ul");

            复制true深度克隆，可以克隆结构和内容

            var copy_ul = src_ul.cloneNode(true);

            将复制好的内容添加到div中

            document.getElementById("copy_div").appendChild(copy_ul);

        }

    </script>

8.删除节点

方法：removeChild()  描述：从元素中移除子节点

第一种：获取父节点，然后删除子节点

      父节点.removeChild(childNode);

第二种：通过旧节点定位到父节点，然后删除子节点

childNode.parentNode.removeChild(childNode);

9.属性操作

方法|属性                        描述

getAttribute()            返回指定元素的属性值

getAttributeNode        ()返回指定属性节点

element.id                    设置或者返回元素的 id

setAttribute()            设置或者改变指定属性并指定值

setAttributeNode()        设置或者改变指定属性节点

element.style                设置或返回元素的样式属性

element.className            设置或返回元素的class属性

element.classList                  返回元素的类名

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        ul{

            width:500px;

            height:500px;

            border:1px dashed deeppink;

        }

        input{

            border:1px solid deeppink;

            height:20px;

            vertical-align:top; /*同行的行内元素的上下的对其方式*/

        }

        input:nth-child(2){

            background: deeppink;

            color: #fff;

            height:24px;

            vertical-align:top;

        }

    </style>

</head>

<body>

    <input type="text" name="text" id="text">

    <input type="button" id="btn" value="提交"> <span id="span"></span>

    <ul id="ul"></ul>

        var btn=document.getElementById("btn");

        var text=document.getElementById("text");

        var ul=document.getElementById("ul");

        var span=document.getElementById("span");

        function fn(){

            var str=text.value;

            判断值是否为空,如果为空提示不允许为空,如果不为空,把input置为空

            if(str==""){

                span.innerHTML="不能为空";

                return;

            }else{

                text.innerHTML=""; 表单元素要使用value

                text.value="";

            }

            //1.创建一个li节点

            var li=document.createElement("li");

            2.把值放入li节点中

            li.innerHTML=str;

            3.把li节点插入到ul中

            ul.insertBefore(li,ul.firstElementChild);

        }

        btn.onclick=fn;

        text.onfocus=function(){

            span.innerHTML="";

        };

    </script>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,132评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,802评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,566评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,858评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,867评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,695评论 1赞 282
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,064评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,705评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,915评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,432评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,041评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2赞 343

推荐阅读更多精彩内容

  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,421评论 1赞 45
  • JavaScript
    一、JS前言 （1）认识JS 也许你已经了解HTML标记(也称为结构)，知道了CSS样式(也称为表示)，会使用HT...
    凛0_0阅读 2,752评论 0赞 8
  • js十大设计模式
    工厂模式类似于现实生活中的工厂可以产生大量相似的商品，去做同样的事情，实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,718评论 2赞 17
  • JavaScript进阶
    第1章 认识JS JavaScript能做什么？1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 1,244评论 0赞 5
  • 在金华
    时间一天天的过去，我也在纠结中已逐渐的趋于平静，活在当下是我此时最美好的状态。 项目既然接了，接下来有需多的事情还...
    Serene汤先允阅读 141评论 0赞 0