第1节 JavaScript概述

第一节 JavaScript概述

JavaScript：其实就是对HTML+CSS静态页面进行样式修改，使其实现各种动态效果。

编写JS脚本基本步骤：

　　1. HTML+CSS静态布局；

　　2. 确定要修改的属性；

　　3.确定用户做哪些操作，即事件（产品样式）；

　　4.在事件中，用JS来修改页面元素的样式。

特效实现原理：响应用户操作，对页面元素（标签）进行某种动态效果的实现。

函数简介：

　　基本形式为“function 函数名(){……}”，把JS从标签中放入函数里，类似与CSS中的class

　　函数的定义和调用：

　　　　一般函数定义：function 函数名(){……}; n=函数名;//即为函数调用，不需加“()”

　　　　匿名函数定义：var n=……; n=function(){……};//本身也是一种函数调用

　　document。getElementById();：不会出现直接引用“id”而出现的错误

　　网站更换皮肤：即把引入的CSS样式改变了，如CSS1样式是第一种皮肤，CSS2是另一种皮肤一样。

　　HTML文件便签中怎么写特效，JS中特效就怎么写，但有一特例，HTML中的class必须在JS中写className

　　函数什么时候该传参数：当函数里有定不下来的变量是需要传参

　　在函数中，style添加的样式都是添加在便签内的，称为行间样式（而行间样式的优先级最高），所以在编写程序的时候，要么只修改style，要么只修改class。

　　提取事件：为元素添加事件，事件和其他属性一样，可以用js添加，如onload()，如下：当

　　　　　　var oBtn=document.getElementById('btn1');

　　　　　　oBtn.onclick=function(){alert('a');};

　　　　</script>

　　在标签<body></body>标签内时，函数正确运行，但是如果上述代码放在<head></head>标签内时就会报错，因为JS（与Python类似）是解释性语言，即读一行、执行一行，所以函数调用只能写在函数下面，否则就会报错，此时的解决办法为：　　　　

　　　　　　window.onload=function(){

　　　　　　　　var oBtn=document.getElementById('btn1');

　　　　　　　　oBtn.onclick=function(){alert('a');};

　　　　　　};　　　　　　

　　　　</script>

　　行为、样式、结构三者分离：即JS文件、CSS文件、HTML文件分开

　　获取一组元素：getElementByTagName　　

<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
float: left;
border:1px solid black;
margin: 10px;
}
</style>
<script>
window.onload=function(){
var aDiv=document.getElementsByTagName('div');
//alert(aDiv.length);//上述代码返回的就是一个数组，此处提示输出数组的长度
//对数组中的div的样式分别进行修改，注意，数组下标是从0开始计数的
aDiv[0].style.background='red';//即第一个div为的背景颜色变为“红色”
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

小综合：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script>
 window.onload=function(){
 var oBtn1=document.getElementById('btn1');
 var oBtn2=document.getElementById('btn2');
 var oBtn3=document.getElementById('btn3');
 var oDiv=document.getElementById('div1');
 var aCh=oDiv.getElementsByTagName('input');

 oBtn1.onclick=function () {
 //aCh[0].checked=true;
 for(var i=0; i<aCh.length; i++){
 aCh[i].checked=true;
 }
 };
 oBtn2.onclick=function () {
 //aCh[0].checked=false;
 for(var i=0; i<aCh.length; i++){
 aCh[i].checked=false;
 }
 };
 oBtn3.onclick=function () {
 //aCh[0].checked=true;
 for(var i=0; i<aCh.length; i++){
 if (aCh[i].checked==true){ //判断用==
 aCh[i].checked=false; //赋值用=
 }

 else{
 aCh[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/>
 </div>
</body>
</html>

this：当前发生事件的元素

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>选项卡</title>
 <style>
 #div1 .active{background: yellow;}
 #div1 div{
 width: 200px;
 height: 200px;
 background: #ccc;
 border: 1px solid #999;
 display: none;
 }
 </style>
 <script>
 window.onload=function()
 {
 var oDiv=document.getElementById('div1');
 var aBtn=oDiv.getElementsByTagName('input');
 var aDiv=oDiv.getElementsByTagName('div');

 for (var i = 0; i<aBtn.length; i++){
 aBtn[i].index=i; //给每一个按钮添加一个自定义属性“index”属性
 //此时用js添加自定义属性，正规浏览器不会报错；如果在标签内直接添加自定义属性，正规浏览器不会响应
 aBtn[i].onclick=function () {
 for (var i = 0;i<aBtn.length; i++){
 aBtn[i].className='';
 aDiv[i].style.display='none';
 }
 this.className='active';
 //alert(this.index);
 aDiv[this.index].style.display='block';
 };
 }
 };
 </script>
</head>
<body>
 <div id="div1">
 <input class="active" type="button" value="教育"/>
 <input type="button" value="培训"/>
 <input type="button" value="招生"/>
 <input type="button" value="出国"/>
 <div style="display: block;">111</div>
 <div>222</div>
 <div>333</div>
 <div>444</div>
 </div>
</body>
</html>

innerHTML：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>简易年历</title>
 <style>
 #tab{
 width: 360px;
 height: 600px;
 border: 1px solid black;
 text-align: center;
 line-height: 600px;
 margin: 0 auto;
 }
 #tab ul{
 margin-left: -15px;
 margin-top: 23px;
 }
 #tab ul li{
 width: 100px;
 height: 100px;
 border: 1px solid #999999;
 float: left;
 list-style: none;
 /*text-decoration: none;
 text-align: center;*/
 line-height: 20px;
 margin: 1px;

 }
 .text{
 width: 308px;
 height: 136px;
 border: 1px solid #943E01;
 margin-top: 440px;
 margin-left: 26px;
 list-style: none;
 line-height: 20px;
 }
 </style>
 <script>
 window.onload=function () {
 var arr=[
 '快过年了，大家可以商量一下去哪玩儿……',
 '不知细叶谁裁出，二月春风似剪刀。',
 '阳春三月，此之踏青最佳时节……',
 '你是人间四月天……',
 '五月初夏，时令刚好……'
 ];

 var oDiv=document.getElementById('tab');
 var oLi=oDiv.getElementsByTagName('li');
 var oTxt=oDiv.getElementsByTagName('div')[0];

 for (var i=0; i<oLi.length; i++){
 oLi[i].index=i;
 oLi[i].onmouseover=function(){
 for (var i=0; i<oLi.length; i++){
 oLi[i].className=''; 
　　　　　　　　　　　}
　　　　　　　　　　 this.className='active';
　　　　　　　　　　 oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>'; 
　　　　　　　　　　 //上句如果(this.index+1)不加“()”则系统默认为字符串连接，而不会直接运算，加“()”之后就会直接相加了
 };
 }
 };
 </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>

函数传参：函数就是占位符
style与className：
元素.style.属性=XXX 是修改行间样式
之后再修改className不会有效果
自定义属性：索引值的使用
　　什么时候需要使用索引值--需要知道第几个的时候
　　注意：HTML标签添加自定义属性标签内属性index，在运行时会被FF过滤掉，所以要使用js添加自定义索引属性

第1节 JavaScript概述

猜你喜欢