JS(3)
来源：互联网 发布：淘宝卖家支付宝额度 编辑：程序博客网 时间：2024/06/03 18:43
复习
一、提示框
1. 弹出警示框 alert(); window.alert(); window 窗口 2. 控制台输出 console.log() 3. 文档打印 document 文档 document.write();下面哪种JavaScript语法格式是正确的（ ）
A．echo "I enjoy JavaScript"; B．document.write( I enjoy JavaScript)C．response.write("I enjoy JavaScript "); D．alert("I enjoy JavaScript ");d是对的。
二、 变量
字母 _ $ 开头
var dd=100,ee=10声明多个变量逗号隔开
Javascript中, 以下声明变量语句中哪个不正确？
A、var aa; B、var bb=3; cc='good'; C、var dd = ee = 100; D、var ff=3, gg='he's good';D 错， gg的格式错误
三、 事件三要素
事件源 被触发的对象 名词
事件 动词 onclick onmouseover onmouseout
事件处理程序 放到函数里面就行了
事件源.事件 = function(){ 语句; }
入口函数:window.onload = function(){ }
四、
行内式 <div onclick=”alert(11)”>
内嵌式
外链式 <script type=”text/javascript” src=”xx.js”></script>
五、数据类型
Number string boolean null undefined
函数(function)
函数： 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
函数的声明
函数使用跟变量一样，需要 声明
自定义函数
function fun(){ alert("我是自定义函数")}fun(); // 函数不调用，自己不执行函数直接量声明
var fun1 = function(){ alert("直接量声明")}fun1(); 也需要调用利用Function 关键字声明
var fun2 = new Function("var a = 10; var b = 20; alert(a+b)");fun2();变量声明提升
什么是变量提升
1 function fun(){2 console.log(num);3 var num = 20;4 }相当于 —
5 function fun(){6 var num;7 console.log(num);8 Num = 20;9 }在函数体内部，声明变量，会把该声明提升到函数体的最顶端。 只提升变量声明，不赋值。
var a = 18;f1();function f1(){ var b=9; console.log(a); console.log(b); var a = '123';}结果是： undefined 9
函数参数
arguments是存储了函数传送过过来实参
Javascript在创建函数的同时，会在函数内部创建一个arguments对象实例.
arguments对象只有函数开始时才可用。函数的 arguments 对象并不是一个数组，访问单个参数的方式与访问数组元素的方式相同
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>var a = 10, b = 20;
等价的
var a = 10;
var b = 20;
案例 鼠标展示
代码：
var box = document.getElementById("box");function fn(liid,bg){ // 封装函数 参数的传递 var obj = document.getElementById(liid); obj.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)");案例 函数传递控制盒子
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 100px; background-color: pink; margin:20px; display: none; } </style> <script> window.onload = function(){} //功能相同的 都是显示某个盒子 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></html>$id函数
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; height: 100px; background-color: pink; } </style></head><body><div id="demo"></div><div id="test"></div><div id="another"></div><script> /*var demo = document.getElementById("demo"); var test = document.getElementById("test"); var another = document.getElementById("another");*/ function $(id){ return document.getElementById(id); } $("demo").style.backgroundColor = 'purple'; $("test").style.backgroundColor = "blue";</script></body></html>把获得元素封装成函数，起到简化书写的作用。
返回值 return
定义：
一个函数实际上就是一个计算过程，计算完成之后的结果就是返回值。
定义函数的返回值：
在函数内部用return来设置返回值，一个函数只能有一个返回值。
同时，终止代码的执行。
所有的自定义函数默认没有返回值；
return 后面不要换行
function $(id){ return document.getElementById(id);}$("demo").style.backgroundColor = 'purple';$("test").style.backgroundColor = "blue";以下代码执行的结果是多少？请分析为什么？
1 var total=10;1 var number = square(5);2 alert(number);3 function square(n) {4 total = n*n;5 return total;6 }结果是 25
算术运算符
+ - * / % ^
1+1 = 2 5%2 == 1 2%5 == 2
2^3 a++ ++后置 每次自加1 先运算后自加
++a ++前置 每次自加1 先自加 后运算
分析代码，得出正确的结果。
var a=10, b=20 , c=30;++a;a++;e=++a+(++b)+(c++)+a++;alert(e);result: 77
条件语句(if)
If(条件表达式) { 语句;}
If() {}else {}
If() else if(){} else if(){} else {}
实例：检验是否中奖
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload = function(){ function $(id){ return document.getElementById(id);} $("btn").onclick = function(){ //alert(11); //alert($("txt").value); // 获得表单的值 if($("txt").value == "刘德华") { alert("恭喜"); } else { alert("查无此人"); } } } </script></head><body><input type="text" id="txt" value="请输入.."/> <button id="btn">查询</button></body></html>获得焦点 失去焦点 事件
我们前面学过了 onclick 点击 onmouseover onmouseout’
获得焦点: onfocus
失去焦点: onblur
两个表单小方法：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <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></html> <script> window.onload = function(){ var txt = document.getElementById("txt"); txt.onfocus = function(){ //得到焦点 //alert("得到了焦点"); //什么时候该清空呢 //用户没有输入的时候，用户第一次使用的时候 // 如果 这里input 里面的文字 是 请输入... 说明用户没有用过，就应该清空 if(txt.value == "请输入...") { txt.value = ""; txt.style.color = "#333"; } } txt.onblur = function(){ //失去焦点 //alert("失去了焦点"); //什么时候再还原呢？ //input的值是 空的时候，我们再复原 if(txt.value == "") { txt.value = "请输入..."; txt.style.color = "#ccc"; } } }</script>this (自己的)
指的是本身
This 主要是指事件的调用者 。
className 类名 $("result").className ="wrong";
innerHTML
更换 盒子里面的内容 文字 标签都换.
表单更换内容
input.value
isNaN(“12”) 如果里面的不是个数字 返回 true 否则返回false
属性和方法
手机
黑色的 5.5寸的
外在特性
属性
手机的颜色是黑色的。 Iphone.color = “red”; 属性给值一定是等号
方法：
手机 打电话 发短信 玩游戏 聊QQ 看电影
动词 可以干什么 Iphone.tel();
方法和属性的区别：
方法一律带有小括号 isNaN( ); 动词
方法给值：isNaN（“值”）;
表单自动获得焦点
Txt.focus(); 方法
onfocus 事件
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload = function(){ var txt = document.getElementById("txt"); txt.focus(); //自动获得焦点 } </script></head><body>自动获得焦点:<input type="text" id="txt"/></body></html>鼠标经过选择表单
sele.onmouseover = function(){ this.select(); //选择}方法.select(); 选择功能
For 循环
getElementsByTagName() 获取某类标签
前面我们可以得到一个盒子 通过 id 获得
getElementById() 只得到一个 盒子
我们想要获取某类标签 比如说所有 的div li span
getElementsByTagName(); 很多个所以是复数 很多个
得到的是一个伪数组。
Lis 数组
Lis[索引号] 一个
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload = function(){ var lis = document.getElementsByTagName("li"); // lis[1].innerHTML = "abc"; //alert(lis.length); for(var i=0; i<lis.length-1;i++) { lis[i].innerHTML = "abc"; } } </script></head><body><ul id="btn"> <li>123</li> <li>123</li> <li>123</li> <li>123</li> <li>123</li></ul></body></html>作业
1.编写一个程序，计算增加后的工资。要求工龄满5，增加20%工资；若2—4，则增加15%；若小于2，则增加10%工资。
2. 编写一个程序，用户输入一个数，可以求出这个数的阶乘。
3. 利用for循环 遍历 京东背景图片。
案例
鼠标展示：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <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(){ /* 一共有五组 这些有哪些相同的部分： 鼠标经过 背景更换图片 我们可以吧这两个放到一个函数里面 重复使用就可以*/ //事件源 li 事件 鼠标经过 事件处理程序 box 更换背景 /* var li02 = document.getElementById("li02"); var box = document.getElementById("box"); li02.onmouseover = function(){ box.style.backgroundImage = "url(images/02big.jpg)"; } var li01 = document.getElementById("li01"); var box = document.getElementById("box"); li01.onmouseover = function(){ box.style.backgroundImage = "url(images/01big.jpg)"; }*/ var box = document.getElementById("box"); function fn(liid,bg){ // 封装函数 参数的传递 var obj = document.getElementById(liid); obj.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></html>核心思想：封装函数，达到简化代码的效果
点击隐藏文字的效果
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <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(){ //得到焦点 //alert("得到了焦点"); //什么时候该清空呢 //用户没有输入的时候，用户第一次使用的时候 // 如果 这里input 里面的文字 是 请输入... 说明用户没有用过，就应该清空 if(txt.value == "请输入..." ) { txt.value = ""; txt.style.color = "#333"; } } txt.onblur = function(){ //失去焦点 //alert("失去了焦点"); //什么时候再还原呢？ //input的值是 空的时候，我们再复原 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></html>简单验证表单
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .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(){ // 离开焦点判断 // alert($("txt").value); //alert(this.value); 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></html>初次学习，这几个例子一定要熟练掌握。
阅读全文
0 0
- js-3
- JS(3)
- JS-3
- JS学习笔记3 TextUtil.js
- js 继承(3 使用prototype.js)
- Node.js(3) -- 七天学会node.js
- js常用技巧3
- js学习3
- JS资料3
- JS应用3
- js日期控件 3
- js应用3
- js学习笔记3
- JS 正则表达式 3
- JS总结3--(注意事项)
- JS绘图3
- html-js案例3
- js 图片效果3
- ORACLE中游标的使用（二）
- 第三周—项目1-顺序表的基本运算
- 修改Eclipse中XML文件的格式化配置
- HDU 6208 The Dominator of Strings AC自动机
- 知识碎片
- JS(3)
- shell
- HTML5的data-*自定义属性
- 笔试题——回文数组
- SPOJ
- 【《Real-Time Rendering 3rd》 提炼总结】(八) 第九章 · 全局光照:光线追踪、路径追踪与GI技术进化编年史
- 适配器
- bzoj 4936: [Ceoi2016]match hash+构造
- POJ 1654 求多边形面积
