叶子网络bbs论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
12
返回列表 发新帖
楼主: rain
打印 上一主题 下一主题

JavaScript 基础

[复制链接]

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
11#
 楼主| 发表于 2014-10-18 03:35:01 | 只看该作者
本帖最后由 rain 于 2014-10-18 03:36 编辑

11、DOM Element
Element 对象表示 HTML 元素。Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
HTML DOM 节点
在 HTML DOM (文档对象模型)中,每个部分都是节点:
  • 文档本身是文档节点
  • 所有 HTML 元素是元素节点
  • 所有 HTML 属性是属性节点
  • HTML 元素内的文本是文本节点
  • 注释是注释节点

属性和方法

下面的属性和方法可用于所有 HTML 元素上:

属性 / 方法描述
element.accessKey设置或返回元素的快捷键。
element.appendChild()向元素添加新的子节点,作为最后一个子节点。
element.attributes返回元素属性的 NamedNodeMap。
element.childNodes返回元素子节点的 NodeList。
element.className设置或返回元素的 class 属性。
element.clientHeight返回元素的可见高度。
element.clientWidth返回元素的可见宽度。
element.cloneNode()克隆元素。
element.compareDocumentPosition()比较两个元素的文档位置。
element.contentEditable设置或返回元素的文本方向。
element.dir设置或返回元素的文本方向。
element.firstChild返回元素的首个子。
element.getAttribute()返回元素节点的指定属性值。
element.getAttributeNode()返回指定的属性节点。
element.getElementsByTagName()返回拥有指定标签名的所有子元素的集合。
element.getFeature()返回实现了指定特性的 API 的某个对象。
element.getUserData()返回关联元素上键的对象。
element.hasAttribute()如果元素拥有指定属性,则返回true,否则返回 false。
element.hasAttributes()如果元素拥有属性,则返回 true,否则返回 false。
element.hasChildNodes()如果元素拥有子节点,则返回 true,否则 false。
element.id设置或返回元素的 id。
element.innerHTML设置或返回元素的内容。
element.insertBefore()在指定的已有的子节点之前插入新节点。
element.isContentEditable设置或返回元素的内容。
element.isDefaultNamespace()如果指定的 namespaceURI 是默认的,则返回 true,否则返回 false。
element.isEqualNode()检查两个元素是否相等。
element.isSameNode()检查两个元素是否是相同的节点。
element.isSupported()如果元素支持指定特性,则返回 true。
element.lang设置或返回元素的语言代码。
element.lastChild返回元素的最后一个子元素。
element.namespaceURI返回元素的 namespace URI。
element.nextSibling返回位于相同节点树层级的下一个节点。
element.nodeName返回元素的名称。
element.nodeType返回元素的节点类型。
element.nodeValue设置或返回元素值。
element.normalize()合并元素中相邻的文本节点,并移除空的文本节点。
element.offsetHeight返回元素的高度。
element.offsetWidth返回元素的宽度。
element.offsetLeft返回元素的水平偏移位置。
element.offsetParent返回元素的偏移容器。
element.offsetTop返回元素的垂直偏移位置。
element.ownerDocument返回元素的根元素(文档对象)。
element.parentNode返回元素的父节点。
element.previousSibling返回位于相同节点树层级的前一个元素。
element.removeAttribute()从元素中移除指定属性。
element.removeAttributeNode()移除指定的属性节点,并返回被移除的节点。
element.removeChild()从元素中移除子节点。
element.replaceChild()替换元素中的子节点。
element.scrollHeight返回元素的整体高度。
element.scrollLeft返回元素左边缘与视图之间的距离。
element.scrollTop返回元素上边缘与视图之间的距离。
element.scrollWidth返回元素的整体宽度。
element.setAttribute()把指定属性设置或更改为指定值。
element.setAttributeNode()设置或更改指定属性节点。
element.setIdAttribute()
element.setIdAttributeNode()
element.setUserData()把对象关联到元素上的键。
element.style设置或返回元素的 style 属性。
element.tabIndex设置或返回元素的 tab 键控制次序。
element.tagName返回元素的标签名。
element.textContent设置或返回节点及其后代的文本内容。
element.title设置或返回元素的 title 属性。
element.toString()把元素转换为字符串。
nodelist.item()返回 NodeList 中位于指定下标的节点。
nodelist.length返回 NodeList 中的节点数。

回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
10#
 楼主| 发表于 2014-10-18 03:31:18 | 只看该作者
本帖最后由 rain 于 2014-10-19 23:37 编辑

10、DOM Document

Document 对象集合
集合描述
all[]提供对文档中所有 HTML 元素的访问。
anchors[]返回对文档中所有 Anchor 对象的引用。
applets返回对文档中所有 Applet 对象的引用。
forms[]返回对文档中所有 Form 对象引用
images[]返回对文档中所有 Image 对象引用。
links[]返回对文档中所有 Area 和 Link 对象引用。


Document 对象属性
属性描述
body

提供对 <body> 元素的直接访问。

对于定义了框架集的文档,该属性引用最外层的 <frameset>。

cookie设置或返回与当前文档有关的所有 cookie。
domain返回当前文档的域名。
lastModified返回文档被最后修改的日期和时间。
referrer返回载入当前文档的文档的 URL。
title返回当前文档的标题。
URL返回当前文档的 URL。



Document 对象方法
方法描述
close()关闭用 document.open() 方法打开的输出流,并显示选定的数据。
getElementById()返回对拥有指定 id 的第一个对象的引用。
getElementsByName()返回带有指定名称的对象集合。
getElementsByTagName()返回带有指定标签名的对象集合。
open()打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write()向文档写 HTML 表达式 或 JavaScript 代码。
writeln()等同于 write() 方法,不同的是在每个表达式之后写一个换行符

