函數(shù)(function)
函數(shù)： 函數(shù)是由事件驅動的或者當它被調用時執(zhí)行的可重復使用的代碼塊潘拱。
函數(shù)的聲明
函數(shù)使用跟變量一樣幅狮，需要 聲明
自定義函數(shù)
function func(){
alert(123);
}
func();//函數(shù)不調用津畸，自己不會執(zhí)行
函數(shù)直接量聲明
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>
在函數(shù)體內部生命變量捐凭，會把該變量的聲明放在函數(shù)體的最頂端淑廊，但是只是提升變量聲明，不賦值(賦值還在原處)旧烧。
函數(shù)參數(shù)
- arguments是存儲了函數(shù)傳送過過來實參
- Javascript在創(chuàng)建函數(shù)的同時影钉，會在函數(shù)內部創(chuàng)建一個arguments對象實例.
- arguments對象只有函數(shù)開始時才可用。函數(shù)的 arguments 對象并不是一個數(shù)組掘剪，訪問單個參數(shù)的方式與訪問數(shù)組元素的方式相同
- arguments對象的長度是由實參個數(shù)而不是形參個數(shù)決定的
<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,得到形參的個數(shù)
console.log(arguments.length);//2平委，得到實參的個數(shù)
console.log(arguments);//實參列表
console.log(fn.arguments);//實參列表
if(fn.length == arguments.length){
console.log(a+b);
}else{
console.error("對不起，您的參數(shù)不匹配夺谁，正確的參數(shù)個數(shù)為："+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
- 定義：
一個函數(shù)實際上就是一個計算過程廉赔，計算完成之后的結果就是返回值。 - 定義函數(shù)的返回值：
在函數(shù)內部用return來設置返回值匾鸥，一個函數(shù)只能有一個返回值蜡塌。
同時，終止代碼的執(zhí)行勿负。 - 所有的自定義函數(shù)默認沒有返回值馏艾；
- 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 表示不是一個數(shù)字账忘，isNaN是不是 不是一個數(shù)字
- isNaN(“12”) 如果里面的不是個數(shù)字 返回 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 = "成績必須為數(shù)字哦熙宇，思密達！";
}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(); 方法
會觸發(fā)onfocus事件
鼠標經(jīng)過選擇表單
sele.onmouseover = function(){
this.select(); //選擇
}
getElementsByTagName() 獲取某類標簽
前面我們可以通過id得到一個盒子：getElementById()只得到一個盒子
我們想要獲取某類標簽 比如說所有 的div烫止、li、span：getElementsByTagName(); 很多個所以是復數(shù)
getElementsByTagName();返回值是一個偽數(shù)組戳稽。
