JavaScript学习笔记-进阶篇
来源:互联网 发布:数据分析师能力要求 编辑:程序博客网 时间:2024/05/21 11:20
这周学习的JavaScript。
课程名:JavaScript进阶篇
课程地址:慕课网 http://www.imooc.com/learn/10
整理笔记如下:
时间:2015年01月06日-2015年1月7日
- JS基础语法:
- 变量的声明、赋值:var 变量名;
- 表达式;
- 操作符:+、比较、与或非;
- 操作符优先级:算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号,如果同级的运算是按从左到右次序进行,多层括号由里向外;
- ++和--;
- 数组:
- 数组的创建:var 数组名=new Array(); 注意索引从0开始;
- 注意:
- 可以声明长度var 数组名=new Array(8);
- 创建的新数组是空数组,没有值,如输出,则显示undefined。
- 虽然创建数组时,指定了长度,但实际上数组都是变长的,也就是说即使指定了长度为8,仍然可以将元素存储在规定长度以外。
- 注意:
- 赋值:
var myarray = new Array(66,80,90,77,59);//创建数组同时赋值
var myarray = [66,80,90,77,59];//直接输入一个数组(称 “字面量数组”)myarray[0]=88;- 数组存储的数据可以是任何类型(数字、字符、布尔值等)
- 数组长度:myarray.length; //获得数组myarray的长度
- 注意: JavaScript数组的length属性是可变的
- 二维数组:
方法一:
var myarr=new Array(); //先声明一维
for(var i=0;i<2;i++){ //一维长度为2
myarr[i]=new Array(); //再声明二维
for(var j=0;j<3;j+){ //二维长度为3
myarr[i][j]=i+j; //赋值,每个数组元素的值为i+j
}
}
方法二:var Myarr=[[0,1,2],[1,2,3]];赋值:myarr[0][0]=5;
- 数组的创建:var 数组名=new Array(); 注意索引从0开始;
- 流程控制语句:
- if
- if...else
- if...else if...else 多重嵌套
- switch
- 循环语句:for、while、do...while
- break和continue
- 函数:
- 定义;
- 调用
- 参数
- 返回值
- 事件响应,网页交互:
- onunload事件需要注意下:格式为window.onunload=函数名();
- JavaScript内置对象:
- 日期对象Date
- 注意:
- get/setTime() 返回/设置时间,单位毫秒数,计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数。
- 注意:
- 字符串对象String:
- Math对象:
- Math 对象是一个固有的对象,无需创建它,直接把 Math 作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别;
- 数组对象:
- 浏览器对象:
- window对象
- JavaScript计时器:分一次性计时器和间隔性触发计时器;
- History对象: 记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能。
- 注意:从窗口被打开的那一刻开始记录,每个浏览器窗口、每个标签页乃至每个框架,都有自己的history对象与特定的window对象关联。
- Location对象: 用于获取或设置窗体的URL,并且可以用于解析URL。
- 属性图示:
- 属性图示:
- Navigator对象:
- 包含有关浏览器的信息,通常用于检测浏览器与操作系统的版本。
- 判断浏览器版本代码:使用userAgent判断使用的是什么浏览器(假设使用的是IE8浏览器)代码如下:
function validB(){
var u_agent = navigator.userAgent;
var B_name="Failed to identify the browser";
if(u_agent.indexOf("Firefox")>-1){
B_name="Firefox";
}else if(u_agent.indexOf("Chrome")>-1){
B_name="Chrome";
}else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){
B_name="IE(8-10)";
}
document.write("B_name:"+B_name+"<br>");
document.write("u_agent:"+u_agent+"<br>");
}
- screen对象:用于获取用户的屏幕信息;
- 语法:window.screen.属性
- window.screen 对象在编写时可以不使用 window 这个前缀。
- DOM对象:
- DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。
- DOM操作可以直接创建、删除、操控节点,就像操作树一样
- 因为文档中的 name 属性可能不唯一,所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。
- 节点属性:在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 :
- nodeName : 节点的名称,是只读的。
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 是属性的名称
- 文本节点的 nodeName 永远是 #text
- 文档节点的 nodeName 永远是 #document
- nodeValue :节点的值
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本自身
- 属性节点的 nodeValue 是属性的值
- nodeType :节点的类型是只读的。以下常用的几种结点类型:
元素类型 节点类型 元素1属性2文本3注释8文档9 - 访问子节点:
- 语法:elementNode.childNodes
- 注意:
- IE全系列、firefox、chrome、opera、safari兼容问题
- 节点之间的空白符,在firefox、chrome、opera、safari浏览器是文本节点
- 访问父亲节点:
- 语法:elementNode.parentNode
- 注意: 浏览器兼容问题,chrome、firefox等浏览器标签之间的空白也算是一个文本节点。
- 访问兄弟节点:nodeObject.nextSibling和nodeObject.previousSibling
- 注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而其它浏览器不会忽略。
- 添加、删除、替换子节点:appendChild、insertBefore、removeChild、replaceChild;
- 注:removeChild如果要完全删除节点需要把返回值赋为NULL;否则被删除的节点虽然不在DOM树种,但还在内存中;
- 创建元素节点:createElement(tagName);
- 注意:要与appendChild() 或 insertBefore()方法联合使用,将元素显示在页面中。因为要将其插入到原来某元素的子节点序列中,故要弄清楚DOM树的结构才行要将文本节点,属性节点等作为元素节点的子节点插入进去才行;
- 浏览器窗口:
- 获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法
- 对于IE9+、Chrome、Firefox、Opera 以及 Safari:window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度
- 对于 Internet Explorer 8、7、6、5:document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。
- Document对象的body属性对应HTML文档的<body>标签 document.body.clientHeight document.body.clientWidth
- 在不同浏览器都实用的 JavaScript 方案:
var w= document.documentElement.clientWidth || document.body.clientWidth; var h= document.documentElement.clientHeight|| document.body.clientHeight;
- scrollHeight和scrollWidth,获取网页内容高度和宽度(不包括滚动条)。
- 获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法
- nodeName : 节点的名称,是只读的。
- 日期对象Date
0 0
- JavaScript学习笔记-进阶篇
- [学习笔记]JavaScript进阶
- [学习笔记]JavaScript进阶
- JavaScript学习笔记---进阶
- JavaScript进阶学习笔记
- [置顶]学习笔记:JavaScript-进阶篇
- JavaScript进阶篇笔记(一)
- 20150727 Javascript进阶学习笔记(上)
- 20150728 JavaScript进阶学习笔记(下)
- JavaScript面向对象学习笔记基础与进阶
- JavaScript 进阶学习 1
- JavaScript进阶学习
- NUnit学习笔记之进阶篇
- NUnit学习笔记之进阶篇
- NUnit学习笔记之进阶篇
- NUnit学习笔记之进阶篇
- NUnit学习笔记之进阶篇
- XML学习笔记(三)进阶篇
- 简易日历
- Cloudera CM5.3.1&CDH-5.3.0集群安装
- 三大顺序容器的简单使用与异同
- 安装spark
- emlog 搭建 config.php不可写
- JavaScript学习笔记-进阶篇
- 一个有趣的题目
- Android之手机震动效果实现
- 2015-1-31工作日志-王亮晶
- 动态规划-01背包(1)
- NYOJ 820 又见01背包 (价值和重量互换)
- UVALive 4723 水模拟
- 图形学各种算法代码
- hdu 2309 ICPC Score Totalizer Software