美文网首页
js初识第五节

js初识第五节

作者: An的杂货铺 | 来源:发表于2019-08-19 14:47 被阅读0次

通过js来操作dom节点的属性

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<div id="box" msg="hello" class="box">我是div</div>

<script type="text/javascript">

    // 获取div元素的id属性值

    var oDiv = document.querySelector("div");

    console.log(oDiv.id); // box 元素.属性 获取的是固有属性 不能获取自定义属性

    console.log(oDiv.className); //box 注意 获取class属性 js应该为className

    console.log(oDiv.msg);//undefined msg为自定义添加的属性

    //获取节点的自定义属性用getAttribute,也可以获取自身的固有属性

    var id = oDiv.getAttribute("id");

    console.log(id);//box

    var msg = oDiv.getAttribute("msg");

    console.log(msg);//hello

    //使用setAttrbute设置属性(固有属性和自定义属性)

    oDiv.setAttribute("id","wrap");//原id被覆盖

    oDiv.setAttribute("abc","123");//添加新的属性

    //用removeAttribute删除属性

    oDiv.removeAttribute("class");//移除class类名

</script>

</body>

</html>

定时器setTimeout的使用和清除

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<img src="hua1.jpg" alt="" id="oimg">

<button id="btn">点我去掉广告</button>

<button id="btnStop">取消</button>

</body>

<script type="text/javascript">

var a = 123;

console.log(window.a);//123

console.log(this.a);//123

function fn(){

console.log('aaa')

}

window.fn();//aaa

    //定时器setTimeout的使用

function $(id){

return document.getElementById(id);

}

var btn = $('btn');

var btnStop = $('btnStop');

var oimg = $('oimg');

var timer;

btn.onclick = function(){

timer = setTimeout(function(){

oimg.style.display = 'none';

},3000)

}

btnStop.onclick = function(){

clearTimeout(timer);

}

//当点击取消广告3秒后，图片消失，在这个过程中如果点击了取消，那么定时器所执行的逻辑会被强制停止

</script>

</html>

定时器的异步特性

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

</body>

<script type="text/javascript">

//异步和同步的差异

//异步：简单来说就是遇到一个耗时的事情不必死等

//同步：遇到一个耗时的程序要等其执行完毕再去执行下面的逻辑

//常见的异步处理程序：事件的回调,定时器,ajax,node等

console.log(1);

setTimeout(function(){

console.log(2)

},0)

console.log(3);

//打印顺序：1,3,2;

//原因：定时器是异步处理程序，js中所有的同步代码处理完才会处理异步程序，尽管定时器延时0秒，仍然是最后执行

//JS会把定时器事件异步处理，也就是说它并不会等待定时器事件处理完成后再执行下面的代码，而是直接将定时器事件插入到事件队列当中后，直接执行下面的代码，当执行完成后JS再反过头来执行定时器事件的回调部分代码，这就是异步！异步可以有效的防止JS线程被堵塞，且会有很高的效率，能够使JS在有限的资源下做更多的事情，这一点是很了不起的
</script>

</html>

window的location对象

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<p>location对象</p>

</body>

<script type="text/javascript">

console.log(window.location);

//Location 对象包含有关当前 URL 的信息。Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

//常用的location对象的方法

// location.href = '';在当前页面打开URL页面

// loction.assign = '';加载新的文档。

// location.replace = '';用新的文档替换当前文档

// location.reload = '';重新加载当前文档。

setTimeout(function(){

      //window.location.href = "http://www.163.com" //可以后退

      //window.location.assign("http://www.163.com");//可以后退

      //window.location.replace("http://www.163.com");//替换掉当前文档，不能后退

      window.location.reload("http://www.163.com");//刷新当前页面

},2000)

</script>

</html>

history 跳转页面的使用

a页面

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<button onclick="location.href='b.html'">跳转b页面</button>

<button onclick="history.go(1)">前进</button>

</body>

</html>

b页面

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<button onclick="history.go(-1)">后退</button>

</body>

</html>

网页换肤的案例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="css/wolong.css" />

<link rel="stylesheet" type="text/css" href="css/hs0.css" />

<title></title>

</head>

<script>

    // 点击换肤 切换不同的图片 也就是引入不同的css

        window.onload = function() {

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

            var link = document.getElementsByTagName("link")[1];

            var index = 0;

            hf.onclick = function() {

                index++;

                if( index==5) {

                    index = 0;

                }

                link.setAttribute("href", "css/hs"+index+".css");     

            }

        }

</script>

<body>

<!--top-->

<div class="top">   

            <input type="button" id="hf" value="换 肤"/>

            <input type="button" id="hy" value="还 原"/>

    <div class="logo"><a href="#"><img src="images/wolong/logo1.jpg" /></a></div>

        <div class="search">

        <div class=" searchcon">

            <form method="post" action="">

                <input class="txt" type="text" value="SEARCH……"/>

                    <input class="btn" type="submit" value=""/>

                </form>

            </div>

        </div>

    </div>

<!--nav-->

