记事本：一些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 的规定有:(只管定 ...
随机推荐
- day22 面向对象
面向对象 ''''1.面向过程编程 核心是"过程"二字,过程指的是解决问题的步骤,即先干什么再干什么 基于该思想编写程序就好比在编写一条流水线,是一种机械式的思维方式 ...
- openstack安装过程报错
问题一 .执行启动neutron服务报错[root@localhost ~]# systemctl start neutron-server.service Job for neutron-serve ...
- Python----多项式回归
多项式线性回归 1.多项式线性方程: 与多元线性回归相比,它只有一个自变量,但有不同次方数. 2.举例: import numpy as np import matplotlib.pyplot as ...
- JAVA之列表
增: import java.util.ArrayList; import java.util.List; public class T{ public static void main(Stri ...
- UA大全
####PC端UA #Opera "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Ch ...
- MongoDB系列：二、MongoDB常用操作练习
最近在自学MongoDB,在此记录一下,当做学习笔记了(不断更新中)!! 一.背景 MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存 ...
- centos 7 修改网卡名字
1.编辑网卡信息 cd /etc/sysconfig/network-scripts/ #进入网卡目录mv ifcfg-en067761 ifcfg-eth0 #重命名网卡 cat ifcfg-eth ...
- MySQL——合并查询结果
利用 UNION 关键字,可以给出多条 SELECT 语句,并将它们的结果组合成一个结果集.合并时,两个表对应的列数和数据类型必须相同.SELECT 语句之间使用 UNION 或 UNIO ...
- JavaScript速记
JavaScript常见知识点积累,包括数据类型.数值转换.对象.原型与原型链.作用域与闭包等等,持续整理更新,如有错误请指正,甚是感激 本文链接:JavaScript那些磨人的小妖精 作者:狐狸家的 ...
- wordpress文章链接怎么把默认的别名改成id形式和伪静态设置
别名默认是文章标题,打不开,改成英文形式可以打开,但这样很不方便,还有可能重复.怎么改成按文章id自动生成相应链接呢 找到设置---固定链接----把默认的日期和名称型改成自定义结构把末尾的%post ...