js实现点击任意两个单元格点击按钮进行合并

51snail 2011-01-14 03:25:12

js实现点击任意两个单元格点击按钮进行合并

...全文

160 3 打赏收藏转发到动态举报

写回复

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

yixianggao 2011-01-14

打赏
举报

回复

先写个简单实现原型，还需要进一步完善

L@_@K

<!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>

    <title>dhtml.mergeCellsInTable.html</title>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <meta name="generator" content="editplus" />

    <meta name="author" content="yixianggao@126.com" />

    <meta name="keywords" content="" />

    <meta name="description" content="" />

</head>



<body>

    <table id="testTbl" border="1">

        <tr>

            <td>Click me 1-1</td>

            <td>Click me 1-2</td>

            <td>Click me 1-3</td>

            <td>Click me 1-4</td>

        </tr>

        <tr>

            <td>Click me 2-1</td>

            <td>Click me 2-2</td>

            <td>Click me 2-3</td>

            <td>Click me 2-4</td>

        </tr>

        <tr>

            <td>Click me 3-1</td>

            <td>Click me 3-2</td>

            <td>Click me 3-3</td>

            <td>Click me 3-4</td>

        </tr>

    </table>

    <script type="text/javascript">

    <!--

var table = document.getElementById("testTbl");

table.firstSelectedCell = null;

table.onclick = function() {

    if (this.firstSelectedCell == null)

    {

        this.firstSelectedCell = event.srcElement;

        this.firstSelectedCell.style.backgroundColor = "yellow";

    }

    else if (this.firstSelectedCell != null)

    {

        var secondSelectedCell = event.srcElement;



        if (this.firstSelectedCell.cellIndex == secondSelectedCell.cellIndex)

        {

            this.firstSelectedCell.rowSpan += secondSelectedCell.rowSpan;

        }

        else if (this.firstSelectedCell.rowIndex == secondSelectedCell.rowIndex)

        {

            this.firstSelectedCell.colSpan += secondSelectedCell.colSpan;

        }



        this.firstSelectedCell.innerHTML += secondSelectedCell.innerHTML;



        this.firstSelectedCell.style.backgroundColor = "";

        this.firstSelectedCell = null;

        secondSelectedCell.parentNode.removeChild(secondSelectedCell);

    }

};

    //-->

    </script>

</body>

</html>

yhtapmys 2011-01-14

打赏
举报

回复

...
js操作html的table,包括添加行，添加列，删除行，删除列

http://www.blogjava.net/caizh2009/articles/279953.html

http://www.javaeye.com/topic/376563?page=4

第1章页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错原因 1.9 当前网页调用其他网页 1.10 倒计时载入页面 1.11 定义网页的关键字 1.12 进入页面同时弹出欢迎对话框 1.13 禁止网页另存 1.14 禁止页面加入缓存 1.15 离开页面时弹出对话框 1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以频道模式打开页面 1.19 自动识别网页类型 1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结第 2章按钮特效 2.1 页面刷新按钮 2.2 按回车调用登录按钮 2.3 动态创建按钮 2.3 平面按钮 2.4 按钮的嵌入效果 2.5 按钮改变状态栏信息 2.6 定义按钮的热键 2.7 取得控件的绝对位置 2.8 删除时的确认提示 2.9 按钮只能单击一次 2.10 防止按钮连击 2.11 图片式按钮 2.12 文字显示在按钮底部 2.13 选择不同的列表项就显示不同的按钮 2.14 使用按钮控制文本渐变 2.15 翻页效果的公告栏 2.16 动态设置控件的事件第3章字符串文本和输入框特效 3.1 只带下划线的输入框 3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊字符 3.10 判断文本中回车的数量 3.11 判断字符串中有多少汉字 3.12 去除字符串的前后空格 3.13 刷新时清空所有文本框 3.14 随意改变大小的文本框 3.15 文本框的自动全选 3.16 文本框滚动导航 3.17 按钮获取焦点 3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 文字的打字效果 3.21 文字滚动 3.22 文字滑动 3.23 文字跳动特效 3.24 荧光效果的文本 3.25 文字逐个闪亮-霓虹灯效果 3.26 旋转式的变色文字特效 3.27 黑客帝国中的字符下落效果 3.28 获取表单中文本框的个数 3.29 光标停在文字最后 3.30 分行取textarea中的值 3.31 自动插入文本 3.32 选取textarea的指定行 3.33 文本放大镜 3.34 文本框的默认输入法 3.35 文本框显示网页中选中的内容 3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最顶端的文本 3.43 JavaScript过滤SQL注入字符 3.44 textarea内实现行的翻页效果 3.45 textarea中的文本插入 3.46 查找两段文本中相同的词句 3.47 自动保存网页输出的文本 3.48 文本编辑器第4章鼠标特效 4.1 禁用鼠标右键 4.2 使鼠标滚轮失效 4.3 状态栏显示鼠标位置 4.4 点击鼠标右键到指定页 4.5 鼠标放到图片上会显示另外一张图片 4.6 鼠标形状定义大全 4.7 鼠标移入移出时颜色变化 4.8 跟随鼠标的文字 4.9 跟随鼠标的彩色文字 4.10 跟随鼠标的魔法文字 4.11 跟随鼠标的星星 4.12 跟随鼠标的旋转背景 4.13 图片跟随鼠标 4.14 围绕鼠标的文本 4.15 鼠标旁边的提示信息 4.16 鼠标移到下拉框时自动全部打开 4.17 checkbox鼠标移入移出的特效第5章层和框架的特效 5.1 div层提示效果 5.2 层自动滚动到最底端 5.3 div的自动滚动 5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容第6章下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序

