JavaScript学习笔记(imooc)

1, <script type="text/javascript" src="script.js">hello javascript</script>

2, document.write("hello javascript");

3, function fun1(){return 0;}

4, alert("警报");

5, confirm("确认");

6, prompt("消息对话框","请在这里输入");

7, window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no,status=no,scrollbars=yes');//打开新窗口

window.open([URL], [窗口名称], [参数字符串])

URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
    1.该名称由字母、数字和下划线字符组成。
    2."_top"、"_blank"、"_self"具有特殊意义的名称。
       _blank：在新窗口显示目标网页
       _self：在当前窗口显示目标网页
       _top：框架网页中在上部窗口中显示目标网页
    3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
   4.name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

8, window.close();//关闭本窗口

<窗口对象>.close();   //关闭指定的窗口

9, document.getElementById("id");//通过id获取元素

document.getElementsByName("name");//通过名称获取所有元素集合

document.getElementsByTagName("tagName");//通过标签名称(如:p,a,img)获取所有该标签元素的集合

10, Object.innerHTML = "hell javascript";//获取或替换html文件内容

11, Object.style.property = "";//改变html样式

基本属性表（property）:

注意:该表只是一小部分CSS样式属性，其它样式也可以通过该方法设置和修改。

12, Object.style.display = "none";//隐藏元素

Object.style.display = "block";//显示元素

13, Object.className = "";//控制类名

14,

不允许使用JavaScript关键字和保留字做变量名。

15, var myarr=new Array(8); //定义数组

var myarr=new Array(80,90,10);

var myarr=[80,90,10];

注意：
1.创建的新数组是空数组，没有值，如输出，则显示undefined。
2.虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。

数组方法：

16, var myarr = new myarr(8);

myarr.length;//数组长度

myarr.length=10;

17,

主要事件表:

18, var mydata = new Date();

19, Math

Math 对象属性

Math 对象方法

20, parseInt("10");//字符串转整型

21,

window对象方法:

22,

计时器方法：

23, history

History 对象属性

History 对象方法

24, location //用于获取或设置窗体的URL

location对象属性图示:

location 对象属性：

location 对象方法:

25, navigator //包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本

对象属性:

26, 判断使用的浏览器类型

27, screen //获取用户屏幕信息

对象属性:

28, getAttribute("name");//通过属性名称获取属性的值

setAttribute("name","value");

29, var newnode = document.createElement("p"); //创建元素

30, 节点

HTML文档可以说由节点构成的集合，DOM节点有:

1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。

2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。

节点属性:

遍历节点树:

以上图ul为例，它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。

DOM操作:

注意:前两个是document方法。

31, 浏览器窗口可视区域大小

var w= document.documentElement.clientWidth
      || document.body.clientWidth;
var h= document.documentElement.clientHeight
      || document.body.clientHeight;

32, 网页内容高度和宽度

var w=document.documentElement.scrollWidth
   || document.body.scrollWidth;
var h=document.documentElement.scrollHeight
   || document.body.scrollHeight;

33, 网页尺寸，网页内容的高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)

一、值

offsetHeight = clientHeight + 滚动条 + 边框。

二、浏览器兼容性

var w= document.documentElement.offsetWidth
    || document.body.offsetWidth;
var h= document.documentElement.offsetHeight
    || document.body.offsetHeight;

34, 网页卷去的距离与偏移量

scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离，即左边灰色的内容。

scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离，即上边灰色的内容。

offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。

offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置。

注意:

1. 区分大小写

2. offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。

https://www.imooc.com/learn/36

https://www.imooc.com/learn/10

JavaScript学习笔记(imooc)

相关推荐