js基础知识大总结

来源：互联网发布：如何下载淘宝卖家版编辑：程序博客网时间：2024/06/05 23:27

基础部分：

1.document.write() :输出内容到页面上

2.alert() ：弹出一个消息对话框

3.confim() :弹出一个确认的消息对话框，返回值为false(点击确定)或者true(点击取消)

4.prompt(str1,str2):含有一个确定/取消按钮和一个文本输入框，返回值为文本框内容(点击确定)，或者null(点击取消)

str1:是要显示在消息对话框中的文本，不可修改。str2:是文本框中初始值，可以修改

5.window.open(url,窗口名称，参数字符串): 打开窗口

URL：打开窗口的网址或路径。

窗口名称：被打开窗口的名称。              可以是"_top"、"_blank"、"_selft"等。参数字符串：设置窗口参数，各参数用逗号隔开。

例如：window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')

6.window.close（）或者 《窗口对象》.close()：关闭窗口     例如:var mywin = window.open(url,窗口名称，参数)  mywin.close();

7.HTML文档可以说由节点构成的集合，三种常见的DOM节点:

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

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

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

8.document.getElementById("id名称") ：通过id获取对象，获取的元素是一个对象，如果想对元素进行操作，我们要通过他的属性或者方法

9.innerHTML:用于获取或者替换html元素的内容，采用对象调用的方法例如: object（一个ID对象）.innerHTML = "html内容" 注意大小写的问题，否则出不来的

10.Object.style.property=new style; 用js通过对象改变html的样式，例如：获取某个对象，改变样式 p.style.color = "red"; p.style.font = "20px"

11.display:显示和隐藏标签格式：Object.style.display = value object可以是通过id或者其他获得到的对象

value = "none":隐藏  value = "display":显示

12.className 属性设置或返回元素的class 属性。可以用来改变className的类名达到效果，比如类名为hide和active达到显示和隐藏。

语法:object.className = classname

13.二维数组：myarr[][]

一维数组：myarr[]

