首页 > 代码库 > 【JS学习】JS基础2

【JS学习】JS基础2

一、运算符

(1)算术:+加、-减、*乘、/除、%取余

实例:隔行变色、秒转时间

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>隔行变色</title>
<script>
window.onload = function ()
{
    var aLi=document.getElementsByTagName(‘li‘);
    
    for(var i=0;i<aLi.length;i++)
    {
        if(i%2==0)
        {
            aLi[i].style.background=‘#CCC‘;
            }
        else
        {
            aLi[i].style.background=‘‘;
            }
        }
    };

</script>

</head>

<body>

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>秒转时间</title>
<script>
var s=156;

alert(parseInt(s/60)+‘分‘+s%60+‘秒‘);
</script>
</head>

<body>
</body>
</html>

(2)赋值:=、+=、-=、*=、/=、%=

比如

i=i+1;

i++;

i+=1;

i=i+3;

i+=3;

 

(3)关系:<、>、<=、>=、==、===、!=(不等)、!==

(4)逻辑:&&与,||或,!否

实例:全选与反选

(5)运算优先级:括号

 

二、程序流程控制

(1)判断:if,switch,?:

switch语法:

switch(变量)

{

  case 值1:

      语句1;

      break;

  case 值2:

      语句2;

      break;

  ......

  default:

      语句n;

}

 

?:语法——三元运算符/三目运算符

在if语法中

if(条件)

{

  语句1;

}else

{

  语句2;

}

相当于在?:语法中

条件?语句1:语句2

 

(2)循环:while,for

(3)跳出:break,continue

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>break和continue</title>
<script>
for(i=0;i<5;i++)
{
    if(i==2)
    {
        break;//循环中断
        }
    alert(i);
    }
</script>

</head>

<body>
</body>
</html>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>break和continue</title>
<script>
for(i=0;i<5;i++)
{
    if(i==2)
    {
        //break;//循环中断
        continue;//只是中断本次循环
        }
    alert(i);
    }
</script>

</head>

<body>
</body>
</html>

三、什么是真什么是假

真:true、非零数字、非空字符串、非空对象(比如document,数组)

假:false、数字零、空字符串、空对象(null)、undefined

 

四、Json

什么是Json:基于JavaScript的一个子集。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Json</title>
<script>
/*var a=12;
var b=5;
var c=‘abc‘;*/

var json={a:12, b:5, c:‘abc‘};

//alert(json.a);
json.b++;
alert(json.b);
</script>

</head>

<body>
</body>
</html>

(2)json和数组

循环:一般情况下数组用从0-length的循环语句

遇到json用for in

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>json和数组</title>
<script>
var json={a:12, b:5, c:7};
var arr=[12,5,7];

//alert(json.a);
//alert(json[‘a‘]);//jons的下标是字符串
//alert(arr[0]);//数组的下标是数字

//alert(arr.length);//输出3
//alert(json.length);//输出undefined,json没有length

//循环
/*for(var i=0;i<arr.length;i++)
{
    alert(‘第‘+i+‘个元素:‘+arr[i]);
    }*/
    
/*for(var i in arr)
{
    alert(‘第‘+i+‘个元素:‘+arr[i]);
    }*/
    
for(var i in json)
{
    alert(‘第‘+i+‘个元素:‘+json[i]);
    }
</script>

</head>

<body>
</body>
</html>

 

【JS学习】JS基础2