JavaScrip的DOM操作（13号讲）
1、DOM的基本概念
DOM是文档对象模型，这种模型为树模型，文档是指标签文档；对象是指文档中每个元素；模型是指抽象化的东西
2、Windows对象操作
一、属性和方法
二、Window.open（"第一部分"，"第二部分"，第三部分"，"第四部分"）
三、Window.close():关闭当前窗口；
四、间隔与延迟
间隔执行一段代码（函数）：Window.setInterval("要执行的代码",间隔的毫秒数);
清除间隔执行：Window.clearInterval(间隔的id);循环一次之后用来清除间隔执行的代码；
延迟一段时间执行某一段代码（函数）：window.setTimeout("要执行的代码",延迟的毫秒数);
清除延迟：window.clearTimeout(延迟的id);清除setTimeout；
五、调整页面
六、模态对话框和非模态对话框
3、Windows.history对象
4、Windows.location对象
5、Windows.status对象
6、Windows.document对象 ☆
一、找到元素
二、操作元素
1.非表单元素：
1）获取内容
2）设置内容
2.表单元素
1）获取内容
2）设置内容
3.一个小知识点：
三、操作属性
四、操作样式
例子：展示图片的手动自动切换
源代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片切换</title> <link href="切换样式表.css" rel="stylesheet" type="text/css" />
</head> <body bgcolor="#66FF99">
<div id="tuijian" style="background-image:url(aony.png);">
<div class="pages" id="p1" onclick="dodo(-1)"></div>
<div class="pages" id="p2" onclick="dodo(1)"></div>
</div> </body>
</html>
<script language="javascript">
var jpg=new Array();
jpg[0]="url(aony.png)";
jpg[1]="url(bdec.png)";
jpg[2]="url(nkss.jpg)";
var tjimg=document.getElementById("tuijian");
var xb=0;
var n=0;
function huan()
{
xb++;
if(xb==jpg.length)
{
xb=0;
} tjimg.style.backgroundImage=jpg[xb];
n=0;
if(n==0)
{
var id=window.setTimeout("huan()",2000);
}
}
function dodo(m)
{
n=1;
xb=xb+m;
if(xb<0)
{
xb=jpg.length-1;
}
else if(xb>=jpg.length)
{
xb=0;
}
tjimg.style.backgroundImage=jpg[xb];
}
window.setTimeout("huan()",1000); </script>
CSS样式表
@charset "utf-8";
/* CSS Document */
*
{
margin:0px auto;
padding:0px;
}
#tuijian
{
width:270px;
height:270px;
background-repeat:no-repeat;
background-position:center;
}
.pages
{
top:250px;
background-position:center;
background-repeat:no-repeat;
opacity:0.4;
width:60px;
height:60px;
}
#p1
{
background-image:url(left2.png);
float:left;
margin:150px 0px 0px 10px;
}
#p2
{
background-image:url(right2.png);
float:right;
margin:150px 10px 0px 0px;
}
效果图
五、相关元素操作
六、元素的创建、添加、删除
七、字符串的操作
八、日期时间的操作
九、数学函数的操作
十、小知识点
JavaScrip的DOM操作（13号讲）的更多相关文章
- JavaScrip的DOM操作
1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型,文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西 2.Windows对象操作 一.属性和方法 二.Window.open(& ...
- 课堂所讲整理：HTML--7JavaScript的DOM操作
1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...
- Web前端开发最佳实践（13）：前端页面卡顿？可能是DOM操作惹的祸，你需要优化代码
文档对象模型(DOM)是一个独立于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得DOM成为了JavaScri ...
- jQuery简单介绍及基本用法(选择器&DOM操作)
简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是“write Le ...
- 前端性能优化--为什么DOM操作慢？ 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM
前端性能优化--为什么DOM操作慢? 作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...
- 前端JavaScript(3）-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息
小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...
- js的dom操作（整理）（转）
js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...
- js的DOM操作整理（整理）
js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...
- webform（九）——JQuery基础（选择器、事件、DOM操作）
JQuery -- 一个js函数包 一.选择器 1.基本选择器 ①id选择器:# ②class选择器:. ③标签名选择:标签名 ④并列选择:用,隔开 ⑤后代选 ...
随机推荐
- 读写分离提高 SQL Server 并发性能
以下内容均非原创,仅作学习.分享!! 在 一些大型的网站或者应用中,单台的SQL Server 服务器可能难以支撑非常大的访问压力.很多人在这时候,第一个想到的就是一个解决性能问题的利器——负载均衡. ...
- git sshkeygen Fingerprint cannot be generated解决方法
ssh-keygen -t rsa -C "xxx@xxx.com" 生成后使用cat或者vim 查看该rsa,然后复制到github的ssh keys中: 提示: ...
- 线程入门之join方法
package com.thread; /** * <join:将某线程加入进来,相当于方法调用,也叫合并某个线程> * <功能详细描述> * * @author 95Yang ...
- Codeforces Round #378 (Div. 2) C. Epidemic in Monstropolis 模拟
C. Epidemic in Monstropolis time limit per test 1 second memory limit per test 256 megabytes input s ...
- JSP学习——语法(二)
1:JSP运行原理和九大隐式对象: 每个JSP 页面在第一次被访问时,WEB容器都会把请求交给JSP引擎(即一个Java程序)去处理.JSP引擎先将JSP翻译成一个_jspServlet(实质上也是一 ...
- 妙用||和&&
&&和||在JQuery源代码内尤为使用广泛,由于本人没有系统的学习js,所以只能粗略的自我理解出来,希望大家指点下.粗略理解如下: a() && b() :如果执行a ...
- 2016中国APP分类排行榜参选入围产品公示
2016中国APP分类排行榜参选入围产品公示 由中国科学院<互联网周刊>.中国社会科学院信息化研究中心.eNet硅谷动力共同主办的2016中国APP分类排行榜发布暨颁奖晚宴即将举行.此 ...
- winform打开唯一窗体、构造函数传值
制作登入窗体: 制作一个登陆窗体,实现点击按钮关闭此窗体并打开另一个窗体 直接在按钮点击事件中,实例化一个想要打开的窗体 使用show方法打开,并把登陆窗体的visible属性改为false Form ...
- [转载] 分享D瓜哥最近攒的资料（架构方面）
原文: http://www.diguage.com/archives/41.html 扯扯蛋 以前见过零零散散地介绍一些知名网站架构的分析文章.最近D瓜哥也想研究一下各大知名网站的架构.所以,就搜集 ...
- java的重修之路
一.内存管理 java里的声明分引用与基本数据类型. 数组: java里new一个对象数组为 person[] A; A = new person[4]; person[0] = new pers ...