第1章页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错原因 1.9 当前网页调用其他网页 1.10 倒计时载入页面 1.11 定义网页的关键字 1.12 进入页面同时弹出欢迎对话框 1.13 禁止网页另存 1.14 禁止页面加入缓存 1.15 离开页面时弹出对话框 1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以频道模式打开页面 1.19 自动识别网页类型 1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结第 2章按钮特效 2.1 页面刷新按钮 2.2 按回车调用登录按钮 2.3 动态创建按钮 2.3 平面按钮 2.4 按钮的嵌入效果 2.5 按钮改变状态栏信息 2.6 定义按钮的热键 2.7 取得控件的绝对位置 2.8 删除时的确认提示 2.9 按钮只能单击一次 2.10 防止按钮连击 2.11 图片式按钮 2.12 文字显示在按钮底部 2.13 选择不同的列表项就显示不同的按钮 2.14 使用按钮控制文本渐变 2.15 翻页效果的公告栏 2.16 动态设置控件的事件第3章字符串文本和输入框特效 3.1 只带下划线的输入框 3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊字符 3.10 判断文本中回车的数量 3.11 判断字符串中有多少汉字 3.12 去除字符串的前后空格 3.13 刷新时清空所有文本框 3.14 随意改变大小的文本框 3.15 文本框的自动全选 3.16 文本框滚动导航 3.17 按钮获取焦点 3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 文字的打字效果 3.21 文字滚动 3.22 文字滑动 3.23 文字跳动特效 3.24 荧光效果的文本 3.25 文字逐个闪亮-霓虹灯效果 3.26 旋转式的变色文字特效 3.27 黑客帝国中的字符下落效果 3.28 获取表单中文本框的个数 3.29 光标停在文字最后 3.30 分行取textarea中的值 3.31 自动插入文本 3.32 选取textarea的指定行 3.33 文本放大镜 3.34 文本框的默认输入法 3.35 文本框显示网页中选中的内容 3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最顶端的文本 3.43 JavaScript过滤SQL注入字符 3.44 textarea内实现行的翻页效果 3.45 textarea中的文本插入 3.46 查找两段文本中相同的词句 3.47 自动保存网页输出的文本 3.48 文本编辑器第4章鼠标特效 4.1 禁用鼠标右键 4.2 使鼠标滚轮失效 4.3 状态栏显示鼠标位置 4.4 点击鼠标右键到指定页 4.5 鼠标放到图片上会显示另外一张图片 4.6 鼠标形状定义大全 4.7 鼠标移入移出时颜色变化 4.8 跟随鼠标的文字 4.9 跟随鼠标的彩色文字 4.10 跟随鼠标的魔法文字 4.11 跟随鼠标的星星 4.12 跟随鼠标的旋转背景 4.13 图片跟随鼠标 4.14 围绕鼠标的文本 4.15 鼠标旁边的提示信息 4.16 鼠标移到下拉框时自动全部打开 4.17 checkbox鼠标移入移出的特效第5章层和框架的特效 5.1 div层提示效果 5.2 层自动滚动到最底端 5.3 div的自动滚动 5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容第6章下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 下拉框式网站导航 6.14 综合的搜索引擎 6.15 经典的ListView列表框第7章键盘操作和状态栏特效 7.1 按功能键返回首页 7.2 回车实现Tab键功能 7.3 Ctrl+Enter提交数据 7.4 IE中屏蔽退格建（Back Space） 7.5 屏蔽键盘所有键 7.6 JavaScript捕获方向键 7.7 状态栏变化信息 7.8 状态栏的跑马灯效果 7.9 状态栏缩放文字 7.10 状态栏文字来回出现 7.11 交替闪烁的状态栏 7.12 状态栏的分解显示文本特效 7.13 状态栏文字从右弹出 7.14 状态栏中文字从中间分开显示 7.15 屏蔽掉IE自带的功能键第8章链接特效 8.1 关闭窗口的链接 8.2 不用CSS实现链接样式的变化 8.3 让链接没有下划线 8.4 去掉超链接点击时的框 8.5 显示页面中所有链接 8.6 一个链接打开两个地址 8.7 为链接提供下拉菜单 8.8 按钮链接 8.9 弹出鼠标所指的链接地址 8.10 链接的注释 8.11 为超链接同时绑定单击和双击事件 8.12 带链接的滚动字幕 8.13 会跳舞的链接 8.14 检测站点的连接速度 8.15 文本链接的渐变效果第9章表格特效 9.1 用table做的镜框 9.2 全自动单元格 9.2 突出的表格 9.3 让表格有提示信息 9.4 闪亮的表格边框 9.5 表格的宽度固定后内容自动换行 9.6 表格的排序 9.7 表格的斜线 9.8 table中的文字滚动 9.9 JavaScript遍历table的行和列 9.10 表格按回车自动生成新行 9.11 单击单元格背景变色 9.12 单击表格某行后其他行隐藏 9.13 单击表头实现表格排序 9.14 单击单元格显示行的详细信息 9.15 表格设置为“100%”时获取表格的宽度 9.16 表格选中后变色 9.17 表格中隐藏下级表格 9.18 表格自动下移 9.19 动态创建固定列数的表格 9.20 动态改变表格列宽 9.21 动态改变表格的行顺序 9.22 动态生成包含合并单元格的表格 9.23 用键盘上下键实现表格行的上下选择 9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的表格隐藏 9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的交替行颜色 9.33 双击单元格变为可编辑 9.34 鼠标经过表格时列变色 9.35 鼠标选择表格中的多行 9.36 使用JavaScript向表格中写入数据 9.37 类C# GridView的编辑效果（一） 9.38 类C# GridView的编辑效果（二）第10章单选框和复选框 10.1 选择了哪一个单选框 10.2 单击文字实现单选框的选定 10.3 被选中的复选框求和 10.4 复选框组选 10.5 复选框分组全选 10.6 复选框和文本框的联动效果 10.7 单击任意单元格都能自动选中复选框 10.8 调用复选框后面的文字 10.9 两个checkbox互斥问题 10.10 使用checkbox控制文本框 10.11 选中表格行前的复选框则行变色 10.12 用JavaScript生成面包屑导航 10.13 复选框的反选 10.14 选中所有复选框 10.15 复选框全选（二） 10.16 改变slsect选中项的颜色特效第11章颜色处理和菜单特效 11.1 背景颜色测试 11.2 RGB颜色在线转换 11.3 颜色切换板 11.4 下拉菜单 11.5 左键弹出式菜单 11.6 目录样式的下拉菜单 11.7 网页中的选项卡 11.8 静态导航菜单 11.9 烟花效果的下拉菜单 11.10 网络导航条 11.11 隐藏式菜单 11.12 仿flash菜单 11.13 滚动导航菜单 11.14 幻灯片式的导航菜单 11.15 类似QQ的菜单 11.16 三级联动菜单 11.17 三级联动菜单 11.18 树型目录菜单第12章窗口特效与弹出式警告 12.1 无关闭按钮的窗口 12.2 鼠标控制窗口开关 12.3 使窗口只第一次访问时弹出 12.4 禁止弹出警告框 12.5 关闭窗口不提示的方法 12.6 关闭窗口时的提示 12.7 定时弹出窗口 12.8 调整窗口的大小 12.9 打开的窗口居中 12.10 打开窗口的等待提示 12.11 在打开的窗口中返回数据 12.12 创建弹出窗口 12.13 不允许窗口出现滚动条 12.14 页面打开的同时打开另外两个窗口 12.15 慢慢变大的窗口 12.16 设置新打开的窗口为活动窗口 12.17 页面随窗口的改变而改变 12.18 幻灯片式弹出窗口 12.19 弹出窗口生成器 12.20 关不掉的警告框 12.21 循环的警告框 12.22 屏蔽状态栏的错误提示 12.23 获取模式窗口的值第13章日期和时间特效 13.1 指定时间关闭页面 13.2 最简单的时间日期特效 13.3 最简单的获取时间的方法 13.4 随日期变换的文本 13.5 输入框的默认值为今天 13.6 时间相加 13.7 5秒后消失的广告 13.8 12小时制和24小时制的转换 13.9 标题栏显示时间 13.10 超过时间页面自动跳转 13.11 分时段问候用户 13.12 获取服务器时间 13.13 倒计时显示 13.14 背景时钟 13.15 计算某天星期几 13.16 计算时间差 13.17 计算网页停留时间 13.18 记录页面的修改时间 13.19 将日期转换为字符串的方法 13.20 检测是否是闰年 13.21 年份加减函数 13.22 精确到千分之一秒 13.23 离开某天的时间 13.24 判断两个字符串日期的大小 13.25 显示登录时间 13.26 中文日期样式(一) 13.27 中文日期样式(二) 13.28 状态栏动态显示时间 13.29 页面访问时间限制 13.30 显示英文上、下午的时间 13.31 用JavaScript制作的特色时钟 13.32 自定义的日历 13.33 生日提醒器 13.34 时间的倒影 13.35 使用正则表达式验证日期 13.36 全面的日期选择功能 13.37 全球的时间查看表 13.38 无刷新定时取数据 13.39 取当月的最后一天第 14章数字、数组和统计函数特效 14.1 边打字边显示字数 14.2 创建随机数 14.3 JavaScript创建二维数组 14.4 截断小数点位数 14.5 删除数组中指定元素 14.6 数字选中后放大 14.7 统计字符数的方法 14.8 JavaScript遍历数组 14.9 获取字符串型数组下标的数组长度 14.10 用JavaScript实现数组排序 14.11 数字千分位函数 14.12 读写Cookie的函数 14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 14.17 同一用户的来访统计 14.18 十六进制转换为十进制 14.19 将URL转化为16进制 14.20 小写金额转换为大写 14.21 通过两点坐标计算直线距离 14.22 随机抽取彩票 14.23 实时计算折扣 14.24 实用计算器 14.25 前面补0的方法第15章图形、图像的特效 15.1 图片变形效果 15.2 图像的翻转效果 15.3 图像的模糊效果 15.4 图像的水印效果 15.5 图形淡出淡隐 15.6 图像的渐隐播放效果 15.7 文字环绕图片 15.8 切换图片的特殊效果 15.9 晃动的图片 15.10 定时消失的图片 15.11 QQ图像一闪一闪的效果 15.12 设置textarea中的图片不处于编辑状态 15.13 禁止图像的拷贝 15.14 LOGO像雪花一样落下 15.15 多幅图片分页滚动显示 15.16 循环滚动显示图片 15.17 图片的选择展示 15.18 163图片新闻切换效果 15.19 判断上传图片的大小 15.20 上传图片时预览 15.21 对联广告 15.22 带关闭的对联广告 15.23 到边界反弹的漂浮图片 15.24 用键盘控制图片移动 15.25 预装载图片提高站点速度 15.26 始终在屏幕右下角的图片 15.27 可拖动的图片 15.28 等比例缩略图 15.29 用JavaScript导出图像到Excel 15.30 使用VML打造可改变大小的圆框 15.31 JavaScript实现文档结构图 15.32 判断一副图片是否加载完毕第16章页面数据的验证 16.1 验证字符串是否全由数字组成 16.2 验证表单项必须填写 16.3 判断用户输入是否为中文 16.4 验证列表框中的值是否重复 16.5 检测输入框的统一方法 16.6 Email的验证 16.7 不使用正则验证IP地址 16.8 IP地址输入框 16.9 判断变量是否已经定义 16.10 判断方法是否已经定义 16.11 表单验证样式（一） 16.12 判断表单是否已修改 16.13 判断控件的类型 16.14 密码强度检查 16.15 身份证的验证 16.16 JavaScript生成验证码 16.17 JavaScript生成验证码(二) 第17章进度条、滚动条特效处理 17.1 使用符号制作的进度条 17.2 用table制作的进度条 17.3 CSS+JS制作的进度条（一） 17.4 CSS+JS制作的进度条（二） 17.5 进度条形式的下载效果 17.6 滑动条（一） 17.7 滑动条（二） 17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条第18章在线考题案例 18.1 在线考试代码 18.2 在线考试代码（二） 18.3 在线测试代码（三） 18.4 多选考试题 18.5 在线心理测试脚本 18.6 电脑检测健康情况第19章文件处理和打印的技巧 19.1 判断上传文件的类型 19.2 改变上传文件控件的样式 19.3 上传文件一次完成 19.4 使用正则判断文件扩展名 19.5 多附件上传效果 19.6 上传控件内容清空 19.7 textarea显示记事本文件的内容 19.8 使用FSO读写文本文件 19.9 自动启动文件下载 19.10 创建Excel文件 19.11 JavaScript导出数据到Excel 19.12 JavaScript读取自身文件内的XML 19.13 将XML文件绑定到table 19.14 使用JavaScript加载XML文件 19.15 动态加载JavaScript文件 19.16 防止JavaScript文件被其他站直接引用 19.17 检查机器是否安装Word 19.18 打印当前页 19.19 打印预览 19.20 隐藏不想打印的页面内容 19.21 使用ExecWB直接打印 19.22 动态绑定XML文件 19.23 Kill Excel的进程第20章调用操作系统的应用 20.1 Javascript操作剪贴板 20.2 打开硬盘驱动器 20.3 单击加入收藏夹 20.4 复制标题和网址 20.5 关闭输入法 20.6 检测屏幕分辨率 20.7 检测系统信息 20.8 显示本地计算机信息 20.9 检测浏览器浏览过的站点数 20.10 IE文件菜单中的打开命令 20.11 打开Internet选项对话框 20.12 打开Windows系统的画板 20.13 弹出保存对话框 20.14 进入页面弹出收藏夹 20.15 执行客户端的可执行程序 20.16 自动调用OutLook发送邮件 20.17 弹出窗口选择颜色 20.18 弹出框式邮件发送 20.19 把网站作为用户的Active桌面 20.20 判断是否安装了flash插件第21章流行技术：DOM和userData的应用技巧 21.1 使用userData保存文本内容 21.2 使用userData保存select标记 21.3 使用userData保存checkbox标记 21.4 使用DOM实现控件的替换 21.5 使用DOM实现控件的复制 21.6 使用DOM判断页面中控件是否嵌套 21.7 使用DOM获取页面中某控件的属性 21.8 将某行排在表格的最后 21.9 动态删除页面中的元素 21.10 克隆表格 21.11 拖动表格行改变顺序 21.12 表格操作常用方法第22章流行应用：AJAX和Property的应用技巧 22.1 实现关机效果的界面 22.2 关机特效（二） 22.3 评星效果 22.4 输入框自动完成功能 22.5 Ajax效果的字符串过滤 22.6 Gmail右上角的Loading效果 22.7 使用XMLHTTP获取天气预报 22.8 拖拽任意对象 22.9 避免打开无效页面 22.10 用JavaScript调用Google AdSense 22.11 Ajax效果：可拖拽的表格 22.12 JavaScript调用Web Service 22.13 用JavaScript实现编码解码 22.14 创建带属性的对象 22.15 用prototype实现JavaScript的继承 22.16 JavaScript制作哈希表第23章其他技巧及特效 23.1 最简单的漂移特效 23.2 JavaScript遍历对象中的所有属性 23.3 QQ在线客服 23.4 查看网站的排名 23.5 定义全局变量 23.6 动态生成金字塔效果 23.7 动态修改CSS的样式 23.8 根据浏览器不同设置CSS 23.9 汉字按拼音排序 23.10 划词搜索 23.11 加载大量input控件的快速方法 23.12 简繁体转换 23.13 将HTML转换为JavaScript脚本 23.14 脚本永不出错 23.15 进入网站的签名程序 23.16 浏览器毁灭者 23.17 罗列对象的属性和值 23.18 密码保护页 23.19 全角转半角 23.20 全屏广告 23.21 输入的英文自动全大写 23.23 特殊扩散效果 23.24 提交信息等待界面 23.25 同时调用两个方法 23.26 自定义错误处理样式 23.27 FTP网站登录

