js美化网页
再议js对象
对象的分类：
* 1.内建对象
* - 内建对象指由ES标准定义的对象，任何对ES标准的实现都可以使用这些对象
* - 比如：Math String Date
*
* 2.宿主对象
* - 宿主对象指由JS运行环境为我们提供的对象，目前对于我们来说就是指浏览器为我们提供的对象
* - window document HTMLDivElement……
*
* 3.自定义对象
* - 由我们自己定义的对象
document.getElementById
通过id获得html元素对象，参数是html文档中的id名字
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档title>
<script>
window.onload = function (){
var div = document.getElementById('div');
var p = document.getElementById('p');
var h1 = document.getElementById('h1');
alert(div);
alert(p);
alert(h1);
};
script>
head>
<body>
<p id="p">hhhhhhp>
<div id="div">zzzzzzzzzzzdiv>
<h1 id="h1">vvvvvvvvvvvh1>
body>
html>
HTML 的属性操作：读、写
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档title>
<script>
/*
HTML 的属性操作：读、写
属性名：
属性值：
读操作：获取、找到
元素.属性名
写操作：“添加”、替换、修改
元素.属性名 = 新的值
*/
window.onload = function (){
var oBtn = document.getElementById('btn1');
var oText = document.getElementById('text1');
var oSelect = document.getElementById('select1');
oBtn.onclick = function (){
// alert(oBtn.value); // '按钮'
// alert( oText.value );
// alert( oSelect.value );
// 字符串连接
// oText.value oSelect.value
// '刘伟' + '北京' => '刘伟北京'
// '刘伟' + '在' + '北京' => '刘伟在北京'
alert(oText.value + ' 在 ' + oSelect.value);
//oBtn.value = 'button';
//oText.value = 123;
//oText.value = oSelect.value;
};
};
script>
head>
<body>
<input id="text1" type="text" />
<select id="select1">
<option value="北京">北京option>
<option value="上海">上海option>
<option value="杭州">杭州option>
select>
<input id="btn1" type="button" value="按钮" />
body>
html>innerHTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档title>
<script>
/*
HTML 的属性操作：读、写
属性名：
属性值：
读操作：获取、找到
元素.属性名
写操作："添加？"、替换、修改
元素.属性名 = 新的值
oP.innerHTML => 读取p里面所有的html代码
oP.innerHTML = 123; => 替换p里面所有的html代码
*/
window.onload = function (){
var oBtn = document.getElementById('btn1');
var oText = document.getElementById('text1');
var oP = document.getElementById('p1');
oBtn.onclick = function (){
// alert( oP.innerHTML );
oP.innerHTML = oText.value;
};
};
script>
head>
<body>
<input id="text1" type="text" />
<input id="btn1" type="button" value="按钮" />
<p id="p1">这是一些文字p>
body>
html>style属性
html文档中的每一个元素都是一个对象,文档的每个元素都有一个属性style。通过style属性可以设置元素的任意css样式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
window.onload = function (){
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oBtn3 = document.getElementById('btn3');
var oBtn4 = document.getElementById('btn4');
var oP = document.getElementById('p1');
var num = 14;
oBtn1.onclick = function (){
num -= 2;
oP.style.fontSize = num + 'px';
};
oBtn2.onclick = function (){
num += 2;
oP.style.fontSize = num + 'px';
};
oBtn3.onclick = function (){
oP.style.width = '400px';
oP.style.border = '10px solid black';
oP.style.backgroundColor = 'red';
oP.style.padding = '20px';
oP.style.color = 'yellow';
};
oBtn4.onclick = function (){
oP.style.width = '500px';
oP.style.border = '5px solid black';
oP.style.backgroundColor = 'yellow';
oP.style.padding = '10px';
oP.style.color = 'red';
};
};
script>
head>
<body>
<input id="btn1" type="button" value="-" />
<input id="btn2" type="button" value="+" />
<input id="btn3" type="button" value="红" />
<input id="btn4" type="button" value="黄" />
<p id="p1" >
html文档中的每一个元素都是一个对象,文档的每个元素都有一个属性style。通过style属性可以设置元素的任意css样式
p>
body>
html>修改元素类名 className
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档title>
<script>
window.onload = function (){
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oBtn3 = document.getElementById('btn3');
var oBtn4 = document.getElementById('btn4');
var oP = document.getElementById('p1');
var num = 14;
oBtn1.onclick = function (){
num -= 2;
oP.style.fontSize = num + 'px';
// JS 不允许出现"-"
// padding-top paddingTop
// margin-left marginLeft
};
oBtn2.onclick = function (){
// num = num + 2;
num += 2;
oP.style.fontSize = num + 'px';
// JS 不允许出现"-"
};
oBtn3.onclick = function (){
// oP.class = 'red';
// class => className
oP.className = 'red';
};
oBtn4.onclick = function (){
// oP.class = 'red';
// class => className
oP.className = 'yellow';
};
};
script>
<style>
.red { width:400px; border:10px solid #333; background:red; padding:20px; color:yellow; }
.yellow { width:500px; border:5px solid #333; background:yellow; padding:10px; color:red; }
style>
head>
<body>
<input id="btn1" type="button" value="-" />
<input id="btn2" type="button" value="+" />
<input id="btn3" type="button" value="红" />
<input id="btn4" type="button" value="黄" />
<p id="p1" style="font-size:16px;">10月28日晚，中央纪委监察部官网发布消息，贵州省委常委、遵义市委书记廖少华因涉嫌严重违纪违法接受组织调查。3天后中组部宣布对其免职。廖成为十八大后中纪委一连串"打虎"行动中第十一位落马的副省部级以上高官。p>
body>
html>切换图片(数组应用)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档title>
<script>
window.onload = function (){
var oImg = document.getElementById('img1');
var arr = [ 'img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg' ];
var num = 0;
oImg.onclick = function (){
// num = num + 2;
// num += 2;
num ++;
if(num == arr.length){
num = 0;
}
// alert( arr[num] );
oImg.src = arr[num];
};
};
script>
head>
<body>
<img id="img1" src="img/1.jpg" width="400" height="400" />
body>
html>获取元素的第二种方法
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档title>
<script>
/*
var oUl = document.getElementById('list');
var aLi = oUl.getElementsByTagName('li');
// aLi => [ li, li, li ] 元素的集合
aLi.length 3
aLi[0]
*/
window.onload = function (){
// var oUl = document.getElementById('list');
var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
// document.getElementsByTagName('li');
// alert( aLi.length );
};
script>
head>
<body>
<ul id="list">
<li>li>
<li>li>
<li>li>
ul>
<ol>
<li>li>
<li>li>
ol>
body>
html>cssText
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档title>
<style>
div { width:100px; height:100px; border:1px solid #333; }
style>
head>
<body>
<div id="div1">123div>
<input id="btn1" type="button" value="按钮" />
<script>
var oDiv = document.getElementById('div1');
var oBtn = document.getElementById('btn1');
oDiv.onclick = function (){
// oDiv.style.width = '200px';
oDiv.style.cssText = ' width:200px; height:200px; ';
};
oBtn.onclick = function (){
// oDiv.style.width = '100px';
oDiv.style.cssText = '';
};
script>
body>
html>自动生成一组新闻
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档title>
<script>
window.onload = function (){
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('list');
var arr = [
'山西省委附近多次爆炸 官方称尚不确定是恐怖袭击',
'甘肃张掖明令禁止转基因 书记:无力辨别只能禁止',
'多地制定雾霾预案限行限排被批治标不治本',
'韩媒抱怨中国雾霾侵袭韩国 称其为"黑色灾难" ',
'伊朗革命卫队高官在叙利亚当"志愿者"被杀(图)'
];
oBtn.onclick = function (){
// oUl.innerHTML = '';
for( var i=0; i'' + arr[i] + '';
}
};
};
script>
head>
<body>
<input id="btn1" type="button" value="自动生成5条新闻" />
<ul id="list" style="border:1px solid red;">ul>
body>
html>this指针
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档title>
<script>
// this : 这个
// this： 指的是调用 当前 方法（函数）的那个对象
function fn1(){
// this
}
// fn1(); this => window
// oDiv.onclick = fn1; this => oDiv
/*
oDiv.onclick = function (){
fn1(); fn1() 里的this => window
};
fn1(); 里的 this 指的是 window
*/
// alert( this ); // object window
// window 是 JS “老大”
// window.alert( this );
function fn1(){
alert( this ); // window
}
// fn1();
// window.fn1();
script>
head>
<body>
<input id="btn1" type="button" value="按钮" />
<input id="btn2" type="button" onclick=" fn1(); " value="按钮2" />
<script>
var oBtn = document.getElementById('btn1');
// oBtn.onclick = fn1;
oBtn.onclick = function (){
// this
fn1();
};
script>
body>
html>this应用
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档title>
<style>
li { height:30px; border-bottom:1px solid #333; }
style>
<script>
window.onload = function (){
var oUl = document.getElementById('list');
var aLi = oUl.getElementsByTagName('li');
var arr = [ '今天', '明天', '后天' ];
var len = arr.length;
for( var i=0; ifunction (){
alert(this.innerHTML);
};
}
};
script>
head>
<body>
<ul id="list">
<li>li>
<li>li>
<li>li>
ul>
body>
html>自定义属性
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档title>
<script>
/*
HTML 标签属性、
自定义属性
*/
window.onload = function (){
var aBtn = document.getElementsByTagName('input');
// aBtn[0].abc = 123; // 自定义属性
// alert( aBtn[0].abc );
// aBtn[0].abc = 456;
// JS 可以为任何HTML元素添加任意个 自定义属性
for( var i=0; i123 ;
aBtn[i].xyz = true;
}
};
script>
head>
<body>
<input type="button" value="按钮1" />
<input type="button" value="按钮2" />
<input type="button" value="按钮3" />
body>
html>索引值
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档title>
<script>
window.onload = function (){
var aBtn = document.getElementsByTagName('input');
for( var i=0; i// 自定义属性（索引值）
aBtn[i].onclick = function (){
alert( this.index );
};
}
};
script>
head>
<body>
<input type="button" value="btn1" />
<input type="button" value="btn2" />
<input type="button" value="btn3" />
body>
html>索引值应用—选项卡
第一步：制作三个点击按钮：（其中一个按钮为选中状态）
<button class="active">1button>
<button>2button>
<button>3button>第二步：为按钮加简单样式：
<style>
input{background: white ;}
.active{background: yellow;}
style>第三步：加事件，即点击之后按钮变为yellow；
<script type="text/javascript">
window.οnlοad=function () {
var aBtn=document.getElementsByTagName("button");
var i=0;
for(i=0;ifunction () {
for(i=0;i'';
}
this.className="active"
}
}
}
script> 因此选项卡的头部就完成了，接下来做选项卡的下面部分；
第四步：在下面加内容，以及为其内容加样式，并设置第一部分内容显示，其他内容隐藏；
<div style="display:block">111div>
<div>222div>
<div>333div> div{width:200px;height:200px;background:#ccc;display:none;}
第五步：同样的为内容加点击事件：
<script type="text/javascript">
window.οnlοad=function () {
var aBtn=document.getElementsByTagName("button");
var aDiv=document.getElementsByTagName("div");
var i=0;
for(i=0;ifunction () {
for(i=0;i'';
aDiv[i].style.display='none';
}
this.className="active";
aDiv[this.index].style.display="block";
}
}
}
script> 这样选项卡就完成了。
效果原理为：
1、点击按钮时，改变class的style.display
2、选项卡的头部标签：
所有按钮的className都为空
让当前按钮的className为active
（注意this的使用）
3、选项卡内容
所有div的display都为none
让当前div的display为block
（注意当前编号的使用即aBtn[i].index=i;）
综合实战
实现QQ好友列表
<ul id="friend">
<li>
<h2>我的好友h2>
<ul>
<li>王一一li>
<li>李文化li>
<li>高发展li>
ul>
li>
<li>
<h2>我的同事h2>
<ul>
<li>黄腾达li>
<li>刘和谐li>
<li>邢如意li>
<li>沈从文li>
<li>张曼玉li>
ul>
li>
<li>
<h2>我的同学h2>
<ul>
<li>郭文明li>
<li>尹调整li>
<li>郑安全li>
ul>
li>
ul> *{ margin:0; padding:0; list-style:none; font-family:"微软雅黑";}
#friend{ width:300px; margin:50px auto 0; border-left:1px solid #ccc; border-right:1px solid #dadada;}
#friend h2{ width:270px; height:35px; line-height:35px; padding-left:30px; background: #74a400; color:#fff; font-size:16px; font-weight:100; cursor:pointer;}
#friend li{ margin-bottom:1px;}
#friend li ul li{ width:270px; padding-left:30px; height:30px; line-height:30px; border-bottom:1px solid #ccc; cursor:pointer;}
#friend li ul .active{ background:#FFC;}
#friend li ul{ display:none;}
#friend li ul.hover{ display:block;}window.onload = function (){
var oUl = document.getElementById('friend');
var aH = oUl.getElementsByTagName('h2');
var aUl = oUl.getElementsByTagName('ul');
for ( var i=0; i < aH.length; i++ ) {
aH[i].index = i;
aH[i].onclick = function () {
if ( aUl[this.index].className == '' ) {
aUl[this.index].className = 'hover';
} else {
aUl[this.index].className = '';
}
};
}
for ( var j=0; jvar aLi = aUl[j].getElementsByTagName('li');
for (var i = 0; i < aLi.length; i++) {
aLi[i].onmouseover = function () {
this.className = 'active';
};
aLi[i].onmouseout = function () {
this.className = '';
};
}
}
}