5.25笔记整理

字符串里面的常用方法

找到当前字符的索引位置 没找到直接返回-1

str.indexof("a");

两个参数 找到字符的索引位置 没找到直接返回-1 从哪个位置开始找

str.indexof("a",0);
str.lastindeof()//从后往前找

遍历字符串 获取每个字符串的索引位

for(var index in str){
	console.log(str[index]);
	condole.log(str.charat(index));
	str.charcodeat(index);根据索引获取对应的ascall码值
}

将字符串转化为集合

str.split("|");//按照什么来划分  符号含有
str,join(" ");  //符号不含有  

字符串的拼接

c1.concat(c2);

字符串替换

c1.replace("b",1);//只能换一个

字符串的截取

str.substr(1,4);//从1开始截取四个长度
str.slice(0,4);//从1开始截取四个长度 
str.substring(1,4);//1开始  3结束  包括3

js里面的数组

截取

k.slice(0,2);//截取完成对数组无影响  截取0，1
k.splice(0,3);//截取完对数组有影响

数组内容追加

k.push(0);//内容之后追加 返回值是数组的长度
k.unshift(-1);//   内容之前追加  返回值是数组的长度

数组的删除

k.shift();//从前往后删除  返回值是删除的值
k.pop();//从后往前删除   返回值是删除的值

js操作dom元素 动态创建dom元素

<ul id="nav">父节点
	<li></li>子节点
	<li id="lilist"></li>
<ul>

获取元素
var nav=ducument.getelementbyid(“nav”);
获取子节点个数
nav.childelementcount; //4
获取所有的子节点 包括回车
nav.childnotes; nodelist(9)；

nextsibling：li;
nodename:"text";节点名称  大写  tolowercase转小写
nodetype:3;当前节点类型  符号：3  元素：1
novalue  节点的值

nav.children; 返回的是子元素 htmlcollection(4);
找同胞兄弟元素
下一个节点
lilist.nextsibling
获取下一个元素
lilist.nextelementsibling
获取上一个节点
lilist.previoussibling
获取父元素第一个元素
nav.firstelementchild;
获取父元素最后一个元素
nav.lastelementchild;
第一个节点
nav.firstchild;
最后一个节点
nav.lastchild;
元素的追加

var str="<span>123</span>";
nav.innerhtml+=str;  //123
nav,texthtml+=str;  //<span></span>

dom元素的动态创建

var s=document.createlement("li");
s.innerhtml="5";
s.classname="lilast"; 
nav,appendchild(s);//追加到当前元素的内容之后

给动态创建的元素添加事件

必须加在nav,appendchild(s);之后
var last=document,getelementbyclassname("lilast"）;
last.onclick=function(){
	console.log(2);
}

s.onclick=function(){
	console,log(1);
	}

给元素添加自定义属性
obj.setAttribute(“属性名称”,“属性的值”) 或者直接在元素标签上设置自定义属性
obj.getAttribute(“属性名”)

获取元素的高和宽

window.screen
工作区域的宽高 不包含下面的任务栏availheight availwidth
屏幕的实际宽高 height实际高 width实际宽
可视区域的宽和高

document.documentelement.clientwidth；
document.documentelement.clientheight；
window.innerwidth;
window.innerheight;

滚动条的偏移

window.pageYoffset;
window.pageXoffset;

js对象 js内置对象

document history location bom操作

window.alert(1);//弹框
math.randm();//随机0-1

向下 向上取整

math.floor(1.2);//向下取整  1
math.ceil(1.2);//向上取整  2
math.round(4.4);四舍五入
math.sqrt(2);开根
math.pow(2,3); 平方 8
math.pi; // 3.14
math.sin(math.pi/2);//1
math.cos(math.pi);//-1
math.tan(math.pi/4);//1

js里面的内置对象

data String // 三个计时器
String 取值类似数组

    s1=new String("abc");
    s2=new String("efg");
    s.concat(s2);

tostring 转化为字符串 object

方法的重写
function m(){
	m.tostring=function(){
		return(1);
	}
}

js中的变量类型
值类型：字符串(string) 数值(number) 布尔值(boolean) (undefined) (null) 可变 占固定空间
引用类型：对象(object) 数组(arry) 函数(function) 不可变 占可变空间
引用类型转化为值类型

var m="abc";
var m1=new String(m);
m1.tostring; 

data对象–倒计时 当前的时间

var time=new data();//输出中国标准时间
time.toutcstring;//格林尼治时间
time.toisoString;
time.tolocaledatastring;//年月日
time.tolocaletimestring;//上午时分秒
time.tolocalestring;//年月日  上午时分秒
time.totimestring;

设置时间 直接在new的时候设置
var time=new data(“2019.8.10 12:00:00”);
var time=new data(“2019,8,10,12,0,0”);//月份加一月
使用data中的方法设置

times.setfullyear(2018);//年
times.setdata(3);//天
times.sethours(12);//时
times.setminutes(59);//分
times.setseconds(20);//秒
times.setmilliseconds(200);//毫秒

时间的获取

times.getdata();//天
times.getday(); //周几
times.getmonth();//月
times.geseconds();天
times.gettime();//到1970年的总毫秒数
times.getyear();//到1900年的年份

js里面的计时器对象

计时器：按照时间反复执行
settimeout()//一次性计时器 延迟多少时间去执行

settimeout(function  (){
	console.log(1);
},1000)；

将settimeout改造为循环计时器

    var t=null;
    showtime();
    function showtimeout (){
    	console.log(1);
    	t=settimeout("showtime()",1000);//1s执行一次
    }
    **关闭计时器**
    cleartimeout(t);//输出一次

循环计时器

var t=null;
t=setinterval(function  (){
	console.log(1);
},1000)；//延迟一秒出现
clearinterval(t);//结束

settimeout setinterval
优点：时间可以设置
缺点：在网页被缩小或切换选项卡之后计时器仍然继续执行
window.requestanimationream();
优点：在网页被缩小或者切换选项卡之后计时器暂停
缺点：时间没有办法设置 时间是根据电脑的刷新频率16ms

loop();
function loop(){
	console.log(1);
	settimeout(function(){
		window.requestqnimationfram(loop);
	},1000);
}

根据日期对象的时间计算1s

var time=new data().gettime();
loop();
function(){
	var times=new data().gettime;
	if(times-time>=1000)
	{
		time=times;
		console.log(1);
	}
	times=null;
	window.requestanimationframe(loop);
}

js里面的数据格式json json的转化方式

break;//跳出循环
continue；//跳出当前循环执行下一循环
return；//直接终止

var str = "hello";

for (var item of str){

if(item ==="l"){

break

}

console.log(item);   

}//h e

var str = "hello";

for (var item of str){

if(item ==="l"){

continue; 

}

console.log(item);  

}//h e o

var stus = [
        {name: "maodou", age: 1},
        {name: "maodou1", age: 2},
        {name: "maodou2", age: 3},
        {name: "maodou3", age: 4},
        {name: "maodou4", age: 5}
    ];

 var stu1 = {
        "name": "张三",
        "sex": "男",
        "age": 23,
        "eat": function () {
            return "吃饭"
        }
    }

js数据格式
后台返回的数据格式 如果是对象 直接使用
如果返回的是json字符串格式
json对象转化为字符串类型的json

var m=JSON.stringify(stus);

json类型的字符串转化为json对象

eval(m);
JSON.parse(m);

使用json

for(var i=0;i<stus.length;i++)
{
	console.log(stus[i].name);
}

in 后面是一个集合

var a=[1,2,3,4];
for(var key in a)
{
	console.log(a[key]);
}