<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>dom</title>

    <style>

        .box{

            width: 100px;

            height: 100px;

            background-color: red;

        }

    </style>

</head>

<body>

<div class="box" id="hezi">

</div>

<button type="button" id="big">

    变大

</button>

<button type="button" id="small">

    变小

</button>

<button type="button" id="changeColor">

    变色

</button>

</body>

<script>

    var oBig = document.getElementById('big');

    var oSmall = document.getElementById('small');

    var oHezi = document.getElementById('hezi');

    oBig.onclick = function () {

        oHezi.style.width = '300px';

        oHezi.style.height = '400px';

    }

    oSmall.onclick = function () {

        oHezi.style.height = '20px';

        oHezi.style.width = '50px';

    }

    oChangeColor = document.getElementById('changeColor');

    oChangeColor.onclick = function () {

        oHezi.style.backgroundColor = '#666';

    }

</script>

</html>

getElementById函数可以通过ID名字去操作该标签

onclick事件：点击事件，在点击时，会触发该事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>购物车</title>

</head>

<style type="text/css">

    *{

        padding: 0;

        margin: 0;

    }

    .box{

        width: 500px;

        height: 90px;

        margin: 100px auto;

        background-color: rgba(255, 255, 0, 0.4);

        position: relative;

    }

    .car{

        width: 150px;

        height: 30px;

        background-color: #fff;

        position: absolute;

        left: 300px;

        border: 1px solid green;

        z-index: 9;

    }

    .shop{

        width: 310px;

        height: 70px;

        background-color: #fff;

        position: absolute;

        border: 1px solid green;

        left: 140px;

        top: 30px;

        display: none;

    }

</style>

<body>

<div class="box">

    <div class="car" id="mycar">我的购物车</div>

    <div class="shop t" id="shop"></div>

</div>

</body>

<script type="text/javascript">

    var myCar = document.getElementById('mycar');

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

    myCar.onmouseover = function () {

        shop.style.display = 'block';

        myCar.style.borderBottomWidth= '0';

    };

    myCar.onmouseout = function () {

        this.style.border = '1px solid green';

        shop.style.display = 'none';

    };

</script>

</html>

对于购物车：在触碰时会弹出这个操作，有两种写法。

一个是把要下面那个大块先隐藏，之后触碰的时候显示，

二是在触碰时，把类的属性添加进去。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>hover</title>

    <style>

        button{

            margin: 10px;

            width: 100px;

            height: 40px;

            cursor: pointer;

        }

        .current{

            background-color: red;

        }

    </style>

</head>

<body>

<button>按钮1</button>

<button>按钮2</button>

<button>按钮3</button>

<button>按钮4</button>

<button>按钮5</button>

</body>

<script>

    var btnArray = document.getElementsByTagName("button");

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

        btnArray[i].onmouseover = function () {

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

                btnArray[j].className = '';

            }

            this.className = "current";

        }

    }

</script>

</html>

效果大致如此，思想是排异的思想，让按钮3亮起来很容易。

但是想再让按钮2亮起来，而按钮3变白，就需要用到这个代码了。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>tab栏选项卡</title>

    <style type="text/css">

        .banner{

            width: 300px;

            height: 80px;

            background-color: red;

            margin: 0 auto;

        }

        .banner a{

            float: left;

            width: 100px;

            height: 80px;

            /*background-color: #fff;*/

            line-height: 80px;

            text-align: center;

        }

        .pic{

            background-color: red;

            width: 300px;

            height: 140px;

            margin: 0 auto;

        }

    </style>

</head>

<body>

<div class="banner">

    <a class="one">首页</a>

    <a class="sec">新闻</a>

    <a class="third">图片</a>

</div>

<div class="pic">

    <li class="pic1">首页内容</li>

    <li class="pic2">新闻内容</li>

    <li class="pic3">图片内容</li>

</div>

</body>

<script type="text/javascript">

    var o = document.getElementsByTagName('a');

    var b = document.getElementsByTagName('li');

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

        // 增加一个属性 方便只有b调取

        o[i].index = i;

        o[i].onmouseover = function () {

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

                o[j].style.backgroundColor = 'white';

                b[j].style.display = 'none';

            }

            this.style.backgroundColor = 'red';

            b[this.index].style.display = 'block';

        };

    }

</script>

</html>

这段代码要注意的是var是一个全局变量，即使，在内部写，在预编译的时候，也会变成一个全局变量，如果想要对某一个事件进行特殊的操作，做好把这个变量写成一个属性。

