函数(function)
函数： 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
函数的声明
函数使用跟变量一样，需要 声明
自定义函数
function func(){
alert(123);
}
func();//函数不调用，自己不会执行
函数直接量声明
var fun1 = function(){
alert("直接量声明")
}
fun1(); 也需要调用
利用Function 关键字声明
var fun2 = new Function("var a = 10; var b = 20; alert(a+b)");
fun2();
变量提升
<script>
var num = 10;
showValue();
function showValue(){
console.log(num);//undefined
var num = 20;
}
</script>
上面的结果打印的不是10，而是undefined
上面的代码等价于====》
<script>
var num = 10;
showValue();
function showValue(){
var num;
console.log(num);
num = 20;
}
</script>
在函数体内部生命变量，会把该变量的声明放在函数体的最顶端，但是只是提升变量声明，不赋值(赋值还在原处)。
函数参数
- arguments是存储了函数传送过过来实参
- Javascript在创建函数的同时，会在函数内部创建一个arguments对象实例.
- arguments对象只有函数开始时才可用。函数的 arguments 对象并不是一个数组，访问单个参数的方式与访问数组元素的方式相同
- arguments对象的长度是由实参个数而不是形参个数决定的
<script>
/* function func(a,b){
console.dir(a+b);
}
func(1,3);//4
func(5);//NaN
func(4,6,2);//10*/
function fn(a,b){
console.log(fn.length);//2,得到形参的个数
console.log(arguments.length);//2，得到实参的个数
console.log(arguments);//实参列表
console.log(fn.arguments);//实参列表
if(fn.length == arguments.length){
console.log(a+b);
}else{
console.error("对不起，您的参数不匹配，正确的参数个数为："+fn.length);
}
}
fn(2,3);
fn(2,3,4);
</script>
例：
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,ul,li{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
.box{
width: 360px;
height: 430px;
margin: 100px auto;
}
.box li{
float: left;
margin-left: 2px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var imgDom = document.getElementById("main-img");
function fn(liId,imageSrc){
var target = document.getElementById(liId);
target.onmouseover = function(){
imgDom.src = imageSrc;
}
}
fn("li-btn1","images/01big.jpg");
fn("li-btn2","images/02big.jpg");
fn("li-btn3","images/03big.jpg");
fn("li-btn4","images/04big.jpg");
fn("li-btn5","images/05big.jpg");
}
</script>
</head>
<body>
<div class="box">
<ul>
<li id="li-btn1"></li>
<li id="li-btn2"></li>
<li id="li-btn3"></li>
<li id="li-btn4"></li>
<li id="li-btn5"></li>
</ul>
</div>
</body>
</html>
返回值 return
- 定义：
一个函数实际上就是一个计算过程，计算完成之后的结果就是返回值。 - 定义函数的返回值：
在函数内部用return来设置返回值，一个函数只能有一个返回值。
同时，终止代码的执行。 - 所有的自定义函数默认没有返回值；
- Return 后面不要换行
焦点的事件
我们前面学过了 onclick 点击 onmouseover， onmouseout。
- 获得焦点: onfocus
- 失去焦点: onblur
例：搜索框校验
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 258px;
height: 40px;
margin: 50px auto;
}
input{
padding: 0;
margin: 0;
}
.box input[type="text"]{
width: 206px;
height: 40px;
background: url("images/left.jpg");
border: 0 none;
outline-style: none;
padding-left: 10px;
float: left;
color: #999;
}
.box input[type="button"]{
width: 42px;
height: 40px;
background: url("images/right.jpg");
float: right;
border: 0 none;
cursor: pointer;
}
</style>
<script type="text/javascript">
window.onload = function(){
var searchTxt = document.getElementById("searchTxt");
searchTxt.onfocus = function(){//得到焦点
if(this.value == "请输入..."){
this.value = "";
this.style.color = "#000";
}
}
searchTxt.onblur = function(){//失去焦点
if(this.value == ""){
this.value = "请输入...";
this.style.color = "#999";
}
}
}
</script>
</head>
<body>
<div class="box">
<input type="text" value="请输入..." id="searchTxt"/>
<input type="button"/>
</div>
</body>
</html>
this、className、innerHTML、value
- 指的是本身，This 主要是指事件的调用者 。
- className 类名
$("result").className ="wrong";
- innerHTML
更换 盒子里面的内容 文字 标签都换. - 表单更换内容
Input.value - isNaN ： NaN 表示不是一个数字，isNaN是不是 不是一个数字
- isNaN(“12”) 如果里面的不是个数字 返回 true 否则返回false
例： 表单验证
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.box{
text-align: center;
margin: 100px auto;
}
.box span{
display: inline-block;
width: 200px;
height: 20px;
border: 1px solid #ccc;
line-height: 20px;
font-size: 12px;
text-align: left;
background-color: #eee;
padding-left: 20px;
color: #999;
}
.box .right{
color: #5EFF5E;
background:#DFFFDF url("images/right.png") no-repeat 4px;
border: 1px solid #ACFFAC;
}
.box .error{
color: #FF6B39;
background:#FFDCD0 url("images/wrong.png") no-repeat 4px;
border: 1px solid #FFAC91;
}
</style>
<script type="text/javascript">
window.onload = function () {
//模拟jquery,
function $(id) {return document.getElementById(id);}
$("mytxt").onblur = function () {
if(this.value == ""){
$("result").className = "error";
$("result").innerHTML = "成绩不能为空！";
}else if(isNaN(this.value)){
$("result").className = "error";
$("result").innerHTML = "成绩必须为数字哦，思密达！";
}else if(this.value>150 || this.value<0){
$("result").className = "error";
$("result").innerHTML = "成绩必须为0~150！";
}else{
$("result").className = "right";
$("result").innerHTML = "输入的成绩正确";
}
}
}
</script>
</head>
<body>
<div class="box">
语文成绩：
<input type="text" id="mytxt"/>
<span id="result">请输入语文成绩</span>
</div>
</body>
</html>
表单自动获得焦点
Input.focus(); 方法
会触发onfocus事件
鼠标经过选择表单
sele.onmouseover = function(){
this.select(); //选择
}
getElementsByTagName() 获取某类标签
前面我们可以通过id得到一个盒子：getElementById()只得到一个盒子
我们想要获取某类标签 比如说所有 的div、li、span：getElementsByTagName(); 很多个所以是复数
getElementsByTagName();返回值是一个伪数组。
