javascript高级一

Dom（简单介绍）

功能：能够控制html文档的内容
获取页面标签（元素）对象：Element
document.getElementById(“id值”):通过元素的id获取元素对象
操作Element对象：
1，修改属性值：首先明确获取的对象是哪一个然后查看API文档，找其中有哪些属性可以设置
2，修改标签体内容：
属性：innerHTML
先获取元素对象然后使用innerHTML属性修改标签体内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><img id="light" src="img/off.gif"><h1 id="title">悔创阿里杰克马</h1><script>/*//通过id获取元素对象var light = document.getElementById("light");alert("我要换图片了");light.src = "img/on.gif";*///1.获取h1标签对象var title = document.getElementById("title");alert("我要换内容了");//2.修改内容title.innerHTML = "不识妻美刘强东";</script>
</body>
</html>

事件简单学习：
功能：某些组件被执行了某些操作后，触发某些代码的执行。
造句： xxx被xxx,我就xxx
我方水晶被摧毁后，我就责备对友。
敌方水晶被摧毁后，我就夸奖自己
如何绑定事件：
1，直接在html标签上，指定时间的属性，属性值就是js代码事件：onclick— 单击事件
2，通过js获取元素对象，指定事件属性，设置一个函数。（耦合度低，利用维护和分工协作）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件绑定</title>
</head>
<body>
<img id="light" src="img/off.gif"  onclick="fun();"><img id="light2" src="img/off.gif"><script>function fun(){alert('我被点了');alert('我又被点了');}function fun2(){alert('咋老点我？');}//1.获取light2对象var light2 = document.getElementById("light2");//2.绑定事件light2.onclick = fun2;
</script>
</body>
</html>

点击第一个灯泡，显示：

点击第二个灯泡，显示：

案例：
电灯开关打开和关闭
分析：
获取图片对象
绑定单击事件
每次点击就切换图片规则：如果灯是开的，切换图片为off，灯是关的就切换为on
每次点击切换前使用标记flag完成

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>电灯开关</title></head>
<body><img id="light" src="img/off.gif"><script>//1.获取图片对象var light = document.getElementById("light");var flag = false;//代表灯是灭的。 off图片//2.绑定单击事件light.onclick = function(){if(flag){//判断如果灯是开的，则灭掉light.src = "img/off.gif";flag = false;}else{//如果灯是灭的，则打开light.src = "img/on.gif";flag = true;}}
</script>
</body>
</html>

点击后：

再点击就回到了原来状态

Bom

浏览器对象模型（Browser Object Model）
将浏览器的各个组成部分封装成对象
组成：
Window：窗口对象
Navigator：浏览器对象
Screen：显示器屏幕对象
History：历史记录对象
Location：地址栏对象
window对象：
window对象不需要创建可以直接使用，window使用。window.方法名()；
window引用可以省略。方法名();

