记事本：一些js案例以及DOM和BOM
<!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的更多相关文章
- 前端（十六）—— JavaScript盒子模型、JS动画、DOM、BOM
JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...
- js 中的 DOM 和 BOM
BOM浏览器对象模型 概念:Browser Object Model 组成: Window:浏览器窗口对象 Navigator:浏览器对象 screen:显示器屏幕对象 His ...
- JS中的DOM与BOM
javascript组成: 1. ECMAScript 基本语法. 2. BOM (浏览器对象模型) 3. DOM (文档对象模型) 一)BOM(borwser Object Model) 浏览器对 ...
- python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
- JS中的函数、Bom、DOM及JS事件
本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...
- 从零开始的JS生活（二）——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
- JS中的函数、BOM和DOM操作
一.JS中的函数 [关于注释] /** [文档注释]:开头两个*.写在函数上方,在调用函数时可以看到文档上方的描述信息. */ // 单行注释 /* 多行注释 */ 1.函数的声明及调用 (1) ...
- day 52 js学习 DOM 和BOM
前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...
- JS(DOM 和 BOM)
JS(DOM 和 BOM) 常说的JS(浏览器执行的JS)包含两部分:1.JS基础知识(语法)(ECMA262标准)2.JS-Web-API(W3C标准) W3C 标准中关于 JS 的规定有:(只管定 ...
随机推荐
- 逆向学习-PE文件格式
从DOS头到节区头是PE头部分,其下的节区合称PE体.文件中使用偏移(offset),内存中使用VA(Virtual Address,虚拟地址)来表示位置.文件加载到内存时,情况就会发生变化(节区的大 ...
- 在 .NET Core 中运行 JavaScript
一.前言 在 .NET Framework 时,我们可以通过V8.NET等组件来运行 JavaScript,不过目前我看了好几个开源组件包括V8.NET都还不支持 .NET Core ,我们如何在 . ...
- Golang 入门 : 打造开发环境
工欲善其事,必先利其器!在学习和使用 Golang 时如果有一款得心应手的 IDE,相信一定可以事半功倍.虽然很多 IDE 都提供了对 Golang 的支持,但真正好用的没几个.VSCode 算是不错 ...
- Spring Boot与缓存
---恢复内容开始--- JSR-107.Spring缓存抽象.整合Redis 一.JSR107 Java Caching定义了5个核心接口,分别是CachingProvider, CacheMana ...
- Java的selenium代码随笔（6）
//获取元素列表public List<WebElement> ListElements(WebElement webElement, By parentBy, By childrenBy ...
- mysql union 与 union all 语法及用法
1.mysql union 语法 mysql union 用于把来自多个select 语句的结果组合到一个结果集合中.语法为: select column,......from tabl ...
- vue.js实战——props单向数据流
Vue2.x通过props传递数据是单向的了,也就是父组件数据变化时会传递给子组件,但是反过来不行. 业务中会经常遇到两种需要改变prop的情况, 一种是父组件传递初始值进来,子组件将它作为初始值保存 ...
- 【CSS】利用宽高比例的媒体查询
aspec-ratio 取值:value (x/y) 接收min/max前缀:是 aspect-ratio描述了输出设备目标显示区域的宽高比.该值包含两个以/分隔的正整数.代表了水平像素数(第一个值) ...
- git几个必知托管平台
程序员必须知道的几个Git代码托管平台 说到Git代码托管平台,首先推荐的是GitHub,好多好的开源项目都来自GitHub,但是GitHub只能新建公开的Git仓库,私有 仓库要收费,如果你做的 ...
- HTML&CSS_基础03
一.Meta标签: 1.可以设置网页的关键字 2.用来指定网页描述 3.可以用来网页重定向 具体参数参见:http://www.w3school.com.cn/html5/tag_meta.asp 二 ...