目录
01、JS写法
02、变量的定义,输出
03、数据类型
04、算数运算符
05、比较运算符
06、逻辑运算符
07、DOM元素获取
08、事件
09、JS控制HTML内容
10、JS控制CSS属性及类样式
11、This问题
12、自定义属性标签
13、定时器
14、DOM操作基础
15、创建和插入子元素
16、可视区宽高
17、数组
18、JSON
19、循环语句
20、分支结构
21、函数
22、break和continue
23、字符串
01、JS写法
1、行内引入(不推荐),安全性能低<div οnclick="alert('hello world')"></div>
2、内嵌式(常用)将js写在script脚本块中 <script type="text/javascript"></script>
3、外链式 将js写在外面文件中,通过src找到引入
02、变量的定义,输出
var a=10
1、alert(a);
2、console.log(a);
3、document.write(a);
//用的极其少,将变量输出到标题
4、document.title=a;
03、数据类型
查看数据类型 typeof:var s="hello"; alert( typeof s);
1、字符串string :加引号,引号中不能解析变量
2、数值number:整型和浮点型
3、布尔值boolean
4、未定义undefined
5、空null:但是null会显示是对象[object]类型
6、对象object
04、算数运算符
1、+ 加
注:+不但有算术运算的作用,还有链接字符串的作用
2、- 减
3、* 乘
4、/ 除
5、% 取余数 var a=10;var b=3; alert(a%b);// 结果1
6、++ 累加
7、-- 递减
05、比较运算符
1、== 等于(值) 数值10==字符串10
2、=== 全等于(值 & 类型)
3、> 大于
4、< 小于
5、>= 大于或等于
6、<= 小于或等于
7、!= 不等于(比值)
8、!==不全等于(比值和数据类型)
06、逻辑运算符
1、&& and //if (a==b && c<d)
2、|| or
3、! not //if ( !(a==b) )
07、DOM元素获取
1、通过Id获取元素 document.getElementById('id');
2、通过Class获取元素 document.getElementByClassName('class');
3、通过标签获取元素 document.getElementByTagName('tag');
08、事件
var onBox= document.getElementById('box');
1、单击事件 onclick //onBox.οnclick=function(){}
2、双机事件 ondblclick //onBox.οndblclick=function(){}
3、鼠标移入 onmouseover
4、鼠标移出 onmouseout
09、JS控制HTML内容
input 没有innerHTML,它是单标签,有value
1、获取非input 输入表单以外元素的内容 var data=对象.innerHTML;
2、修改非input 输入表单以外元素内容 对象.innerHTML=内容;
3、获取input输入框的内容 var data=对象.value;
4、改变input输入框的内容 对象.value=内容;
10、JS控制CSS属性及类样式
1、改变对象的class 对象.className=class;
2、改变对象的id 对象.id=id;
3、改变对象的样式 对象.style.width=宽度; 对象.style.backgroundColor=颜色;
横杠'-'识别不出来,要去掉'-',并将第二个单词首字母大写
background-color --->backgroundColor
background-bottom --->backgroundBottom
11、This问题
this就是向上找一层,这个函数属于谁,this就是谁
var oBox=document.getElementById('box'); oBox.οnclick=function(){ //第一类 alert(this); //this 就是oBox对象 //第二类 demo(); function demo(){ alert(this);//this 就是demo(); } }
12、自定义属性标签
——就是自定义一个html+css中没有的属性
<div id="box" s="200">小胖</div> <button id="btn">获得小胖信息</button> <button id="btn1">设置小胖信息</button> <script> var oBox=document.getElementById('box'); var oBtn=document.getElementById('btn'); var oBtn1=document.getElementById('btn1'); //获得自定义属性 oBtn.οnclick=function(){ var data=oBox.getAttribute('s'); alert(s); } //设置自定义属性 oBtn1.οnclick=function(){ oBox.setAttribute('s',100); } </script>
13、定时器
时间1000毫秒=1秒
1、一次定时器
设置:var timer=setTimeout(
function(){} , 时间/毫秒 );
清除:clearTimeout(timer);
2、循环定时器
设置:var timer=setInterval( function(){} ,
时间/毫秒);
清除:clearInterval(timer);
var timer=setInterval(function(){ num++; if(num==10){ clearInterval(timer); } else{ console.log(num);//1,2,3,4,5,6,7,8,9 } },1000);
14、DOM操作基础
<div id="root"> <p>1-p</p> <span id="span"> <div>2-div</div> <p> <div>3-div</div> </p> </span> <i>1-i</i> </div>
var oRoot=document.getElementById('root');
var oP=document.getElementById('p'); var oSpan=document.getElementById('span');
1、获得子级节点
var children=oRoot.children; var childrenNodes=oRoot.childNodes;//会把标签之间的空格也算成一个子级,此方法不提倡
2、获得父级节点
var parent=oP.parentNode;
3、弟节点——下一个节点
var next=oSpan.nextElementSibling(兼容ie 9+,chrome) || oSpn.nextSibling(兼容ie 6,7,8);
4、兄节点——上一个节点
var pre=oSpan.previousElementSibling(兼容ie 9+,chrome) || oSpan.previousSibling(兼容ie 6,7,8);
5、首节点
var first=oRoot.firstElementChild || oRoot.firstChild;
6、尾节点
var last=oRoot.lastElementChild || oRoot.lastChild;
15、创建和插入子元素
<div id="box"></div> <button id="btn"></button> <script> var oBox=document.getElementById('box'); var oBtn=document.getElementById('btn'); </script>
1、第一种方式,innerHTML
var string="<div>这是插入的元素</div>"; oBtn.οnclick=function(){ oBox.innerHTML=string; }
2、第二种方式,createElement(), appendChild();
var oDiv=document.createElement('div'); oDiv.innerHTML="这是第二种插入方法"; oDiv.className="class"; oDiv.id="id"; oBox.appendChild(oDiv);
16、可视区宽高
var oDiv=document.getElementById('id'); var vW=document.documentElement.clientWidth || document.body.clientWidth;//兼容性 var vH=document.documentElement.clientHeight || document.body.clientHeight; oDiv.style.width=vW + 'px'; oDiv.style.Height=vH+ 'px';
17、数组
//数组的定义 var a = [1 , 2 , 3 , 4 , 5]; //数组的初始化 var a = new Array(); //获得数组的长度 alert(a.length);
//向数组内添加数据
1、尾部添加
a.push(6); alert(a);//1,2,3,4,5,6
2、尾部删除,无需传参
a.pop();//自动删除最后一位(删除 值 & 位)
3、 头部添加
a.unshift(a);
4、 头部删除,无需传参
a.shift();//自动删除第一位(删除 值 & 位)
5、 删除值,不删除位
不常用
delete a[1]; //1, ,3,4,5
6、 删除并添加 [1 , 2 ,
3 , 4 , 5]
splice(起点,删除长度,添加元素1,添加元素2 ... );
a.splice(2, 1 , 11 , 12 , 13 , 14); alert(a);// 1 , 2 , 11 , 12 , 13 , 14 , 4 , 5
7、 只删除
splice(起点,删除长度);
a.splice(2 ,2); alert(a);// 1 , 2 , 5 , 6
8、 只插入不删除
splice(起点,0, 插入元素1, 插入元素2 ...);
a.splice(2 , 0 , 11 , 12); alert(a);// 1,2 , 11 , 12 , 3 , 4 , 5 , 6
9、 替换 先删除2两个,再添加2个
splice(2 , 2 , 11 ,12); alert(a); //1,2,11,12,5,6
10、 数组链接
var a=[1, 2, 3, 4, 5]; var b=[11, 12, 13]; var c=a.concat(b); alert(c);// 1,2,3,4,5,11,12,13
11、 Join参数
var a=[1, 2, 3, 4, 5]; 数组 typeof object var string=a.join('-'); 字符串 typeof string alert(string); //1-2-3-4-5
12、 排序
var b=[23, 1, 4551, 345, 5]; //方法一 b.sort(); alert(b); //sort()会按照数的第一位排序,1, 23, 345, 4551, 5 //方法二 b.sort(function(n1,n2){ //从小到大排序 return n1-n2; }); //方法三 b.sort(function(n1,n2){ //从大到小排序 return n2-n1; });
13、 数据翻转
a.reverse();
18、JSON
JSON:轻量级的数据格式
JSON格式:键值对方式展示 {键:值,键:值 ...}
1.1 一维json
var json={"name":"上海大众","url":"http://www.csvw.com" , "city":"上海" };
//json另一种写法,强烈建议 var json={ "name":"上海大众", "url":"http://www.csvw.com", "city":"上海" };
1.2 访问一维json
alert(json.name);
2.1 二维json
var json1={ "name":"上海大众", "city":"上海", "brand":{ "name1":"大众", "name2":"斯柯达" } };
2.2 二维json的访问
alert(json1.brand.name1);
3 解析json数据 两种方式 eval() , JSON.parse()
//特别的注意,json内全部使用双引号,这样不容易出问题
//json格式的
字符串,
json另一种写法不行,有换行
3.1 eval()
var json='{"name":"上海大众","url":"http://www.csvw.com" , "city":"上海" }';//可以解析 var json="{'name':'上海大众','url':'http://www.csvw.com' , 'city':'上海' }";//可以解析 var data =eval('('+json+')'); for( var a in data ){ alert(a+'='+data[a]); }
3.2 JSON.parse()
var json="{'name':'上海大众','url':'http://www.csvw.com' , 'city':'上海' }";//不可以解析 var json='{"name":"上海大众","url":"http://www.csvw.com" , "city":"上海" }';//可以解析 var data=JSON.parse(json); for(var a in data){ alert(a+"="+data[a]); }
4 真正的json转换成字符串
var string=JSON.stringify(json); alert(typeof string);//string类型
19、循环语句
1、for循环
for(初始化;条件;自增){ //语句,条件成立执行 }
2、for in循环 ,主要用于json,性能不如for循环
var json={ "name":"上海大众", "url":"http://www.csvw.com", "city":"上海" } // for( 初始化 in json){} for(a in json){ // a 代表json 的键 //在for in 循环的第一层,我们不能使用 . ,而要使用[] //不能使用 json.a alert(json[a]); }
20、分支结构
1、if else
if(判断){ //成立 真 }else{ //不成立 假 }
2、 if else if
if(判断1){ ........... }else if(判断2){ ........... }else{ ........... }
3、switch
//逐个对比的判断 switch(a){ case '1': //和a对比,如果相等,走底下的语句,并且break是停止的意思 ........ break; //不写break, case穿透,会一直向下执行,直到碰到break case 10: //数值10 ........ break; case '11': //字符串11 ........ break; //默认 default: ........... break; }
4、三元
a>b?alert('true'):alert('false');
21、函数
1、函数的定义,函数需要调用
function (函数名){ ........... } function say(){ alert("上海大众"); }2、函数的调用
say();
3、函数的返回值
3.1 返回一个值
function demo(){ var a=10,b=6; //return不仅有返回数据的作用,也有停止函数执行的作用 //return以后所有的代码不再执行 return a-b; } var data=demo(); alert(data);3.2 返回一个函数
function demo() { var a=10; return function(){ alert(a); } } var data=demo(); data();
4、匿名函数,即没有名字的函数
function (){ ......... } // 匿名函数的调用 //方法一: var say=function(){ alert("上海大众"); } say(); //方法二: (function(){ alert("斯柯达"); })();
5、函数的嵌套
function say(){ var s="保时捷"; return s1; function s1(){ alert(s); } } var d=say(); d();
6、作用域,每一个函数体都代表一个层或者一个作用域
//子级可以调用父级变量,父级不能调用子级变量 var a=10; //父级 function demo(){ var c=5;//子级 } demo(); alert(a);//10 alert(c);//c is undefined
7、函数传参
7.1 普通传参
function login(name , password){ //形参,可以不用手动var ,会自动var alert(name); alert(password); } login('高渐离','123456');//实参,多个参数用逗号分隔开
7.2 json传参
var json={ "name":"上海大众", "url":"http://www.csve.com", "city":"上海" } function login(j){ alert(j.name);//上海大众 } login(json);
8、函数的回调
8.1 麻烦一点的方法
function login(name,password,sFn,eFn){ if(name=="高渐离" && password=="123456"){ sFn(); }else{ eFn(); } } login('高渐离','123456',successFn,errFn); function successFn(){ alert("登录成功"); } function errFn(){ alert("登录失败"); }
8.2 高端一点的方法....函数做实参
function login(name,password,sFn,eFn){ if(name=="高渐离" && password=="123456"){ sFn(); }else{ eFn(); } } login('高渐离','123456',function(){ alert("登录成功"); },function(){ alert("登录失败"); });
8.3 更高端点....json
var json={ "name":"高渐离", "password":"123", "successFn":function(){ alert("登录成功"); }, "errorFn":function(){ alert("登录失败"); } } //可以放入单独的js文件,通过引入js文件,直接调用 function login(j){ if(j.name=="高渐离" && j.password=="123"){ j.successFn(); }else{ j.errorFn(); } } login(json);
22、break和continue
1、break, 整个循环全部结束
for(var i=0;i<10;i++){ if(i==5){ break; } alert(i);//0,1,2,3,4 }
2、continue, 结束当次循环,后面的循环继续执行
for(var i=0;i<10;i++){ if(i==5){ continue; } alert(i);//0,1,2,3,4,6,7,8,9 }
23、字符串
字符串就是一串字符或者数字、字母、特殊符号
1、长度length
var string="上海大众海"; alert(string.length);//5
2、通过下标查找字符charAt()
var string="上海大众海"; var data=string.charAt('1');//第0位开始 alert(data);//海
3、通过字符查找下标,从左向右查找,一旦查找到,立刻返回下标,不再继续查找
var string="上海大众海"; alert(string.indexOf('海'));//1
4、从右向左查找,下标大小仍是从左向右排的
var string="上海大众海"; alert(string.lastIndexOf('海'));//4
5、字符串的截取,substring(开始位置,结束位置);substring(开始位置)如果不写结束位置,默认截取到最后
var string="上海大众海"; alert(string.substring(2,3));//大 alert(string.substring(3,2));//大 alert(string.substring(0,4));//上海大众
6、demo 截取图片的后缀
var img="little.bear.bear.jpg" alert(img.substring(img.lastIndexOf('.')));// .jpg
7、字符串转成数组 split(),一定有规律的切
var string="1-2-3-4-5"; var arr=string.split('-'); alert(typeof arr);//object alert(arr['1']);//2
8、字符串转大小写
//小写转大写 var str="www.baidu.com"; alert(str.toUpperCase()); //大写转小写 var str="WWW.BAIDU.COM"; alert(str.toLowerCase());