javascript学习5

%运算符的使用

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script type="text/javascript">
 7             window.onload=function(){
 8                 var aLi=document.getElementsByTagName('li');
 9                 var arr=['red','yellow','blue'];
10                 for(var i=0;i<aLi.length;i++){
11                     aLi[i].index=i;
12                     aLi[i].style.background=arr[i%arr.length];
13
14                     aLi[i].onmouseover=function(){
15                         this.style.background='#000';
16                     }
17                     aLi[i].onmouseout=function(){
18                         this.style.background=arr[this.index%arr.length];
19                     }
20                 }
21             }
22             /*
23              说明：
24                  0%3=0
25                  1%3=1
26                  2%3=2
27                  3%3=0
28                  4%3=1
29                  5%3=2
30                  6%3=0
31                  7%3=1
32                  8%3=2
33                  9%3=0
34              * */
35         </script>
36     </head>
37     <body>
38         <ul>
39             <li></li>
40             <li></li>
41             <li></li>
42             <li></li>
43             <li></li>
44             <li></li>
45             <li></li>
46             <li></li>
47             <li></li>
48         </ul>
49     </body>
50 </html>

View Code

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script type="text/javascript">
 7             window.onload=function(){
 8                 var aLi=document.getElementsByTagName('li');
 9                 var arr=['red','yellow','blue'];
10                 var str='';
11                 for(var i=0;i<aLi.length;i++){
12                     aLi[i].index=i;
13                     aLi[i].style.background=arr[i%arr.length];
14
15                     aLi[i].onmouseover=function(){
16                         str=this.style.background;//移入先存颜色
17                         this.style.background='#000';
18                     }
19                     aLi[i].onmouseout=function(){
20                         this.style.background=str;//移出赋值颜色
21                     }
22                 }
23             }
24             /*
25              说明：
26                  0%3=0
27                  1%3=1
28                  2%3=2
29                  3%3=0
30                  4%3=1
31                  5%3=2
32                  6%3=0
33                  7%3=1
34                  8%3=2
35                  9%3=0
36              * */
37         </script>
38     </head>
39     <body>
40         <ul>
41             <li></li>
42             <li></li>
43             <li></li>
44             <li></li>
45             <li></li>
46             <li></li>
47             <li></li>
48             <li></li>
49             <li></li>
50         </ul>
51     </body>
52 </html>

View Code

1 <script type="text/javascript">
2     var s=125;//秒
3     alert(Math.floor(s/60)+'分'+s%60+'秒');
4 </script>

View Code

！运算符

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script type="text/javascript">
 7             window.onload=function(){
 8                 var oInput=document.getElementsByTagName('input');
 9
10                 oInput[0].onclick=function(){
11                     for(var i=1;i<oInput.length;i++){
12                         oInput[i].checked=!oInput[i].checked;
13                     }
14                 }
15             }
16         </script>
17     </head>
18     <body>
19         <input type="button" value="反选"/>
20         <ul>
21             <li><input type="checkbox"/></li>
22             <li><input type="checkbox" checked="checked"/></li>
23             <li><input type="checkbox"/></li>
24             <li><input type="checkbox" checked="checked"/></li>
25             <li><input type="checkbox"/></li>
26         </ul>
27     </body>
28 </html>

View Code

判断语句中的真假问题：数据类型-数字(NaN)、字符串、布尔、函数、对象（元素、[]、{}、null）、未定义
- 真非0的数字、非空字符串、true、函数、能找到的元素、[]、{}
- 假 0、NaN、空字符串''、false、不能找到的元素、null、未定义

函数返回值----return

return 返回值有：数字、字符串、布尔、函数、对象(元素，[]，{}，null)、未定义　　
- 函数名+括号：fn1()===>return 后面的值；
- 所有函数默认返回值:未定义(undefined)；
- return后面任何代码都不执行了；

<script type="text/javascript">//fn1()---->100
    alert(fn1());//100function fn1(){return 100;}
</script>

<script type="text/javascript">//fn1()---->hello
    alert(fn1().length);//5function fn1(){return 'hello';}
</script>

<script type="text/javascript">//fn2()----->function(){alert('hello');}function fn2(){return function(){alert('hello');}}fn2()();//hello
</script>

<script type="text/javascript">//fn2(20)----->function(b){alert(a+b);}function fn2(a){return function(b){alert(a+b);//30
        }}fn2(20)(10);
</script>

<script type="text/javascript">//fn3()----->windowfunction fn3(){return window;}fn3().onload=function(){document.body.innerHTML='hello';}
</script>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>div{width:100px;height:100px;background: red;}</style><script type="text/javascript">/*封装了一个id选择器*/function $(id){return document.getElementById(id);}window.onload=function(){$('btn').onclick=function(){$('div1').style.backgroundColor='blue';}}</script></head><body><input type="button" value="按钮" id="btn"/><br /><div id="div1"></div></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>div{width:100px;height:100px;background: red;}</style><script type="text/javascript">function $(v){if(typeof v==='function'){window.onload=v;}else if(typeof v==='string'){return document.getElementById(v);}else if(typeof v==='object'){return v;}}$(function(){$('btn').onclick=function(){$(this).style.backgroundColor='red';}});</script></head><body><input type="button" value="按钮" id="btn"/></body>
</html>

