1. ① 基础类型
① 未定义类型(变量类型),空类型(对象类型):
var item; item:undefined
var temp = null; temp:null --> object == null
undefined与null严格相等
② typeof 描述:获取变量的类型 :
var item=10;
console.log(typeof item); === number (数字类型)
③ 文档注释:/** */ (一般是代码块的前面)
/**
* 设置后台传过来的数据,并解析出来;后台的properties文件,每一行用^分隔
* @param {String} data
* @memberof Properties
*/
public setData(data:String){}
④ 加法/连接,减法运算:
var num1=10; var num2='3'; var result1=num1 + num2 = 103;var result2=num1 - num2 = 7;
var num1=10; var num2='abc'; var result3 = num1 - num2 = NaN (not a number);
console.log(NaN == NaN) --> false
② alert() prompt() substring() slice() substr() indexOf() lastIndexOf() replace() trim() toLowerCase() toUpperCase() split()
① var arr = [1,2,3,4,5];
for(var num in arr){
console.log(arr[num]);
}
② var str = 'The Three FireGuners';
str.substring(9,4); // Three 从第一下标开始截取,参数二的下标为止,不包含第二个字符(可颠倒)
str.slice(4,9); // Three 从第一下标开始截取,到参数二的下标为止,不包含第二个字符(不可颠倒)
str.substr(9,4); // Fire 从第一下标开始截取,截取参数二的长度内容
str.indexOf('Th'); // 0 返回一个字符串在另一个字符串首次出现位置的索引
str.lastIndexOf('Fire'); // 6 返回一个字符串在另一个字符串最后出现位置的索引
str.replace('Three','Two');将【查找到的第一个指定字符串】替换成【目标字符串】。
str.trim() // 能够去掉字符串两端多余的空格
str.toLowerCase() // 把字符串中的英文字母全都转换成小写字母
str.toUpperCase() // 把字符串中的英文字母全都转换成大写字母。
str.match('Three') // object or null 返回该字符串在另一个字符串中首次出现的信息
str.split(' '); // The Three FireGuners
while(str.indexOf('Three')!=-1){ // 替换字符串中所有的sxt
str=str.replace('Three','Two');
}
③ 加密解密:
解析非中文代码
btoa(str):字符串或二进制值转为Base64编码
atob(str):Base64编码转为原来的编码
加密解密中文文字
encodeURIComponent()(加密)
decodeURIComponent()(解密)
3. 数组常用方法
①对原数组更改:
arr.toString():能够将数组转换成字符串,默认是以逗号隔开
arr.join('分隔符'):将给定的参数做分隔符,将所有的数组元素组成一个字符串
arr.push(item1,item2...): 在末端添加一个或多个元素,并返回数组的长度
arr.pop():删除数组的最后一个元素,并返回删除的这个元素
arr.shift():删除数组中的第一个元素,并返回删除的这个元素
arr.unshift('item1','item2'...):在数组的第一个位置添加元素,并返回添加元素后新数组的长度。
arr.reverse():能够反序排列数组(反序排列)
arr.splice(3,3,4,5):从下标为3的元素开始删除3个元素,并将4,5插入数组中(前两个元素必有)
①不对原数组更改:
arr.slice(fromIndex,toIndex):对数组进行截取,并生成一个新数组(前包后不包)
arr.sort(排序的规则):对数组进行排序,默认按照编码方式排序
4. 对象
一.【中括号】和【点符号】到底有什么区别呢?
总结:中括号运算符总是能代替点运算符。但点运算符却不一定能全部代替中括号运算符
(1)中括号运算符可以用字符串变量的内容作为属性名。点运算符不能。
var obj={name:'贝西', height:170 }; var str='height';
console.log(obj.str); console.log(obj[str]);
(2)中括号运算符可以用纯数字为属性名。点运算符不能。
var obj={}; obj[0]='aa'; obj[1]='bb'; console.log(obj);
(3)中括号运算符可以用js的关键字和保留字作为属性名。点运算符不能。
二.
Object.keys(对象):获取对象中所有的属性并构成数组返回
delete obj.property:删除对象的一个属性(实际删除的时一对键值对)
console.log(key in obj)检查对象是否包含一个属性
for(var pro in obj){...} 循环变量pro表示的是对象的属性名,并不表示属性的值!
三.
对象的引用:
如果一个变量指向一个对象,那么这个变量就称为这个对象的引用,对一个对象的对象引用做出的修改,会影响整个对象的状态。
var obj1={name:'张三'}; var obj2=obj1; var obj3=obj1;
obj1.name='贝西'; console.log(obj2); console.log(obj3);
四.
arguments对象:
(1)arguments对象包含了函数【运行时】的所有参数。
var func = function(one) {
console.log(arguments[0]); console.log(arguments[1]); console.log(arguments[2]);
}
func(1, 2, 3);
(2)arguments对象除了可以读取参数,还可以为参数赋值
function func(num1,num2){
arguments[0]=10; arguments[1]=20; console.log(num1+num2);
}
func(2,3);
五.
Math.random():随机取[0,1)的数
Math.floor():向下取整
Math.ceil():向上取整
取m-n之间的随机整数:Math.floor(Math.random()*(m-n)+m);
5.DOM
一.
按照指定的周期(毫秒)来调用函数或计算表达式: setInterval(function(){},500);
清除定时器:clearInterval(timer);
超时操作:setTimeout(function(){},3000);
跳转页面:document.location.href='http://www.bjsxt.com';
二.
选中页面元素对象:
用来选中页面元素,根据指定的选择器进行筛选,返回第一个匹配的节点:p.querySelector('span')
根据指定的选择器进行筛选:document.querySelectorAll('选择器名');
var pList= document.querySelectorAll('.pp'); console.log(pList[1] );
返回匹配指定ID属性的元素节点:getElementById();
var p2=document.getElementById('p2'); console.log(p2);
返回所有指定标签的元素:getElementsByTagName()
var p= document.getElementsByTagName('p'); console.log(p[1]); console.log(p.length);
返回符合指定类名的所有元素:getElementsByClassName()
var pp=document.getElementsByClassName('pp'); console.log(pp[1]);
用于选择拥有name属性的HTML元素:getElementsByName()
var p2_name= document.getElementsByName('p2_name'); console.log(p2_name[0]);
三.
创建页面元素:
创建一个页面元素:document.createElement("标签名");
给某个节点添加子节点:document.body.appendChild(p);
创建文本节点:document.createTextNode('这是p段落');
创建一个属性节点:document.createAttribute('属性名');
创建的属性节点使用setAttributeNode()方法绑定到元素上
例子:var p= document.createElement('p');
var p_text=document.createTextNode('这是p段落');
p.appendChild(p_text);
var p_align=document.createAttribute('align');
p_align.value='center';
p.setAttributeNode(p_align); //将元素节点放到body中
document.body.appendChild(p);
四.
获取元素属性的方法:
getAttribute('属性名'); 获取元素属性值
setAttribute('属性名','属性值'); 设置元素属性
removeAttribute('属性名'); 删除元素属性
五.
style属性用来读写和设置元素的行内样式:元素节点.style.xxx
a.将横杠从CSS属性名中去除,然后将横杠后的第一个字母大写
b.CSS属性名是JavaScript保留字的,在属性名之前需要加上字符串“css”
c.style对象的属性值都是字符串,而且包括单位。
h2.style.textAlign='center';
h2.style.color='red';
h2.style.cssFloat='left';
document.body.appendChild(h2);
六.
cssText属性
可以用来读写或删除整个style属性:元素节点.style.cssText='css样式';
h2.style.cssText='color:red;text-align:center';
document.body.appendChild(h2);
childNodes属性返回一个节点集合(NodeList):div1.childNodes;
nodeValue属性一般只用于Text节点;
node.insertBefore(newNode,subNode)方法:
第一个参数是所要插入的节点,
第二个参数是当前节点的一个子节点,新的节点将插在这个节点的前面。
七.
①返回当前节点和它的所有后代节点的文本内容:document.getElementById('divA').textContent
②返回第一个\最后一个子节点,如果不存在返回null:div1.firstChild/ lastChild
③判断一个节点是否有子节点,如果有返回true,否则false:div.hasChildNodes();
④从当前节点移除该节点:div.removeChild(div.firstChild)
⑤将一个节点替换当前节点:div.replaceChild(span,div2);(第一个参数是用来替换的新节点)
⑥判断当前节点是否包含参数节点,包含返回true,否则false:document.body.contains(div2)
⑦判断两个节点是否相等:span.isEqualNode(span1)
⑧窗口大小:document.documentElement.clientWidth / document.documentElement.clientHeight
⑨html元素大小:document.documentElement.offsetWidth/document.documentElement.offsetHeight
6.事件处理
一.
① 事件冒泡:沿着DOM树逐级向上触发 (注意:如没有特殊情况,均采用事件冒泡。)
事件捕获:沿着DOM树逐级向下依次触发
② <div class="div2" onclick="test3()">div2</div>
HTML事件:
点击事件函数:function test2(){console.log("这是第二个函数");}
清除事件函数:div2.setAttribute('onclick',null);
DOM0级事件:
点击事件函数:var div2=document.querySelector('.div2');
div2.onclick=function(){ console.log("div2被点击了2次"); }
清除事件函数:div2.onclick=null;
DOM2级事件:通过addEventListener函数绑定的事件
type:事件类型。(没有on!没有on!没有on!)
listener:监听函数,绑定的函数
useCapture:是否使用捕获机制。如果不写,默认值为false :冒泡机制;true:捕获机制
点击事件函数:function fun(){ console.log("这是dom2事件函数div2一次"); }
div2.addEventListener('click',fun,true);
清除事件函数:div2.removeEventListener('click',fun,true);
IE浏览器DOM2级事件:attachEvent(type,listener)
type:事件类型。(有on!有on!有on!)
listener:监听函数,绑定的函数
点击事件函数:div2.attachEvent('onclick',fun);
清除事件函数:div2.detachEvent('onclick',fun);
解决浏览器事件绑定兼容性问题:
var superEvent={
add: function (ele,type,func){
if( ele.addEventListener){ // 有返回值就是true
ele.addEventListener(type,func);
}else{
ele.attachEvent('on'+type,func);
}
},
remove:function (ele,type,func){
if(ele.removeEventListener){
ele.removeEventListener();
}else{
}
}
}
superEvent.add(div,'click',show);
鼠标事件:
单击事件:div.onclick=function(){ }
双击事件:div.ondblclick=function(){ }
鼠标按下时触发:div.onmousedown=function(){ div.style.backgroundColor='orange'; }
鼠标抬起时触发:div.onmouseup=function(){ div.style.backgroundColor='orange'; }
鼠标移动时触发:event对象,仅在函数内部使用,表示事件本身;
clientX clientY ,表示鼠标在视口中的坐标;
div.onmousemove=function(){
var x=event.clientX; var y=event.clientY;
console.log('(x,y):('+x+','+y+')');
div.innerHTML=input.value;
li.style.cssText='width:80px;height:30px;line-height:30px;text-align:center;background-color:skyblue;display:inline-block';}
鼠标移入移出时触发(不冒泡):
div2.addEventListener('mouseenter',function(){ console.log('鼠标进入div2区域'); })
div1.addEventListener('mouseenter',function(){ console.log('鼠标进入div1区域'); })
div2.addEventListener('mouseleave',function(){ console.log('鼠标移出div2区域'); })
div1.addEventListener('mouseleave',function(){ console.log('鼠标移出div1区域');})
鼠标移入移出时触发(冒泡):
div2.addEventListener('mouseover',function(){ console.log('鼠标进入div2区域'); })
div1.addEventListener('mouseover',function(){ console.log('鼠标进入div1区域'); })
div2.addEventListener('mouseout',function(){ console.log('鼠标移出div2区域'); })
div1.addEventListener('mouseout',function(){ console.log('鼠标移出div1区域'); })
带有hover样式的导航栏:
this在函数中使用,表示谁调用函数,它就是谁
this.style.backgroundColor='orange';
div跟着鼠标移动而移动:
document.onmousemove=function(){
if(flag==true){
div.style.left=event.clientX-50+'px';
div.style.top=event.clientY-50+'px';
}
}
焦点事件:(不支持事件冒泡)
获取焦点:div.onfocus=function(){}
失去焦点:div.onblur=function(){} --> 输入框 例子input.onblur=function(){ }
注册用户:
var userNameInput= document.querySelector('.userName');
userNameInput.setAttribute('class','borderGreen');
userNameSpan.innerHTML='正确';
滚动事件:
滚动事件调用一次,就输出一次滚动距离:
window.onscroll=function(){
console.log(document.body.scrollTop||document.documentElement.scrollTop); //IE兼容性
}
直接跳转到哪一位置:
document.querySelector('button').onclick=function(){
document.body.scrollTop=1000;
document.documentElement.scrollTop=1000;
}
回到顶部:
var timer=null;
var button= document.querySelector('button');
button.onclick=function(){ //每隔一秒,向上滚动100距离
timer=setInterval(function(){
var top=document.documentElement.scrollTop||document.body.scrollTop;
top=top-100; console.log(top);
document.documentElement.scrollTop=top; document.body.scrollTop=top;
if(top<=0){ clearInterval(timer); }
},100)
}