js学习--DOM操作详解大全一（浏览器对象）
一.客户端中的window对象
- window对象表示当前浏览器的窗口，它是一个顶级对象，我们创建的所有对象、函数、变量都是window对象的成员。
- window对象自带了一些非常有用的方法、属性。
window的子对象：
- document:可操作显示在窗口的文档内容。
- location:可让窗口载入新的URL。
- navigator：包含当前浏览器的信息。
- history：包含当前浏览器的历史。
window的方法：
- open()：打开一个新的窗体。
- close()：关闭窗体。
- alert():弹出消息对话框（对话框中只有一个ＯＫ按钮）。
- confirm():弹出消息对话框（对话框中包含一个ＯＫ按钮与Cancel按钮）。
- prompt():弹出消息对话框（对话框中包含一个ＯＫ按钮、Cancel按钮与一个文本输入框）。
二.web文档里使用Javascript
- Javascript程序可以操作文档对象(window.document,通常window可以省略)，遍历和管理文档内容，改变CSS的样式，注册适当的事件来改变文档元素的行为。
- Javascript可增强用户浏览web文档的体验。
- Javascript可操作XMLHttpRequest对象，实现从服务器获取新信息，而不重新载入页面。通常叫Ajax应用
三.html中嵌入script代码简单示例
<html>
<head>
<script>
function showTime(){
var ele = document.getElementById('clock');//通过id＝clock获取文档元素
var d = new Date();//取得当前时间
console.log(ele);
ele.innerHTML = d.toLocaleTimeString();//转换为本地时间
setTimeout(showTime,1000);//定时调用
} </script>
<style>
#clock{
font:bold 26pt;
}
</style>
</head>
<body onload="showTime();">
<h1>显示当前时间：</h1>
<span id="clock"></span>
</body>
</html>
javascript代码可以放置在html属性里来定义事件处理程序。如onclick，onchange事件等。
<html>
<head>
<script> </script>
</head>
<body>
<input type="checkbox" name="sex" value="男" onchange="alert(this.checked);"/>男
</body>
</html>
四.javascript执行顺序
1､javascript程序执行有两个阶段。
第一阶段，载入文档内容，并执行<script>元素里的代码，按javascript代码顺序从上往下执行。
第二阶段，此阶段是异步的，而且由事件驱动。事件驱动阶段里发生的第一个事件是onload事件，表示文档已经载入完成
五.javascript的线程模型
1、javascript中没有任何关于线程的定义，也就是javascript是按单线程一样工作，单线程执行是为让编程更加简单。
2､ 当响应用户的某个事件处理过程中，如果过程复杂可能导致浏览器会变的无响应。所以我们在处理时要反馈用户当前浏览器是正在活动，以获得最好的用户体验。
3､如果有些计算而导致明显的延迟，应在文档完全载入后做计算，也可用setTimeout()或setInterval()方法在后台运行子任务。
4.可通过setTimeout()可以把计算任务分成若干个小任务来执行，提高页面的响应能力。
<html>
<head>
<script>
//判断质数
var MAX = 1000000;
function isPrime(n) {
if (n == 0 || n == 1) {
return false;
}
var bound = Math.floor(Math.sqrt(n));
for (var i = 2; i <= bound; i++) {
if (n % i == 0) {
return false;
}
}
return true;
}
var jobs = 10, numberPerJob = Math.ceil(MAX / jobs);
var count = 0; function calculate(start, end) {
for (var i = start; i <= end; i++) {
if (isPrime(i)) {
count++;
}
}
} var start, end, timeout, finished = 0;
function manage() {
if (finished == jobs) {
window.clearTimeout(timeout);
alert("计算完成，质数个数为：" + count);
}
else {
start = finished * numberPerJob + 1,
end = Math.min((finished + 1) * numberPerJob, MAX);
timeout = window.setTimeout(function() {
calculate(start, end);
finished++;
manage();
}, 100);
}
} manage(); </script>
</head>
<body>
<h1>有大量的计算，页面立即显示出来，大量的计算在后台运行。</h1>
</body>
</html>
六.兼容性
测试网站来测试浏览器的兼容性：http://www.quirksmode.org/dom/core/
- javascript编程中很多是不兼容性都是针对的IE的。
- 可以用IE支持的条件注释来处理对ＩＥ的不兼容。
- 条件注释可以应用到js,css,内容
<html>
<head>
<!--[if lt IE 9]>
<script type="text/javascript" src="http://www.itbegin.com/commonscripts/bootstrap/html5shiv.min.js?20150301" ></script>
<![endif]-->
</head>
<body>
<!--[if IE 6]>
这是IE6显示的内容
<![endif]-->
<!--[if !IE ]><-->
这不是IE要显示的内容
<!--><![endif]-->
</body>
</html>
七.javascript框架
1､jQuery是当前最流行的框架之一。
http://jquery.com/
http://prototypejs.org/
http://dojotoolkit.org/
http://yuilibrary.com/
js学习--DOM操作详解大全一（浏览器对象）的更多相关文章
- js学习--DOM操作详解大全 前奏（认识DOM）
一 . 节点属性 DOM 是树型结构,相应的,可以通过一些节点属性来遍历节点树: 方法 说明 nodeName 节点名称,相当于tagName.属性节点返回属性名,文本节点返回#text.nodeNa ...
- js学习--DOM操作详解大全二（window对象）
一.window - 计时器 1､setTimeout()可以用来在指定的时间之后单次调用函数.setTimeount(f,1000);//一秒后调用函数fclearTimeout();取消函数的执行 ...
- jQuery的DOM操作详解
DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...
- JavaScript 的DOM操作详解
内容概要 DOM之查找标签 基本查找 间接查找 节点操作 获取值操作 class操作 样式操作 事件 内置参数this 事件练习 内容详细 DOM操作 DOM(Document Object Mode ...
- javascript dom 操作详解 js加强
js加强操作实现代码. 1 .文档里的每个节点都有属性 nodeName . nodeValue . nodeType nodeName 文本节点的的节点名是 #text , nodeName 是只读 ...
- JavaScript基础：DOM操作详解
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ...
- Jqurey DOM 操作详解
一.获取 1.获取内容----.text() .html() .value() text() - 设置或返回所选元素的文本内容 格式:$(选择器) ...
- mongodb学习04 操作详解(2)
查找文档 筛选查找 db.collection.find(); 返回一个集合中文档的子集,子集的 范围从 0 个文档到整个集合; db.collection.findOne(); 返回筛选的一个文档; ...
- mongodb学习03 操作详解
插入文档 db.test.insert({"name":"jinks"}); 批量插入 db.test.insert([{}, {}, {}]); 一次批量插入 ...
随机推荐
- CSS围住浮动元素的三种方法
浮动元素脱离了文档流,其父元素看不到它了,因而不会包围它.浮动会“扩散”到下一个清除浮动的元素处.这会引起不想要的页面布局效果. 清除浮动的方法有三种: 1.父元素overflow:hidden 2. ...
- JOptionPanel类的解析
JOptionPane类提示框的一些常用的方法 XMLOracleSwing 最近在做swing程序中遇到使用消息提示框的,JOptionPane类其中封装了很多的方法. 很方便的,于是就简单的整理 ...
- C#实现FTP文件夹下载功能【转载】
网上有很多FTP单个文件下载的方法,前段时间需要用到一个FTP文件夹下载的功能,于是找了下网上的相关资料结合MSDN实现了一段FTP文件夹下载的代码. 实现的思路主要是通过遍历获得文件夹下的所有文件, ...
- HTML里面Textarea换行总结
近期碰到一个数据转来转去转到Textrea里面能否真正按行存放的问题,在这里总结一下: 问题描写叙述: 比方get数据到一个TextArea里面,如“AAA BBB”,想把这段文字在TextAre ...
- thinkphp实现模糊匹配（学习贵哥代码）
模板文件: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- C和指针 （pointers on C）——第四章：语句（上）
第四章--语句(上) 总结总结!!! C没有布尔类型,所以在一些逻辑推断时候必须用整型表达式,零值为假,非零值为真. for比while把控制循环的表达式收集起来放在一个地方,以便寻找. do语句比w ...
- android 70 使用ListView把数据显示至屏幕
使用单元测试添加数据: package com.itheima.showdata; import java.sql.ResultSet; import android.content.Context; ...
- Spring远端调用的实现-Spring Http调用的实现
1:Spring Http设计思想 最近在研究公司自己的一套rpc远程调用框架,看到其内部实现的设计思想依赖于spring的远端调用的思想,所以闲来无事,就想学习下,并记录下. 作为spring远端调 ...
- PureMVC(JS版）源码解析（四）：Notifier类
上一篇博客中,我们解析了Observer(观察者)类,这一篇博客我们来讲Notifier(通知着)类.关于Notifier类,源码注释上有这么一段: * @class puremvc.Not ...
- codeforces 505C Mr. Kitayuta, the Treasure Hunter(dp)
题意:有30001个岛,在一条线上,从左到右编号一次为0到30000.某些岛屿上有些宝石.初始的时候有个人在岛屿0,他将跳到岛屿d,他跳跃的距离为d.如果当前他跳跃的距离为L,他下一次跳跃的距离只能为 ...