<script type="text/javascript">//alert(fn1(7));    //[1,2,3,4,5,6,7]function fn1(n){var arr=[];for(var i=1;i<=n;i++){arr.push(i);}alert(arr);}fn1(7);
</script>

<script type="text/javascript">//fn(2,6);//[2,3,4,5]//fn(6,2);//[2,3,4,5]function fn1(a,b){var arr=[];if(a>b){t=a;a=b;b=t;}for(var i=1;i<b;i++){arr.push(i);}alert(arr.slice(a-1,b));}fn1(2,6);//[2,3,4,5]
    fn1(6,2);//[2,3,4,5]
</script>

arguments实参集合与局部变量、参数关系

当函数的参数个数无法确定的时候，用arguments.

与局部变量和局部参数的关系

<script type="text/javascript">fn1(1,2,3);          //实参-----实际传递的参数function fn1(a,b,c){ //形参-----形式上，abc这些名代表123//arguments===>[1,2,3]----实参的集合
          alert(arguments.length);//3
          alert(arguments[1]);//2
          alert(arguments[arguments.length-1]);//3
    }
</script>

<script type="text/javascript">
    sum(1,2,3);function sum(){var n=0;for(var i=0;i<arguments.length;i++){n+=arguments[i];}alert(n);//6
    }
</script>

<script type="text/javascript">var a=1;function fn2(a){  //相当于  var=1;
        arguments[0]=3;//此时arguments[0]==a
        alert(a);//3var a=2;alert(arguments[0]);//2
     }fn2(a);alert(a);//1
</script>

currentStyle和ComputedStyle的应用
- 要使用单一样式
- 不要有空格
- 不要获取未设置后的样式：不兼容

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>div{width:100px;height:100px;background: red;}</style><script type="text/javascript">function $(v){if(typeof v==='function'){window.onload=v;}else if(typeof v==='string'){return document.getElementById(v);}else if(typeof v==='object'){return v;}}$(function(){$('btn').onclick=function(){//alert($('div1').style.width);  获取不到属性值if($('div1').currentStyle){alert($('div1').currentStyle.width)}else{alert(getComputedStyle($('div1')).width);}/*getComputedStyle* 获取的是计算机(浏览器)计算后的样式。* IE6、IE7、IE8不兼容* *//*currentStyle* 获取的是计算机(浏览器)计算后的样式。* IE6、IE7、IE8兼容,在标准浏览器下不兼容* */}});</script></head><body><input type="button" value="按钮" id="btn"/><br /><div id="div1"></div></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>div{width:100px;height:100px;background: red;}</style><script type="text/javascript">function $(v){if(typeof v==='function'){window.onload=v;}else if(typeof v==='string'){return document.getElementById(v);}else if(typeof v==='object'){return v;}}$(function(){$('btn').onclick=function(){alert(getStyle($('div1'),'width'));}});function getStyle(obj,attr){/*if(obj.currentStyle){return obj.currentStyle[attr];}else{return getComputedStyle(obj)[attr];}*/return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]}</script></head><body><input type="button" value="按钮" id="btn"/><br /><div id="div1"></div></body>
</html>

转载于:https://www.cnblogs.com/web-Knowledge/p/7147622.html

javascript学习5相关推荐

Javascript学习7 - 脚本化浏览器窗口
原文:Javascript学习7 - 脚本化浏览器窗口本节讨论了文档对象模型.客户端Javascript下Window中的各项属性,包括计时器.Location对象.Histroy对象.窗口.浏览器 ...
Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
《Javascript入门学习全集》 Javascript学习第二季（实战4）
Javascript学习第二季(实战4) 上章的例子虽然实现了功能,也做了相应的判断,也符合标准了.但还有一个问题就是: Choose an image. 在html中只是为了图片切换而做的,而 ...
Java程序猿的JavaScript学习笔记（汇总文件夹）
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
JavaScript学习知识点归纳
JavaScript学习包括几大方面: 1.基础语法 2.JavaScript核心对象 3.DOM操作 4.BOM操作 5.正则表达式 6.AJAX 7.面向对象编程以下依次为各版块相关内容==&g ...
JavaScript学习笔记（五）
JavaScript学习笔记(五) ①Array类本地对象 ②Date类 ①Global对象对象的类型内置对象 ②Math对象宿主对象今天继续学习JS中的对象,昨天内置对象Global对 ...
JavaScript学习笔记（备忘录）
JavaScript学习笔记(备忘录) ===运算符判断数值和类型是否相等.如: console.log('s'==='s') //输出trueconsole.log('1'===1) //输出fa ...
Java程序猿的JavaScript学习笔记（10—— jQuery-在“类”层面扩展）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
JavaScript学习笔记（十）——学习心得与经验小结
JavaScript学习笔记(十)--学习心得与经验小结目前我先列好提纲,利用每晚和周末的闲暇时间,将逐步写完 ^_^ 转载于:https://www.cnblogs.com/mixer/archi ...
JavaScript 学习笔记（1）
1. 何为 Jscript JScript 是一种解释型的.基于对象的脚本语言. 局限性: 1) 不能使用该语言来编写独立运行的应用程序 2) 没有对读写文件的内置 ...

javascript学习5

javascript学习5相关推荐

最新文章

热门文章