javascript专栏
简单数据类型与复杂数据类型
- 在简单数据类型number、boolean、string、undefined、null中，null比较特殊
var timer=null;
console.log(typeof time)
这时你会发现返回的数据类型为object也就是对象，javascript在产生时偶有错误的地方，这里没有被后世所修改。
2. 简单数据类型是存放在栈里面 里面直接开放一个空间并且直接存值；
3. 复杂数据类型首先在栈里面存放地址，用十六进制表示，然后这个地址指向堆里面的数据值；
简单数据类型传参
1.函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给形参时，其实是把变量在栈里的值复制了一份给形参，在方法的内部做任何修改都不会影响到外部变量
通过下面的例子你可以有一个大概的认识
function fn(a) {
a++;
console.log(a);//输出为11
}
var x=10;
fn(x);
console.log(x);//输出为10
复杂数据类型传参
1.函数的形参也可以看做是一个变量，当我们把一个引用类型变量传给形参时，其实是把变量在栈的地址复制给形参，形参实参由于地址相同，其实操作的是同一个对象。
通过下面的例子你可以有一个大概的认识
function Person(name){
this.name=name;
}
function f1(x){
console.log(x.name);//输出为刘德华
x.name="张学友";
console.log(x.name);//输出为张学友
}
var p=new Person("刘德华");
console.log(p.name);//输出为刘德华
f1(p);
console.log(p.name);//输出为张学友
修改元素属性
分时问候案例
var img=document.querySelector('img');
var div=document.querySelector('div');
var date=new Date();
var h=date.getHours();//获取当前时间
if(h<12){
img.src='images/morning.png';//修改图片的链接
}else if(h<18){
img.src='images/afternoon.png';
}else{
img.src='images/night.png';
}
仿京东登录密码隐藏案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input {
width: 360px;
height: 30px;
outline: none;
border: 0;
}
.box img {
width: 24px;
position: absolute;
top: 2px;
right: 2px;
}
</style>
</head>
<body>
<div class="box">
<label for="">
<img src="images/close.png" alt="">
</label>
<input type="password" name="" id="">
</div>
<script>
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd'); //获取所需元素
var flag = 0;//设置标志变量
eye.onclick = function() {//点击事件函数
if (flag == 0) {
pwd.type = 'text';
flag = 1;
eye.src = 'images/open.png';
} else {
pwd.type = 'password';
eye.src = 'images/close.png';
flag = 0;
}
}
</script>
</body>
</html>
修改样式属性
仿淘宝精灵图案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 250px;
margin: 100px auto;
}
.box li {
float: left;
width: 24px;
height: 24px;
background-color: pink;
margin: 15px;
background: url(images/sprite.png) no-repeat;
}
li {
list-style: none;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var lis = document.querySelectorAll('li');
for (i = 0; i < lis.length; i++) {//利用for循环，在FW中我们发现每一个精灵图的y坐标分别是0,44,88....由此找出规律
lis[i].style.backgroundPosition = '0 -' + 44 * i + 'px';
}
</script>
</div>
</body>
</html>
我们还可以利用className来修改样式属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.change {
background-color: purple;
color: #fff;
font-size: 25px;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="first">文本</div>
<script>
// 1. 使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单的情况下使用
var test = document.querySelector('div');
test.onclick = function() {
// this.style.backgroundColor = 'purple';
// this.style.color = '#fff';
// this.style.fontSize = '25px';
// this.style.marginTop = '100px';
// 让我们当前元素的类名改为了 change
// 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
// 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器
// this.className = 'change';
this.className = 'first change';
}
</script>
</body>
</html>
！注意：className会直接更改元素类名，覆盖原来的类名，如果想要保留原来的类名，请使用多类名选择器
每日一例之京东tab栏切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价（50000）</li>
<li>手机社区</li>
</div>
<div class="tab_con">
<div class="item" style="display: block;">商品介绍模块内容</div>
<div class="item">规格与包装模块内容</div>
<div class="item">售后保障模块内容</div>
<div class="item">商品评价（50000）模块内容</div>
<div class="item">手机社区模块内容</div>
</div>
</div>
<script>
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute('index', i);
lis[i].onclick = function() {
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
this.className = 'current';
var index = this.getAttribute('index');
console.log(index);
for (i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
items[index].style.display = 'block';
}
}
</script>
</body>
</html>
每日一例之新浪下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
float: left;
position: relative;
text-align: center;
width: 80px;
height: 41px;
}
.nav li a {
text-decoration: none;
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="">微博
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</a>
</li>
<li>
<a href="">微博
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</a>
</li>
<li>
<a href="">微博
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</a>
</li>
<li>
<a href="">微博
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</a>
</li>
</ul>
<script>
var nav = document.querySelector('.nav');
var lis = nav.children;
for (i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() {
this.children[1].style.display = 'block';
}
lis[i].onmouseout = function() {
this.children[1].style.display = 'none';
}
}
</script>
</body>
</html>
动态创建元素的三种方法
1.document.write()
这种方法会导致文档流执行完毕后页面重绘，不推荐使用.
2.element.innerHTML
3.document.createElement()
！element.innerHTML在采用数组而不是字符串方式拼接多个元素时在不同的浏览器效率都要比document.createElement()高
阻止事件冒泡
IE678以上的浏览器采用event.stopPropagation（）方法来阻止冒泡，这也是开发中最常用的方法
扫一扫
315
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
