Javascript学习笔记（入门篇）

来源：互联网发布：淘宝靠谱的宠物用品店编辑：程序博客网时间：2024/05/24 06:21

JavaScript常用方法：

1、prompt(str1 ,str2)

参数：str1是固定文字 str2是可编辑文字

返回值：点击确定返回true ; 点击取消，返回false;

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

参数说明：

URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。

窗口名称：可选 _blank打开新窗口 _self:当前窗口显示目标网页 _top:框架上部显示

3、关闭窗口（window.close()或<窗口对象>.close()）

代码示例：

var mywin=window.open('https://www.baidu.com');

mywin.close();

</script>

4、split() splice() sort()

5、主要事件表

6、Date日期对象

定义：var Udate=new Date() 注意：使用关键字new，Date（）首字母必须大写；

如果自定义初始化，例子：var d=new Date(2016,10,1);

访问方法语句：“<日期对象>.<方法>”

7、string

1)toLowerCase();

2) stringObject.charAt(index) charAt()方法可以返回指定位置的字符。返回的是长度为1的字符串

3) stringObject.indextOf(substring, startpos)

4)split()

5)substring()

6)substr(startPos,length)

8、Math对象属性

Math对象方法

9、Array

var myAarr=new Array();

数组方法

JavaScript常用方法：
1、prompt(str1 , str2)
参数：str1是固定文字 str2是可编辑文字
返回值：点击确定返回true ; 点击取消，返回false;
2、window.open([URL],
[窗口名称], [参数字符串])
参数说明：

URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不

10、window 对象

window 对象方法

11、JavaScript计时器

计时器类型：

一次性计时器

间隔性触发计时器

计时器方法：

12、History对象

history 对象记录了用户曾经浏览过的页面（URL），并可以实现浏览器与前进后退相似的导航功能

语法：window.history.[属性][方法]

window可以省略

history对象

history对信息方法

13、Location对象

location用于获取或设置窗体的ＵＲＬ，并且可以用于解析URL

语法：location.[属性][方法]

location对象属性

location对象方法

14、Navigator对象

Navigator对象包含有关浏览器的信息，通常用于检验浏览器与操作系统的版本

对象属性

<script type="text/javascript">   var browser=navigator.appName;   var b_version=navigator.appVersion;   document.write("Browser name"+browser);   document.write("<br>");   document.write("Browser version"+b_version);</script>

userAgent

返回用户代理头的字符串表示（就是包括浏览器版本信息等的字符串）

语法：navigator.userAgent

15、screen对象

用于获取用户的屏幕信息

语法：window.screen.属性

对象属性

16.字符串分割split

知识解析：split将字符串分割为字符串数组，并返回此数组

语法： stringObject.split(separator,limt)

17.提取字符串substring

知识解析：substring用于提取字符串中的字符

语法：stringobject.substrng(startPos,stopPos)

18.Date日期对象

日期对象可以存储任意一个时间对象，可以精确到毫秒数

定义一个时间对象： var Udate=new Date();

如果要自定义一个时间对象，并初始化： var a=new Date(2016,12,12) ; var b=new Date('Oct,1,2016');

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

19.DOM文本对象模型

文本对象模型是定义访问处理HTML的标准模式，DOM将HTML展示为带有元素，属性和文本的树结构

将HTML分解成DOM节点层次图

HTML文本可以说由节点组成，DOM节点有

1.元素节点

2.属性节点

3.文本节点

节点属性：

遍历节点树

DOM操作

注：前两个都是document方法。

20.

document.getElementByName(name)

document.getElementById(id)

document.getElementByTagName(Tagname) :

说明：Tagname是标签的名称，如p、a、img等标签名

<body>    <p id="intro">my class</p>    <ul>         <li>JavaScript</li>        <li>JQuery</li>    </ul><script>   var list=document.getElementsByTagName('li');li=list[0];document.write(list.length);document.write(li.innerHTML);</script></body>

区别：

1.ID是唯一的

2.Name可以重复，所以getElementById获取的是具有相同Name的集合

3.TagName可看似某类的集合。

注意：区分大小写

21.

getAttribute()方法

通过元素节点的属性名称获取属性的值

语法：elementNode.getAttribute(name)

运行结果：h1标签的ID：alink h1标签的title：getAttribute()获取标签的属值

setAttribute()方法

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

语法：elementNode.setAttribute(name,value)

22.节点属性

在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

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>节点属性</title></head><body>  <ul>     <li>javascript</li>     <li>HTML/CSS</li>     <li>jQuery</li>       </ul>  <script type="text/javascript">    var node=document.getElementByTagName("li");    for(var i=0;i<node.length;i++)    {       document.write("li["+(i+1)+"]:"+"<br/>"+node[i].nodeName+"<br/>");        document.write("li["+(i+1)+"]"+"<br/>"+node[i].nodeVal    }        </script></body></html>

22.访问子节点childNodes

访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，具有length属性

语法：elementNode.childNodes

注意：如果选定的元素节点不包含子节点，那么返回的值为NodeList.

parentNode获取指点节点的父节点DIV

23.访问子节点的第一项，最后一项，父节点,兄弟节点

1.firstChld 属性返回childNodes数组的第一个节点。如果选定的节点没有子节点，返回值为null

说明：firstChild跟elemnetNode.childNode[0]的效果相同

2).lastChild 返回最后一个节点

3).访问父节点parentNode

访问粗节点：elementNode.parentNode.parentNode

<div id="text">    <p>    parentNode          <span id="con"> 获取指点节点的父节点</span>  </p></div> <script type="text/javascript">  var mynode= document.getElementById("con");  document.write(mynode.parentNode.parentNode.nodeName);</script>

运行结果

parentNode获取指点节点的父节点DIV

4).访问兄弟节点：

a). nextSibling属性可以返回某个节点之后紧跟的节点（处于同一tree下）

语法：nodeObject.nexSibling

说明：如果无此节点，则返回null

b).previousSibling属性可以返回某个节点之前紧跟的节点

语法：nodeObject.previousSibling

说明：如果无此节点则返回null.

运行结果：

LI=javascriptnextsibling:LI=jquery

5)插入节点appendChild()

6)插入节点insertBefore()

insertBefore()方法可在已有的子节点前插入一个子节点

语法：inserBefore(newnode,node);

参数：newnode:要插入的新节点。 node:指定此节点前插入节点

7)removeChild()

removeChild()方法从子节点中删除某个节点。如果删除成功，返回被删除的节点，false则返回null。

语法：nodeObject.reoveChild(node);

如果要完全删除对戏，给x赋值null。

8)replaceChld()实现子节点（对象）的替换，返回被替用对象的引用

语法：node.replaceChild(newnode,oldnode)

9)创建节点元素creatElement

此方法可创建节点，返回一个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>

我们也可以使用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>

10) 创建文本节点：createTextNode

CreateTextNode()方法创建新的文本节点，返回新的文本节点

语法：document.createTextNode(data);

24:浏览窗口可视区域大小

a)对于IE９＋、chrome,firefox、Opera、以及Safari；

window.innerHeight:浏览窗口的内部高度

window.innerWidth :浏览窗口的内部宽度

b)对于IE5678

document.documentElement.clientHeight

document.doumentElement.innerWidth;

25 网页尺寸 scrollHeight

scrollHeight和scroWidth是网页内容的高度和宽度