<!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. React 系列教程2：编写兰顿蚂蚁演示程序

    简介 最早接触兰顿蚂蚁是在做参数化的时候,那时候只感觉好奇,以为是很复杂的东西.因无意中看到生命游戏的 React 实现,所以希望通过兰顿蚂蚁的例子再学习一下 React. 兰顿蚂蚁的规则非常简单: ...

  2. Vue 2.6版本基础知识概要(一)

    挂载组件 //将 App组件挂载到div#app节点里 new Vue({ render: h => h(App), }).$mount('#app') VueComponent.$mount ...

  3. 类Object

    Object概述 java.lang.Object类是Java语言中的根类,即所有类的父类.它中描述的所有方法子类都可以使用.在对象实例化的时候,最终找的父类就是Object. 如果一个类没有特别指定 ...

  4. 【算法】螺旋方阵 上交OJ1021

    输入格式: 输入在一行中给出一个正整数N(<10). 输出格式: 输出N×N的螺旋方阵.每行N个数字,每个数字占3位. 输入样例: 5 1 2 3 4 5 16 17 18 19 6 15 24 ...

  5. Java Core - ‘==’和‘equals’的区别

    不管是‘==’还是‘equals’,他们的比较都需要区分类型来讨论的: ‘==’ 当比较的数据类型是基本类型时,比较值是否相同 当比较的数据类型是引用类型时,不仅比较值相同还比较其所在内存地址是否相同 ...

  6. 目录树生成工具treer

    安装方法 $ npm install treer -g 生成结构 $ treer Desktop├─.DS_Store├─.localized├─dir2 | ├─file3 | └file4├─di ...

  7. Centos6.5-dnsmasq安装

    1.使用yum install dnsmasq -y 安装dns(含dns server和dns代理功能) 2.查询dnsmasq已经安装成功 [root@localhost ~]# rpm -q d ...

  8. Spring通过注释配置Bean2 关联关系

    接着我们讲讲关联关系的配置,我们耳熟能详的MVC结构,Controller关联着Service,Service关联着UserRepository,接着上一节的代码,完成上诉功能 在Main方法里,我们 ...

  9. Python——代码汇总

    1.三级菜单 2.Windows启动服务 3.常用的Python实现 4.字典的基本操作

  10. Oracle篇 之 子查询

    子查询:先执行内部再外部 Select last_name,salary,dept_id From s_emp Where dept_id in ( Select dept_id From s_emp ...