function Student() {

        this.name = 'easy';

        this.age = 20;

    }

    Student.prototype.alterName = function () {

      alert(this.name);

    };

    var stu1 = new Student();

    var stu2 = new Student();

    stu1.alterName();

    stu2.alterName();

    alert(stu1.alterName() == stu2.alterName());

定义对象最常用的方法，jQuery已经封装好了。

记事本：一些js案例以及DOM和BOM的更多相关文章

  1. 前端（十六）—— JavaScript盒子模型、JS动画、DOM、BOM

    JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...

  2. js 中的 DOM 和 BOM

    BOM浏览器对象模型   概念:Browser Object Model   组成:   Window:浏览器窗口对象   Navigator:浏览器对象   screen:显示器屏幕对象   His ...

  3. JS中的DOM与BOM

    javascript组成: 1. ECMAScript 基本语法. 2. BOM (浏览器对象模型) 3. DOM (文档对象模型) 一)BOM(borwser Object  Model) 浏览器对 ...

  4. python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  5. JS中的函数、Bom、DOM及JS事件

    本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...

  6. 从零开始的JS生活（二）——BOM、DOM与JS中的事件

    上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...

  7. JS中的函数、BOM和DOM操作

     一.JS中的函数 [关于注释] /** [文档注释]:开头两个*.写在函数上方,在调用函数时可以看到文档上方的描述信息. */   // 单行注释 /* 多行注释 */ 1.函数的声明及调用 (1) ...

  8. day 52 js学习 DOM 和BOM

    前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...

  9. JS(DOM 和 BOM)

    JS(DOM 和 BOM) 常说的JS(浏览器执行的JS)包含两部分:1.JS基础知识(语法)(ECMA262标准)2.JS-Web-API(W3C标准) W3C 标准中关于 JS 的规定有:(只管定 ...

随机推荐

  1. 在混合开发框架模式中，简化客户端对Web API的频繁调用

    在混合开发框架模式中,有时候我们在处理树形节点的时候,需要很多关联的处理,可能需要结合用户配置信息,属性字典,以及表的字段分类等信息来展示一个结构树,那么在处理的时候就可能会频繁的对这些接口API进行 ...

  2. 三十六、fetch

    https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API

  3. Day9 轨道角动量

    转自中山大学电子与信息工程 http://seit.sysu.edu.cn/node/1004 能量.动量(角动量和线动量)光子的基本属性,其中光子角动量包括自旋角动量和轨道角动量(Orbital a ...

  4. No repeats please 全排列

    把一个字符串中的字符重新排列生成新的字符串,返回新生成的字符串里没有连续重复字符的字符串个数.连续重复只以单个字符为准 例如, aab 应该返回 2 因为它总共有6中排列 (aab, aab, aba ...

  5. ecshop 商品属性显示方法

    功能:在商品列表上,点击放大镜,显示商品所有属性以及其价格,效果如下: 方法/步骤: 1.编辑\admin\templates\goods_list.htm 模板,在 <!-- 商品搜索 --& ...

  6. （二）jdk8学习心得之Lambda表达式

    二.Lambda表达式 1. 格式 (参数1,参数2,…,参数n)->{方法体} 注意: (参数1,参数2,...,参数n)要与方法接口中的参数一致,但是名字可以不一样. 此外,方法类型接口,有 ...

  7. 利用Python查看微信共同好友

    思路 首先通过itchat这个微信个人号接口扫码登录个人微信网页版,获取可以识别好友身份的数据.这里是需要分别登录两人微信的,拿到两人各自的好友信息存到列表中. 这样一来,查共同好友就转化成了查两个列 ...

  8. 4月23日 MySQL学习-DDL

    今日学习的是DDL的操作(数据定义语言) create table teachers (id int,name varchar(50));//创建一个表 给了两个类型alter table stude ...

  9. CSS中的BFC

    CSS当中BFC介绍 在前端当中,我们都知道标准文档流,我们在开发的时候,经常会碰到block和inline.而下文要说到的BFC就是对块级盒子的格式化.当然block级别的盒子是BFC,那么inli ...

  10. NOI2019十二省联考旅游记

    真的是去旅游的啊,毕竟菜是原罪嘛 Day 0 去指定地点试机,果然,键盘还是一如既往的不好用,我也不知道为什么. 晚上,教练请吃自助餐,幸福的像个胖子 Day 1 早上坐车过去,在车上看了看原来写过的 ...