目录: 第1章窗口/框架与导航条设计 1 1.1 弹出窗口控制 2 实例001 打开新窗口显示广告信息 2 实例002 定时打开窗口 4 实例003 通过按钮创建窗口 5 实例004 自动关闭的广告窗口 6 实例005 控制弹出窗口居中显示 7 实例006 弹出的窗口之Cookie控制 9 实例007 为弹出的窗口加入关闭按钮 11 实例008 关闭弹出窗口时刷新父窗口 12 实例009 关闭IE主窗口时，不弹出询问对话框 13 1.2 弹出网页对话框 14 实例010 弹出网页模式对话框 14 实例011 弹出全屏显示的网页模式对话框 16 实例012 网页拾色器 18 实例013 日期选择器 21 1.3 窗口的动画效果 26 实例014 页面自动滚动 26 实例015 打开窗口特殊效果 27 实例016 动态显示窗口 29 实例017 慢慢放大的窗口 30 实例018 下降式浏览器 32 实例019 旋转的窗口 33 实例020 移动的窗口 34 实例021 震动的窗口 35 实例022 弹出广告窗口 36 1.4 窗口控制 37 实例023 窗口始终在最上面 38 实例024 窗口的最小化、最大化 39 实例025 频道方式窗口 41 实例026 全屏显示 42 实例027 设置窗口大小和位置 43 实例028 刷新当前页 44 实例029 自动最大化 45 实例030 自定义导航控制面板 46 实例031 根据用户分辨率自动调整窗口 48 1.5 窗口的其他效果 49 实例032 打开窗口时显示对话框 50 实例033 使窗口背景透明 50 实例034 立体窗口 52 实例035 动态标题栏 53 实例036 固定大小的窗口 54 1.6 框架的应用 55 实例037 框架集的嵌套 56 实例038 在网页中应用浮动框架 58 实例039 创建空白框架 60 实例040 居中显示框架页 62 1.7 无边框窗口 63 实例041 全屏显示无边框有滚动条的窗口 63 实例042 应用CSS+DIV实现指定尺寸无边框无滚动条窗口 65 实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用图片实现质感导航条 72 1.9 下拉菜单式导航条 73 实例047 二级导航菜单 74 实例048 半透明背景的下拉菜单 76 实例049 展开式导航条 80 实例050 用层制作下拉菜单1 81 实例051 用层制作下拉菜单2 84 1.10 侧导航条设计 86 实例052 自动隐藏式菜单 87 实例053 收缩式导航菜单 89 实例054 树状导航菜单 91 第2章表单及表单元素 95 2.1 文本框/编辑框/隐藏域组件 96 实例055 获取文本框/编辑框/隐藏域的值 96 实例056 自动计算金额 97 实例057 设置文本框的只读属性 98 实例058 限制多行文本域输入的字符个数 100 实例059 自动选择文本框/编辑框中的文字 102 实例060 按下回车键时自动切换焦点 103 2.2 下拉列表/菜单 104 实例061 获取下拉列表/菜单的值 104 实例062 遍历多选择下拉列表 105 实例063 在下拉列表中进行多选移除 106 实例064 将数组中的数据添加到下拉菜单中 107 实例065 应用下拉菜单选择所要联机的网站 108 实例066 多级级联菜单 110 实例067 可以输入文字的下拉菜单 111 实例068 根据下拉菜单的值显示不同控件 112 实例069 分级下拉列表 113 2.3 单选按钮组 114 实例070 不提交表单获取单选按钮的值 114 实例071 选中单选按钮后显示其他表单元素 116 实例072 通过单选按钮控制其他表单元素是否可用 117 2.4 复选框 117 实例073 不提交表单获取复选框的值 118 实例074 控制复选框的全选或反选 118 实例075 只有一个复选框时控制复选框的全选或反选 119 2.5 密码域 120 实例076 让您的密码域更安全 120 实例077 不提交表单自动检测密码域是否相同 121 2.6 表单应用 122 实例078 通过JavaScript控制表单的提交与重置 122 实例079 带记忆功能的表单 123 实例080 防止表单重复提交 124 实例081 自动提交表单 125 实例082 通过for循环获取表单元素的中文名称 126 实例083 可以提交到不同处理页的表单 127 第3章实用JavaScript函数 129 3.1 数据验证 130 实例084 通过正则表达式验证日期 130 实例085 验证输入的日期格式是否正确 132 实例086 检查表单元素是否为空 134 实例087 验证E-mail是否正确 135 实例088 通过正则表达式验证电话号码 137 实例089 验证输入的字符串是否为汉字 139 实例090 验证身份证号码 140 实例091 验证用户名和密码 142 实例092 验证车牌号码 144 实例093 验证网站地址 145 实例094 验证数量和金额 147 实例095 验证字符串是否以指定字符开头 149 实例096 限制输入字符串的长度 150 3.2 字符串处理 152 实例097 小写金额转换为大写金额 152 实例098 去除字符串中的空格 155 实例099 转换输入文本中的回车和空格 156 实例100 将数字字符串格式化为指定长度 158 实例101 把一个长数字分位显示 159 实例102 将RGB格式的颜色值转换为十六进制格式 161 实例103 将IP地址转换为对应的数值 163 实例104 从指定URL中提取文件名 164 3.3 随机函数 166 实例105 随机产生指定位数的验证码 166 实例106 生成随机字符串 167 3.4 日期与时间 169 实例107 显示长日期格式的系统日期 169 实例108 实时显示系统时间 171 第4章日期和时间 173 4.1 日期时间显示 174 实例109 在标题栏中显示日期时间 174 实例110 使用toLocaleString()方法获取本地时间 176 实例111 全中文显示日期 176 实例112 在状态栏中显示日期时间 178 实例113 使用数组显示星期 179 实例114 在表格中显示时间 180 实例115 退出页面时显示停留时间 181 实例116 显示用户在页面的停留时间 182 实例117 显示最后修改时间 183 4.2 日期时间算法 184 实例118 计算某一天是星期几 184 实例119 判断指定年份是否为闰年 186 实例120 计算从出生到现在度过的时间 187 实例121 返回两个日期之间的间隔小时 188 实例122 倒计时 190 实例123 访问时间限制 191 实例124 计步器 192 4.3 日期时间特效 194 实例125 分时问候 194 实例126 节日提示 195 实例127 倒影时钟 196 实例128 带阴影的时钟 199 实例129 动态石英钟 200 实例130 生日提醒器 203 实例131 数字时钟 205 实例132 各地时间表 206 实例133 位于页面顶层的时钟 209 第5章文字特效 213 5.1 文字的颜色变换 214 实例134 简单文字变色 214 实例135 文字变色 215 实例136 变换的文字 216 实例137 描边文字 217 实例138 霓虹灯文字 218 实例139 追逐点亮的文字 219 实例140 萤光文字 220 实例141 发光文字的闪烁效果 221 实例142 文字的舞台灯光效果 223 实例143 制作彩色渐变文字动画 224 5.2 改变文字大小 226 实例144 文字伸缩 226 实例145 动荡的文字 227 实例146 文字伸展 228 实例147 文字逐个放大 230 实例148 自动改变大小 231 实例149 选择字体的大小 232 5.3 文字显示效果 234 实例150 文字渐隐渐现 234 实例151 文字虚幻变化 235 实例152 文字虚幻抖动 237 5.4 指定文字位置 238 实例153 将文字置于工作区左上角 238 实例154 右上角文字 239 实例155 鼠标移动文字 241 5.5 文字动态移动 242 实例156 文字自动滚屏 242 实例157 文字上下滚动 243 5.6 文字立体效果 244 实例158 文字的旋转 244 实例159 立体旋转文字 246 实例160 文字3D效果 248 5.7 文字动画效果 249 实例161 反弹文字 249 实例162 飞舞的文字 252 实例163 飞翔的文字 254 实例164 平面旋转的文字 257 实例165 输出文字 258 实例166 文字打字效果 259 实例167 文字抖动 261 实例168 指向文字时飞出星形标记 262 实例169 文字的抛出效果 264 5.8 文字特殊效果 265 实例170 波浪文字 265 实例171 梦幻文字效果 266 实例172 屏风文字 268 实例173 文字阴影 270 5.9 其他 270 实例174 随机显示文字 270 实例175 文字加密及解密 271 第6章超级链接特效 275 6.1 超级链接样式 276 实例176 改变超级链接字体样式 276 实例177 当鼠标移动到超级链接时改变超级链接颜色 277 实例178 改变超级链接背景色 278 6.2 超级链接控制 279 实例179 建立E-mail超级链接 280 实例180 获取页面中的全部超级链接 281 实例181 将网站设为首页 282 实例182 单击鼠标右键自动链接到指定网站 283 实例183 单击超级链接将本页加入收藏夹 285 实例184 访问指定的链接地址 286 实例185 返回默认主页 287 实例186 导航链接 289 6.3 超级链接特效 291 实例187 快速闪动页面中的超级链接 291 实例188 滚动的超级链接提示信息 292 实例189 公告栏中显示超级链接 294 实例190 显示超级链接站点相关信息 295 实例191 显示超级链接的提示信息 296 实例192 半透明背景的超级链接提示 297 第7章操作表格 299 7.1 表格的颜色效果 300 实例193 闪烁的表格边框 300 实例194 单元格边框变色 301 实例195 选中的行变色 302 7.2 对单元格的焦点进行控制 303 实例196 选定表格中的单元格 303 实例197 左右移动单元格的信息 304 实例198 通过键盘使单元格焦点任意移动 306 7.3 对表格的行、列进行修改 311 实例199 动态制作表格 311 实例200 动态生成行或列 313 实例201 删除表中的行 314 7.4 单元格的相关操作 316 实例202 隐藏及显示单元格 316 实例203 编辑单元格中的文本信息 318 实例204 合并单元格 320 实例205 在表格中添加行及单元格 322 实例206 删除表中的单元格 324 7.5 表格的特殊效果 325 实例207 透明表格 326 实例208 限制表格的宽度 327 实例209 表格的标题 328 实例210 表格的外阴影 329 实例211 立体表格 329 实例212 虚线边框表格 330 实例213 表格作为分割线 332 实例214 表格向下展开 332 第8章图形图像与多媒体 335 8.1 图片大小 336 实例215 打开自定义大小的图片 336 实例216 图片放大缩小 337 实例217 通过鼠标滚轮放大缩小图片 338 8.2 图片与鼠标相关操作 339 实例218 跟随鼠标移动的图片 340 实例219 可以左右拖动的图片 340 实例220 随意拖动图片 342 实例221 当鼠标经过图片时显示图片 344 实例222 改变图片获取焦点时的状态 345 实例223 抖动的图片 346 实例224 鼠标移动放大图片 347 8.3 图片与时间相关操作 349 实例225 定时隐藏图片 349 实例226 根据时间变换页面背景 350 实例227 使图片不停闪烁 352 实例228 上下跳动的图片 352 实例229 图片左右晃动 354 实例230 飘舞的变形图片 356 8.4 图片的动画效果 358 实例231 图片翻转效果 359 实例232 水波倒影特效 360 实例233 图片渐隐渐现 361 实例234 图片的探照灯效果 362 实例235 雷达扫描图片特效 363 实例236 在页面中旋转的图片 365 实例237 改变形状的图片 366 实例238 图片在页面浮动 367 实例239 随机变化的网页背景 369 8.5 选择头像 370 实例240 在列表中选择图片 370 实例241 在弹出的新窗口中选择图片 372 8.6 在页面中播放图片 374 实例242 幻灯片式播放图片 374 实例243 无间断的图片循环滚动效果 376 8.7 图片的其他效果 377 实例244 导航地图 377 8.8 播放音乐 378 实例245 为网页设置背景音乐 378 实例246 随机播放背景音乐 380 实例247 MIDI音乐选择 381 8.9 插入Flash动画 383 实例248 插入Flash动画 383 实例249 插入背景透明的Flash动画 384 8.10 播放视频文件 385 实例250 播放AVI文件 385 实例251 自制视频播放器 387 第9章页面特效 391 9.1 页面背景效果 392 实例252 背景固定居中 392 实例253 背景图片纵向重复显示 393 实例254 通过按钮变换背景颜色 395 实例255 背景自动变色 396 实例256 百叶窗 396 实例257 渐隐渐显的背景颜色 398 实例258 页面缩小 399 实例259 页面上下打开效果 400 实例260 页面左右打开效果 402 实例261 页面溶解效果 404 9.2 特殊页面 406 实例262 页首页尾切换 406 实例263 调用下载页面 408 实例264 程序加载页面 409 实例265 颜色拾取器 411 9.3 广告页面 415 实例266 图片总置于顶端 415 实例267 随机显示广告 416 实例268 广告随滚动条漂移 418 9.4 页面动画效果 419 实例269 下雪 419 实例270 飘落的枫叶 421 实例271 下雨 423 实例272 背景的烟花效果 425 实例273 变色的圆圈 427 实例274 滚动的光环 429 实例275 星空极速飞入效果 430 实例276 闪烁的星星 432 9.5 其他 434 实例277 带密码的网页 434 实例278 页面左右滚动 435 实例279 动态移动的层 437 实例280 在页面中显示十字光标 438 第10章状态栏特效 441 10.1 状态栏文字动画 442 实例281 使状态栏中的文字不停闪烁 442 实例282 文字从右向左依次弹出 443 实例283 文字从中间向两边展开 445 实例284 文字跑马灯特效 447 实例285 文字依次显示后快速收缩 449 实例286 文字的展开与收缩 451 实例287 状态栏中的文字依次弹出 452 10.2 其他 453 实例288 在状态栏显示固定自定义信息 453 实例289 在状态栏显示鼠标坐标 454 实例290 在状态栏显示特定的超级链接信息 456 第11章报表与打印 459 11.1 Web打印 460 实例291 调用IE自身的打印功能实现打印 460 实例292 打印指定框架中的内容 461 实例293 利用WebBrowser打印 462 实例294 设置页眉页脚 463 11.2 利用Word打印报表 465 实例295 将页面中的表格导出到Word并打印 465 实例296 打开指定的Word文档并打印 467 实例297 在JSP中利用Word自动打印指定格式的会议记录 468 实例298 在ASP中利用Word自动打印指定格式的会议记录 470 实例299 在PHP中调用Word自动打印指定格式的会议记录 472 11.3 利用Excel打印报表 474 实例300 将Web页面中的数据导出到Excel 474 实例301 将Web页面中的数据导出到Excel并自动打印 476 11.4 利用CSS样式打印 478 实例302 利用CSS样式打印页面中的指定内容 478 实例303 利用CSS样式分页打印 479 11.5 套打邮寄产品单 482 实例304 打印汇款单 482 实例305 打印快递单 484 实例306 打印信封 485 第12章网站安全 489 12.1 禁止用户复制网页内容 490 实例307 禁止用户复制网页内容(方法一) 490 实例308 禁止用户复制网页内容(方法二) 491 实例309 禁止网页另存为 492 12.2 禁止用户刷新屏幕 493 实例310 屏蔽IE主菜单 493 实例311 屏蔽键盘相关事件 494 实例312 屏蔽鼠标右键 496 12.3 登录页面 497 实例313 具有浏览器检测功能的登录页面 497 实例314 防止SQL注入的登录页面 498 实例315 带验证码的登录页面 500 12.4 其他 501 实例316 使用Script Encoder加密工具加密 501 第13章 HTML/CSS样式 503 13.1 页面效果 504 实例317 统一站内网页风格 504 实例318 设置超级链接文字的样式 508 实例319 网页换肤 509 实例320 滚动文字 512 实例321 制作渐变背景 513 13.2 表格样式 514 实例322 只有外边框的表格 515 实例323 彩色外边框的表格 516 实例324 控制表格指定外边框不显示 518 实例325 背景颜色渐变的表格 520 实例326 表格隔行变色 521 13.3 鼠标及滚动条样式 522 实例327 显示自定义鼠标形状 522 实例328 动画光标 524 实例329 制作彩色滚动条 525 13.4 文字及列表样式 527 实例330 应用删除线样式标记商品特价 527 实例331 在文字上方标注说明标记 528 实例332 指定图标的列表项 529 13.5 文字滤镜特效 530 实例333 文字的发光效果 531 实例334 文字的阴影效果 532 实例335 文字的渐变阴影效果 533 实例336 文字的图案填充效果 534 实例337 文字的探照灯效果 535 实例338 文字的闪烁效果 537 实例339 文字的空心效果 538 实例340 文字的浮雕效果 539 实例341 文字的阳文效果 540 实例342 文字的雪雕效果 541 实例343 火焰字 542 实例344 文字扭曲动画 544 13.6 图片滤镜特效 545 实例345 图片的半透明效果 545 实例346 图片的模糊效果 546 实例347 图片的水波纹特效 547 实例348 图片的灰度效果 548 实例349 图片的动态说明文字 549 第14章 JavaScript与XML 553 14.1 读取XML文件 554 实例350 使用XML DOM对象读取XML文件 554 实例351 使用XMLHttpRequest对象读取XML文件 557 14.2 显示XML文档 559 实例352 使用CSS显示XML文档 559 实例353 使用XSL显示XML文档 562 实例354 使用IE XML数据岛输出XML文档 564 14.3 操作XML 565 实例355 用JavaScript控制XML文档的分页显示 565 实例356 通过操作XML数据岛实现添加、删除留言信息 567 第15章 JavaScript与ASP结合 573 15.1 弹出窗口/对话框控制 574 实例357 关闭弹出窗口时刷新父窗口 574 实例358 打开新窗口显示详细信息 575 实例359 弹出网页模式对话框 577 实例360 日期选择器 580 实例361 弹出提示对话框并重定向网页 584 实例362 打开指定大小的新窗口并居中显示 586 15.2 弹出确认对话框 588 实例363 删除数据前弹出确认对话框 588 实例364 安全退出前弹出确认对话框 590 15.3 其他 591 实例365 远程获取其他网页情报 591 实例366 树状导航菜单 594 实例367 使用XML实现不刷新页面查询数据 596 第16章 JavaScript与JSP结合 601 16.1 窗口与对话框 602 实例368 弹出提示对话框并重定向网页 602 实例369 打开新窗口显示详细信息 604 实例370 打开指定大小的新窗口并居中显示 605 实例371 弹出网页模式对话框 607 实例372 关闭弹出窗口时刷新父窗口 609 16.2 无刷新技术 611 实例373 无刷新的用户名检测 611 实例374 无刷新的级联下拉列表 614 实例375 使用XML实现不刷新页面查询数据 616 16.3 调用与控制 619 实例376 将查询结果导出到Word 619 实例377 调用Excel 621 实例378 调用PowerPoint 622 16.4 其他 623 实例379 树状导航菜单 623 第17章 JavaScript与ASP.NET结合 627 17.1 窗口与对话框 628 实例380 使用JavaScript脚本弹出对话框 628 实例381 打开新窗口显示详细信息 629 实例382 关闭弹出窗口刷新父窗口 631 实例383 弹出网页模式对话框 633 实例384 弹出全屏显示网页 635 17.2 其他 637 实例385 自动隐藏式菜单 637 第18章 JavaScript与PHP结合 641 18.1 窗口与对话框 642 实例386 弹出提示对话框并重定向网页 642 实例387 关闭弹出窗口时自动刷新父窗口 643 实例388 在弹出的网页模式对话框中选择个性头像 645 实例389 时间选择器 647 实例390 弹出提示对话框并重定向网页 649 实例391 删除数据前弹出确认对话框 650 18.2 其他 651 实例392 树状导航菜单 651 第19章综合应用 657 19.1 计算器 658 实例393 简单计算器 658 实例394 复杂计算器 662 19.2 日历 667 实例395 精美日历 668 实例396 带农历的日历 674 19.3 购物车 681 实例397 添加至购物车 682 实例398 查看购物车 684 实例399 修改商品购买数量 686 实例400 从购物车中移去指定商品 687 实例401 清空购物车 689 JavaScript程序开发范例宝典附录 691

