JS基础学习笔记

最新推荐文章于 2023-08-16 15:05:06 发布

七月是我的生日

最新推荐文章于 2023-08-16 15:05:06 发布

阅读量114

点赞数

分类专栏： JS学习文章标签： JS 基础

本文链接：https://blog.csdn.net/qq_43955202/article/details/89414231

版权

JS学习专栏收录该内容

30 篇文章 1 订阅

订阅专栏

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的特殊用法，不常用`

七月是我的生日

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS基础学习笔记

JS学习基础1.1命名规范匈牙利命名法类型前缀 + 首字母大写1.2 JS里面的真假真的： true，非零数字，非空字符集，对象假的; false，数字0，空字符串，null(空对象），undefine。1.3类型转换显示转换parseint（） number() parsefloat()var sum = (parseInt(A.value) + parseInt...
复制链接

扫一扫

专栏目录