二维数组的定义方法(1)：先定义一个一维数组，然后在一维数组里面添加变成二维数组

  var myarr = new Array();// 声明一个一维数组

  for(var i = 0 ;i< 4;i++){

  myarr[i] = new Array();//声明二维数组

  for(var j = 0;j < 3;j++){

     myarr[i][j]=i+j;//给二维数组赋初值

和上面相同的不同写法：动态定义二维数组：1.先定义一维：var arr = new Array();2.定义二维：arr[0] = new Array();arr[1] = new Array();3.给数组赋值：arr[0][0] = "00";arr[0][1] = "01";arr[1][0] = "10";arr[1][1] = "11";

然后可以为二维数组设置新的初始值：myarr[i][j] = "XXX";

二维数组的定义方法(2)：var newArray=new Array(new Array(),new Array())   newArray[0][0]=1..;..

二维数组的定义方法(3)：var arr = [[1],[2],[3],[4],[5]] //初始化一个二维数组

14.onclick = "函数名（）；" onclick事件：鼠标点击事件

15.onmouseover = "函数名（）；" :鼠标经过事件，鼠标移动到一个对象就出发该事件

16.onmouseout = "函数名（）;" :鼠标移开事件，鼠标移开时触发该事件

17.onfocus() :把光标聚焦到该对象上；例如:object.onfocus(); //object可以是通过id等获得到的对象

该对象被聚焦时触发： onfocus = "函数名（）"

18.onblur ：是onfocus的相对事件，光标离开时触发该事件

19.onselect：选中事件，文本框过着文本域中的文字被选中时触发

20.onchange：改变文本框中的内容来触发相关函数事件

21.onload：事件会在页面加载完成后立即触发，同时执行被调用的函数 onload = “函数（）;”

window.unload = "函数();"

22.onunload：当用户退出页面时（页面关闭，页面刷新）触发

23.日期对象:Date var date = new date();

如果要自定义初始值，可以用以下方法：

var d = new Date(2012, 10, 1);  //2012年10月1日var d = new Date('Oct 1, 2012'); //2012年10月1日

Date对象中处理时间和日期的常用方法：

(1)get/setFullYear():返回/设置年份。用四位数表示

注意:不同浏览器， mydate.setFullYear(81)结果不同，年份被设定为 0081或81两种情况。

date.setFullYear(81/0081)；

(2).set/getDay() :设置/返回星期，返回的是0-6的数字，0表示星期天

date.getDay();

(3).get/setTime（）:返回/设置时间。单位是毫秒数，计算从1970.1.1零开始计算

当前时间推迟一个小时:date.setTime(date.getTime+60*60*1000);

24.String对象：字符串对象

var mystr = "i love javascript"; //初始化一个字符串

var length = mystr.length; //返回字符串的长度

var newStr = mystr.toUpperCase();//转换为大写

(1).返回指定位置的字符 charAt();

stringObject.charAt(index); //index: 0------String.length-1;

mystr.charAt(index);

(2).idnexOf() ：indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

stringObject.indexOf(substring:需要检索的字符值，开始检索的位置)

mystr.indexof("o"); mystr.indexOf("o",3);

(3).split() :字符串分割，返回值为一个数组

stringObject.split(分割的地方，分割的次数限制);

· var array = mystr.split(",",3); mystr.split(".");

(4).substring()：提取字符串中介于另个指标之间的字符

stringobject.substring(start,stop);

mystr.substring(7); //在7以后的所有字符

mystr.substring(3,9); // 3-9之间的字符【3，9）

注意：

1. 返回的内容是从 start开始(包含start位置的字符)到 stop-1 处的所有字符，其长度为 stop 减start。

2. 如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。

3. 如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。

(5).substr() : stringobject.substr(start,length); 从字符串中提取从start开始长度为length的字符串

注意：如果参数startPos是负数，从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。

如果startPos为负数且绝对值大于字符串长度，startPos为0。

25.Math对象：

var mypi = Math.PI; //得到值 PI

var myabs = Math.abs(-13); //获取到该值的绝对值

Math 对象方法

（1）.ceil()：向上取整 Math.ceil(2.58) //等于3

（2）.floor()：向下取整 Math.floor(3.2) //等于3

（3）.round()：四舍五入 Math.round（1.2） //等于1

（4）.random():返回介于【0，1）之间的随机数 Math.random()

26.Array数组对象

var myarr = new Array() ; //定义一个数组

var myarr new array(90); //定义长度为90的一个数组

var myarr = [1,2,3,4,5]; //直接初始化数组

数组方法：

（1）.concat()：用于连接两个或者多个数组

myarr.conat(4,5,6,7,8) //在一个数组后面添加元素

myarr.concat(aerr1,arr2,arr3....) //在数组后面连接多个数组

（2）.join() //运用指定分隔符连接数组元素

myarr.join(","); //运用，将数组中的元素连接起来

myarr.join("."); //运用.将数组中的元素连接起来

（3）.reverse() : arrayObject用于颠倒数组中元素的顺序

myarr.reverse();

(4).slice() :从已有的数组中返回选定的元素

arrayObject.slice(start,end);

1.返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

2. 该方法并不会修改数组，而是返回一个子数组。

注意：

1. 可使用负值从数组的尾部选取元素。

2.如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。

3. String.slice() 与 Array.slice() 相似。

(5)sort() :使数组中的元素按照一定的顺序排列

arrayObject.sort(方法函数);

1.如果不指定<方法函数>，则按unicode码顺序排列。

2.如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。

27.javascript计时器

在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。

计时器类型：
一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次。
计时器方法：

（1）.steInterval() : 在执行时，从载入页面之后每隔指定的世纪爱你执行代码

setInterval(代码吗，交互时间)；

(2).clearInterval(id_of_setInterval) : 取消setinterval()设置的交互时间

var time = setInterval("clock()",1000);

clearInterval(time);

(3).setTimeout(): 在载入后延迟指定的时间后，去执行一次表达式，只执行一次

setTimeout(代码，延迟时间)；

  setTimeout("alert('Hello!')", 3000 );</script>

(4).clearTimeout() : 停止计时器

     var time = setTimeout("clock()",1000);

     clearTime(time);

28.history对象          window.history.属性|方法

注意：window可以省略。History 对象属性History 对象方法

(1).back() : 加载history列表中的前一个url

window.history.back();等价于window.history.go(-1);

(2).forward（）:加载history列表中的下一个url

window.history.foreword()；等价于window.histiory.go(1);

(3).go() :根据当前所处的页面，加载history列表中的某个具体的页面

window.history.go(number);

参数：

29.location对象: 用于获取或者设置窗口的url，并且可以解析url

location 对象属性：

location 对象方法:

30.navigator对象: 包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本

对象属性:

（1）.userAgent :返回用户代理头的字符串表示

navigator.userAgent

几种浏览的user_agent.，像360的兼容模式用的是IE、极速模式用的是chrom的内核。

31. screen对象用于获取用户的屏幕信息

window.screen.属性

对象属性:

32.getElementsByName("name")：通过元素的name属性查询元素

var username= document.getElementsByName("username");

注意:

1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。

33.getElementsByTagName("tagName")：返回带有指定的标签名的节点对象的集合，返回的顺序就是她们在文档中的顺序

var li = docuement.getElementsByTagName("li");

说明:

1. Tagname是标签的名称，如p、a、img等标签名。

2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

34.getAttribute("属性名")：通过元素节点的属性名称获取属性的值

elementNode.getAttrttribute(name);

var username = getElementById("username");

username.getAttribute("name"); //获取id为username的对象的属性为name的值

35.setAttribute():增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值

elementNode.setAttribute(name，value)；

36.节点属性

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性：

1. nodeName : 节点的名称

2. nodeValue ：节点的值

3. nodeType ：节点的类型

一、nodeName 属性: 节点的名称，是只读的。

1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document

二、nodeValue 属性：节点的值

1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值

三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:

元素类型节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

37.

访问子节点的第一和最后项

（1）.firstChild node.firstChild :等价于elementNode.childNodes[0]:返回childnodes数组的第一个子节点，如果选定的节点没有子节点，属性返回为null

(2).lastChild node.lastChild：

访问父节点parentNode（）

elementNode.parentNode : mynode.parentNode.nodeName;

访问兄弟节点

nextSibling //nodeobject.nextSibling :返回某个节点之后紧跟的节点

previousSibling //nodeObject.previousSibling：返回某个节点之前紧跟的节点

38.创建元素节点createElement

createElement()方法可创建元素节点。此方法可返回一个 Element 对象。

语法：

document.createElement(tagName)

参数:tagName：字符串值，这个字符串用来指明创建元素的类型。注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。我们来创建一个按钮，代码如下：

<script type="text/javascript">   var body = document.body;    var input = document.createElement("input");     input.type = "button";     input.value = "创建一个按钮";     body.appendChild(input);   </script>

效果：在HTML文档中，创建一个按钮。我们也可以使用setAttribute来设置属性，代码如下：

<script type="text/javascript">     var body= document.body;                var btn = document.createElement("input");     btn.setAttribute("type", "text");     btn.setAttribute("name", "q");     btn.setAttribute("value", "使用setAttribute");     btn.setAttribute("onclick", "javascript:alert('This is a text!');");          body.appendChild(btn);  </script>

效果：在HTML文档中，创建一个文本框，使用setAttribute设置属性值。当点击这个文本框时，会弹出对话框“This is a text!”。

39.创建文本节点createTextNode

    创建新的文本节点。返回心创建的text节诶点

40.appendChild() ：插入节点，在指定的节点的足浴i后一个子节点列表之后添加一个新的子节点

var input = document.createElement("input");

var span = docuemnt.createElement("span")；

input.appendChild(span);

41.insertBefore() :在已有的子节点之前插入一个新的子节点

insertBefore（newnode,node）;

input.insertBefore(span);

42.removeChild() ：删除节点

nodeObject.removeChild(node);

43.replaceChild() :替换元素节点

node.replaceChild(newnode.oldnew);

44.

浏览器窗口可视区域大小

获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:

一、对于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;

45.

网页尺寸scrollHeight

scrollHeight和scrollWidth，获取网页内容高度和宽度(不包括滚动条)。

一、针对IE、Opera:

scrollHeight 是网页内容实际高度，可以小于 clientHeight。

二、针对NS、FF:

scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。

三、浏览器兼容性

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

注意:区分大小写

scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。

46.

网页尺寸offsetHeight

offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。

一、值

offsetHeight = clientHeight + 滚动条 + 边框。

二、浏览器兼容性

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

47.

网页卷去的距离

我们先来看看下面的图：

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

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

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

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

注意:区分大小写

0 0