javaScript 基本知识点

  • 格式:txt
  • 大小:7.67 KB
  • 文档页数:7
方法:addEventListener(); 用于向指定元素添加事件句柄
注:向同一元素添加多个句柄时不覆盖依次执行
removeEventListener(); 移除方法添加的事件句柄
document.getElementById(id).addEventListener("click",function(){});
事件处理
1). onClick 单击事件
2). onMouseOver 鼠标经过事件
3). onMouseOut 鼠标移出事件
4). onChange 文本内容改变事件
5). onSelect 文本框选中事件
6). onFocus 光标聚集事件
7). onBlur 移开光标事件
people.age=21;
document.write(+people.age);
//第二种
people= {name: "linglong",age: "21"}
document.write(+people.age);
//第三种
<body onLoad="startTime()">
<div id="timetxt"> </div>
</body>
</html>
4). Array数组对象
常用方法:
concat(); 合并数组
sort(); 自然排序 sort(function(a,b){return b-a;}) 非自然排序
getDay(); 获取星期
getHours(); 时
getMinutes(); 分
getSeconds(); 秒
时钟事例:
<html>
<head>
<script>
function startTime(){
var today = new Date();
function people(name,age){
=name;
this.age = age;
}
stu = new people("linglong",21);
document.write(+stu.age);
</script>
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById("timetxt").innerHTML=h+":"+m+":"+s;
createElement(); 创建元素节点
createTextNode(); 创建文本节点
appendChild();
insertBefore(,); 插入节点
removeChild(); 删除节点
offsetHeight offsetWidth 网页尺寸
scrollHeight scrollWidth 网页尺寸
寻找元素: 1.通过id document.getElementById();
2.通过标签名 document.getElementByTagName();(若有多个则是第一个)
改变html内容: innerHTML
改变html属性: attribute 如:document.getElementById("aid").href="";
toUpperCase()/toLowerCase(); 转换成大小写
split(); 字符串转为数组
charAt();
charCodeAt();
concat();
fromCharCode();
lastindexOf();
function fun(){
var n =2; //局部变量,仅在该函数内部使用
m=3; //全局变量(必须要进行fun()调用之后才能正常使用)
}
</script>
---------------------------------------====================--------------------------
还有就是嵌入元素标签中去 如嵌入p标签时利用document.getElementById("").innerHTML=fun();
3). 全局变量和局部变量
全局变量:定义在script标签中的变量
局部变量:一般是定义在函数内的
如:
<script>
var i =1; //全局变量
引入外部js文件:<script src=" "> </script>
---------------------------------------====================--------------------------
语法和注释
1). js语句后面可加;也可不加
2). js代码是按照编写顺序依次执行的
t = setTimeOut(function(){
startTime();
},1000);
}
function checkTime(i){
if(i<10){
i="0"+i;
}
return i;
}
</script>
</head>
3). 标示符必须以字母、下划线、美元符号开始
4). 大小写敏感
5). 不支持换行,需用<br/>
6). 单行注释// 多行注释/* */
---------------------------------------====================--------------------------
2). DOM操作CSS
document.getElementById(id).style.property= new style;
如:
document.getElementById("container").style.background="red";
3)DOM EventListener
2). String对象
字符串可以使用双引号或单引号
属性: length prototype constructor
常用方法: indexof(); 在字符串中查找字符串 返回字符串的首位置(从0开始)
match(); 内容匹配
replace(); 替换内容
<script>
document.write("向网页中输出内容");
</script>
注:script标签可放在head中也可body中。
---------------------------------------====================--------------------------
变量和数据类型
1). var 变量名=值;
2). 字符串String var str= "linglong";
3). Number var num= 1;
4). Boolean var flag= true;
5). Array var arr=[1,2,3,4]; //等同于var arr= new Array(1,2,3,4);
//document.write(date.getFullYear());
常用方法:
toLocaleDateString();
toLocaleTimeString();
getFullYear(); 获取年份
getTime(); 获取毫秒
setFullYear(2017,6,30); 设置具体日期
---------------------------------------====================--------------------------
js内置对象
1). 自定义对象
<script>
//第一种自定义方式
people = new Object();
= "linglong";
方法:
getElementByName();
getElementByTagName();
getAttribute(); 获取元素属性
setAttribute("属性名","内容"); 设置元素属性
childNodes(); 访问子节点
parentNode(); 访问父节点
document.getElementById(id).addEventListener("click",hello);
function hello(){
alert("hello");
}
document.getElementById(id).removeEventListener("click",function(){});

下载文档原格式

  / 7