javaScript 基本知识点

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。


注:script标签可放在head中也可body中。
---------------------------------------====================--------------------------
引入外部js文件:
---------------------------------------====================--------------------------
语法和注释
1). js语句后面可加;也可不加
2). js代码是按照编写顺序依次执行的
3). 标示符必须以字母、下划线、美元符号开始
4). 大小写敏感
5). 不支持换行,需用

6). 单行注释// 多行注释/* */
---------------------------------------====================--------------------------
变量和数据类型
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);
6). Object var obj= new Object();
7). null var n =null;
8). 未定义 var r; (不指定任何具体类型,在使用时在赋值)
---------------------------------------====================--------------------------
函数
1). 定义函数
function 函数名([arg1,arg2...]){函数体;}
注:声明函数参数时不需要指定变量类型,因为js是弱类型脚本语言
2). 调用函数
1.在script标签中直接进行调用
2.在html文件中调用(一般都是按钮触发) onClick="fun()"
还有就是嵌入元素标签中去 如嵌入p标签时利用document.getElementById("").innerHTML=fun();
3). 全局变量和局部变量
全局变量:定义在script标签中的变量
局部变量:一般是定义在函数内的
如:

---------------------------------------====================--------------------------
异常捕获
1). try{
可能发生异常的代码块;
}catch(err){
错误信息处理;
}
2). 自定义错误信息 throw "错误信息";
---------------------------------------====================--------------------------
事件处理
1). onClick 单击事件
2). onMouseOver 鼠标经过事件
3). onMouseOut 鼠标移出事件
4). onChange 文本内容改变事件
5). onSelect 文本框选中事件
6). onFocus 光标聚集事件
7). onBlur 移开光标事件
8). onLoad 网页加载事件
9). onUnload 关闭网页事件
---------------------------------------====================--------------------------
DOM对象(document object model)
1.js能够改变页面中的所有html元素
2.js能够改变页面中的所有html属性
3.js能够改变页面中的所有css样式
4.js能够对页面中的所有事件作出反应

1). DOM操作html
改变html输出流: document.write();
注意:不要在文档加载完毕后

使用它,会被覆盖文档。
寻找元素: 1.通过id document.getElementById();
2.通过标签名 document.getElementByTagName();(若有多个则是第一个)
改变html内容: innerHTML
改变html属性: attribute 如:document.getElementById("aid").href="";
方法:
getElementByName();
getElementByTagName();
getAttribute(); 获取元素属性
setAttribute("属性名","内容"); 设置元素属性
childNodes(); 访问子节点
parentNode(); 访问父节点
createElement(); 创建元素节点
createTextNode(); 创建文本节点
appendChild();
insertBefore(,); 插入节点
removeChild(); 删除节点
offsetHeight offsetWidth 网页尺寸
scrollHeight scrollWidth 网页尺寸
2). DOM操作CSS
document.getElementById(id).style.property= new style;
如:
document.getElementById("container").style.background="red";

3)DOM EventListener
方法:addEventListener(); 用于向指定元素添加事件句柄
注:向同一元素添加多个句柄时不覆盖依次执行
removeEventListener(); 移除方法添加的事件句柄
document.getElementById(id).addEventListener("click",function(){});
document.getElementById(id).addEventListener("click",hello);
function hello(){
alert("hello");
}
document.getElementById(id).removeEventListener("click",function(){});
---------------------------------------====================--------------------------
js内置对象
1). 自定义对象


2). String对象
字符串可以使用双引号或单引号
属性: length prototype constructor
常用方法: indexof(); 在字符串中查找字符串 返回字符串的首位置(从0开始)
match(); 内容匹配
replace(); 替换内容
toUpperCase()/toLowerCase(); 转换成大小写
split(); 字符串转为数组
charAt();
charCodeAt();
concat();
fromCharCode();
lastindexOf();
search();
slice();
substring();
substr();
valueOf();

3). Date日期对象
获得当前时间:
var date = new Date();
document.write(date);
//document.write(date.getFullYear());
常用方法:
toLocaleDateString();
toLocaleTimeString();
getFullYear(); 获取年份
getTime(); 获取毫秒
setFullYear(2017,6,30); 设置具体日期
getDay(); 获取星期
getHours(); 时
getMinutes(); 分
getSeconds(); 秒

时钟事例:









4). Array数组对象
常用方法:
concat(); 合并数组
sort(); 自然排序 sort(function(a,b){return b-a;}) 非自然排序
push(); 末尾追加元素
reverse(); 数组元素翻转

5). Math对象
常用方法:
round(); 四舍五入
random(); 返回0-1之间的随机数 parseInt(Math.random()*10);
max(); 返回最大值
min(); 返回最小值
abs(); 返回绝对值
---------------------------------------====================--------------------------
js浏览器对象
1). Window对象
window对象是BOM的核心,window对象指当前的浏览器窗口
所有javaScript全局对象、函数以及变量均自动成为window对象的成员
全局变量是window对象的属性
全局函数是window对象的方法
document也是window对象的属性之一 window.document.write();
window尺寸:
window.innerHeight 浏览器窗口的内部高度
window.innerWidth 浏览器窗口的内部宽度
window方法:
window.open("new.html","windowname","height=100,width=100,top=100,left=100,
toolbar=no,menubar=no"); 打开新窗口
window.close(); 关闭当前窗口
2). 计时器
计时事件:
通过使用js,我们有能力做到在一个设定的时间间隔之后来执行代码,
而不是在函数被调用后立即执行
计时方法:
setInterval(function(){},1000); 间隔指定的毫秒数不停地执行指定的代码
clearInterval(); 用于停止setInterval()方法执行的函数代码
setTimeout(); 暂停指定的毫秒数后执行指定的代码
clearTimeout(); 用于停止setTimeout()方法执行的函数代码
3). History对象
常用方法:
back(); 与在浏览器中点击后退按钮相同
forward(); 与在浏览器中点击向前按钮相同
go(); 进入历史中的某个页面
4). Location对象
window.Location对象用于获得当前页面的地址(url),并把浏览器重定向到新的页面
属性:
location.hostname 返回web主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回web主机的端口
location.protocol 返回所使用的web协议
location.href 返回当前页面的url
location.assign(); 加载新的文档
5). Screen对象
window.screen对象包含有关用户屏幕的信息
属性:
screen.availWidth 可用的屏幕宽度
screen.availHeight 可用的屏幕高度
screen.height 屏幕高度
screen.width 屏幕宽


6). Navigator对象









相关文档
最新文档