Please enable Javascript to view the contents

 ·  ☕ 4 分钟 · 👀... 阅读

JavaScript学习笔记

1
2
3
4
5
6
7
8
alert("出来一个弹框")
document.write("向body标签内写入东西")
console.log("向控制台输出内容")

console.log(typeof a) 	#检查a的类型
Number.MAX_VALUE 		#表示最大值
Infinity				#表示正无穷
NaN						#表示非数字

类型的转换

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
a = String(a)			#将a转换成字符串类型
a = Number(a)			#将a转换成数值类型
a = parseInt(a,10)		#将字符串中的整数转换成数值只要碰到非数值就停止,以十进制方式输出
a = parseFint(a)		#将字符串中的小数转换成数值只要碰到非数值就停止
a = Boolean(a)			#将变量类型转换为布尔类型

a++						#自增前的值
++a						#自增后的值

三元运算符
语法
	条件表达式?语句1:语句2;
		如果该值为true执行语句1
        如果该值为false执行语句2

prompt()				#输入函数

编码
在js中用\u加十六进制
在h5中用&#加十进制

循环

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
while循环
while(条件){
      执行语句
      }
do{
   执行语句 
}while(条件)		#前执行再判断

for循环
for(条件){
    执行语句
}

获取元素

1
2
3
4
5
6
7
document.getElementById('通过ID获取元素')
document.getElementsByTagName('通过标签获取元素')

window.onload #防止没有加载完东西
事件onmouseover
onmouseout
onclick

内置函数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
arguments 			#存了数组内所有的内容可以循环取出来
style 				#获取行间元素
currentStyle		#获取非行间元素
getStyle			#获取样式
toLowerCase			#转换成小写
#数组的定义
var arr = [1,2,3] == var arr = new Array(1,2,3)

#数组的方法
arr = [1,2,3,4,5,6]
arr.push()							#从尾部添加
arr.unshift()						#从头部添加
arr.pop()							#从尾部删除
arr.shift()							#从头部删除
arr.splice(1,2)						#从第2个下标开始删除删除2个元素
arr.splice(1,0'a','b')				#从第2个下表开始插入插入'a''b'
arr.splice(1,2'a','b')				#从第2个下表开始替换替换成'a ''b'
arr.concat(数组)						#连接两个数组
arr.sort()							#排序这个数组-字符串
arr.sort(function(n1-n2){n1-n2})	#排序这个数组-数值
arr.join('-')						#拼接数组之间的内容'-'

#兼容性示例
if(obj.currentSytle){
    return obj.currentStyle[name];
}else{
    return getComputedStyle(obj,false)[name];
}

定时器

1
2
3
4
5
6
7
8
function show(){
	alert('a')
}
setInterval(show,1000)				#每隔1秒钟执行一次重复执行
setTimeout(show,1000)				#隔1秒钟执行一次执行一次

clearInterval()						#关闭定时器
clearTimeout()						#关闭定时器

Dom

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
#子节点
str.childrn
str.childNodes
for (var i=0; i<str.childNodes.length;i++){
    if (str.childNodes[i].nodeType == 1){
        str.childNodes[i].style.background = 'red';
    }
}

#父节点
str.parentNode

#收尾节点
firstChild firstElementChild
lastChild lastElementChild

#兄弟节点
nextSibling nextElementSibling
previousSibling PreviousElementSibling

#DOM方式操作元素属性
获取getAttribute(名称)
设置setAttribute(名称,)
删除removeAttribute(名称)
#获取当前列表下所有为 box   标签 并把 背景 设置为red
function getByClass(oParent,sClass){
    var aResult=[];
    var aEle=oParent.getElementsByTagName('*');
    for(var i=0; i<aEle.length; i++){
        if(aEle[i].calssName==sClass){
            aResult.push(aEle[i]);
        }
    }
    return aResult
}
window.onload = function(){
    var oUl = document.getElementById('ul');
    var aBox = getByClass(oUl,'box');
    for(var i=0;i<aBox;i++){
        aBox[i].style.background = 'red';
    }
}

Dom操作

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
父级.appendChild(子节点)				#添加
父级.insertBefore(子节点,原有节点[0])	#插入
父级.removeChild(当前.父级)			#删除
window.onload=function(){
    var oBth = document.getElementById('btn');
    var oUl = document.getElementById('ul');
    oBth.onclick = function(){
        var oLi = document.createElement('li');
        oUl.appendChild(oLi);
    }
}

数据类型

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
a               	数组 (Array) 
b               	布尔值 (Boolean) 
by             		字节 (Byte) 
c             		有符号字符 (Char) 
cb            		无符号字符 (Char Byte没有多少人用) 
cr             		颜色参考值 (ColorRef) 
cx,cy         		坐标差长度 ShortInt 
dw           		Double Word 
fn              	函数 
h                	Handle句柄 
i                	整型 
l              		长整型 (Long Int) 
lp             		Long Pointer 
m_          		类的成员 
n            		短整型 (Short Int) 
np          		Near Pointer 
p            		Pointer 
s           		字符串型 
sz         			以null做结尾的字符串型 (String with Zero End) 
w        			Word 

Javascript事件

鼠标

oEvent=event||ev

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
#冒泡取消
oEvent.cancelBubble=Ture; 

function getPos(ev)
{
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
	
	return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
}


document.oncontextmenu = function() {
        alert('想右键???门都没有')
        return false;
    }

键盘

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
document.onkeydown = function(ev){
    var oDiv = document.getElementById('div1');
    if(event.keyCode == 37){
        oDiv.style.left=oDiv.offsetLeft-10+'px';
    }else if (event.keyCode == 39){
        oDiv.style.right=oDiv.offsetLeft-10+'px';
    }else if (event.keyCode == 38){
        oDiv.style.top=oDiv.offsettop-10+'px';
    }else if (event.keyCode == 40){
        oDiv.style.top=oDiv.offsettop+10+'px';
    }
}

keyCode
ctrlKey
shiftKey
altKey
分享

幽梦
作者
幽梦
傻猪男孩

目录