js学习--DOM操作详解大全一(浏览器对象)

一.客户端中的window对象

window对象表示当前浏览器的窗口,它是一个顶级对象,我们创建的所有对象、函数、变量都是window对象的成员。
window对象自带了一些非常有用的方法、属性。
window的子对象:
document:可操作显示在窗口的文档内容。
location:可让窗口载入新的URL。
navigator:包含当前浏览器的信息。
history:包含当前浏览器的历史。
window的方法:
open():打开一个新的窗体。
close():关闭窗体。
window对话框函数:
alert():弹出消息对话框(对话框中只有一个OK按钮)。
confirm():弹出消息对话框(对话框中包含一个OK按钮与Cancel按钮)。
prompt():弹出消息对话框(对话框中包含一个OK按钮、Cancel按钮与一个文本输入框)。

二.web文档里使用Javascript

Javascript程序可以操作文档对象(window.document,通常window可以省略),遍历和管理文档内容,改变CSS的样式,注册适当的事件来改变文档元素的行为。
Javascript可增强用户浏览web文档的体验。
Javascript可操作XMLHttpRequest对象,实现从服务器获取新信息,而不重新载入页面。通常叫Ajax应用
三.html中嵌入script代码简单示例
<pre>
<html>
<head>
<style>
#clock{
font:bold 26pt;
}
</style>
</head>
<body onload="showTime();">
<span>显示当前时间:</span>
<span id="clock"></span>
</body>
<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>
</html>
</pre>
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()可以把计算任务分成若干个小任务来执行,提高页面的响应能力。
<pre>
<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>
<span>有大量的计算,页面立即显示出来,大量的计算在后台运行。<span></h1>
</body>
</html>
</pre>

六.兼容性

测试网站来测试浏览器的兼容性:http://www.quirksmode.org/dom/core/
javascript编程中很多是不兼容性都是针对的IE的。
可以用IE支持的条件注释来处理对IE的不兼容。
条件注释可以应用到js,css,内容
<pre>
<html>
<head>

</head>
<body>


这不是IE要显示的内容

</body>
</html>
</pre>

七.javascript框架

1、jQuery是当前最流行的框架之一。
http://jquery.com/
2、Prototype与jQuery类似,是专门针对DOM和Ajax实现的实用工具。
http://prototypejs.org/
3、Dojo是一个大型的框架,它包含一个UI组件集合、包管理系统、数据抽象层等。
http://dojotoolkit.org/
4、YUI是Yahoo!使用的一个框架,包括了DOM工具、UI组件等。

http://yuilibrary.com/

5、Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。
https://cn.vuejs.org/

6.react是一套用于构建用户界面的JAVASCRIPT库。构建封装的组件来管理自己的状态,然后组合它们以创建复杂的UI。
https://facebook.github.io/react/

7.React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP。
React Native着力于提高多平台开发的开发效率 —— 仅需学习一次,编写任何平台。(Learn once, write anywhere)
http://reactnative.cn/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,468评论 25 707
  • 客户端中的window对象 window对象表示当前浏览器的窗口,它是一个顶级对象,我们创建的所有对象、函数、变量...
    xiaoaiai阅读 298评论 0 0
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,019评论 4 62
  • 感情,已经过去的,还能重来吗?兜兜转转,是否已把深爱的人淡忘? 还是已把旧爱深深地刻入脑海?融入骨髓?! 怎样才是...
    雨灵200601阅读 127评论 0 2