一、初探JS魅力
这部分的内容有5课时,是JS最基础的部分,在学习过程中简单了解了JS变量、事件、函数,还有知道一些常见的JS语法像通过Id或标签获取元素。
事件:用户操作;(onmouseover,onmouseout, onclick)
函数:
函数定义:只是告诉系统有这个函数,不会实际执行;
函数调用:真正执行函数里的代码;
函数传参:
参数就是占位符;什么时候用传参——函数里定不下来的东西;
变量:
给一个东西取一个别名;
字符串和变量:(用引号和不用引号)
-字面量(常量):看到东西,自然知道是什么; 比如:12 、‘abc’
-变量:可以变的量; 比如:a
-变量和参数不需要加引号,除此之外的字符串需要加引号;
getElementById:
第一个JS兼容性问题,在FF下直接使用ID存在问题——引入document.getElementById(),document.getElementById在任何浏览器下均可使用;
this:
当前发生事件的元素
样式优先级:
*<标签<class<ID<行间
练习:
1、鼠标提示框
鼠标移入到input上,让div1显示;(onmouseover)
鼠标移除input 让div1隐藏; (onmouseout)
onmouseover="div1.style.display='block';"
onmouseout="div1.style.display='none';"
兼容性(Firefox div不能直接用,要用documnent.getElementById)
onmouseover="document.getElementById('div1').style.display='block';"
onmouseout="document.getElementById('div1') .style.display='none';"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标提示框</title>
<!-- 行内样式的写法 -->
<style type="text/css">
#div1{width: 200px; height: 100px; background: #999; border: 1px solid black; display: none;}
</style>
</head>
<body>
<!-- 当鼠标移入到checkbox上,div显示;移出,div消失; -->
<!-- IE/chrome-->
<!-- <input type="checkbox" onmouseover="div1.style.display='block'" onmouseout="div1.style.display='none'" />
<div id="div1">为了你的信息安全</div> -->
<!-- FF/低版本的chrome下面不能直接使用div的id-->
<input type="checkbox" onmouseover="document.getElementById('div1').style.display='block'" onmouseout="document.getElementById('div1').style.display='none'" />
<div id="div1">为了你的信息安全</div>
</body>
</html>
2、Div的颜色和大小都在改变
函数基本格式
function toGreen(){
var odiv=document.getElementById('div1');
odiv.style.width='300px';
odiv.style.height='300px';
odiv.style.background='red';
}
onmouseover='toGreen()'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>改变div样式</title>
<style type="text/css">
#div1{width: 200px; height: 200px; background: red; }
</style>
<script type="text/javascript">
function toGreen(){
var oDiv=document.getElementById("div1");
oDiv.style.width="300px";
oDiv.style.height="300px";
oDiv.style.background="green";
}
function toRed(){
var oDiv=document.getElementById("div1");
oDiv.style.width="200px";
oDiv.style.height="200px";
oDiv.style.background="red";
}
</script>
</head>
<body>
<div id="div1" onmouseover="toGreen()" onmouseout="toRed()"></div>
</body>
</html>
3、网页换肤
-任何标签都可以加id,包括link; <link id='l1' rel='stylesheet' type='text/css' href='huanfu1.css' />
-任何标签里的任何属性,也都可以修改;
-HTML里怎么写,JS里就怎么写;
(通过一些属性来增加东西,HTML对应于什么属性,JS里面就可以添加什么属性,但className是个例外,html中class属性在Js中要写className)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页换肤</title>
<!-- 任何标签都可以加id 包括link和html -->
<link id="l1" rel="stylesheet" type="text/css" href="css2.css">
<script type="text/javascript">
function to1(){
var oL=document.getElementById("l1");
oL.href="css1.css";
}
function to2(){
var oL=document.getElementById("l1");
oL.href="css2.css";
}
</script>
</head>
<body>
<!-- 点击换肤1,使用css1样式,点击换肤2,使用css2样式; -->
<input type="button" value="换肤1" onclick="to1()" />
<input type="button" value="换肤2" onclick="to2()" />
</body>
</html>
/*css1.css*/
body{
background: black;
}
input{
width: 200px;
height: 100px;
background: yellow;
}
/*css2.css*/
body{
background: #ccc;
}
input{
width: 100px;
height: 50px;
background: red;
}
4、改文字 //点击按钮,文本框有title
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>改文字</title>
<script type="text/javascript">
function showTxt(){
var oTxt=document.getElementById("txt1");
// html里怎么写,JS里面就怎么写
txt1.title="sdfdgfdgfg";
};
</script>
</head>
<body>
<!-- 点击按钮,文本框里有文字显示 -->
<input id="txt1" type="text" >
<input type="button" value="改文字" onclick="showTxt()">
</body>
</html>
5、下拉菜单(!!!!!!!!!!!!!!!)
当用户点击的时候,如果div是显示的,隐藏掉;如果div是隐藏的,显示出来;
if(odiv.style.display=='block'){
odiv.style.display='none';
}else{
odiv.style.display='block';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示隐藏if使用</title>
<style type="text/css">
div{width: 200px; height: 200px; background: red; display: none;}
</style>
<script type="text/javascript">
function showHide(){
var oDiv=document.getElementById("div1");
if(oDiv.style.display=="block"){
oDiv.style.display="none";
}else{
oDiv.style.display="block";
}
};
</script>
</head>
<body>
<!-- 当div显示,点击按钮,隐藏;当div隐藏,点击按钮,显示; -->
<input type="button" value="显示隐藏" onclick="showHide()">
<div id="div1"></div>
</body>
</html>
6、为a链接添加JS
<a href='javascript: ;' ></a>
-平时在href里面是放一个网址;
-也可以在a里面放js,表示执行这个js语句;
-一般不会在Js里面放置代码,而是让它空着,1 a里面放Js非常不好(后面会学到),给个空的放到这儿代替#号(不会跳转);
7、改变背景颜色/样式(!!!!!!!!!!!!!)
<input type='button' value='变黄' onclick='setColor('yellow')' />
<div id='div1'>
</div>
//改变背景颜色 传颜色1个参数
function setColor(color){
var odiv=document.getElementById('div1');
odiv.style。background="yellow";
}
//改变背景样式 传name value两个参数
function setStyle(name, value){
var odiv=document.getElementById('div1');
odiv.style[name]=value;
}
<input type='button' value='变宽' onclick='setStyle('width', '400px')' />
<input type='button' value='变黄' onclick='setStyle('background', 'yellow')' />
操作属性的方法
-----------------------------------------------------------------04------------------------------------------------------------------------------
8、函数传参
style与className
-元素.style.属性=XXX是修改行间样式
-之后再修改className不会有效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数传参改变div颜色</title>
<style type="text/css">
#div1{width: 200px; height: 200px; border: 1px solid black; }
</style>
<script type="text/javascript">
function setColor (color) {
var oDiv=document.getElementById("div1");
oDiv.style.background=color;
};
</script>
</head>
<body>
<input type="button" value="变红" onclick="setColor('red')" />
<input type="button" value="变绿" onclick="setColor('green')" />
<input type="button" value="变黄" onclick="setColor('yellow')" />
<div id="div1"></div>
</body>
</html>
9、改变div属性的任意样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>方括号属性操作样式</title>
<style type="text/css">
#div1{width: 100px; height: 100px; background: red; }
</style>
<script type="text/javascript">
function setStyle(name,value){
var oDiv=document.getElementById("div1");
oDiv.style[name]=value;
};
</script>
</head>
<body>
<input type="button" value="变宽" onclick="setStyle('width','300px')" />
<input type="button" value="变高" onclick="setStyle('height','300px')" />
<input type="button" value="变绿" onclick="setStyle('background','green')" />
<div id="div1"></div>
</body>
</html>
10、提取行间事件
style加样式,在行间里加;style取样式,在行间里取;
-如何为元素添加事件
事件和其他属性一样,可以用JS添加
window.onload的意义 页面加载完成的时候发生 window.onload=function (){};
行为、样式、结构三者分离
-获取一组元素
getElementsByTagName
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>提取行间事件onclick</title>
<!-- script放在head中,用window.onload,页面加载完成后执行 -->
<script type="text/javascript">
window.onload=function (){
var oBtn=document.getElementById("btn1");
oBtn.onclick=function (){
alert('a');
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="按钮" />
<!-- script放在head里会出错 -->
<script>
// var oBtn=document.getElementById("btn1");
// function abc(){
// alert('a');
// };
// 记住这里添加事件是直接给函数的名字
//oBtn.onclick=abc;
</script>
</body>
</html>
问题:Js函数调用什么时候加括号,什么时候不加括号
函数只要是要调用它进行执行的,都必须加括号。此时,函数()实际上等于函数的返回值。当然,有些没有返回值,但已经执行了函数体内的行为,这个是根本,就是说,只要加括号的,就代表将会执行函数体代码。
不加括号的,都是把函数名称作为函数的指针,用于传参,此时不是得到函数的结果,因为不会运行函数体代码。它只是传递了函数体所在的地址位置,在需要的时候好找到函数体去执行。
所以一般时候我们都是采用的是无括号的原因。这也是由于括号的二义性,因为括号是“函数调用运算符”,相当于在执行这样一个函数,所以产生的问题在理解了之后也就理解了。
不加括号的,都是把函数名称作为函数的指针,用于传参,此时不是得到函数的结果,因为不会运行函数体代码。它只是传递了函数体所在的地址位置,在需要的时候好找到函数体去执行。
所以一般时候我们都是采用的是无括号的原因。这也是由于括号的二义性,因为括号是“函数调用运算符”,相当于在执行这样一个函数,所以产生的问题在理解了之后也就理解了。
11、匿名函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>匿名函数</title>
</head>
<body>
<input id="btn1" type="button" value="按钮" />
<script type="text/javascript">
var oBtn=document.getElementById("btn1");
oBtn.onclick=function (){
alert('a');
};
</script>
</body>
</html>
12、循环
for(var i=0; i<odiv.length; i++)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementsByTagName</title>
<style type="text/css">
div{width: 200px; height: 200px; border: 1px solid black; float: left; margin:20px;}
</style>
<script type="text/javascript">
window.onload=function(){
var oDivs=document.getElementsByTagName("div");
for(var i=0; i<oDivs.length; i++){
oDivs[i].style.background="red"
; }
};
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
13、复选框
邮箱全选/不选/反选
var obtn1=document.getElementById('btn1');
var odiv=document.getElementById('div1');
var ach=odiv.getElementsByTagName('input');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>checkbox</title>
<script type="text/javascript">
window.onload=function (){
var oBtn1=document.getElementById("btn1");
var oBtn2=document.getElementById("btn2");
var oBtn3=document.getElementById("btn3");
var ach=document.getElementsByTagName("input");
oBtn1.onclick=function (){
for(var i=1; i<ach.length; i++){
ach[i].checked=true;
}
};
oBtn2.onclick=function (){
for(var i=1; i<ach.length; i++){
ach[i].checked=false;
}
};
oBtn3.onclick=function (){
for(var i=1; 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 />
<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 />
</body>
</html>
11、选项卡/标签切换(!!!!!!!!!)//了解逻辑过程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
#div1 div{width: 200px; height: 200px; background: #ccc; border: 1px solid black; display: none; }
#div1 .active{ background: yellow;}
</style>
<script type="text/javascript">
window.onload=function (){
var oDiv=document.getElementById("div1");
var aBtn=div1.getElementsByTagName("input");
var aDiv=div1.getElementsByTagName("div");
for(var i=0; i<aBtn.length; i++){
//给当前事件一个自定义的属性,用来储存下标
aBtn[i].index=i;
aBtn[i].onclick=function (){
for(var j=0; j<aBtn.length; j++){
aBtn[j].className=" ";
aDiv[j].style.display="none";
}
this.className="active";
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>
12、JS简易日历(!!!!!!!!!!)
类似选项卡,只是下面只有一个div
innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Js年历</title>
<link rel="stylesheet" type="text/css" href="calendar.css">
<script type="text/javascript">
window.onload=function (){
var arr=[
"dfdgfdgfg",
"dfdfdsfdfdsfdf",
"dsfsq23r",
"dfertg",
"dfdgfdgfg",
"dfdfdsfdfdsfdf",
"dsfsq23r",
"dfertg",
"dfdgfdgfg",
"dfdfdsfdfdsfdf",
"dsfsq23r",
"dfertg",
];
var oDiv=document.getElementById("tab");
var aLi=oDiv.getElementsByTagName("li");
var oTxt=oDiv.getElementsByTagName("div")[0];
for(var i=0; i<aLi.length; i++){
aLi[i].index=i;
aLi[i].onmouseover=function (){
for(var j=0; j<aLi.length; j++){
aLi[j].className=" ";
}
this.className="active";
oTxt.innerHTML="<h2>"+(this.index+1)+"月活动</h2><p>"+arr[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>JAN</p></li>
<li><h2>3</h2><p>JAN</p></li>
<li><h2>4</h2><p>JAN</p></li>
<li><h2>5</h2><p>JAN</p></li>
<li><h2>6</h2><p>JAN</p></li>
<li><h2>7</h2><p>JAN</p></li>
<li><h2>8</h2><p>JAN</p></li>
<li><h2>9</h2><p>JAN</p></li>
<li><h2>10</h2><p>JAN</p></li>
<li><h2>11</h2><p>JAN</p></li>
<li><h2>12</h2><p>JAN</p></li>
</ul>
<div class="text">
<h2>1月活动</h2>
<p>过年了,大家可以商量着去哪儿玩呢~</p>
</div>
</div>
</body>
</html>