与弹出框有关的方法：
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
如果用户点击确定按钮，则方法返回true
如果用户点击取消按钮，则方法返回false

 var flag = confirm("您确定要退出吗？");if(flag){//退出操作alert("欢迎再次光临！");}else{//提示：手别抖alert("手别抖");}

点击确定:

点击取消：

prompt() 显示可提示用户输入的对话框。
返回值：获取用户输入的值

//输入框var result =  prompt("请输入用户名");alert(result);

2. 与打开关闭有关的方法：
close() 关闭浏览器窗口。
谁调用我，我关谁
open() 打开一个新的浏览器窗口
返回新的Window对象

 <input id="openBtn" type="button" value="打开窗口"><input id="closeBtn" type="button" value="关闭窗口">
<script>var openBtn = document.getElementById("openBtn");var newWindow;openBtn.onclick = function(){//打开新窗口newWindow = open("https://www.baidu.com");}//关闭新窗口var closeBtn = document.getElementById("closeBtn");closeBtn.onclick = function(){// 关闭新窗口newWindow.close();}
</script>

点击打开窗口：

然后点击关闭窗口，百度窗口关闭
3. 与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
参数：
1. js代码或者方法对象
2. 毫秒值
返回值：唯一标识，用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。

  //一次性定时器//setTimeout("fun();",2000);//var id = setTimeout(fun,2000);//clearTimeout(id); function fun(){alert('boom~~');}      //循环定时器var id = setInterval(fun,2000);clearInterval(id);

案例：
轮播图分析：
在页面上使用img标签展示图片
定义一个方法修改图片对象的链接
定义一个定时器，每隔三秒调用方法一次

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>轮播图</title>
</head>
<body><img id="img" src="img/banner_1.jpg" width="100%"><script>//修改图片src属性var number = 1;function fun(){number ++ ;//判断number是否大于3if(number > 3){number = 1;}//获取img对象var img = document.getElementById("img");img.src = "img/banner_"+number+".jpg";}//2.定义定时器setInterval(fun,3000);</script>
</body>
</html>

每隔3s自动更换图片，以下三张来回自动切换

3. 属性：
1. 获取其他BOM对象：
history
location
Navigator
Screen

   //获取historyvar h1 =  window.history;var h2 = history;alert(h1);alert(h2);

获取DOM对象
document

  var openBtn = window.document.getElementById("openBtn");alert(openBtn);document.getElementById("");

特点
Window对象不需要创建可以直接使用 window使用。 window.方法名();
window引用可以省略。方法名();
4. Location：地址栏对象
1. 创建(获取)：
1. window.location
2. location
2. 方法：
reload() 重新加载当前文档。刷新
3. 属性
href 设置或返回完整的 URL。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Location对象</title>
</head>
<body><input type="button" id="btn" value="刷新"><input type="button" id="goBaidu" value="去传智"><script>//reload方法，定义一个按钮，点击按钮，刷新当前页面//1.获取按钮var btn = document.getElementById("btn");//2.绑定单击事件btn.onclick = function(){//3.刷新页面location.reload();}//获取hrefvar href = location.href ;//alert(href);//点击按钮，去访问www.baidu.cn官网//1.获取按钮var goItcast = document.getElementById("goBaidu");//2.绑定单击事件goItcast.onclick = function(){//3.去访问www.baidu.cn官网location.href = "https://www.baidu.com";}</script>
</body>
</html>

点击去百度，切换到百度
点击刷新就会刷新文档
案例：
自动跳转首页：
显示页面效果

倒计时读秒效果实现：
定义一个方法，获取span标签，修改span标签体内容，时间
定义一个定时器，每秒执行一次该方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>自动跳转</title><style>p{text-align: center;}span{color:red;}</style>
</head>
<body><p><span id="time">5</span>秒之后，自动跳转到首页...</p><script>var second = 5;var time = document.getElementById("time");//定义一个方法，获取span标签，修改span标签体内容，时间--function showTime(){second -- ;//判断时间如果<= 0 ，则跳转到首页if(second <= 0){//跳转到首页location.href = "https://www.baidu.com";}time.innerHTML = second +"";}//设置定时器，1秒执行一次该方法setInterval(showTime,1000);</script>
</body>
</html>

5，History：历史记录对象
1. 创建(获取)：
1. window.history
2. history
2. 方法：
back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go(参数) 加载 history 列表中的某个具体页面。
参数：
正数：前进几个历史记录
负数：后退几个历史记录
3. 属性：
length 返回当前窗口历史列表中的 URL 数量。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>History对象</title>
</head>
<body><input type="button" id="btn" value="获取历史记录个数"><a href="09_History对象2.html">09页面</a><input type="button" id="forward" value="前进">
<script>//1.获取按钮var btn = document.getElementById("btn");//2.绑定单机事件btn.onclick = function(){//3.获取当前窗口历史记录个数var length = history.length;alert(length);}//1.获取按钮var forward = document.getElementById("forward");//2.绑定单机事件forward.onclick = function(){//前进// history.forward();history.go(1);}
</script>
</body>
</html>

javascript高级一相关推荐

《JavaScript高级程序设计（第3版）》教程大纲
词条 <JavaScript高级程序设计>是2006年人民邮电出版社出版的图书,作者是(美)(Nicholas C.Zakas)扎卡斯.本书适合有一定编程经验的开发人员阅读,也可作为高校相 ...
前端红宝书《JavaScript高级程序设计》核心知识总结
此文是对<JavaScript 高级程序设计>一书难点的总结,也是笔者在看了 3 遍之后的一些梳理和感想,希望能借此巩固js的基础和对一些核心概念有更深入的了解. 摘要 JS基本的数据类型 ...
《JavaScript高级程序设计》（第2版）上市
本书是技术畅销书<JavaScript高级程序设计> 的第2版,几乎全部更新.重写了上一版的内容,融入了作者近几年来奋战在前端开发一线的宝贵经验 , 是学习和提高JavaScript ...
攻下《JavaScript高级程序设计》——第二章在HTML中使用JavaScript
从上一章我们知道了,JavaScript是一种专门为网页交互而设计的脚本语言,那么,它就免不了和HTML打交道,所以在设计JavaScript的时候,Netscape首要面临的就是,怎么让HTML和J ...
《javascript高级程序设计》笔记：内存与执行环境
上一篇:<javascript高级程序设计>笔记:继承近几篇博客都会围绕着图中的知识点展开由于javascript是一门具有自动垃圾收集机制的编程语言,开发者不必担心内存的分配和回收的 ...
《javascript高级程序设计》笔记：变量对象与预解析
上一篇:<javascript高级程序设计>笔记:内存与执行环境上篇文章中说到: (1)当执行流进入函数时,对应的执行环境就会生成 (2)执行环境创建时会生成变量对象,确定作用域链,确定 ...
javascript 高级程序设计_JavaScript 经典「红宝书」，几代前端人的入门选择
人的一生中总要读几本经典书,在这个"经典"泛滥的年代,什么才是权威的代表,我想大概是一本的书的口碑,能积累下上佳口碑的书,往往也是能经得住时间推敲的.比如这本: 相信许多前端开发者 ...
《Javascript高级程序设计》读书笔记之对象创建
<javascript高级程序设计>读过有两遍了,有些重要内容总是会忘记,写一下读书笔记备忘创建对象工厂模式工厂模式优点:有了封装的概念,解决了创建多个相似对象的问题缺点:没有解决 ...
【读书笔记】JavaScript高级编程（二）
2019独角兽企业重金招聘Python工程师标准>>> 书中第3章基本概念摘要(一) 3.3 变量使用var操作符定义的变量将成为定义该变量的作用域中的局部变量.也就是说,如果在 ...
JavaScript高级程序设计（第3版）非扫描版
前端学习js的红皮书文档:JavaScript高级程序设计(第3版)非扫?.. 文档:JavaScript高级程序设计(第3版)非扫?.. 链接:http://note.youdao.com/not ...

javascript高级一

Dom（简单介绍）

Bom

javascript高级一相关推荐

最新文章

热门文章