<div class="nav">

    <ul>

        <li><a href="#">集团介绍</a></li>

            <li><a href="#">产品中心</a></li>

            <li><a href="#">卧龙市场</a></li>

            <li><a href="#">技术研发</a></li>

            <li><a href="#">国际合作</a></li>

            <li><a href="#">投资者关系</a></li>

            <li><a href="#">新闻资讯</a></li>

            <li><a class="lastb" href="#">人力资源</a></li>

        </ul>

    </div>



<!--banner-->

<div class="banner"><img src="images/wolong/banner.jpg" /></div>

<!--content-->

<div class="content">

    <div class="content1">

        <div class="news">

            <h3 class="bt">新闻资讯</h3>

                <ul class="newsul">

                <li><a href="#">陈建成董事长出席ATB集团召开的年度销售大会</a><span>2013-07-10</span></li>

                    <li><a href="#">陈建成董事长出席ATB集团召开的年大会大会大会大会度销售大会</a><span>2013-07-10</span></li>

                    <li><a href="#">陈建成董事长出席ATB集团召开的年度销售大会</a><span>2013-07-10</span></li>

                    <li><a href="#">陈建成董事长出席ATB集团召开的年度销售大会</a><span>2013-07-10</span></li>

                    <li><a href="#">陈建成董事长出席ATB集团B集团B集团召开的年度销售大会</a><span>2013-07-10</span></li>

                    <li><a href="#">陈建成董事长出席ATBB集团召集团召开团召集团召开的年度销售大会</a><span>2013-07-10</span></li>

                </ul>

            </div>



            <div class="intro">

            <h3 class="bt">卧龙介绍</h3>

                <p class="p1">公司成立于1984年,<br />经过近30年的发展</p>

                <p class="p2">已成为电器制造，房地产开发和金融<br />投资三业并举的综合性跨国……</p>

            </div>

            <div class="bringin">

            <h3 class="bt">人才招聘</h3>

                <div class="txt">

                <p>培养一流的人才，铸造一流的工程</p>

                <p>实现员工与企业的共同发展</p>

                </div>

                <div class="more"><a href="#"><img src="images/wolong/more.jpg" /></a></div>

            </div>

        </div>

    <div class="content2">



    <h3>卧龙市场<a href="#"><img src="images/wolong/jiankuohao1.jpg" /></a>&nbsp;<a href="#"><img src="images/wolong/jianjiao2.jpg" /></a></span></h3>



        <dl>

        <dt><img src="images/wolong/jiaotong1.jpg" /></dt>

            <dd>

            <p>交通轨道：由于主要采用电气牵引，而且轮轨摩擦阻力小，与公共交通……</p>



            </dd>

        </dl>

        <dl>

        <dt><img src="images/wolong/jieneng1.jpg" /></dt>

            <dd>

            <p>交通轨道：由于主要采用电气牵引，而且</p>

                <p>轮轨摩擦阻力小，与公共交通……</p>

            </dd>

        </dl>

        <dl>

        <dt><img src="images/wolong/feiji1.jpg" /></dt>

            <dd>

            <p>交通轨道：由于主要采用电气牵引，而且</p>

                <p>轮轨摩擦阻力小，与公共交通……</p>

            </dd>

        </dl>

        <dl>

        <dt><img src="images/wolong/shiyou1.jpg" /></dt>

            <dd>

            <p>交通轨道：由于主要采用电气牵引，而且</p>

                <p>轮轨摩擦阻力小，与公共交通……</p>

            </dd>

        </dl>

    </div>



    </div>

<!--links-->

<div class="links">

<div class="product">

    <h3 class="linksbt">产品中心</h3>

        <ul class="u1">

        <li><a href="#">汽车电机</a></li>

            <li><a href="#">汽车电机</a></li>

            <li><a href="#">汽车电机</a></li>

            <li><a href="#">大功率电机</a></li>

            <li><a href="#">汽车电机</a></li>

        </ul>

        <ul class="u2">

        <li><a href="#">工业驱动和自动化</a></li>

            <li><a href="#">高压变频和系统集成</a></li>

            <li><a href="#">混凝土搅拌机</a></li>

            <li><a href="#">电动车辆</a></li>



        </ul>

        <ul class="u3">

        <li><a href="#">汽车电机</a></li>

            <li><a href="#">汽车电机</a></li>

            <li><a href="#">汽车电机</a></li>

            <li><a href="#">大功率电</a></li>



        </ul>

    </div>

    <div class="tec">

    <h3 class="linksbt">技术研发</h3>

    <ul class="u3">

        <li><a href="#">汽车电机</a></li>

            <li><a href="#">汽车电机</a></li>

            <li><a href="#">汽车电机</a></li>

            <li><a href="#">大功率电</a></li>



        </ul>

    </div>

    <div class="net">

    <h3 class="linksbt">营销网络</h3>



    </div>

</div>

<!--bottom-->

