版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u011897110/article/details/78653787
注：这是JavaScript的复习笔记。
学习地址：学习地址
下一章：Javascript基础应用
Javascript是什么
网页特效原理
淘宝、新浪、百度
JavaScript就是修改样式
编写JS的流程
布局：HTML+CSS
属性：确定要修改哪些属性
事件：确定用户做哪些操作（产品设计）
编写JS：在事件中，用JS来修改页面元素的样式
第一个JS特效——鼠标提示框
分析效果实现原理
样式：Div的display
事件：onmouseover、onmouseout
动手编写此效果
特效基础
事件驱动：onmouseover
元素属性操作：obj.style.[……]
特效实现原理概括：响应用户操作，对页面元素（标签）进行某种修改
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
/*
* #代表id选择器
* .代表class选择器
*/
#div1{
width: 200px;
height: 200px;
background: #f3f3f3;
/* 边框：大小 类型 颜色 */
border: 2px solid #000;
/* 隐藏 */
display: none;
}
</style>
<script>
function toGreen(){
/*
* 使用document.getElementById获取ID能处理兼容性问题。
* document.getElementById('IDname'):获取的是id
* document.getElementByClassName('ClassName'):获取的是class
* var getId : 别名。
*/
var getId = document.getElementById('div1');
getId.style.background='#F3F3F3';
getId.style.display='block'
}
function toOut(){
getId.style.display='none';
}
</script>
<body>
<!--
作者：[email protected]
时间：2017-11-25
描述：
onmousemove：鼠标移入调用toGreen()方法
onmouseout：鼠标移出调用toOut()方法
鼠标常见事件总结:
mousedown：鼠标的键钮被按下。
mouseup：鼠标的键钮被释放弹起。
click：单击鼠标的键钮。
dblclick：鼠标的键钮被按下。
contextmenu ：弹出右键菜单。
mouseover：鼠标移到目标的上方。
mouseout：鼠标移出目标的上方。
mousemove：鼠标在目标的上方移动。
-->
<input type="button" value="提交" onmousemove="toGreen()" onmouseout="toOut()"/>
<div id="div1">
<a>东走西顾械阿斯蒂芬模压</a>
</div>
</body>
</html>
初识函数
制作更复杂的效果（DIV的颜色、大小都变化）直接在事件内写代码会很乱
引入fucntion()、函数的基本形式
把JS从标签里放入到函数里，类似css里的class
变量的使用——别名
定义和调用
函数定义：只是告诉系统有这个函数，不会实际执行
函数调用：真正执行函数里的代码
关系和区别
getElementById
第一个JS兼容性问题
在FF下直接使用ID存在问题
引入document.getElementById()
document.getElementById在任何浏览器下均可使用
网页换肤
土豆网“开灯、关灯”效果
任何标签都可以加ID，包括link
任何标签的任何属性，也都可以修改
HTML里怎么写，JS里就怎么写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#div1{
width: 100px; height: 200px; background:red;
display: none;
}
</style>
<script>
function show(){
var getId = document.getElementById('div1');
if(getId.style.display == 'block'){
getId.style.display='none';
}else{
getId.style.display='block';
}
}
</script>
<body>
<input type="button" value="显示/隐藏" onclick="show()" />
<div id="div1">
</div>
<div>
asdf
</div>
</body>
</html>if判断
点击按钮显示/隐藏Div （弹出菜单）
特效实现过程及原理分析
if的基本形式
扩展
为a链接添加JS
<a href=“javascript:;”></a>
className的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
作者：[email protected]
时间：2017-11-25
描述：
link:定义文档与外部资源的关系
rel:规定当前文档与被链接文档之间的关系.
href:规定被链接文档的位置
-->
<link id="js002_1" rel="stylesheet" href="css/JS_002_1.css" />
<script>
function setLink01(){
document.getElementById('js002_1').href='css/JS_002_1.css';
}
function setLink02(){
document.getElementById('js002_1').href='css/JS_002_2.css';
}
</script>
<body>
<!--
作者：[email protected]
时间：2017-11-25
描述：
title:鼠标移到元素上时显示一段提示文本
-->
<input type="button" value="皮肤1" onclick="setLink01()" title="皮肤1" />
<input type="button" value="皮肤2" onclick="setLink02()" title="皮肤2" />
</body>
</html>
函数传参
改变背景颜色
函数传参：参数就是占位符
什么时候用传参——函数里定不下来的东西
改变Div的任意样式
操纵属性的第二种方式
什么时候用：要修改的属性不固定
字符串和变量——区别和关系
将属性名作为参数传递
style与className
元素.style.属性=xxx 是修改行间样式
之后再修改className不会有效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#div1{
width: 200px;
height: 200px;
background: red;
}
</style>
<script>
function show(name, value){
var Gdiv1 = document.getElementById('div1');
/*
* 第一种操作属性的方法
* Gdiv1.style.name = value;
* 第二种操作属性的方法 name是字符串，所以可以传入变量
* Gdiv1.style['name'] = value;
*/
Gdiv1.style[name] = value;
}
</script>
<body>
<input type="button" value="变宽" onclick="show('width','400px')" />
<input type="button" value="变高" onclick="show('height','400px')" />
<input type="button" value="变绿" onclick="show('background','green')" />
<div id="div1">
</div>
</body>
</html>
提取行间事件
提取事件
为元素添加事件
事件和其他属性一样，可以用JS添加
window.onload的意义
行为、样式、结构三者分离
获取一组元素
getElementsByTagName
数组的使用
里面的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
border: 1px solid #000000;
width: 200px;
height: 200px;
float: left;
margin-right: 20px;
}
</style>
<script>
/*
* window.onload:在页面加载完才加载代码
*/
window.onload=function(){
var obtn = document.getElementById('btn1');
/*
* 匿名函数
*/
obtn.onclick=function (){
alert('zl');
};
/*
* getElementsByTagName() 方法会使用指定的标签名返回所有的元素（作为一个节点列表），这些元素是您在使用此方法时所处的元素的后代。
*/
var adiv = document.getElementsByTagName('div');
alert(adiv.length);
for (var i=0; i<adiv.length; i++){
adiv[i].style.background='red';
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="提交" />
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
</body>
</html>
循环
用while引入循环的概念
while循环语法
自增的意义
循环的构成：初始化、条件、语句、自增
for循环
用for代替while循环
用for循环为一组元素添加事件
什么时候用循环——一组元素
例子
全选——checked属性
反选——for循环配合if判断
<!DOCTYPE html>
<html>
<head>
<meta 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 oCheckbox = document.getElementById('div1').getElementsByTagName('input');
oBtn1.onclick = function(){
for(var i=0; i<oCheckbox.length; i++){
oCheckbox[i].checked=true;
}
}
oBtn2.onclick = function(){
for(var i=0; i<oCheckbox.length; i++){
oCheckbox[i].checked=false;
}
}
oBtn3.onclick = function(){
for(var i=0; i<oCheckbox.length; i++){
if(oCheckbox[i].checked == true){
oCheckbox[i].checked=false;
}else{
oCheckbox[i].checked=true;
}
}
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="全选" />
<input id="btn2" type="button" value="全不选" />
<input id="btn3" type="button" value="反选" />
<br />
<div id="div1">
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
</div>
</body>
</html>
全选的优化
----------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选</title>
<script>
window.onload=function(){
var oBtn1 = document.getElementById('btn1');
var oBtn3 = document.getElementById('btn3');
var oCheckbox = document.getElementById('div1').getElementsByTagName('input');
oBtn1.onclick = function(){
for(var i=0; i<oCheckbox.length; i++){
if(oBtn1.checked == true){
oCheckbox[i].checked=true;
}else{
oCheckbox[i].checked=false;
}
}
}
oBtn3.onclick = function(){
for(var i=0; i<oCheckbox.length; i++){
if(oCheckbox[i].checked == true){
oCheckbox[i].checked=false;
}else{
oCheckbox[i].checked=true;
}
}
}
}
</script>
</head>
<body>
全选<input id="btn1" type="checkbox" />
<input id="btn3" type="button" value="反选" />
<br />
<div id="div1">
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
</div>
</body>
</html>
选项卡
按钮的实现
添加事件
this的使用
先清空所有按钮，再选中当前按钮
内容的实现(div)
先隐藏所有Div，再显示”当前”Div
索引值的使用
什么时候用索引值——需要知道“第几个”的时候
html添加index——会被FF过滤
js添加index
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style>
.cdiv1 {
width: 200px;
height: 200px;
background: #ccc;
border: 1px solid #000;
display: none;
}
#div1 .active {
background: yellow;
}
</style>
<script>
window.onload=function(){
var odiv1 = document.getElementById('div1');
var inputs = odiv1.getElementsByTagName('input');
var divs = odiv1.getElementsByTagName('div');
for(var i=0; i<inputs.length; i++){
/*
* 通过自定义的index来装i的值。
*/
inputs[i].index=i;
var j = new Array();
inputs[i].onclick=function(){
/*
* this:当前发生事件的元素
* alert(this.value);
*/
/*
* 用来清空active的颜色和div的显示/隐藏
*/
for(var i=0; i<inputs.length; i++){
inputs[i].className='';
divs[i].style.display='none';
}
this.className='active';
divs[this.index].style.display='block';
}
}
}
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="11">
<input type="button" value="22">
<input type="button" value="33">
<input type="button" value="44">
<div class="cdiv1" style="display: block;">1</div>
<div class="cdiv1">2</div>
<div class="cdiv1">3</div>
<div class="cdiv1">4</div>
</div>
</body>
</html>JS简易日历
程序实现思路
类似选项卡，只是下面只有一个div
innerHTML的使用
数组的使用
定义：arr=[1,2,3]
使用：arr[0]
字符串连接
作用：连接两个字符串
问题：连接中的优先级
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript简易日历</title>
<link href="css/zns_style.css" rel="stylesheet" type="text/css" />
<script>
window.onload=function(){
var sum = ['快过年了，大家可以商量着去哪玩吧～',
'精通JavaScript开发课程 - 结课标准 - 有十条标准可让大家修练成JS高手……',
'HTML5开发课程，让你熟练掌握移动应用开发技术',
'精通各种DOM类应用，熟练掌握面向对象编程思想（OOP）、熟悉JS面向对象开发方式',
'熟练掌握AJAX技术及相关应用（例如：新浪微博级应用）',
'可以独立写出类似jQuery的小型库（支持各类选择符、事件类、DOM、自定义动画animate、AJAX……）',
'精通JS运动特效技术，能完整实现各类网站所有动画特效，如 智能课堂 官网',
'掌握JS调试及优化技术、能兼容所有浏览器',
'精通JS事件对象及事件的工作机制，并能完成各类跨平台应用模块的开发',
'能独立开发表现和性能都很优秀的RIA应用',
'了解后台编程的相关知识，能够和后台工程师配合完成大型交互应用',
'熟悉正则表达式的编写、应用及高级表单验证技术'];
var oTab = document.getElementById('tab');
var oLis = oTab.getElementsByTagName('li');
var oDiv = oTab.getElementsByTagName('div')[0];
for(var i=0; i<oLis.length; i++){
oLis[i].index = i;
oLis[i].onmousemove=function(){
for(var i=0; i<oLis.length; i++){
oLis[i].className='';
}
this.className='active';
/*
* innerHTML:获取对象的内容 或 向对象插入内容
* oDiv.innerHTML : 获取对象的内容
* oDiv.innerHTML = ‘’: 向对象插入内容
*/
oDiv.innerHTML = '<h2>'+(this.index+1)+'月活动</h2><p>'+sum[this.index]+'</p>';
}
}
}
</script>
</head>
<body>
<div id="tab" class="calendar">
<ul>
<li class="active"><h2>1</h2><p>JAN</p></li>
<li><h2>2</h2><p>FER</p></li>
<li><h2>3</h2><p>MAR</p></li>
<li><h2>4</h2><p>APR</p></li>
<li><h2>5</h2><p>MAY</p></li>
<li><h2>6</h2><p>JUN</p></li>
<li><h2>7</h2><p>JUL</p></li>
<li><h2>8</h2><p>AUG</p></li>
<li><h2>9</h2><p>SEP</p></li>
<li><h2>10</h2><p>OCT</p></li>
<li><h2>11</h2><p>NOV</p></li>
<li><h2>12</h2><p>DEC</p></li>
</ul>
<div class="text">
<h2>1月活动</h2>
<p>快过年了，大家可以商量着去哪玩吧～</p>
</div>
</div>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
* { padding: 0; margin: 0; }
li { list-style: none; }
body { background: #f6f9fc; font-family: arial; }
.calendar { width: 210px; margin: 50px auto 0; padding: 10px 10px 20px 20px; background: #eae9e9; }
.calendar ul { width: 210px; overflow: hidden; padding-bottom: 10px; }
.calendar li { float: left; width: 58px; height: 54px; margin: 10px 10px 0 0; border: 1px solid #fff; background: #424242; color: #fff; text-align: center; cursor: pointer; }
.calendar li h2 { font-size: 20px; padding-top: 5px; }
.calendar li p { font-size: 14px; }
.calendar .active { border: 1px solid #424242; background: #fff; color: #e84a7e; }
.calendar .active h2 { }
.calendar .active p { font-weight: bold; }
.calendar .text { width: 178px; padding: 0 10px 10px; border: 1px solid #fff; padding-top: 10px; background: #f1f1f1; color: #555; }
.calendar .text h2 {font-size: 14px; margin-bottom: 10px; }
.calendar .text p { font-size: 12px; line-height: 18px; }