函数：是由事件驱动的或者当它被调用时执行的可以重复使用的代码块。
函数声明：
1. 自定义函数（常用）
var num=10;
function fun() {
alert(“我是自定义函数”);
}
fun(); 函数如果不调用，则自己不执行
2. 函数直接量声明
var fun1=function() {
alert(“直接量声明”)
}
fun1(); 也需要调用
3.利用Function关键字声明（少用）
var fun2=new Function(“var a=10;var b=20; return a+b”);
fun2();
提升变量（面试题）
在函数体内部，声明变量，会把该声明提升到函数体的最顶端。 只提升变量声明，不赋值。
1 function fun(){
2 console.log(num);
3 var num = 20;
4 }
相当于
1 function fun(){
2 var num;
3 console.log(num);
4 Num = 20;
5 }
结果是undefind
函数传参
function fn(a,b) 形参
{
console.log(a+b);
}
fn(1,2); 实参
结果为3
fn(5);
结果为NaN。(5,underfind) 5+underfind=NaN（数值+underfind=NaN）
fn（4,6,9）;
结果为10，多出的9可以放着不用，只加4和6。
arguments是存储了函数传送过来的实参。
<script>
function fn(a,b)
{
console.log(fn.length); //得到是 函数的形参的个数
//console.log(arguments);
console.log(arguments.length); // 得到的是实参的个数
if(fn.length == arguments.length)
{
console.log(a+b);
}
else
{
console.error("对不起，您的参数不匹配，正确的参数个数为:" + fn.length);
}
//console.log(a+b);
}
fn(1,2); 先执行，执行完再执行下面的。
fn(1,2,3);
</script>
输出为2,2,3,2,3,对不起，您的参数不匹配，正确的参数个数为2
自定义函数及实参的传参实例
<style>
div {
height: 100px;
width: 200px;
margin: 20px;
background-color: pink;
display: none;
}
</style>
<script>
function fn(obj) {/*形参，自定义函数*/
var target=document.getElementById(obj);
target.style.display="block";
}
</script>
</head>
<body>
<button onclick="fn('demo1');">按钮1</button>
<button onclick="fn('demo2');">按钮2</button>
<button onclick="fn('demo3');">按钮3</button>
<button onclick="fn('demo4');">按钮4</button>
<div id="demo1">1</div>
<div id="demo2">2</div>
<div id="demo3">3</div>
<div id="demo4">4</div>
</body>
鼠标图片轮换传参案例
<style>
*{margin:0;padding:0;}
ul{list-style:none;}
#box {
height: 70px;
width: 360px;
padding-top: 360px;
border:1px solid #ccc;
margin:100px auto;
overflow: hidden;
background: url(images/01big.jpg) no-repeat;
}
#box ul{
overflow: hidden;
border-top:1px solid #ccc;
}
#box li {
float: left;
}
</style>
<script>
window.onload = function() {
var box =document.getElementById("box");
function fn(liid,bg) {
var mama =document.getElementById(liid);
mama.onmouseover =function() {
box.style.backgroundImage=bg;
}
}
fn("li01","url(images/01big.jpg)");
fn("li02","url(images/02big.jpg)");
fn("li03","url(images/03big.jpg)");
fn("li04","url(images/04big.jpg)");
fn("li05","url(images/05big.jpg)");
}
</script>
</head>
<body>
<div id="box">
<ul>
<li id="li01"><img src="images/01.jpg" alt=""/></li>
<li id="li02"><img src="images/02.jpg" alt=""/></li>
<li id="li03"><img src="images/03.jpg" alt=""/></li>
<li id="li04"><img src="images/04.jpg" alt=""/></li>
<li id="li05"><img src="images/05.jpg" alt=""/></li>
</ul>
</div>
</body>
返回值return
return一般用来设置返回值，一个函数只能有一个返回值。同时终止代码执行。
return后面不要换行。
$id函数值（封装为一个函数来调用）
function $(id){
return document.getElementById(id);
}
$(“一个id名”).style.backgroundColor=”red”;
这样可以直接调用函数，不用写一句一句的调用。
算术运算符
A++ ++后置 每次自加1
++A ++前置 每次自加1
var num =1;
console.log(num++); 结果是1 先运算后自加，也就是先输出，然后再加1。这个1如果再有一个输出就可以看到结果为2.
console.log(++num); 结果是2 先自加后运算，先加1，后输出
1 var a=10, b=20 , c=30;
2 ++a; 11
3 a++; 12
4 e=++a+(++b)+(c++)+a++; 13+21+30+13=77 a++和c++在输出之后才各加1
5 alert(e);
77
获得焦点和失去焦点
获得焦点：onfocus
失去焦点：onblur
单等是赋值，双等是判断
赋值“=”判断“==”
输入框样式及特效
input输入框表单样式案例
<style>
input,button {
border:0 none;
padding:0;
}
.search {
width:258px;
height:40px;
margin: 100px auto;
background-color: pink;
}
.search input {
width:208px;
height: 40px;
background: url(images/left.jpg) no-repeat;
outline-style: none;
padding-left: 8px;
color: #ccc;
float: left;
}
.search button {
height: 40px;
width: 42px;
background: url(images/right.jpg) no-repeat;
float: left;
cursor: pointer;
}
</style>
<script>
window.onload =function() {
var txt = document.getElementById("txt");
txt.onfocus = function() {
if (txt.value == "请输入...") {
txt.value = "";
txt.style.color = "#333";
}
} txt.onblur = function() {
if(txt.value == "")
{
txt.value = "请输入...";
txt.style.color = "#ccc";
}
}
}
</script> </head>
<body>
<div class="search">
<input type="text" value="请输入..." id="txt"/>
<button></button>
</div>
</body>
this（自己的）
指的是本身，this主要是指事件的调用者
className类名
innerHTML更换盒子里面的内容，文字、标记、标签、图片。
表单如果想要更换内容input.value，而span行内元素是没有value的，所以使用innerHTML来更换。
isNaN不是个数字。inNaN(“12”); 如果里面的不是个数字，返回true 否则返回false
简单验证表单案例（重复多做）
<style>/*css无视频*/
.box {
text-align: center;
margin:100px auto;
}
span {
display: inline-block;
width: 150px;
height: 20px;
border: 1px solid #ccc;
font-size:12px;
line-height: 20px;
text-align: left;
padding-left: 20px;
background-color: #eee;
color:#999;
}
.right { /*正确的*/
color: #5EFF5E;
background:url(images/right.png) no-repeat #DFFFDF 4px 3px;
border: 1px solid #ACFFAC;
}
.wrong { /*错误的*/
background:url(images/wrong.png) no-repeat #FFDCD0 4px 3px;
border: 1px solid #FFAC91;
color: #FF6B39;
}
</style>
<script>
window.onload = function() {
function $(id) {return document.getElementById(id);}
$("txt").onblur = function() {
if(this.value == "")
{
$("result").className = "wrong";
$("result").innerHTML = "里面的内容不能为空";
}
else if(isNaN(this.value))
{
$("result").className = "wrong";
$("result").innerHTML = "请输入数字";
}
else if (this.value>150 || this.value<0)
{
$("result").className = "wrong";
$("result").innerHTML = "请输入合理范围";
}
else
{
$("result").className = "right";
$("result").innerHTML = "您输入正确";
}
}
}
</script>
</head>
<body>
<div class="box">
语文: <input type="text" id="txt"/> <span id="result">请输入成绩</span>
</div>
</body>
属性和方法
手机：颜色、尺寸、外在特性、材质都是属性
手机的颜色是黑色 iphone.color=”black”;
属性给值一定是等号
手机方法：打电话、发短信、玩游戏、聊天、看电影
方法是动词，可以干什么
手机打电话 iphone.tel();
方法一律带有小括号
isNaN(””）; 是一种方法，带有某种功能，用来判断是否是数字的。
表单自动获得焦点
txt.focus(); 方法
onfocus 事件
鼠标经过选择表单
this.select(); 方法
自动获得焦点案例及鼠标经过选择表单案例
<script>
window.onload = function() {
var txt = document.getElementById("txt");
var sele=document.getElementById("select");
txt.focus();/*自动获得焦点*/
sele.onmouseover = function() {
this.select();
}
}
</script>
</head>
<body>
自动获得焦点：
<input type="text" id="txt"/>
鼠标经过选择表单：
<input type="text" id="select"/>
</body>
像百度一样，打开自动光标闪动。
for循环
最简单的for循环语句
for(var i=0;i<=100;i++)
{
/*document.write("这个人已经活了"+i+"岁了<br/>");*/
if(i==0)
{
document.write("这个人出生了<br/>");
}
else if (i==25)
{
document.write("这个人结婚了<br/>");
}
else if (i==55)
{
document.write("这个人有孙子了<br/>");
}
else if (i==100)
{
document.write("这个人死了<br/>");
}
else
{
document.write("这个人"+i+"岁了<br/>");
}
}
金字塔案例
i+=3 意思是i=i+3
<script>
for(var i=1;i<=100;i+=3)
{
document.write("<hr width= "+i+"%/>");
}
</script>
getElementsByTagName() 获取某类标签
比方说所有的div li span等
getElementsByTagName()；
得到的是一个伪数组。
lis是数组
lis[索引号] 其中的某一个，第一个索引号是0
获取某类标签案例
<script>
window.onload =function() {
var lis =document.getElementsByTagName("li");
/*lis[0].innerHTML = "abc";*/
for(var i=0;i<lis.length;i++)
{
lis[i].innerHTML = "abc";
}
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>