第六天
数组基础
字面量创建:var arr1=[2,1,3,6,5,4,7,9,8];
对象实例化创建:var arr2=new Array(“a”,“b”);
对象创建法:var arr3=new Object([1,2,3,4]);//一般不这么使用,数组是由对象创建完成
1.数据添加删除时,length将会时时产生改变;
2.如果new Array(参数),参数有且仅有一个,并且是一个正整数时,这个参数表示创建若干个空元素在数组中,也就是设置数组的长度;
3.如果是负数或者小数时,就会报错;
4.如果是非数值,就会将这个参数作为数组的第0项元素添加进入;
5.Array.isArray() //判断元素是否是数组
6.数组也是对象的一种,因此,变量也是获得数组在堆中的引用地址;
数组.length
数组.length //数组的长度
数组.length //设置值
1.如果设置的值比当前的长度大,就会将当前的数组长度设为这个值,多出来的添加空值弥补;
2.如果设置的值小于当前的长度,其实就是删除数组后面元素,直到需要保留的长度位数;
3.如果设置的值为0,就表示清空数组;
var arr=[1,2,3];
arr=[];//千万不能使用,因数组中值未能清除,会漂浮在堆中,造成内存泄漏
arr.length=0; //清空数组
对象数组和二维数组
var data=[ //定义一个二维数组
{id:1001,icon:"img/1.png",name:"餐饮0",num:1,price:10},
{id:1002,icon:"img/2.png",name:"餐饮1",num:1,price:20},
];
数组中的方法
concat
arr.concat(元素); 原数组不改变,在尾部添加一个新元素,并且返回这个生成的新数组
arr.concat(元素1,元素2,元素3); 原数组不改变,在尾部添加多个新元素,并且返回这个生成的新元素
arr.concat(数组) 原数组不改变,合并数组,添加的数组在尾部,并且返回这个生成的新数组
arr.concat(数组1,数组2) 原数组不改变,合并数组,添加的数组在尾部,并且返回这个生成的新数组
arr.concat() 复制数组,形成新的数组与原数组无引用关系
push、unshift 返回值:新数组的长度
在头部添加比尾部添加复杂,当是大数据量处理时,可先 倒序–>在尾部添加–>倒序
arr.push(6) 向尾部添加一个数值
arr.push(6,7,8,9) 向尾部添加多个数值
**arr.unshift(6)**向头部添加一个数值
arr.unshift(6,7,8,9); 向头部添加多个数值
var len=arr.push(6); //arr.push(6)返回值为新数组的长度
var len=arr.push(6,7,8,9);
var len=arr.push([6,7,8,9]);//push一个数组,这里会把这个数组当成一整个元素添加进去
var len=arr.unshift(0); //向头部添加一个数值
var len=arr.unshift(0,-1,-2); //向头部添加多个数值
pop、shift 删除数组尾部、头部元素,并且将被删除的元素返回
var item=arr.pop(); //删除arr数组的尾部元素,并且将被删除的元素返回给item
var item=arr.shift(); //删除数组头部元素,并且将被删除的元素返回
【注】数组中若有对象的话不可用arr.length()=0 因对象还没删除,会在堆中游离,解决方法如下:
* 用pop将对象删为null,可改为:
* 1.将i++删除,data.shift();
* 2.for(var i=0;i<len;i++){
* data[0]=null;
* data.shift();
* }
* 3.for(var i=0;i<len;i++){
* data[data.length-1]=null;
* data.pop();
* }
* 为什么不直接使用 delete data[i]遍历删除?
* delete将数组变为松散型数组,删除每个元素未按照紧密型数组进行补位,所以数据为empty,但长度不变。
splice 返回的数组是被删除元素的集合数组
arr1=arr.splice();不做任何操作,返回一个空数组
* 数组迁徙
* arr1=arr.splice(0);从第0位开始删除所有元素,并且将这个被删除的元素返回给新数组
*arr.splice(-1) 删除数组的最后一个元素,这里的负数,是从后向前计数
*
*删除元素
* arr.splice(2,2); 从第二位开始删除紧邻其后的2个元素,返回被删除的2个元素数组
*
* 插入元素
* arr.splice(2,0,-1,-2); 从第二位开始,不删除元素,插入-1,-2
*
* 替换元素
* arr.splice(2,2,-1,-2); 从第二位开始,删除2个元素,插入-1,-2,
* 相当于将第二位开始后面两个元素替换为-1,-2
【注】splice用的不多,用起来麻烦,效率较低,数组过大时不可用
* 删除的效率最慢,添加的效率最快
* 删除并不是真的删除,而是添加新数组
将不用数组设为null,防止内存泄漏
var arr5=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
/*
* 错误写法:
* 因为len会随着arr.splice的执行而逐渐变小,会出现找到一个符合的值而跳过下一个值的现象
var len=arr5.length;
for(var i=0;i<len;i++){
if(arr5[i]%2===0 || arr5[i]%3===0){
arr5.splice(i,1); //当arr数组元素能被2或者3整除时,用splice将此元素删除,并将删除后的集合元素数组返回
}
}*/
var arr6=[];
for(var i=0;i<arr5.length;i++){
if(arr5[i]%2!==0 && arr5[i]%3!==0){
arr6.push(arr5[i]); //当数组元素不能被2并且不能被3整除时,将arr5的元素放至arr6中
}
}
arr5=arr6.concat();
arr6=null;
console.log(arr5);
查找
/* if(!~arr.indexOf(11)){//没找到
}
if(~arr.indexOf(3)){//找到
}*/
indexOf() 在数组中查找元素,如果找到,返回该元素所在的下标,如果没找到返回-1;
lastIndexOf() 在数组中从后向前查找元素,如果找到,返回该元素所在的下标,如果没找到返回-1;
寻找数组值为3时的下标
var arr1=[1,2,3,4,3,2,4,3,1,2,5,3,4,1,3];
/* var index=-1;
while (true){
index=arr1.indexOf(3,index+1); //从index+1位置开始遍历,寻找数组值为3时的下标
console.log(index);
if(index===-1){
break;
}
}*/
去重
var arr2=[];
for(var i=0;i<arr1.length;i++){
var bool=false;
for(var j=0;j<arr2.length;j++){
if(arr2[j]===arr1[i]){
bool=true;
break;
}
}
if(!bool){
arr2.push(arr1[i]);
}
}
// for(var i=0;i<arr1.length;i++){
// if(arr2.indexOf(arr1[i])===-1){
// arr2.push(arr1[i]);
// }
// }
arr1=arr2.concat();
arr2=null;
console.log(arr1);
第七天
join
join() 用逗号作为分隔符连接为字符串
join(“符号或者字符”) 用符号或者字符作为分隔符连接
join("") 将数组中所有元素首尾相连为字符串
reverse 实际上reverse就是做了一个翻转数组
sort 排序
从小到大
function sortFun(a,b){
return a-b;
}
从大到小
function sortFun(a,b){
return b-a;
}
以第一个字符的字节码作为大小进行升序排列
arr.sort(function(a,b){
return a.charCodeAt(0)-b,charCodeAt(0);
});
随机产生长度为5的数组
第一种方法:
var arr=[];
while(true){
var num=pareInt(Math.random()*100);
if(arr.indexOf(num)===-1){
arr.push(num);
}
if(arr.length===5){
break;
}
}
console.log(arr);
第二种方法:
var arr=[];
for(var i=0;i<100;i++){
arr.push(i);
}
//随机乱序
arr.sort(function(){
return Math.random()-0.5;
});
arr.length=5;
console.log(arr);
reduce 求和
数组.reduce(function(和值,当前项,当前下标,数组自身){ return 返回值})
sum初始是数组的第0项
item就是从第一项开始
下标也是从1开始
不管需不需要求和,都必须返回sum值
var a=arr1.reduce(function (sum,item,index,list) { //定义数组求和属性reduce
// console.log(sum,item,index,list);
return sum+item;
});
var b=arr.reduce(function (sum,item,index) { //定义数组求和属性reduce
if(index%2===0){ //若当前下标(下标从1开始)能被2整除,返回下标为偶数项的和
return sum+item;
}else {
return sum; //若不能被2整除,返回和值(不进行相加)
}
});
console.log(b);
arr.filter(function(当前项,当前下标,当前数组){return 条件})
将符合条件的元素返回到新数组的中
var arr2=arr.filter(function (item,index,list) { //将arr数组筛选后的值赋给arr2
return item>7;
});
console.log(arr2);
遍历
* item 当前元素
* index 当前下标
* list 当前数组
* forEach(function(item,index,list){})
* map(function(item,index,list){})
*
* 1、forEach 没有返回值,不能直接修改item,可以通过list修改,也可以修改
* item的属性
* 2、map 可以得到返回的新数组,这个数组的所有元素,都是通过遍历数组时,
* return 返回的值,如果没有返回就是undefined。这里可以直接通过return返回修改后的item值
//定义forEach遍历,无返回值
arr.forEach(function (item,index,list) {
if(index%2===0){
item.price+=100; //item不可直接修改,可通过list修改,也可修改item属性
}
});
console.log(data);*/
arr.forEach(function (item,index,list) {
if(index%2===0){
// list[index]=item+10;
// item不能直接修改
}
});
var arr1=arr.map(function (item,index) {
if(index%2===0){
return item+10;
}else{
return item;
}
});
slice
// var arr1=arr.slice();//复制数组,无引用关系
// var arr1=arr.slice(1);//从某个元素开始到结尾所有元素复制到新数组中
// var arr1=arr.slice(-3);//从后向前数第3个元素到结尾的所有元素复制到新数组中
// var arr1=arr.slice(1,3);//从第1个元素到第3个元素之前的所有元素复制到新数组中
// var arr1=arr.slice(-3,-1);//从后向前第3个元素到最后1个元素之前的所有元素复制到新数组中
// var arr1=arr.slice(-5,8);//从后向前第5个元素到顺序数第8个元素的所有元素复制到新数组中
arguments
任何函数中都有一个局部变量arguments
arguments不能使用数组的任何方法
String对象
字符串的length是只读的,不可以写入值
str[0] 方式也是只读的,不可以写入值
连接和编码
// 字符串连接concat()可以连接多个字符串
// str=str.concat(“e”,“xyz”,s,“px”);
var str2=“azAZ09”;
** 将字符串中指定位置的字符转换为编码**
/* console.log(str2.charCodeAt(0));
console.log(str2.charCodeAt(1));
console.log(str2.charCodeAt(2));
console.log(str2.charCodeAt(3));
console.log(str2.charCodeAt(4));
console.log(str2.charCodeAt(5));*/
将编码转换为字符console.log(String.fromCharCode(97));
// 验证码 分流
// 多台计算同时访问一个服务器—并发
作业
1.将数组[1,2,3,1,2,4,2,1,3,2,1,4],去重,有小到大排列顺序,冒泡排序
function sort(arr){
var len=arr.length;
var value;
for(var i=len;i>0;i--){
for(var j=0;j<i-1;j++){
if(arr[j]>arr[j+1]){
value=arr[j];
arr[j]=arr[j+1];
arr[j+1]=value;
}
}
}
return arr;
}
2.写一个函数,参数是数组[“a”,“b”,“c”,“d”,“a”,“b”,“d”,“a”,“d”,“c”,“a”],以对象的形式记录该数组元素重复次数
var arr=["a","b","c","d","a","b","d","a","d","c","a"];
console.log(getRepeatObject(arr));
function getRepeatObject(arr) {
var obj={};
for(var i=0;i<arr.length;i++){
if(!obj[arr[i]]){
obj[arr[i]]=1;
}else{
obj[arr[i]]++;
}
}
return obj;
}
3.将对象型数组 [{name:“xie”,age:20},{name:“zhang”,age:18},{name:“wang”,age:26}]变成字符串?name=xie&age=20|name=zhang&age=18|name=wang&age=26;写函数生成
var arr1=[{name:"xie",age:20},{name:"zhang",age:18},{name:"wang",age:26}];
function arrayToString(arr) {
var str="?";
for(var i=0;i<arr.length;i++){
for(var prop in arr[i]){
str+=prop+"="+arr[i][prop]+"&";
}
str=str.slice(0,-1);
if(i<arr.length-1){
str+="|";
}
}
return str;
}
console.log(arrayToString(arr1));
第八天
查找与替换
if(!~str.indexOf("a")){
//没找到
}
if(str.indexOf("a")>-1){
//找到了
}
// str.lastIndexOf(“a”);//从后向前查找
// console.log(str.search(“a”));//和indexOf类似,也是返回查找到元素的下标,但是这个方法一般应用于正则
// console.log(str.match(“a”));//错误,仅应用于正则
// str=str.replace(“a”,“e”);//将a字符替换为e字符,返回修改后新的字符串,原字符串不变化
// 暂时我们使用replace替换元素,只能替换第一次被查找到的元素,如果要替换多个元素,就需要用正则
大小写
var str="abc";
str=str.toUpperCase();//转为大写
str=str.toLowerCase();//转为小写
console.log(str);
在输入框中选中小写字母时,将小写字母转为大写
var texts=document.getElementById("texts");
texts.addEventListener("select",selectHandler);
function selectHandler(e) {
e=e || window.event;
// input中如果使用select事件,selectionStart可以获得当前选择开始位置,
// selectionEnd获得当前选择的结束位置
// console.log(texts.selectionStart, texts.selectionEnd);
var str0=texts.value.slice(0,texts.selectionStart);
var str1=texts.value.slice(texts.selectionStart,texts.selectionEnd);
var str2=texts.value.slice(texts.selectionEnd);
texts.value=str0+str1.toUpperCase()+str2;
}
split 将字符串切割成数组,和join相对
var str=arr.join("|"); //将数组以|相连接为字符串
var arr1=str.split("|"); //将字符串以|切割为数组
获取地址栏中的信息,以对象的形式返回
var url="http://www.qq.com/index.php?user=xietian&password=123456&age=30&sex=man";
console.log(getObject(url));
function getObject(str) {
var arr=str.split("?")[1].split("&");
var obj={};
for(var i=0;i<arr.length;i++){
var arr1=arr[i].split("=");
obj[arr1[0]]=isNaN(Number(arr1[1])) ? arr1[1] : Number(arr1[1]);
}
return obj;
}
数学方法
Math.abs(); 求绝对值
Math.ceil(); 向上取整,有小数就进位取整
Math.floor(); 向下取整,舍去小数位
Math.round(); 四舍五入
.toFixed(); 保留小数位数,四舍五入
parseInt(); 向下取整
Math.max(); 求最大值
Math.min(); 求最小值
求最大值
var max=Math.max.apply(null,arr);
求最小值
var min=Math.min.apply(null,arr);
Math.sqrt(); 平方根
Math.pow(); 求幂
Math.pow(2,5);和1<<5一样,但是后者更好
Math.pow(9.0.5);和Math.sqrt(2);和Math.SQRT2一样,最后一个最好
Math.random(); 生成0-1的随机数
Number.MAX_VALUE 大于零的最大值
Number.MIN_VALUE 大于零的最小值
Number.NEGATIVE_INFINITY 正无穷
Number.POSITIVE_INFINITY 负无穷
Date
console.log(date.getFullYear());
console.log(date.getMonth());//从0开始
console.log(date.getDate());//日期
console.log(date.getDay());//星期,星期日是0
console.log(date.getHours());//小时
console.log(date.getMinutes());//分钟
console.log(date.getSeconds());//秒
console.log(date.getMilliseconds());//毫秒.1000=1秒
console.log(date.getTime());//1970.1.1 0 到现在的毫秒数
时间戳
var url="....";
url+="?time="+new Date().getTime();
console.log(url);
获取时间
<div id="div0"></div>
<script>
var div=document.getElementById("div0");
var obj=getObject(location.search);
var time=0;
if(obj.time){
time=obj.time;
}
var nowDate=new Date();
nowDate.setHours(20);
nowDate.setMinutes(0);
var id=setInterval(animation,1000);
function animation() {
document.write(time);
document.write("<br>");
time--;
if(time<0){
clearInterval(id);
}
// var date=new Date();
// div.innerHTML=Math.floor((nowDate-date)/1000);
}
function getObject(str) {
var arr=str.split("?")[1].split("&");
var obj={};
for(var i=0;i<arr.length;i++){
var arr1=arr[i].split("=");
obj[arr1[0]]=isNaN(Number(arr1[1])) ? arr1[1] : Number(arr1[1]);
}
return obj;
}
作业
1.将价格随机修改为0-100任意整数,修改num为1-10任意整数,计算总价
1、统计总价大于200元的对象
2、统计单价大于50元的对象总价之和
3、按照总价排序由高到低
4、生成表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0}
table{border-collapse: collapse}
td,th{border: 1px solid #000000;width: 100px;height: 30px;line-height: 30px;text-align: center}
</style>
</head>
<body>
<table id="table"></table>
<script>
/*2、var data=[
{id:1001,icon:"img/1.png",name:"餐饮0",num:1,price:10},
{id:1002,icon:"img/2.png",name:"餐饮1",num:1,price:20},
{id:1003,icon:"img/3.png",name:"餐饮2",num:1,price:30},
{id:1004,icon:"img/4.png",name:"餐饮3",num:1,price:40},
{id:1005,icon:"img/5.png",name:"餐饮4",num:1,price:50},
{id:1006,icon:"img/6.png",name:"餐饮5",num:1,price:60},
{id:1007,icon:"img/7.png",name:"餐饮6",num:1,price:70},
{id:1008,icon:"img/8.png",name:"餐饮7",num:1,price:80},
{id:1009,icon:"img/9.png",name:"餐饮8",num:1,price:90},
{id:1010,icon:"img/10.png",name:"餐饮9",num:1,price:100}
];
var data=[
{id:1001,icon:"img/1.png",name:"餐饮0",num:1,price:10},
{id:1002,icon:"img/2.png",name:"餐饮1",num:1,price:20},
{id:1003,icon:"img/3.png",name:"餐饮2",num:1,price:30},
{id:1004,icon:"img/4.png",name:"餐饮3",num:1,price:40},
{id:1005,icon:"img/5.png",name:"餐饮4",num:1,price:50},
{id:1006,icon:"img/6.png",name:"餐饮5",num:1,price:60},
{id:1007,icon:"img/7.png",name:"餐饮6",num:1,price:70},
{id:1008,icon:"img/8.png",name:"餐饮7",num:1,price:80},
{id:1009,icon:"img/9.png",name:"餐饮8",num:1,price:90},
{id:1010,icon:"img/10.png",name:"餐饮9",num:1,price:100}
];
data.forEach(function (t) {
t.price=parseInt(Math.random()*101);
t.num=parseInt(Math.random()*10+1);
t.sum=t.price*t.num;
});
var list=data.filter(function (t) {
return t.sum>200;
});
var sum=data.reduce(function (sum,item) {
if(item.price>50){
return sum+item.sum;
}else{
return sum;
}
},0);
data.sort(function (a,b) {
return b.sum-a.sum;
});
var table=document.getElementById("table");
table.innerHTML=createTable(data);
function createTable(list) {
var str="";
str+="<tr>";
for(var prop in list[0]){
str+="<th>"+prop+"</th>";
}
str+="</tr>";
for(var i=0;i<list.length;i++){
str+="<tr>";
for(var s in list[i]){
str+="<td>"+list[i][s]+"</td>"
}
str+="</tr>";
}
return str;
}
</script>
</body>
</html>
第九天
作业
1.写一个倒计时,通过地址栏中增加&time获取当前的分钟,设置新的时间date.setMinutes(date.getMinutes()+time);通过时间间隔函数每次获取当前的时间,
让当前时间的秒数-设置的时间秒数,并且按照分钟显示出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/Method.js"></script>
</head>
<body>
<div id="div0"></div>
<script>
//定义变量
var div,
id,
date;
//调用初始函数init
init();
/*
* 初始化函数init()的作用:
* 传入未来时间,定义定时器,使代码标准化
* 参数:
* 无参
* 功能:
* 1、获取div标签;
* 2、定义时间对象;
* 3、定义增加时间变量;
* 4、调用函数获取URL信息,并转换为对象;
* 5、若转换后的对象存在,并且有time属性及值,将对象的time值赋给time;
* 6、将现在的时间加上增加的时间赋给设置的时间(分钟);
* 7、以1000ms为间隔设置计时器。
*
* */
function init() {
div=document.getElementById("div0");
date=new Date();
var time=0;
var obj=Method.getURLObject(location.search);
if(obj && obj.time){
time=obj.time;
}
date.setMinutes(date.getMinutes()+time);
id=setInterval(animation,1000);
}
/*
* 计时器函数作用:
*
* */
function animation() {
var now=new Date();
var value=date-now;
if(value<0){
clearInterval(id);
return;
}
value=Math.round(value/1000);
var m=Math.floor(value/60);
var s=value%60;
div.innerHTML=m+":"+s;
}
/* function getURLObject(url) {
if(!~url.indexOf("?")) return;
url=url.split("?")[1];
var obj={};
var arr;
var arr1;
var bool=false;
if(!~url.indexOf("&")){
if(!~url.indexOf("=")) return;
arr=url.split("=");
obj[arr[0]]=isNaN(Number(arr[1])) ? arr[1] : Number(arr[1]);
return obj;
}
arr=url.split("&");
for(var i=0;i<arr.length;i++){
if(!~arr[i].indexOf("=")) continue;
arr1=arr[i].split("=");
if(arr1[0].length===0) continue;
obj[arr1[0]]=isNaN(Number(arr1[1])) ? arr1[1] : Number(arr1[1]);
bool=true;
}
if(bool) return obj;
}*/
</script>
</body>
</html>
2.将当前时间显示出来,每秒变化都需要显示,div.innerHtml=“时间”
将所有的阿拉伯数值以中文数值显示
<div id="div0"></div>
<script>
var div;
var numberArr=["零","一","二","三","四","五","六","七","八","九","十"];
var weekArr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
init();
function init(){
div=document.getElementById("div0");
setInterval(animation,1000);
}
function animation(){
var date=new Date();
var year=date.getFullYear();
var month=date.getDate();
var week=date.getDay();
var hours=date.getHours();
var minutes=date.getMinutes();
var seconds=date.getSeconds();
var str=hours<5?"凌晨":(hours<12?"上午":(hours<14?“中午”:(hours<18?"下午":"晚上")));
div.innerHTML=getYear(year)+年+getChinaNumber(month+1)+"月"+getChinaNumber(day)+"日"+weekArr[week]+" "+str+" "+getChinaNumber(hours)+"点"+getChinaNumber(minutes)+“分"+getChinaNumber(seconds)+"秒"
}
function getYear(year){
var str="";
year=String(year);
for(var i=0;i<year.length;i++){
str+=numberArr[Number(year[i])];
}
return str;
}
function getChinaNumber(num){
if(num>=100)return;
if(num<11)return numberArr[num];
if(num%10===0){
return numberArr[num/10]+“十”;
}
if(num<20){
return "十"+numberArr[num%10];
}
return numberArr[Math.floor(num/10)]+"十"+numberArr[num%10];
}
</script>
DOM获取
nodeType 节点类型
nodeName 节点名称
nodeValue 节点值
var div=document.getElementById("div0");//根据ID名获取
div.n=5;//这种定义的属性都是对象属性
getElementsByTagName();//根据标签名
getElementsByClassName();//根据class
getElementsByName();//根据name获取
querySelector();//根据选择器来查找第一个元素
querySelectorAll();//根据选择器来查找所有元素
节点遍历
document.body.children;//获取子元素
document.body.childNodes;//获取子节点
document.body.parentElement;//父元素
document.body.parentNode;//父节点
document.body.firstElementChild;//第一个子元素
document.body.firstChild;//第一个子节点
document.body.lastElementChild;//最后一个子元素
document.body.lastChild;//最后一个子节点
document.body.nextElementSibling;//下一个兄弟元素,弟弟
document.body.nextSibling;//下一个兄弟节点,弟弟
document.body.previousElementSibling;//上一个兄弟元素,哥哥
doucment.body.previousSibling;//上一个兄弟节点,哥哥
DOM节点操作
document.createElement("div");//根据标签创建元素
document.body.appendChild(div);//将元素插入在DOM对象中的尾部
document.createTextNode("文本内容");//创建文本节点
div.insertBefore(span,text);//插入什么元素前面,第一个参数是新元素,第二个参数是插入的位置
img.cloneNode(true/false);//深复制true,复制元素包括它的子元素;浅复制false,只复制该元素;若ID重复,复制完成后如果有ID,需要更换
div.replaceChild(p,imgs);//替换元素,(新元素,要替换的旧元素)
div.removeChild(p);//父级要删除子级元素
img.remove();//自己删除自己,自杀
第十天
碎片容器
var ul=document.createElement("ul");
document.body.appendChild(ul);
// 创建碎片容器,就像一个胶囊,提升效率
//
var temp=document.createDocumentFragment();
for(var i=0;i<100;i++){
var li=document.createElement("li");
temp.appendChild(li);
}
ul.appendChild(temp);
对象属性
var div0=document.getElementById("div0");
div0.num=5;
标签属性
// 设置元素标签属性,age是属性名,30是值,要求值必须是字符
div0.setAttribute("age","30");
// 获取标签属性,值是字符
console.log(div0.getAttribute("age"));
// 删除标签属性
div0.removeAttribute("class");
对象的样式和属性
//IE8及以下不支持
// console.log(getComputedStyle(div).width);
//IE8以下支持
// console.log(div.currentStyle.width);
用try…catch解决
var width;
try {
width=getComputedStyle(div).width;
}catch (e){
width=div.currentStyle.width;
}
console.log(width);
判断解决
if(div.currentStyle){
width=div.currentStyle.width;
}else{
width=getComputedStyle(div).width;
}
DOM常见属性
宽高
clientHeight //width+padding-滚动条宽度、高度
offsetHeight //width+padding+border
scrollHeight //容器内滚动范围的宽度和高度(如果没有滚动,减去滚动条高度)
// 默认状态,页面宽度-margin*2 高度 0
// console.log(document.body.clientWidth,document.body.clientHeight);
// 浏览器页面的宽度,浏览器页面的高度
// console.log(document.documentElement.clientWidth,document.documentElement.clientHeight);
// 浏览器页面被撑开的宽度和高度,实际内容的宽高
// console.log(document.documentElement.scrollWidth,document.documentElement.scrollHeight);
位置、左上顶角的位置
不能设置,只读:
clientLeft/clientTop //border的宽度
offsetLeft/offsetTop //边线外到父级容器的距离,如果父级容器没有定位,就会到再上层的父级位置
可以设置:
scrollLeft/scrollTop //设置页面滚动条
获取到距离页面的位置和offset的宽高
getBoundingClientRect();
小案例——小球点击移动/停止
css:
div{
width:50px;
hiight:50px;
background-color:red;
position:absolute;
}
html:
<div></div>
js:
var div;
init();
function init(){
div=document.querySelector("div");
div.bool=false;
setInterval(animation,16);
div.addEventListener("click",clickHandler);
}
function animation(){
if(!div.bool)return;
div.style.left=div.offsetLeft+2+"px";
}
function clickHandler(e){
this.bool=!this.bool;
}
小案例——回到顶部,不用锚点
css:
div{
width:50px;
height:50px;
background-color:gray;
position:fixed;
right:50px;
bottom:50px;
line-height:50px;
text-align:center;
cursor:default;
}
html:
<div>TOP</div>
js:
var div;
var bool=false;
init();
function init(){
div=document.querySelector("div");
for(var i=0;i<300;i++){
Method.createElem("p",document.body,i);//已经封装好的函数,可用于创建元素,具体见自己Method库
}
div.addEventListener("click",clickHandler);
setInterval(animation,16);
}
function animation(){
if(!bool)return;
if(document.documentElement.scrollTop<=0){
bool=false;
return;
}
document.documentElement.scrollTop-=300;
}
function clickHandler(e){
e=e||window.event;
bool=true;
}
作业
1、留言薄,ul做界面,下方有文本框,点击按钮创建li,li里面内容是文本框的值,
右侧有小×,点击可以删除当前的li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var ul=document.createElement("ul");
document.body.appendChild(ul);
ul.style.width="800px";
ul.style.height="400px";
ul.style.border="1px solid #000000";
ul.style.padding="0";
ul.style.listStyle="none";
var input=document.createElement("input");
input.type="text";
input.style.width="720px";
document.body.appendChild(input);
var bn=document.createElement("button");
bn.textContent="留言";
bn.style.width="78px";
document.body.appendChild(bn);
bn.addEventListener("click",clickHandler);
ul.style.paddingRight="5px";
function clickHandler(e) {
e=e || window.event;
// 去除字符串前后空格
if(input.value.trim().length===0) return;
var li=document.createElement("li");
li.textContent=input.value;
li.style.fontSize="20px";
var a=document.createElement("a");
a.style.cursor="default";
a.style.float="right";
a.innerHTML="×";
a.addEventListener("click",removeClickHandler);
li.appendChild(a);
ul.appendChild(li);
input.value="";
}
function removeClickHandler(e) {
e=e || window.event;
this.parentElement.remove();
}
</script>
</body>
</html>