HTML + JavaScript + Ajax + CSS 赵旭 zhaoxu@tedu.cn HTML5 1、WEB基础知识(了解) 1、Internet - 网由若干台电脑、手机、平板通过网线(WIFI) 连接起来的结构 2、基于Internet上的程序 1、C / S 结构 Client / Server 特点：必须通过指定的客户端软件才能访问服务器端的一种程序：如：桌面版QQ，... ... 2、B / S 结构 Browser / Server Browser ：浏览器特点：通过浏览器就能访问服务器端的一种程序如：网页版百度，网页版 QQ，网页版京东，... ... 3、WEB 1、什么是WEB WEB，是基于Internet上的一种应用程序(网页应用程序) WEB页面，简称WEB页(网页)，就是保存在服务器端上的一个具体的页面( **.html / **.htm 作为结尾的文件) 2、WEB浏览器 1、功能 1、提交用户请求 (UA : User Agent) 2、作为HTML 以及脚本执行的解释器 3、以图形化的方式显示web页面 2、主要浏览器产品 1、Microsoft Internet Explorer (IE) 2、Mozilla Firefox 3、Google Chrome 4、Apple Safari 5、Opera Opera(欧朋) 3、主要技术 1、HTML 2、CSS 3、Javascript 2、HTML入门(重点) 1、什么是HTML Hyper Text Markup Language 超级文本标记语言超文本：也是文本，但会具备特殊功能普通文本 a : 普通字符 a 超文本 a : 表示超链接普通文本 b : 普通字符 b 超文本 b : 加粗显示文本标记：超文本的表现形式普通文本 a : a 超文本 a : 语言：具备一定的语法规范 HTML 也具备自己的语法规范 WEB页面(HTML页面)就是由 HTML 语言来进行开发的，以 .html 或 .htm 进行结尾的文件开发 & 运行网页的工具： 1、记事本 2、浏览器 2、HTML 的基础语法 1、标记语法 HTML中用于描述功能的符号称为"标记" 标记在使用时，用尖括号 "",标记的分类 1、封闭类型的标记也称为 "双标记" , 必须成对出现语法：内容 Demo ： 1、创建 p 标记 --... 2、创建 div 标记 -- 3、创建 header 标记 -- <header></header> 2、非封闭类型的标记也称为 "单标记" 语法：或 Demo ： 1、创建 br 标记 -- 2、创建 hr 标记 -- 3、创建 img 标记 -- 4、创建 input 标记 -- <input/> 2、标记(元素)的嵌套在一对标记中，允许出现另外一对(一个)标记注意：嵌套标记的书写格式 -- 被嵌套的标记要通过一个缩进键(Tab) 来表示层级关系 Demo : 1、编写一对 body 标记，在body标记中，嵌套一对 div标记，在 div 标记中，嵌套一对 a 标记，在 a标记中，嵌套一对 b 标记，b标记中，随意编写一些文本 <body> 这是一段测试文本 </body> 3、标记的属性 1、什么是属性用来修饰标记的效果的内容，就是属性 2、语法 1、属性必须声明在开始标记中 2、属性与标记名称之间，用空格隔开 3、属性的值与属性之间使用 "=" 连接 4、一个元素允许有多属性，多属性间，排名不分先后，中间用空格隔开即可 Demo : 1、创建一个 div 标记，增加属性，设置 align 属性的值为 center ，设置 id 属性的值为 container，设置 title 属性的值为这是一个div 四大标准属性： 1、id ：定义元素在页面中独一无二的名称 2、title ：鼠标悬停在元素上时，体现的文字 3、class ：引用类选择器时使用(CSS中) 4、style ：定义内联方式方式使用(CSS中) 4、注释语法： 注意： 1、注释不能嵌套 2、注释不能出现在标记中 3、HTML 文档结构 W3C ：Word Wide Web Consortium (万维网联盟) 1、HTML文档的组成 1、文档类型声明告知浏览器当前的HTML文档用的是哪个版本在网页的最顶端 2、由一对 html 根标记，来表示页面的开始与结束 Demo : 1、在 htdoc 中，创建一个网页 01-first.html 文件创建一个记事本，将 .txt 重命名为 .html 2、搭建HTML网页结构 1、添加文档类型声明 2、添加 html 根标记 2、<html> 标记包含两对子元素 1、<head></head> 包含的子元素(2对) 1、<title>网页的标题</title> 2、<meta charset="utf-8"/> -- 能正常显示中文 2、<body></body> 属性： 1、text ，取值是一个颜色值(red,green,blue...) 2、bgcolor ，取值也是一个颜色值 Demo : 在刚才的 Demo 基础上 1、在 <html>中增加 <head> 和 <body> 2、为网页指定标题 - 我的第一个HTML文档 3、指定网页的字符编码格式为 utf-8 4、在 body 中输出一句话 "我的第一HTML页面" 5、设置 body text为red，bgcolor为yellow 3、文本 1、特殊文本的实现页面的空格以及一些特殊字符需要通过转义字符的方式体现 1、表示一个空格 2、< 表示 4、© 表示© Demo : 1、创建一个页面 02-text.html 2、在页面中输出以下内容 The element. ©2017 By Tarena The <p> element. © By Tarena 2、文本样式相关标记 : 加粗 : 斜体 : 下划线 : 删除线 : 上标 : 下标 Demo ：这是一段包含，粗体，斜体，下划线，删除线，上标，下标的文本内容将以上文本内，对应文字的特殊效果，用标记体现出来 3、标题元素以醒目的方式表现出文本语法：一级标题二级标题三级标题四级标题五级标题六级标题属性： 1、align 文本的水平对齐方式取值：left / center / right 4、段落元素语法：属性：align : left / center / right Demo : 1、在 02-text.html 中，增加以下内容 1、用段落标记表示 :The first paragraph 2、用段落标记表示 :The second paragraph ，文本表现为右对齐 5、换行元素 6、分割线元素作用：在页面中表现为一条直线语法：属性： 1、size 尺寸，以 px 为单位的数值 2、width 宽度，以 px 或 % 为单位的数值 3、align 水平对其方式 4、color 颜色 Demo ： 02-text.html 中增加一根水平线，size为5px，宽度为50%，居中对齐，颜色为红色(red) 7、预格式化作用：保留源文档中的回车和空格的作用 8、分区元素 1、块分区元素语法：作用：布局 2、行内分区元素语法：作用：设置同一行文字内的不同样式 9、行内元素与块级元素按照元素们的表现形式来分类，分为行内元素和块级元素1、行内元素在一行内允许显示多个元素的，称为 "行内元素" span,i,b,s,u,sup,sub 作用：包裹文本，并处理文本的表现形式 2、块级元素每个元素独占一行显示的，称为 "块级元素" div,p,h1,h2,h3,h4,h5,h6 作用：布局注意： 1、p标记不能嵌套其它的块级元素 2、行内元素中最好不要嵌套块级元素 4、图像和链接 1、URL 目录结构：目录，保存文件的文件夹名称多个文件夹之间的关系，就是目录结构 1、什么是 URL URL (Uniform Resource Locator)，统一资源定位器。用来标识某资源文件的位置 2、URL 在 WEB 中的表现形式共三种表现形式： 1、绝对路径特点：从文件所在的最高级目录处开始查找资源文件所经过的路径，就是绝对路径使用场合：当想访问互联网上的资源时，只能用绝对路径完整的绝对路径分四部分： 1、协议名 http 2、域名(主机名，IP地址) www.codeboy.com 3、目录路径 img/header 4、文件名 logo.png http://www.codeboy.com/img/header/logo.png img/header/logo.png 2、相对路径(重点) 场合：使用本机文件时使用什么是相对路径：从当前文件位置处开始查找资源文件所经过的路径，就是相对路径 1、同目录，直接用 2、子目录，先进入 3、父目录，先返回 3、根相对路径路径形式是以 / 作为开始的。 / : 表示的是服务器的根路径 2、图像 1、图像格式 WEB中支持的图像格式 1、*.jpg 2、*.gif(动图) 3、*.png(透明) 2、图像的语法标记：属性： 1、src ：指定要显示图像的 URL 2、width ：图像的宽度 3、height ：图像的高度 4、title ：鼠标悬停时，要显示的文本 Demo : 1、将学子网的 logo 下载下来 2、显示在自己的网页中 3、超链接 1、语法标记：内容属性： 1、href : 要链接的HTML页面URL 2、target : 目标，指定新网页的打开形式取值： 1、_blank : 在新标签页中打开网页 2、_self : 在自身标签页中打开新网页(默认值) Demo 1、创建一个超链接，内容为：学子商城，点击时，在自身标签页中打开 http://www.codeboy.com 2、创建一个超链接，内容为：学子商城的LOGO，点击时，在新标签页中打开 http://www.codeboy.com 2、链接的四种表现形式 1、点击操作时，完成资源下载的操作链接的资源为 zip / rar 时则为下载操作下载 2、电子邮件链接联系我们前提：必须在计算机中安装并配置好至少一个邮件客户端的信息 3、返回页面顶部的空连接返回顶部 4、执行Javascript代码片段执行JS 3、锚点 1、作用锚点用于在网页中的某个位置处做个记号,允许从其他位置处跳转到记号位置处 2、使用方式 1、定义锚点 1、使用 a 标记的 name 属性允许定义锚点 xxxx 2、任何标记的 id 属性定义锚点 2、链接到锚点链接到锚点链接到锚点 5、表格 1、表格 1、表格的作用按照一定的格式来显示数据的表格是由 单元格(列)，行来组成的 2、表格的语法 1、标记 1、 : 表示一个表格 2、 : 表示表格中的一行 3、 : 表行中的一列(单元格) : 行/列标题 (加粗，水平居中) 4、 : 表格的标题该元素必须添加在之下，所有的tr之上 2、常用属性 1、table 1、width 2、height 3、align 设置表格的对齐方式， left / center / right 4、border 边框宽度，取值以 px 为单位的数值 5、bgcolor 6、cellspacing ：单元格外边距(单元格与单元格 或 单元格与表格之间的距离) 7、cellpadding : 单元格内边距(单元格与内容之间的距离) 2、tr 1、align 控制当前行内容的水平对齐方式 2、valign 控制当前行内容的垂直对齐方式 top / middle / bottom 3、bgcolor 3、td / th 1、align 2、valign 3、width 4、height 5、colspan ：跨列 6、rowspan ：跨行 Demo : 在刚才的表格基础上，增加以下内容 1、为表格增加边框 1px 2、为表格增加尺寸 400 * 400 3、为表格增加单元格内边距 5px 4、为第四行增加属性，内容水平居中对齐 3、表格的复杂应用 1、行分组允许将若干行划分到一个组中，以便实现统一管理 1、表头行分组允许将第一行的内容单独分到表头行分组中 2、表尾行分组允许将最后一行的内容单独分到表尾行分组中 3、表主体行分组 2、不规则表格创建通过 td 的跨行和跨列来实现不规则的表格 1、跨列从指定单元格位置处开始，横向向右，合并掉几个单元格(包含自己),被合并掉的单元格，要删除 2、跨行从指定单元格位置处开始，纵向向下，合并掉几个单元格(包含自己),被合并掉的单元格，要删除 3、表格的嵌套被嵌套的所有的内容，只能放在 td 中 2、列表 1、作用按照一定的格式显示数据 2、列表的分类 & 语法 1、列表的组成由列表类型以及列表项来组成 2、分类 & 语法 1、有序列表 --> Order List 允许包含若干列表项： --> List Item 2、无序列表 --> Unorder List 允许包含若干列表项： 3、属性 1、ol 1、type 1 、按数字方式排列,默认值 a 、按小写英文方式排列 A 、按大写英文方式排列 i 、按小写罗马数字排列 I 、按大写罗马数字排列 2、start 指定标识从几开始显示 2、ul 1、type 1、disc，实心圆,默认值 2、circle，空心圆 3、square，实心矩形 4、none 3、列表的嵌套被嵌套的内容只能放在 li 中 Demo : 1、声明一个列表在 html 中(有序)，包含两个列表项，显示两部小说的名字 2、在两个列表项中，再各嵌套一个无序列表，各写3-4个小说中的主角 3、定义列表 1、作用以一种特殊的结构来排列数据通常用语对一类事物/名词的解释上面 2、语法：声明一个定义列表：声明要解释的事物名称或名词：对上述名词或事物解释的内容 3、常用场合图文混排 3、结构标记 1、结构标记的作用搭建网页的结构(布局),用于替代 div，最大的优点是提升了标记的"语义性" 2、结构标记详解 1、<header></header> 作用：表示网页或某块内容的头部 2、作用：表示网页中的导航内容 3、作用：表示网页主体内容中的某一部分 4、作用：出现在文字描述性比较强的场合:一则新闻，论坛中的帖子，微博信息，博客的信息 5、作用：表示网页中，或某部分内容的边栏信息 6、作用：表示网页中尾部的信息 4、表单(难点) 1、表单的作用用于收集用户的信息并提交给服务器表单主体是由两部分组成的 1、表单元素收集信息，并提交给服务器 2、表单控件用于与用户交互的一些元素：文本框，密码框 2、表单元素(难点) 标记：<form></form> 注意：只有放在 <form></form> 里面的表单控件的值，才能提交给服务器属性： 1、action 提交给服务器处理程序的地址 (动作) 2、method 提交方式，以什么样的方式把数据交给服务器 1、get 特点： 1、以明文的方式将数据传递给服务器(提交的数据会显示在地址栏上) 2、安全性很低 3、提交数据最大限制为 2KB 4、向服务器要数据时可以使用 2、post 特点： 1、以隐式的方式将数据传递给服务器 2、安全性很高 3、不限制提交数据的大小 4、要提交数据给服务器处理时使用 3、... ... 3、enctype 作用：指定表单数据进行编码的方式取值： 1、application/x-www-form-urlencoded 默认值，允许将任意类型的文本提交给服务器 2、multipart/form-data 允许将文件提交给服务器 3、text/plain 不对任何数据进行编码和传输 Demo : 1、创建 05-form.html 2、声明一个表单元素 form 3、指定提交地址为 login.php,提交方式为 get，编码方式为默认 3、表单控件表单元素分类： 1、input元素 2、textarea 多行文本域 3、select 和 option 选项框 4、其它元素 5、新input元素详解： 1、input元素里面会包含若干个不同的表单控件标记：<input> 属性： 1、type 根据不同的type属性值，可以创建不同的input元素 2、name 定义表单控件的名称，主要提交给服务器使用的注意：如果不声明name属性的话，元素则无法提交给服务器 3、value 定义当前控件的值，主要提交给服务器使用的 4、disabled 禁用控件，无值的属性 <input disabled> 2、文本框与密码框文本框：<input type="text"> 密码框：<input type="password"> 具备除以上四个属性外，还具备以下几个独立属性： 1、maxlength 限制输入的字符数，取值为数字 2、readonly 只读，无值属性 Q : readonly 和 disabled 的区别 1、readonly ，是只读的意思，是允许提交给服务器，不让用户改数据而已 2、disabled ，是禁用的意思，不仅不让用户改数据，而且还不能提交给服务器 3、placeholder 占位符，即默认显示在文本框用于给用户提示的文字 3、按钮 1、提交按钮作用：将表单提交给服务器标记：<input type="submit" value="显示的文本"> 2、重置按钮作用：将表单恢复到初始化的状态标记：<input type="reset" value="显示的文本"> 3、普通按钮作用：通过 JS 自定义功能标记：<input type="button" value="显示的文本"> 4、显示的内容属性： 1、type ：submit / reset / button 4、单选按钮和复选框单选按钮：<input type="radio"> 复选框：<input type="checkbox"> 属性： 1、name 设置名称，并用于分组，一组单选按钮或复选框的名称必须相同 2、value 必须设置 3、checked 默认被选中，无值属性 5、隐藏域和文件选择框 1、隐藏域 <input type="hidden" name="" value=""> 想提交给服务器，但不想给用户看的数据，可以放在隐藏域中 2、文件选择框 <input type="file" name=""> 注意： 1、form的 method 属性值必须为 post 2、form的 enctype属性值必须为 multipart/form-data http://localhost/02-HTML/Day02/login.php?uname=wenhua.li&upwd=bingbing http://localhost/02-HTML/Day02/login.php?uname=wenhua.li&upwd=fengjie&gender=1&question=0&question=1&question=2&question=3 http://localhost/02-HTML/Day02/login.php?uname=wenhua.li&upwd=fdsafdsafdsa&gender=0&question=0&question=1&question=2&question=3&uid=10000567789 1、表单 1、form ... 2、input ... 3、textarea 控件标记：<textarea></textarea> 属性： 1、name 定义名称，提交给服务器使用 2、cols 指定文本域的列数，变相指定宽 3、rows 指定文本域的行数，变相指定高 4、readonly 只读 Demo : 创建 01-form.html 文件创建一个多行文本域，列数为 50，行数为 5，名称为 intro 4、选项框 1、标记表示下拉列表或滚动列表列表中的内容，允许出现多个 2、属性 1、 1、name ：控件的名称 2、size ：默认显示选项的数量，默认为1，为下拉列表，如果取值>1的话，则为滚动列表 3、multiple 设置多选，无值的属性 2、 1、value ：选项的值，提交给服务器用 2、selected ：默认被选中 5、其它标记 1、label 元素作用：关联文本与表单控件的，点击文本时就如同点击表单控件一样标记：文本属性： 1、for 指定要关联的表单控件的ID值 2、为控件分组分组标题分组中的内容 3、浮动框架 1、作用将其他页面导入到当前页面中来 2、语法标记：<iframe></iframe> 属性： 1、src 要引入的页面的url 2、frameborder 指定浮动框架的边框，默认为1，则显示边框不需要边框则设置为 0 3、width 4、height 练习：创建一个 02-iframe 的网页，将 01-form.html 页面引入进来，适当调整宽度，高度，边框 6、新input元素 (HTML5) 1、电子邮件类型作用：提交时会验证数据是否符合Email的规范标记：<input type="email"> 2、搜索类型作用：在文本框的基础上，提供了快速清除操作标记：<input type="search"> 3、URL类型作用：提交时会验证数据是否符合Web站点的URL规范(绝对路径) 标记：<input type="url"> 4、电话号码类型作用：在移动端设备中，能展开拨号键盘，在PC中无效标记：<input type="tel"> 5、数字类型作用：只能让用户输入或选择数字标记：<input type="number"> 属性： 1、min ：当前控件接受的最小值 2、max ：当前控件接受的最大值 3、step ：微调数字时每次变化的长度,默认为1 6、范围类型作用：提供一个滑块，让用户选择数字标记：<input type="range"> 属性： 1、min ：当前控件的最小值 2、max ：当前控件的最大值 3、value ：设定初始值 7、颜色类型作用：提供一个颜色拾取控件语法：<input type="color"> 8、日期类型作用：提供一个日期输入控件标记：<input type="date"> 9、周类型作用：提供一个日期控件，用于选取周标记：<input type="week"> 10、月份类型作用：选取月份控件标记：<input type="month"> =============================

