<!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. day 24 面向对象之继承及属性查找顺序

    组合 组合:自定义类的对象作为另外一个类的属性 class Teacher: def init(self, name, age): self.name = name self.age = age t1 ...

  2. 借助FreeHttp任意篡改http报文 （使用·实现）

    引言 FreeHttp是一个Fiddler插件借助FreeHttp您可按照您自己的设定修改请求或响应报文,这对测试及调试都非常有用 比如您发现线上页面js文件错误,直接使用规则替换新的js文件您可以在 ...

  3. easyUI的常见属性

    datagrid (数据表格) $("#tg").datagrid({url:"TaskList",//请求的地址fit: false, //当true时设置他 ...

  4. python新手菜鸟之基础篇

    s=0 for i in range(1,101): s += i else: print(s) def main(n): '''打印菱形图形''' for i in range(n): print( ...

  5. keras02 - hello convolution neural network 搭建第一个卷积神经网络

    本项目参考: https://www.bilibili.com/video/av31500120?t=4657 训练代码 # coding: utf-8 # Learning from Mofan a ...

  6. AppiumDesktop录制脚本

    AppiumDesktop启动页面: 启动AppiumDesktop以后点击该页面右上角的Start New Session按钮,就会启动一个新的会话窗口(如下图),在这个窗口我们需要配置一些Desi ...

  7. JS学习笔记：（二）回流和重绘

    在搞清楚回流和重绘的概念之前,我们要清除浏览器的渲染过程. 解析生成DOM Tree(此时包含所有节点,包括display:none); 根据CSS Object Module(CCSSOM)计算节点 ...

  8. H5键盘事件处理

    if (/Android/gi.test(navigator.userAgent)) { const innerHeight = window.innerHeight; window.addEvent ...

  9. ubuntu 16.04上 mysql 5.7 安装笔记

    一 安装 ubuntu 采用APT安装方式,可参考: Ubuntu 安装mysql和简单操作 Ubuntu 16.04安装MySQL(5.7.18) A Quick Guide to Using th ...

  10. Luogu3732 [HAOI2017] 供给侧改革 【后缀数组】【线段树】【乱搞】

    题目分析: 这道题我是乱搞的,因为他说$01$串是随机的. 那么我们可以猜测能够让LCP变大的地方很少.求出后缀数组之后可能让LCP变大的地方就等价于从大到小往height里动态加点同时维护这个点左右 ...