<div class="bottom">

    <div class="bnav">

        <a href="#">网站地图</a>&nbsp;|

            <a href="#">联系我们</a>&nbsp;|

            <a href="#">关注卧龙</a>&nbsp;|

            <a href="#">系统采购入口</a>

        </div>

        <div class="btxt">

        RIGHT&coopy;2013卧龙控股集团 版权所有 浙ICP备0658755677号 技术支持：博彩互动&nbsp;&nbsp;分享到：<a href="#"><img src="images/wolong/share01_03.jpg" /></a><a href="#"><img src="images/wolong/share01_05.jpg" /></a><a href="#"><img src="images/wolong/share01_07.jpg" /></a><a href="#"><img src="images/wolong/share01_09.jpg" /></a><a href="#"><img src="images/wolong/share_11.jpg" /></a>

        </div>

    </div>

</body>

</html>

一个选项卡实例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>选项卡</title>

<style type="text/css">

*{margin: 0; padding: 0; font-family: "微软雅黑";font-size: 14px;}

#container{

width: 398px;

margin: 100px auto;}

#container a{

display:block ;

width: 98px;

height: 42px;

line-height: 42px;

text-align: center;

float: left;

border-top: solid 1px #FF4400;

border-bottom: solid 1px #FF4400;

border-left: solid 1px #FF4400;

color: #333333;

text-decoration: none;

}

#container a:hover{

color: #FF4400;

}

.content{

width: 355px;

height: 140px;

text-align: center;

border-right: solid 1px #FF4400;

border-bottom: solid 1px #FF4400;

border-left: solid 1px #FF4400;

padding: 30px 0 0 40px;

display: none;

}

.clear{clear: left;}

#container a.on{ background: #FF4400; color: #fff;}

</style>

</head>

<body>

<div id="container">

<a href="#"  class="on">充话费</a>

<a href="#" >充流量</a>

<a href="#" >充固话</a>

<a href="#"  style="border-right: solid 1px #FF4400;">充宽带</a>

<div class="clear"></div>

<div class="content" style="display:block;">

<img src="images/1.png" />

</div>

<div class="content">

<img src="images/2.png" />

</div>

<div class="content">

<img src="images/3.png" />

</div>

<div class="content">

<img src="images/4.png" />

</div>

</div>

</body>

</html>

<script type="text/javascript">

// 找到所有的导航

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

var as = container.getElementsByTagName("a");

// 找到所有内容

var oDivs = document.getElementsByClassName("content");

// 给所有的a链接绑定事件 方式一

// for(var i=0; i<as.length; i++) {

// as[i].index = i;//保存索引值,在循环绑定事件之前

// //循环绑定事件

// as[i].onclick = function() {

//     // as[i].className = '';

// // oDivs[i].style.display = 'none';

// //以上代码应放在另个循环里，否则会报错，因为循环绑定时间后i已经发生了变化as[i],和oDivs[i]已经找不到对应的元素

// for(var j = 0;j<as.length;j++){

// as[j].className = '';

// oDivs[j].style.display = 'none';

// }

// // 对当前自己设置on样式

// this.className = "on";

// var index = this.index;

// oDivs[index].style.display = "block";

// }

// }

//方式二

for(var i = 0;i<as.length;i++){

as[i].setAttribute('index',i);//相当于上面保留每一个元素的索引值

as[i].onclick = function(){

            for(var j = 0;j<as.length;j++){

            as[j].className = '';

            oDivs[j].style.display = 'none'

            }

            this.className = 'on';

            var oindex = this.getAttribute('index');//取出点击的索引值

            oDivs[oindex].style.display = 'block';

}

}

</script>

相关文章

  • js初识第五节

    通过js来操作dom节点的属性 定时器setTimeout的使用和清除 定时器的异步特性 window的locat...

  • ## JS初识

    ## JS初识 # js初识 # js注释 # 变量 # 变量的命名 JS数值的类型 # Number类型 # S...

  • Python小白学习进行时---js基础（2018-7-13）

    一、JS初识 二、JS语法 三、运算符 四、分支结构 ==============================...

  • js初识

    js核心：ECMAScript——ES：基础语法DOM:文档对象模型BOM：浏览器对象模型 js特点:（1）脚本语...

  • JS初识

    js是脚本语言 一种简单弱类型语言 一种解释性执行的脚本语言 一种基于对象的脚本语言 一种相对安全的脚本语言 一种...

  • 初识JS

    1.CSS和JS在网页中的放置顺序是怎样的？ css使用link标签引入并放在head标签内，是为了防止白屏和FO...

  • 初识JS

    CSS和JS在网页中的放置顺序是怎样的？ css是使用link的标签进行引入并放置在header标签内,而js是使...

  • 初识JS

    1.CSS和JS在网页中的放置顺序是怎样的？ CSS引用外部样式表时，使用 标签，将样式放在 标签中；直接在htm...

  • 初识JS

    1、js javascript ： 脚本语言，用来实现网页交互、动态效果的，是一种弱类型语言。 2、事件 事件：就...

  • JS初识

    初识javascript 引导 主要内容： 学习目标： 节数知识点要求 第一节（js的前世今生）js简介了解 第二...

网友评论

      本文标题：js初识第五节

      本文链接：https://www.haomeiwen.com/subject/jwvssctx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|js初识第五节|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！