js基础第二天
2015-11-19 00:23
519 查看
函数:是由事件驱动的或者当它被调用时执行的可以重复使用的代码块。
函数声明:
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是存储了函数传送过来的实参。
输出为2,2,3,2,3,对不起,您的参数不匹配,正确的参数个数为2
自定义函数及实参的传参实例
鼠标图片轮换传参案例
返回值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输入框表单样式案例
this(自己的)
指的是本身,this主要是指事件的调用者
className类名
innerHTML更换盒子里面的内容,文字、标记、标签、图片。
表单如果想要更换内容input.value,而span行内元素是没有value的,所以使用innerHTML来更换。
isNaN不是个数字。inNaN(“12”); 如果里面的不是个数字,返回true 否则返回false
简单验证表单案例(重复多做)
属性和方法
手机:颜色、尺寸、外在特性、材质都是属性
手机的颜色是黑色 iphone.color=”black”;
属性给值一定是等号
手机方法:打电话、发短信、玩游戏、聊天、看电影
方法是动词,可以干什么
手机打电话 iphone.tel();
方法一律带有小括号
isNaN(””); 是一种方法,带有某种功能,用来判断是否是数字的。
表单自动获得焦点
txt.focus(); 方法
onfocus 事件
鼠标经过选择表单
this.select(); 方法
自动获得焦点案例及鼠标经过选择表单案例
像百度一样,打开自动光标闪动。
for循环
最简单的for循环语句
金字塔案例
i+=3 意思是i=i+3
getElementsByTagName() 获取某类标签
比方说所有的div li span等
getElementsByTagName();
得到的是一个伪数组。
lis是数组
lis[索引号] 其中的某一个,第一个索引号是0
获取某类标签案例
函数声明:
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>
相关文章推荐
- js基础第一天
- JS中eval函数(转)
- [javascript]数组基础
- 用js读、写、删除Cookie代码分享及详细注释说明
- [转]去百度面试的javascript 收获
- JavaScript SHA1加密算法实现详细代码
- js链表操作(实例讲解)
- js调用屏幕宽度的简单方法
- javascript中数组的定义及使用实例
- javascript获取系统当前时间的方法
- 基于JavaScript实现点击页面任何位置返回
- 12个常用的js正则表达式
- js鼠标点击图片切换效果实现代码
- 每天一篇javascript学习小结(属性定义方法)
- 跟我学习javascript的作用域与作用域链
- 跟我学习javascript的this关键字
- 跟我学习javascript的Date对象
- javascript获取系统当前时间的方法
- 跟我学习javascript的定时器
- javascript设计简单的秒表计时器