CSS3 opacity 属性
设置一个div元素的透明度级别:
div
{
opacity:0.5;
}
HTML DOM Document 对象
HTML DOM 节点
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:
文档是一个文档节点。
所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
文本插入到 HTML 元素是文本节点。are text nodes。
注释是注释节点。
Document 对象
当浏览器载入 HTML 文档, 它就会成为 Document 对象。
Document 对象是 HTML 文档的根节点。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。
Document 对象属性和方法
HTML文档中可以使用以下属性和方法:
属性/方法 | 描述 |
---|---|
document.activeElement | 返回当前获取焦点元素 |
document.addEventListener() | 向文档添加句柄 |
document.adoptNode(node) | 从另外一个文档返回 adapded 节点到当前文档。 |
document.anchors | 返回对文档中所有 Anchor 对象的引用。 |
document.applets | 返回对文档中所有 Applet 对象的引用。HTML5已经不支持 |
document.baseURI | 返回文档的绝对基础 URI |
document.body | 返回文档的body元素 |
document.close() | 关闭用 document.open() 方法打开的输出流,并显示选定的数据。 |
document.cookie | 设置或返回与当前文档有关的所有 cookie。 |
document.createAttribute() | 创建一个属性节点 |
document.createComment() | createComment() 方法可创建注释节点。 |
document.createDocumentFragment() | 创建空的 DocumentFragment 对象,并返回此对象。 |
document.createElement() | 创建元素节点。 |
document.createTextNode() | 创建文本节点。 |
document.doctype | 返回与文档相关的文档类型声明 (DTD)。 |
document.documentElement | 返回文档的根节点 |
document.documentMode | 返回用于通过浏览器渲染文档的模式 |
document.documentURI | 设置或返回文档的位置 |
document.domain | 返回当前文档的域名。 |
document.domConfig 已废弃。 | 返回 normalizeDocument() 被调用时所使用的配置。 |
document.embeds | 返回文档中所有嵌入的内容(embed)集合 |
document.forms | 返回对文档中所有 Form 对象引用。 |
document.getElementsByClassName() | 返回文档中所有指定类名的元素集合,作为 NodeList 对象。 |
document.getElementById() | 返回对拥有指定 id 的第一个对象的引用。 |
document.getElementsByName() | 返回带有指定名称的对象集合。 |
document.getElementsByTagName() | 返回带有指定标签名的对象集合。 |
document.images | 返回对文档中所有 Image 对象引用。 |
document.implementation | 返回处理该文档的 DOMImplementation 对象。 |
document.importNode() | 把一个节点从另一个文档复制到该文档以便应用。 |
document.inputEncoding | 返回用于文档的编码方式(在解析时)。 |
document.lastModified | 返回文档被最后修改的日期和时间。 |
document.links | 返回对文档中所有 Area 和 Link 对象引用。 |
document.normalize() | 删除空文本节点,并连接相邻节点 |
document.normalizeDocument() | 删除空文本节点,并连接相邻节点的 |
document.open() | 打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。 |
document.querySelector() | 返回文档中匹配指定的CSS选择器的第一元素 |
document.querySelectorAll() | document.querySelectorAll() 是 HTML5中引入的新方法,返回文档中匹配的CSS选择器的所有元素节点列表 |
document.readyState | 返回文档状态 (载入中……) |
document.referrer | 返回载入当前文档的文档的 URL。 |
document.removeEventListener() | 移除文档中的事件句柄(由 addEventListener() 方法添加) |
document.renameNode() | 重命名元素或者属性节点。 |
document.scripts | 返回页面中所有脚本的集合。 |
document.strictErrorChecking | 设置或返回是否强制进行错误检查。 |
document.title | 返回当前文档的标题。 |
document.URL | 返回文档完整的URL |
document.write() | 向文档写 HTML 表达式 或 JavaScript 代码。 |
document.writeln() | 等同于 write() 方法,不同的是在每个表达式之后写一个换行符。 |
警告 !!!
在 W3C DOM核心,文档对象 继承节点对象的所有属性和方法。
很多属性和方法在文档中是没有意义的。
HTML 文档对象可以避免使用这些节点对象和属性:
属性 / 方法 | 避免的原因 |
---|---|
document.attributes | 文档没有该属性 |
document.hasAttributes() | 文档没有该属性 |
document.nextSibling | 文档没有下一节点 |
document.nodeName | 这个通常是 #document |
document.nodeType | 这个通常是 9(DOCUMENT_NODE) |
document.nodeValue | 文档没有一个节点值 |
document.ownerDocument | 文档没有主文档 |
document.ownerElement | 文档没有自己的节点 |
document.parentNode | 文档没有父节点 |
document.previousSibling | 文档没有兄弟节点 |
document.textContent | 文档没有文本节点 |
onmouseover 事件
onmouseover 事件会在鼠标指针移动到指定的元素上时发生。
Window clearInterval() 方法
定义和用法
clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
注意: 要使用 clearInterval() 方法, 在创建执行定时操作时要使用全局变量:
myVar = setInterval("javascript 函数", milliseconds);
每 300 毫秒切换背景颜色,直到通过 clearInterval() 来停止:
var myVar = setInterval(function(){ setColor() }, 300);
function setColor() {
var x = document.body;
x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
function stopColor() {
clearInterval(myVar);
}
Window setTimeout() 方法
定义和用法
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
提示: 1000 毫秒= 1 秒。
提示: 如果你只想重复执行可以使用 setInterval() 方法。
提示: 使用 clearTimeout() 方法来阻止函数的执行。
语法
setTimeout(code, milliseconds, param1, param2, ...)
setTimeout(function, milliseconds, param1, param2, ...)
参数 | 描述 |
---|---|
code/function | 必需。要调用一个代码串,也可以是一个函数。 |
milliseconds | 可选。执行或调用 code/function 需要等待的时间,以毫秒计。默认为 0。 |
param1, param2, … | 可选。 传给执行函数的其他参数(IE9 及其更早版本不支持该参数)。 |
3 秒(3000 毫秒)后弹出 “Hello” :
var myVar;
function myFunction() {
myVar = setTimeout(alertFunc, 3000);
}
function alertFunc() {
alert("Hello!");
}
jQuery bind() 方法
定义和用法
bind() 方法向被选元素添加一个或多个事件处理程序,以及当事件发生时运行的函数。
语法
$(selector).bind(event,data,function,map)
参数 | 描述 |
---|---|
event | 必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。 |
data | 可选。规定传递到函数的额外数据。 |
function | 必需。规定当事件发生时运行的函数。 |
map | 规定事件映射 ({event:function, event:function, …}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。 |
HTML DOM className 属性
定义和用法
className 属性设置或返回元素的 class 属性。
JavaScript indexOf() 方法
定义和用法
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
如果没有找到匹配的字符串则返回 -1。
注意: indexOf() 方法区分大小写。
提示: 同样你可以查看类似方法 lastIndexOf() 。
语法
string.indexOf(searchvalue,start)
参数值
参数 | 描述 |
---|---|
searchvalue | 必需。规定需检索的字符串值。 |
start | 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 string Object.length - 1。如省略该参数,则将从字符串的首字符开始检索。 |
返回值
Number 查找指定字符串第一次出现的位置,如果没找到匹配的字符串则返回 -1。
实例:
在字符串查找字符 “e” 第一次出现的位置:
var str="Hello world, welcome to the universe.";
var n=str.indexOf("e");
输出结果为1