http://baike.baidu.com/view/1091026.htm?fr=aladdin   完整介绍
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
9#
 楼主| 发表于 2014-10-18 02:39:33 | 只看该作者
9、getElementById()
     方法可返回对拥有指定 ID 的第一个对象的引用。

在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯一的名称,然后就可以用该 ID 查找想要的元素。

通过元素的ID特性来获取元素
例如有入下元素:
<input type="text" id="button1" value="Click Me"/>
那么当调用document.getElementById("button1").Value的时候,返回的就是"Click Me"了
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
8#
 楼主| 发表于 2014-10-18 01:50:27 | 只看该作者
8、计时
setTimeout()
未来的某时执行代码
clearTimeout()
取消setTimeout()

var t=setTimeout("javascript语句",毫秒)

setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用,诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数。

ps:1秒等于1000毫秒
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
7#
 楼主| 发表于 2014-10-18 01:44:16 | 只看该作者
7、消息框

alert("文本")
警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后,用户需要点击确定按钮才能继续进行操作。

confirm("文本")
确认框
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。

prompt("文本","默认值")
提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
6#
 楼主| 发表于 2014-10-18 01:37:12 | 只看该作者
本帖最后由 rain 于 2014-10-18 03:23 编辑

6、window.navigator 对象包含有关访问者浏览器的信息。

Navigator 对象属性
属性描述
appCodeName返回浏览器的代码名。
appMinorVersion返回浏览器的次级版本。
appName返回浏览器的名称。
appVersion返回浏览器的平台和版本信息。
browserLanguage返回当前浏览器的语言。
cookieEnabled返回指明浏览器中是否启用 cookie 的布尔值
cpuClass返回浏览器系统的 CPU 等级。
onLine返回指明系统是否处于脱机模式的布尔值。
platform返回运行浏览器的操作系统平台。
systemLanguage返回 OS 使用的默认语言。
userAgent返回由客户机发送服务器的 user-agent 头部的值。
userLanguage返回 OS 的自然语言设置。
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
5#
 楼主| 发表于 2014-10-18 01:22:18 | 只看该作者
本帖最后由 rain 于 2014-10-18 03:25 编辑

5、window.history 对象包含浏览器的历史。
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
history.go()        加载 history 列表中的某个具体页面。

回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
地板
 楼主| 发表于 2014-10-18 01:18:55 | 只看该作者
本帖最后由 rain 于 2014-10-18 03:27 编辑

4、window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 (80 或 443)
location.protocol 返回所使用的 web 协议(http:// 或 https://)
location.href 属性返回当前页面的 URL。
location.assign() 方法加载新的文档。

Location 对象方法
属性描述
assign()加载新的文档。
reload()重新加载当前文档。
replace()用新的文档替换当前文档。
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
板凳
 楼主| 发表于 2014-10-18 01:15:28 | 只看该作者
3、window.screen   对象包含有关用户屏幕的信息
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
沙发
 楼主| 发表于 2014-10-18 01:10:27 | 只看该作者
本帖最后由 rain 于 2014-10-18 03:16 编辑

2、Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
或者
document.body.clientHeight
document.body.clientWidth

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

Window 对象属性
属性描述
closed返回窗口是否已被关闭。
defaultStatus设置或返回窗口状态栏中的默认文本。
document对 Document 对象的只读引用。请参阅 Document 对象
history对 History 对象的只读引用。请参数 History 对象
innerheight返回窗口的文档显示区的高度。
innerwidth返回窗口的文档显示区的宽度。
length设置或返回窗口中的框架数量。
location用于窗口或框架的 Location 对象。请参阅 Location 对象
name设置或返回窗口的名称。
Navigator对 Navigator 对象的只读引用。请参数 Navigator 对象
opener返回对创建此窗口的窗口的引用。
outerheight返回窗口的外部高度。
outerwidth返回窗口的外部宽度。
pageXOffset设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent返回父窗口。
Screen对 Screen 对象的只读引用。请参数 Screen 对象
self返回对当前窗口的引用。等价于 Window 属性。
status设置窗口状态栏的文本。
top返回最顶层的先辈窗口。
windowwindow 属性等价于 self 属性,它包含了对窗口自身的引用。


Window 对象方法
方法描述
alert()显示带有一段消息和一个确认按钮的警告框。
blur()把键盘焦点从顶层窗口移开。
clearInterval()取消由 setInterval() 设置的 timeout。
clearTimeout()取消由 setTimeout() 方法设置的 timeout。
close()关闭浏览器窗口。
confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()创建一个 pop-up 窗口。
focus()把键盘焦点给予一个窗口。
moveBy()可相对窗口的当前坐标把它移动指定的像素。
moveTo()把窗口的左上角移动到一个指定的坐标。
open()打开一个新的浏览器窗口或查找一个已命名的窗口。
print()打印当前窗口的内容。
prompt()显示可提示用户输入的对话框。
resizeBy()按照指定的像素调整窗口的大小。
resizeTo()把窗口的大小调整到指定的宽度和高度。
scrollBy()按照指定的像素值来滚动内容。
scrollTo()把内容滚动到指定的坐标。
setInterval()按照指定的周期(以毫秒计)来调用函数或计算表达式。
setTimeout()在指定的毫秒数后调用函数或计算表达式。
回复

使用道具 举报

手机版|Archiver|叶子官网|杭州轩翼网络科技有限公司 ( 浙ICP备17027999号

GMT+8, 2024-5-17 15:13 , Processed in 0.311536 second(s), 19 queries .

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表