- JavaScript常用方法:
1、prompt(str1 ,str2)
参数:str1是固定文字 str2是可编辑文字
返回值:点击确定 返回true ; 点击取消,返回false;
2、window.open([URL], [窗口名称], [参数字符串])
参数说明:
URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。
窗口名称:可选 _blank打开新窗口 _self:当前窗口显示目标网页 _top:框架上部显示
3、关闭窗口(window.close()或<窗口对象>.close())
代码示例:
<script>
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,并且可以用于解析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=javascript
nextsibling: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)对于IE9+、chrome,firefox、Opera、以及Safari;
window.innerHeight:浏览窗口的内部高度
window.innerWidth :浏览窗口的内部宽度
b)对于IE5678
document.documentElement.clientHeight
document.doumentElement.innerWidth;
25 网页尺寸 scrollHeight
scrollHeight和scroWidth是网页内容的高度和宽度
25:offsetHeight
offsetHeight和offsetWidth,获取网页内容高度和宽度(包括滚动条等边线,会随着窗口的显示大小改变)
值:offsetHeight=clientHeight+滚动条+边框
网页卷去的距离和偏移量
scrollLeft::
scrollTop:
offsetLeft:
offsetTop: