一.数组
java数组与js数组的区别:
java:
* 数组:
* 有序
* 长度固定
* 存储相同类型
* 查询快,修改慢
js:
* 数组:
* 有序
* 长度可变,可扩容,可缩容
* 存储类型不要求一致
//1.不同类型
arr = [1,3.14,true,undefined,'string',NaN,null];
console.log(arr.length);
//2.容量可变
//压栈,添加
arr.push(1024);
console.log(arr.length);
//弹栈,移除
var temp = arr.pop();
console.log("被移除元素:"+temp);
console.log("被移除元素后长度:"+arr.length);
//长度-扩容
arr.length=100;
console.log("第五十个元素"+arr[49]);
//缩容
arr.length=1;
console.log("第一个元素:"+arr[0]);
console.log("第二个元素:"+arr[1]);
console.log("-----------------------------");
/*
* 遍历:普通
*/
/*for(var i=0;i<arr.length;i++){
console.log(i+":"+arr[i]);
}*/
console.log("-----------for in -------")
/*
赋值
* */
arr[1] = 20;
arr[10] = 1024;
arr[-1]=100;
/*for in*/
for(var i in arr){
console.log(i+":"+arr[i]);
}
console.error("----------------");
for(var i=0;i<arr.length;i++){
console.log(i+":"+arr[i]);
}
/*
数组的第三种遍历方式foreach
* */
arr.forEach(function(ele,idx){
console.log(ele+"---"+idx);
});
arr.forEach(function(ele){
console.log(ele);
});
二.数据类型
var arrays = [];
var a = 100;
arrays.push(a);
var b = "100";
arrays.push(b);
var c = true;
arrays.push(c);
var d = "hello";
arrays.push(d);
var arr = [1,2];
arrays.push(arr);
var fun = function(){
};
arrays.push(fun);
var obj = {};
arrays.push(obj);
var un = undefined;
arrays.push(un);
var nu = null;
arrays.push(nu);
var na = NaN;
arrays.push(na);
/*
遍历*/
for(var i in arrays){
console.log(arrays[i]+"---"+ typeof arrays[i]);
}
三.数据类型转换
/*
解释型语言:
动态语言:
* */
/*数据类型*/
var a = 1;
var b = '1';
//弱类型转换
console.log(a==b);//等于
console.log(a===b);//等同 ,先检查类型,再看值
var c = true;
console.log(a==c);
//计算转化
console.log("a+c="+(a+c));
var d = false;
console.log(d+1);
/*
条件表达式,返回值是boolean
false:
0
NaN
undefined
null
''
false
true:其他值
* */
var e = {};
if(e){
alert("true"); //true,报错
}else{
alert("false");
}
四.parselnt
parseInt(str)取整
parseFloat(str2)取到第一个小数点后面的值
var str = "100px";
console.log(parseInt(str));
str = "3.14";
console.log(parseInt(str));
str = "a123";
console.log(parseInt(str));
/*float:浮点*/
var str2 = "100.px";
console.log(parseFloat(str2));
str2 = "3.14px";
console.log(parseFloat(str2));
str2 = "3.14.15926px";
console.log(parseFloat(str2));
str2 = "a3.14.15926px";
console.log(parseFloat(str2));
console.log(parseInt("1A", 16));
console.log(parseInt("0x1A"));
五.obj
var xiaowei = ['肖崴','其他',180,150]
console.log("姓名:"+xiaowei[0]);
console.log("性别:"+xiaowei[1]);
console.log("体重:"+xiaowei[2]);
console.log("身高:"+xiaowei[3]);
/*
对象存储
* */
var objxw = {'age':18,"name":"肖崴","sex":"公","weight":150,"height":180};
console.log("姓名:"+objxw.name);
console.log("性别:"+objxw.sex);
console.log("体重:"+objxw.weight);
console.log("身高:"+objxw.height);
/*组合*/
var infos = [
{'age':18,"name":"肖崴","sex":"公","weight":150,"height":180},
{'age':38,"name":"刘杭","sex":"不详","weight":130,"height":170},
{'age':18,"name":"憨憨","sex":"母","weight":130,"height":180}
];
/*infos小微的年龄*/
console.log("小微的年龄:"+infos[0].age);
console.log("小微的年龄:"+infos[0]["age"]);
//in
if("money" in infos[0]){
console.log("小微的余额:"+infos[0]["money"]);
}
/*遍历小微*/
for(var k in infos[0]){
console.log(k+":"+infos[0][k]);
}
for(var k in infos[1]){
console.log(k+":"+infos[1][k]);
}
for(var k in infos[2]){
console.log(k+":"+infos[2][k]);
}
/*删除小微的年龄*/
delete infos[0].age;
console.log("--------------");
for(var k in infos[0]){
console.log(k+":"+infos[0][k]);
}
/*
给小微添加余额
* */
// infos[0].money=1000000;
infos[0]["money"]=10000;
console.log("--------------");
for(var k in infos[0]){
console.log(k+":"+infos[0][k]);
}
/*修改性别为男*/
infos[0].sex="男";
console.log("------------------");
for(var k in infos[0]){
console.log(k+":"+infos[0][k]);
}
六.随机数
<script>
//范围[0,1)
Math.random();
//0-100
Math.random()*101;
//取整
var rnd = Math.floor(Math.random()*100+1);
alert(rnd);
//取整
rnd = parseInt(Math.random()*101);
alert(rnd);
</script>
七.弹出框
<script>
/*警告框\n*/
// window.alert("你愁啥!");
/*确认框*/
var result = window.confirm("确定删除?");
console.log(result);
console.log(typeof result);
if(result){
alert("删除成功");
}else{
alert("熊孩子没事别瞎点。。。。");
}
/*输入框*/
/*var age = window.prompt("芳龄","18");
//age是string类型
// var age_num = parseInt(age);
var age_num = Number(age);
console.log(typeof age_num);*/
</script>
八.获取元素
四种方法:
-
getElementById
-
getElementsByName
-
getElementsByClassName
-
getElementsByTagName
<body>
<div id="dv" class="dv" name="dv">我是div</div>
<div>fdsfds</div>
<script>
/*
1:id id属性值 返回值:ele
2:name name名称 返回值:collection
3:className类名称 返回值:collection
4.tagName:标签名称 返回值:collection
* */
var divId = document.getElementById("dv");
console.log(divId);
var divName = document.getElementsByName("dv")[0];
console.log(divName);
var divClassName = document.getElementsByClassName("dv")[0];
console.log(divClassName);
var divTagName = document.getElementsByTagName("div")[0];
console.log(divTagName);
</script>
</body>
九.事件
1.onload
<script>
/*
onload事件,body有onload事件
* */
function load(){
//加载完成div的文字编程红色
// alert("加载完毕。。。。");
var dv = document.getElementById("dv");
dv.style.color="red";
}
// var dv = document.getElementById("dv");
// dv.style.color="green";
</script>
2.onclick
//测试是否是闰年
<body>
输入年份:<input type="text" id="year" placeholder="请输入一个年份" /><br />
<button type="button" onclick="isLeap();">测试</button>
<div id="tip"></div>
<script>
/*
输入年份
点击测试
生成结果
* */
function isLeap(){
var year = document.getElementById("year");
var val = Number(year.value);
var tip = document.getElementById("tip");
if((val%4==0&&val%100!=0)||(val%400==0)){
//闰年
tip.innerText=val+'是闰年';
}else{
//平年
tip.innerHTML=val+'是平年';
}
}
</script>
</body>
点击子类的父类的也会出来
点击父类的 子类不会出来
<div id="parent" onclick="alert('parent')">
parent
<div id="child" onclick="alert('child')">
child
</div>
</div>
3.onchange
<body>
<select name="" id="menu" onchange="getVal(this);">
<option >香蕉</option>
<option >猕猴桃</option>
<option >哈密瓜</option>
<option >葡萄</option>
<option >木瓜</option>
<option >西瓜</option>
<option >火龙果</option>
<option >西红柿</option>
<option >车厘子</option>
<option >牛油果</option>
</select>
偶像:<select name="" onchange="getIdol(this);">
<option value="">请选择你的偶像</option>
<option value="xiaozhan">肖战</option>
</select>
<script>
//变化,选中被选中元素的innerHTML
function getVal(t){
// alert(t.value);
console.log(t.value);
};
function getIdol(t){
console.log(t.innerHTML);
console.log(t.value);
}
</script>
</body>