JS学习基础
1.1命名规范
匈牙利命名法
类型前缀 + 首字母大写
1.2 JS里面的真假
真的: true, 非零数字, 非空字符集, 对象
假的; false,数字0,空字符串,null(空对象),undefine。
1.3类型转换
显示转换
parseint() number() parsefloat()
var sum = (parseInt(A.value) + parseInt(B.value));
隐式转换
var a = '12';
var b = 12;
//alert(a==b);// 隐式类型转换
alert(a===b);//显示类型转换
1.4变量作用域
script>
var a = 12; //全局变量
function aaa()
{
var a = 12; //局部变量
}
function bbb()
{
alert(a);
}
aaa();
bbb();
</script>
闭包
<script>
// 闭包
function aaa()
{
var a = 12;
function bbb()
{
alert(a);
};
bbb();
};
aaa();
</script>
1.5 JSON
<script>
//JOSN
// var obj = {a : 1,b : 2,c : 'abc'};
// alert(obj.a);
var arr = [{a : 1,b : 2},{a : 12,b :13}];
alert(arr[0].a);
</script>
JOSN可以和数组配合使用:
<script>
//JOSN
// var obj = {a : 1,b : 2,c : 'abc'};
// alert(obj.a);
var obj = {a : 1,b : 2,c:3};
var arrt = '';
for ( arrt in obj)
{
alert( arrt + "=" + obj[arrt]);
}
// alert(arr[0].a);
</script>
For in 语句与JOSN 搭配使用;
1.6函数的返回值
function sum(a,b)
{
return a+b;
}
//alert(sum(12,6));
function show()
{
}
//alert(show()); // 没有return 返回 undefined
function show()
{
return;
}
alert(show()); // 无返回值 返回 undefined
1.7函数传参
1.7.1 可变参(不定参) arguments
*参数的个数可变 参数数组
function show()
{
alert(arguments.length); //2
document.write(arguments[0] + "<br>"); //12
document.write(arguments[1]);//5
}
show(12,5);
1.7.2.函数简单求和
function sum()
{
var i = 0;
var result = 0;
for(i = 0; i < arguments.length; i++)
{
result += arguments[i];
}
alert(result);
}
sum(1,2,3,4,5,6,7); //可以输入多组数字
1.7.3Css函数的应用
<script>
function css()
{
if(arguments.length == 2) //获取
{
alert(arguments[0].style[arguments[1]]); //弹出div的宽度 //.style只能获取行间样式
}
else if(arguments.length == 3)
{
arguments[0].style[arguments[1]]=arguments[2]; //设置div的样式
}
}
window.onload = function ()
{
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
oBtn.onclick = function ()
{
//css(oDiv,'background','black'); //设置的样式
css(oDiv,'width');
}
}
//Body
<input id="btn1" type="button" value="样式">
<div id="div1" style="width: 100px; height: 100px;background: red;">
.style只能获取行间样式,那么怎么取非行间样式?
<style>
#div1{
width: 100px;
height: 100px;
background: red;
}
</style>
<script type="text/javascript">
window.onload = function ()
{
// var oDiv = document.getElementById('div1');
alert(window.getComputedStyle(div1,null).width); //谷歌 火狐
alert(oDiv.currentStyle.width); //IE
//alert('sum');
}
</script>
</head>
<body>
<div id="div1">
</div>
</body>
隔行变色的应用
<script>
window.onload = function()
{
var oUl =document.getElementById('ul1');
var aLi = document.getElementsByTagName('li');
var i = 0;
for (i=0; i<aLi.length;i++)
{
if(i%2==0)
{
aLi[i].style.background = 'gray';
}
}
};
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
1.8 数组基础
1.8.1、数组的创建
<script>
var arrayObj = new Array(); //创建一个数组
var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度
var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值
</script>
要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素存储在规定长度以外的,注意:这时长度会随之改变。
1.8.2、数组的元素的访问
var testGetArrValue=arrayObj[1]; //获取数组的元素值
arrayObj[1]= "这是新值"; //给数组元素赋予新的值
1.8.3、数组元素的添加
arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾,并返回数组新长度
arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度
arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置,插入位置的元素自动后移,返回""。
1.8.4、数组元素的删除
arrayObj.pop(); //移除最后一个元素并返回该元素值
arrayObj.shift(); //移除最前一个元素并返回该元素值,数组中元素自动前移
arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素
1.8.5、数组的截取和合并
arrayObj.slice(start, [end]);
//以数组的形式返回数组的一部分,注意不包括 end 对应的元素,如果省略 end 将复制 start 之后的所有元素
arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组
1.8.6、数组的拷贝
arrayObj.slice(0);
//返回数组的拷贝数组,注意是一个新的数组,不是指向
arrayObj.concat();
//返回数组的拷贝数组,注意是一个新的数组,不是指向
1.8.7、数组元素的排序
arrayObj.reverse();
//反转元素(最前的排到最后、最后的排到最前),返回数组地址
arrayObj.sort();
//对数组元素排序,返回数组地址
1.8.8、数组元素的字符串化
arrayObj.join(separator); //返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用 separator 隔开。
toLocaleString 、toString 、valueOf:可以看作是join的特殊用法,不常用`