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选择器:. ③标签名选择:标签名 ④并列选择:用,隔开 ⑤后代选 ...

随机推荐

Oracle 分页实现
--分页实现------实行两行一页 --1 先查询按编号排序的所有用户信息 select t.* from T_USER t order by user_id ; --2 查询数据的前四行, ; - ...
Java EE 在网页输出九九乘法表
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
nessus网页报错： Scans can not be saved without a policy. Please create a policy before proce
Policies添加一个用户就好了暂时还不懂什么意思以后知道再补..............
SQL语句like子句中的转义符
如果想在SQL LIKE里查询有下划线'_'或是'%'等值的记录,直接写成like 'XXX_XX',则会把'_'当成是like的通配符.SQL里提供了 escape子句来处理这种情况,escape可 ...
Java——Image 图片合并
1.合并图片 package com.tb.image; import java.awt.Image; import java.awt.image.BufferedImage; import java ...
$.ajax() ,$.post(),$.get() 的用法
在编写代码的过程中,我们会用到一些的需要局部刷新,而且需要数据传递的情况,我们通常是有$.ajax() ,$.post(),$.get() 这三种方式. $.ajax()方法通过 HTTP 请求加载远 ...
sessionKey
许多人都知道NETSCAPE公司是Internet商业中领先技术的提供者,该公司提供了一种基于RSA和保密密钥的应用于因特网的技术,被称为安全插座层(Secure Sockets Layer,SSL) ...
Myeclipse优化篇
1 . window-preferences-MyEclipse Enterprise Workbench-Maven4MyEclipse-Maven ,将 Maven JDK 改为电脑上安装的 JD ...
动态替换fragment
// [1]获取手机的宽和高 windommanager WindowManager wm = (WindowManager) getSystemService(WINDOW_SERVICE); in ...
Android网络编程系列一 JavaSecurity之JSSE(SSL/TLS)
摘要: Java Security在Java存在已久了而且它是一个非常重要且独立的版块,包含了很多的知识点,常见的有MD5,DigitalSignature等,而Android在Java Se ...

JavaScrip的DOM操作（13号讲）

JavaScrip的DOM操作（13号讲）的更多相关文章

随机推荐

热门专题