目录第1篇基础篇第1章开发环境 2 1.1 AppServ——PHP集成化安装包 3 实例001 通过AppServ配置PHP开发环境 3 实例002 AppServ应用技巧 6 实例003 第1个PHP程序 7 1.2 XAMPP——PHP集成化安装包 8 实例004 通过XAMPP配置PHP开发环境 8 实例005 测试XAMPP是否安装成功 11 实例006 XAMPP应用技巧 12 实例007 第2个PHP程序 13 1.3 IIS+PHP+MySQL——独立搭建PHP 开发环境 14 实例008 安装PHP 14 实例009 安装MySQL 15 实例010 安装IIS 21 实例011 第3个PHP程序 23 1.4 LAMP——独立配置PHP开发环境 24 实例012 安装Apache服务器 24 实例013 安装MySQL数据库服务器 26 实例014 安装PHP.50 28 实例015 第4个PHP程序 30 1.5 XAMPP——Linux版PHP集成化安装包 31 实例016 XAMPP——Linux下PHP开发环境的集成化 31 实例017 Linux操作系统下启动XAMPP 32 实例018 设置MySQL数据库root用户的密码 33 实例019 第5个PHP程序 34 1.6 Dreamweaver开发工具 35 实例020 Dreamweaver中编码格式的选择 35 实例021 Dreamweaver中创建表格 36 实例022 在表格中插入宠物照片 38 实例023 Dreamweaver创建表单 40 实例024 Dreamweaver中创建和附加CSS样式 42 实例025 Dreamweaver控制弹出信息 45 实例026 Dreamweaver控制浏览器的窗口 46 实例027 通过Dreamweaver创建站点 47 实例028 通过Dreamweaver开发第1个PHP程序 48 1.7 Zend Studio开发工具 50 实例029 安装Zend Studio 50 实例030 Zend Studio创建PHP项目 52 实例031 Zend Studio编码格式的转换 56 实例032 Zend Studio中快捷键的运用 57 实例033 Zend Studio中部署Apache服务器 60 第2章 PHP基础 63 2.1 基本语法 64 实例034 在页面中打印PHP的配置信息 64 实例035 在页面中打印服务器时间 65 实例036 在页面中打印当前执行的PHP文件名 67 实例037 区分单引号和双引号 68 实例038 动态输出JavaScript代码 69 实例039 当数字遇到了字符串 70 实例040 PHP程序员的基础——变量的应用 72 实例041 打印系统环境变量信息print_r（$_ENV） 73 实例042 使用可变变量输出“I Like PHP！” 73 实例043 使用转义字符输出特殊字符 74 实例044 使用常量指定PI的值计算圆的面积 75 2.2 运算符 75 实例045 自定义数字的加密/解密算法 76 实例046 比较两个时间戳的大小 77 实例047 使用条件运算符判断数字的奇偶性 78 实例048 判断用户是否具有后台管理权限 79 实例049 打印随机组合生日祝福语 80 实例050 打印2000~2020年的所有闰年 81 实例051 前置运算符和后置运算符的区别 82 实例052 使用位运算对数字进行加密和解密 83 2.3 包含语句 84 实例053 提高代码重用率 84 实例054 包含数据库连接文件 85 实例055 包含网站头文件 86 实例056 包含网站尾文件 87 实例057 包含网站的主文件 88 2.4 条件语句 89 实例058 员工生日提醒 89 实例059 考试成绩评定标准 90 实例060 控制登录用户权限 91 实例061 网页框架的制作 92 实例062 图片验证码 93 实例063 健康生活提醒 95 2.5 循环控制 96 实例064 员工生日列表 96 实例065 员工详细信息浏览 97 实例066 员工信息的批量删除 98 实例067 表格的动态创建 99 实例068 SESSION购物车中数据的读取 100 实例069 员工信息的管理 102 实例070 网页版九九乘法表 104 实例071 读取数组购物车中的数据 105 实例072 图像验证码的生成 106 2.6 跳转语句 107 实例073 控制页面中表情图的输出 107 实例074 控制页面中数据的输出数量 108 实例075 动态改变页面中单元格的背景颜色 109 实例076 屏蔽偶数次的数据输出 110 实例077 跳过数据输出中指定的记录 111 实例078 执行指定次数的循环 112 2.7 自定义函数 113 实例079 自定义函数截取中文字符串 113 实例080 公告标题的截取 114 实例081 论坛内容的简短输出 116 实例082 自定义函数过滤字符串 117 2.8 字符串 118 实例083 过滤论坛帖子中的空白和特殊字符 118 实例084 对论坛帖子的内容进行转义 119 实例085 还原论坛中帖子的内容 120 实例086 截取论坛标题 121 实例087 分割、合成字符串 121 实例088 查询关键字描红 122 实例089 统计查询关键字的出现次数 123 实例090 获取上传文件的后缀 124 实例091 统一上传文件名称的大小写 125 实例092 论坛中直接输出HTML脚本 126 实例093 统计帖子标题的长度 127 实例094 计算论坛帖子的字节数 128 实例095 实现帖子内容的定位查找 129 实例096 去除帖子标题的首尾空格 129 实例097 货币数据的格式化输出 130 实例098 日期、时间的格式化输出 131 实例099 比对论坛中帖子的相似度 132 实例100 对用户注册的密码进行加密和解密 132 实例101 保护URL地址中传递的参数 133 实例102 解析URL地址中传递的编码参数 134 实例103 转义帖子中的特殊字符 135 实例104 获取任意字符的ASCII码 136 实例105 查找指定ASCII码对应的字符 136 实例106 合理定义上传文件的名称 137 实例107 通过异或方式对用户注册密码进行加密 139 实例108 统一英文注册用户首字母的大小写 139 实例109 字符串与数字之间的转换 140 实例110 通过正则表达式对字符串进行匹配查找 141 实例111 通过IP地址查找主机所在地 142 实例112 解决用substr（）函数对中文字符串截取时出现乱码的问题 143 实例113 字符串与HTML标记相互转换 144 实例114 运用PHP 5.0新型字符串输出XML数据 145 实例115 判断字符串中是否存在指定子串 146 2.9 正则表达式 147 实例116 验证电话号码的格式是否正确 147 实例117 验证Email地址格式是否正确 148 实例118 验证IP地址是否有效 149 实例119 统计关键字的查询结果 150 实例120 计算查询操作的执行时间 151 实例121 查询关键字描红 152 实例122 判断上传文件的类型 153 实例123 判断邮政编码格式是否正确 154 2.10 数组 154 实例124 创建并输出数组 155 实例125 统计数组元素个数 156 实例126 向数组中添加元素 156 实例127 将数组中指定索引位置的元素替换 157 实例128 获取数组中最后一个元素 158 实例129 去除数组中的重复元素 158 实例130 字符串与数组的转换 159 实例131 对数组元素进行随机排序 160 实例132 随机抽取数组中元素 161 实例133 二维数组的输出 162 实例134 获取数组当前的键名和值 162 实例135 检测数组中是否存在某个值 163 实例136 获取数组中的当前单元 164 实例137 从数组中随机取出元素 165 实例138 合并数组 166 实例139 拆分数组 167 实例140 遍历数组 168 2.11 日期和时间 169 实例141 设置系统的当前时间 169 实例142 将日期和时间转换为时间戳 170 实例143 获取系统中的特定日期和时间 171 实例144 比较时间的大小 172 实例145 计算考试时间 173 实例146 倒计时 173 实例147 网页闹钟 174 实例148 计算程序运行时间 176 第3章 Web页面交互 178 3.1 获取表单元素的值 179 实例149 设计论坛登录界面 179 实例150 可以上传图片的表单 180 实例151 通过POST方法提交表单元素 182 实例152 通过$_POST方法获取表单元素 182 实例153 通过GET方法提交表单元素 184 实例154 通过$_GET方法获取表单元素 185 3.2 文本框组件的应用 186 实例155 以文本域的形式显示数据信息 186 实例156 限制多行文本域输入的字符个数 187 实例157 设置文本框的只读属性 188 实例158 自动计算金额 189 实例159 为文本框设置默认值 190 实例160 设置文本框的样式 191 实例161 文本域的滚动条 192 3.3 下拉列表的应用 193 实例162 省市级联动菜单 193 实例163 省市县级联动菜单 194 实例164 应用下拉列表选择所要联机的网站 196 实例165 可输入字符的下拉菜单 197 实例166 设置下拉列表的默认值 198 实例167 设置下拉列表的样式 199 实例168 下拉列表打开窗口 200 实例169 Tab键在文本域中的体现 201 3.4 表单元素的动态操作 203 实例170 投票系统中单选按钮与复选框的应用 203 实例171 选中单选按钮后显示其他表单元素 205 实例172 不提交表单获取单选按钮的值 207 实例173 实现复选框中的全选、反选和不选 208 实例174 隐藏域提交用户的ID值 210 实例175 图像域替代提交按钮 211 实例176 跳转菜单实现页面跳转 213 实例177 上传图片预览 214 实例178 去掉下拉选项的边框 215 实例179 修改表单属性为弹出窗口 216 实例180 表单输入单元的文字设置 217 实例181 表单输入单元单击删除 218 实例182 表单文本输入的移动选择 219 实例183 通过下拉列表选择头像 220 3.5 CSS+DIV页面布局 222 实例184 应用CSS+DIV实现无边框窗口 222 实例185 设置表格样式 224 实例186 设置图片的样式 225 实例187 滚动条样式 226 实例188 设置表单样式 227 实例189 设置超链接的样式 229 实例190 设置body的样式 230 实例191 模拟的进度条 231 实例192

87,922

社区成员

224,618

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章