js获取某元素的class里面的css属性值代码
11
收藏
-
用js如何获取div中css的 margin、padding、height、border等。你可能说可以直接用document.getElementById(“id”).style.margin获取。但是你说的只能获取直接在标签中写的style的属性，无法获取标签style外的属性（如css文件中的属性)。而下面方法则两者值都可以获取。实例效果图如下: js在获取css属性时如果标签中无style则无法直接获取css中的属性，所以需要一个方法可以做到这点。getStyle(obj,attr) 调用方法说明：obj为对像,attr为属性名必须兼容js中的写法(可以参考：JS可以控制样式的名称
34KBjs获取某元素的class里面的css属性值代码
2020-10-26主要介绍了js获取某元素的class里面的css属性值代码，有需要的朋友可以参考一下
- 57KB
jQuery修改class属性和CSS样式整理
2020-12-12class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个class属性.但是class属性的值可以是多个名称,即可能包含一个词的列表,中间用空格分隔. 具体使用方法见:http://www.w3school.com.cn/css/css_selector_class.asp 用jQuery进行类名修改既可以用attr()方法修改”class”属性,也可以用addClass(), removeClass(), toggleClass()等方法来完成. addClass()
- 29KB
js中设置元素class的三种方法小结
2020-10-28列举所有的方式，看看各浏览器的支持差异。方便用js动态设置元素css的代码。需要的朋友可以参考下。
- 52KB
原生js获取元素样式的简单方法
2020-11-27我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式，方法有很多，比如：通过更改DOM元素的class。现在我们讨论原生js来获取DOM元素的CSS样式，注意是获取不是设置 在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是，如果没有给元素设置任何样式，也会把浏览器默认的样式返回来。 1、ele.style 在学习DOM的时候就看到通过ele.style来获取元素样式值，但是有时候获取的并非是节点的样式值，而是空值。这是因为ele.style只能获取写在元素标签中的style属性里的样式值，无法获取到定义在<style></style>和通过<link href=”cs
405KBbootstrap校验表单js css
2018-02-10能够增加兼容性的强大框架.导入需要的css和js文件（JS中username，password等键值名和input标签中name属性值对应），运行就能够进行非空，长度验证，完全不需要管css样式
30KBC++ 课程设计 旅馆预定系统
2009-06-26主要功能如下 1.读取Hotel.dat旅店信息, 加入新旅店信息, 并且写入文件Hotel.dat. 包括系统编号, 旅店名, 所在城市, 标准间数量, 价格 ,可预定数 ,豪华间数量, 价格, 可预订数. 2.读取Resort.dat渡假村信息, 加入新度假村信息,并且写入文件Resort.dat. 包括系统编号, 渡假村名, 所在城市, 渡假村间数量, 价格 ,可预定数. 3.读取Booking.dat已有预定信息, 加入新预订信息, 并且写入文件 Booking.dat. 预订的旅馆或渡假村房间与已存旅馆渡假村数据相关联, 通过预订使可预订房间数减少.并且记录预定人的姓名, 联系方式等内容. 4.取消预订信息,写入Booking.dat. 通过取消预定, 删除原有预订信息, 使相应的可预订房间数增多. 5.查看某城市旅馆与度假村详细信息 ,通过城市名查找这个城市所有的旅馆与渡假村的名字, 房间数等信息. 6.显示所有旅馆信息. 7.显示所有渡假村信息. 8.显示所有预订的信息.
- 4.42MB
JS学习笔记相关代码-测试代码
2019-06-05JS学习笔记相关文档 Login.html学习 placeholder 属性规定可描述输入字段预期值的简短的提示信息（比如：一个样本值或者预期格式的短描述）。 该提示会在用户输入值之前显示在输入字段中。 注意：placeholder 属性适用于下面的 input 类型：text、search、url、tel、email和password。 测试样例参见test/placeholder.html 局部刷新 class="toolbar clearfix" ToolBar 隐藏掉系统原先的导航栏 clearfix 主要是用在浮动层的父层，而 clear 主要是用在浮动层与浮动层之间，和浮动层同一级，如果想要撑开父层的高度，clear 就要放在最后。 Bootstrap 模态框（Modal）插件 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 如果需要引用该插件功能，需要引入modal.js OR bootstrap.js OR bootstrap.min.js 用法：通过 data 属性在控制器元素（比如按钮或者链接）上设置属性data-toggle="modal"，同时设置 data-target="#identifier"或href="#identifier"来指定要切换的特定的模态框（带有 id="identifier"）。 测试样例参见test/Modal.html function($) javascript中(function($){...})(jQuery)写法是指的是是匿名函数。 function(arg){...}这也定义了一个匿名函数，参数为arg。 测试样例参见test/AnonymousFunction.html .navbar-fixed-top使导航条固定在顶部 Index.html学习 Font Awesome 图标 Font Awesome 是一套绝佳的图标字体库和CSS框架。 Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。 如果需要该插件功能，需要引入font-awesome.css OR font-awesome.min.css <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"> </head> <body> <i class="fa fa-car"></i> <i class="fa fa-car" <i class="fa fa-car" </body> </html> 测试样例参见test/tubiao.html 1、列表图标 <ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>List icons</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li> <li><i class="fa-li fa fa-square"></i>List icons</li> </ul> 2、动态图标 <i class="fa fa-spinner fa-spin"></i> <i class="fa fa-circle-o-notch fa-spin"></i> <i class="fa fa-refresh fa-spin"></i> <i class="fa fa-cog fa-spin"></i> <i class="fa fa-spinner fa-pulse"></i> 3、旋转和翻转的图标 <i class="fa fa-shield"></i> <i class="fa fa-shield fa-rotate-90"></i> <i class="fa fa-shield fa-rotate-180"></i> <i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class="fa fa-shield fa-flip-vertical"></i> 4、图标抖动√ <!-- 测试图标抖动--> 测试<i class="ace-icon fa fa-envelope icon-animated-vertical"></i> <p> 经测试：图标抖动与bootstrap.min.css；font-awesome.min.css；ace.min.css相关联</p> 测试样例参见test/tubiao2.html PS:fa-angle-double-down双箭头向下指示的图标，展开操作时用。 任务折叠+进度控制 主要是li标签的循环嵌套，浮于上层的列表需要引入jquery-2.1.4.min.js，bootstrap.min.js以使用dropdown等属性实现展开与折叠特性 进度控制， 除了使用<div class="progress-bar progress-bar-success"></div>直接控制进度条的长度外，还可以使用如下功能： <progress value="50" max="100"></progress>以实现进度条的变更控制，从后台获取数据，并计算其百分比并显示在前端。 分别使用progress-bar,progress-bar-warning,progress-bar-danger,progress-bar-success表示其安全与否等级。 测试样例分别参见test/liTag.html, test/progress.html 评论与回复 评论区的滚动：设置定量高度，在文字被排满的情下，自动加入滚动条 <div class="test"></div> <input type="text" id="test"/><input type='button' value='提交' [removed] function fun(){ var str = document.getElementById("test").value; var divs = document.getElementsByTagName("div"); for(i=0;i<divs.length;i++){ if(divs[i].className == "test"){ divs[i][removed] += "" +str+"</br>"; } }} [removed] 可实现评论提交功能。 也可通过与后台交互的方式，如发送post请求，提交给后台，后台审核通过后，通过servlet机制再传送给前端。 测试样例分别参见test/comment.html, test/comment2.html
- 88.7MB
超实用的jQuery代码段
2019-03-04超实用的jQuery代码段精选近350个jQuery代码段，涵盖页面开发中绝大多数要点、技巧与方法，堪称史上最实用的jQuery代码参考书，可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨设备、跨浏览器，充分向读者演示了如何使用jQuery的各项技术，实现令人激动的网页效果。 《超实用的jQuery代码段》从jQuery框架的使用原理与应用场景出发，对最实用的jQuery代码段进行了全方位的介绍和演示。全书分为11章，包含网页效果、DOM元素与属性、HTML事件、CSS样式、用户输入自动完成、拖放、图形图像、AJAX、算法、jQuery Mobile应用、浏览器、Cookies等jQuery技术内容，对提高网站开发人员和设计人员的jQuery技术水平有指导作用。 超实用的jQuery代码段 目录： 序1 jQuery必知必会 VIII 序2 你绝对不可能全部做对的jQuery题 XVI 序3 最流行的前端面试题 XXIII 第1章 jQuery操作网页 1.1 显示或隐藏网页内容 1.2 切换页面的显示或隐藏 1.3 实现幻灯片式的淡入淡出效果 1.4 切换页面的淡入淡出 1.5 页面的滑动隐藏 1.6 切换页面的滑动 1.7 图片的动画效果 1.8 停止动画效果 1.9 不可不知的Callback回调 1.10 提高效率的链式（Chaining）操作 1.11 在新窗口中打开链接 1.12 强制在弹出窗口中打开链接 1.13 平滑滚动页面到某个锚点 1.14 阻止文本行换行 1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 1.20 设置Flash对象的WMode窗口模式 1.21 实现类Twitter的字数限制效果 1.22 提示文本的隐藏与显示 1.23 实现文字闪烁效果 1.24 实现文字动画效果 1.25 实现文字跟随鼠标移动变化的动画效果 1.26 文本域中光标的定位 1.27 实现可折叠效果 1.28 文本框内容自动缩进 1.29 禁止页面滚动的方法 1.30 页面加载后消息框居中显示 1.31 创建页面固定浮动栏的方法 第2章 jQuery操作DOM元素 2.1 如何验证某个元素是否为空 2.2 检查特定的HTML元素是否存在 2.3 判断HTML元素是否嵌套 2.4 获取当前元素的索引值 2.5 插入节点元素 2.6 复制节点元素 2.7 替换节点元素 2.8 删除节点元素 2.9 为元素绑定事件 2.10 如何从元素中除去HTML标签 2.11 如何限制文本域中字符的个数 2.12 如何选中页面上的所有复选框 2.13 禁用表单的回车键提交 2.14 禁用右键单击上下文菜单 2.15 IE下禁用文本选择功能 2.16 输入框获取焦点时文本高亮提示 2.17 实现多个输入框同步操作 2.18 在新窗口中打开外部链接 2.19 jQuery实现outerHTML属性 2.20 实现带固定表头的表格 2.21 为表单内控件设定缺省数值和文本 2.22 防止单个页面重复提交按钮 2.23 取得列表控件选中的option对象 2.24 限制输入框仅接受特殊字符的输入 2.25 禁止页面内全部超链接 2.26 实现动态组合列表框 2.27 如何使用属性过滤器 2.28 如何测试某个元素是否可见 第3章 jQuery操作HTML事件 3.1 禁止或启用输入框 3.2 实时监听输入框字符的变化 3.3 实时监听输入框值的变化 3.4 绑定鼠标右键单击事件 3.5 双击不选中文本 3.6 通过单击事件添加或解除绑定 3.7 激活整个div层的单击事件 3.8 鼠标单击实现div的选取 3.9 模拟鼠标单击事件 3.10 设定时间间隔的方法 3.11 设定时间延迟的方法 3.12 延时显示子菜单的方法 3.13 通过事件获取页面加载时间 3.14 如何为动态添加的元素绑定事件处理函数 3.15 为表格行增加单击事件 3.16 用回车键模拟Tab键 第4章 jQuery操作CSS样式 4.1 使用addClass（）函数动态添加样式类 4.2 使用removeClass（）函数动态移除样式类 4.3 使用toggleClass（）函数切换页面元素的样式类 4.4 为body增加class类支持 4.5 操作div的显示与隐藏 4.6 如何设定div始终居中显示 4.7 测试浏览器是否支持某些CSS 3属性 4.8 如何添加hover类到指定元素 4.9 基于URL地址为导航链接添加class样式 4.10 如何延迟添加class类 4.11 如何延迟清除class类 4.12 动态调整页面的字体大小 第5章 jQuery实现用户输入自动完成功能 5.1 最简单的用户输入自动完成 5.2 使用远程数据源的自动完成 5.3 带缓存的自动完成 5.4 带滚动条的自动完成 5.5 Combobox风格的自动完成 5.6 读取XML数据的自动完成 5.7 多维数据的自动完成 第6章 jQuery实现拖放功能 6.1 基本拖放功能 6.2 基于事件的拖放 6.3 限制移动范围的拖放 6.4 延迟进行的拖放 6.5 具有对齐功能的拖放 6.6 自动滚动的拖放 6.7 反转位置的拖放 6.8 使用事件监控拖曳次数 6.9 拖动时动态更改鼠标的光标类型和位置 6.10 拖曳并放置到目标容器 6.11 限制可放置的元素 6.12 实现可拖放的购物车 6.13 可排序的拖放 6.14 在多个列表之间进行拖放 6.15 使用拖动方式选择多个元素 6.16 在两个Tab标签之间进行元素拖动 6.17 拖动表格选择多行数据 6.18 拖动表格时自动选中复选框 6.19 拖动表格行并放置到目标位置 6.20 表格的拖动排序 6.21 拖动调整控件的大小 6.22 调整控件大小时设置调整约束 6.23 使用拖动的方式调整表格的宽度 6.24 设计可改变单元格宽度并可以多选的表格 第7章 jQuery操作图形图像 7.1 如何更好地处理图片法显示问题 7.2 如何显示图片直到页面加载完成 7.3 预加载显示图片的方法 7.4 Facebook风格的图片预加载 7.5 检查图片src是否有效 7.6 上下滑动的图片 7.7 淡入淡出一幅图片，进入另一幅图片 7.8 获取图片原生尺寸的方法 7.9 检查图像是否已经被完全加载 7.10 单击改变背景图案 7.11 如何显示Flickr网站的图片 7.12 如何显示Google Picasaweb的图片 7.13 按比例调整图片的大小 7.14 滑动效果的背景图片 7.15 动态表单生成图片预览 7.16 平滑滚动的导航菜单 7.17 图片的放大预览 7.18 实现平滑的图片动态缩放效果 7.19 自动适应的窗口背景 7.20 如何判断加载多张图片的完成状态 7.21 鼠标悬停时的图片放大 7.22 淡出图片，淡入另一幅图片 7.23 页面加载时随机显示图片 7.24 按顺序淡入图片显示 7.25 检测图片的URL是否有效 7.26 强制显示图片的方法 7.27 实现可拖动显示的图片 第8章 jQuery实现AJAX 8.1 动态加载外部文件 8.2 动态加载外部网页 8.3 加载网页文件内容并传递服务器端参数 8.4 使用AJAX刷新删除网页记录 8.5 使用AJAX异步验证用户名和密码 8.6 页面滚动时加载新的网页内容 8.7 打造自己的站内搜索引擎 8.8 异步加载并解析XML文件 8.9 动态加载HTML内容到标签页中 8.10 使用AJAX刷新异步提交表单 8.11 使用AJAX刷新上传图片 8.12 使用AJAX刷新验证PHP会话是否有效 8.13 在AJAX异步调用时显示加载指示器 8.14 在AJAX异步调用时处理JSON数据 8.15 解析XML数据并加载到HTML表格 8.16 jQuery AJAX错误的处理方法 8.17 在页面级创建全局的AJAX监听器以及状态指示器 8.18 级联AJAX数据异步加载 8.19 取消AJAX异步请求 第9章 jQuery常用算法 9.1 jQuery遍历算法 9.2 jQuery祖先算法 9.3 jQuery后代算法 9.4 jQuery同胞算法 9.5 jQuery过滤算法 9.6 对一个列表进行排序 9.7 实现JSN对象数组的排序 9.8 将12343778转成12.343.778的形式 9.9 模拟抽奖程序 9.10 实现冒泡算法 9.11 查询数组中特定数值 9.12 从数组中移除特定数值 9.13 根据指定正则表达式识别超链接 9.14 验证Email地址的正确性 9.15 动态统计字符个数 9.16 使用jQuery验证用户年龄 9.17 按照首字母进行元素排序 9.18 获取URL地址的Hash参数 9.19 避免多行文本溢出的算法 9.20 随机选择一个元素 9.21 替换＆bnsp；空字符的方法 9.22 序列化表单到JSON数据 9.23 获取页面加载时间 9.24 将单个句子打断显示 9.25 限制只能输入中文、英文或数字 9.26 日期类型与时间戳的转换 9.27 使用数组模拟打字效果 9.28 获取数组中特定索引的最高值 9.29 清除所有的表单内容 9.30 用jQuery删除空白标签和具有非中断空格的标签 第10章 jQuery Mobile移动开发技巧 10.1 让页面自适应屏幕宽度 10.2 在移动设备页面中创建多个显示视图 10.3 创建对话框显示效果 10.4 从外部文件中加载页面内容 10.5 为页面添加转场效果 10.6 设置全局默认的转场效果 10.7 定制显示回退按钮 10.8 在标题栏中添加导航栏 10.9 在页脚区域添加导航栏 10.10 添加可折叠的导航按钮 10.11 实现可折叠的输入表单 10.12 实现手风琴样式的折叠面板 10.13 使用网格打造简单的九宫格界面 10.14 可动态隐藏的页眉和页脚 10.15 最简单的手机相册 10.16 在列表框上添加气泡提示 10.17 在列表框上添加自定义按钮 10.18 为列表添加自定义的缩略图图标 10.19 创建列表日历的效果 10.20 动态创建listview列表项 10.21 动态加载和切换页面 10.22 在页面切换时显示加载进度框 10.23 在屏幕旋转时更改显示样式 10.24 在列表框中实现加载更多效果 10.25 自定义选择菜单 10.26 使用多个选择菜单进行组合选择 10.27 使用多选菜单选择多个值 10.28 创建双重范围的滑块 10.29 实现开关效果的选择功能 10.30 创建主题化的表单效果 第11章 其他常用代码段 11.1 判断jQuery库是否被加载 11.2 解决jQuery库冲突的方法 11.3 jQuery版本检查方法 11.4 解决jQuery版本冲突问题 11.5 如何设置IE特有的功能 11.6 判断浏览器类型并设置HTML元素内容 11.7 加载Google CDN的jQuery库 11.8 Cookies应用方法 11.9 使用cookie.js管理Cookies 11.10 让Cookies在N分钟后过期 11.11 如何删除Cookies 11.12 获取当前页面的URL并添加样式 11.13 向表格追加一行数据 11.14 获取客户端IP 11.15 向Firebug的控制面板发送消息 11.16 根据不同的屏幕大小显示不同的网页 11.17 jQuery遍历对象的属性 11.18 最优化的循环语句写法 11.19 如何构建最优化的字符串 11.20 使用jQuery产生GUID值 11.21 使用jQuery实现聚合函数 11.22 用jQuery打印网页的特定区域 11.23 禁止表单被提交 11.24 使用delay（）延迟执行动画 11.25 在网页上运行本地程序的方法 11.26 动态过滤HTML表格中的内容 11.27 使用递归函数创建文字闪烁特效 11.28 使用ID选择器加快选择的速度 11.29 在类选择器前用标签选择器加快速度 11.30 缓存jQuery对象以提升性能 11.31 使用find（）函数提升子查询的性能 11.32 使用jQuery操作DOM的限制
- 32KB
vue 实现根据data中的属性值来设置不同的样式
2020-10-14主要介绍了vue 实现根据data中的属性值来设置不同的样式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
- 9.29MB
《HTML+CSS+javascript实用详解》随书实例
2009-02-18第3章（\chapter3） 示例描述：本章演示网页的整体设置。 base.htm 基元信息设置。 body.htm 页面主体背景颜色设置。 body_bg.htm 页面主体背景图片设置。 body_bg2.htm 页面主体背景图片样式设置。 index.htm 第一个网页的制作示例（第2章）。 margin.htm 页面边距设置。 tips.htm HTML代码注释设置。 title.htm 页面标题设置。 第4章（\chapter4） 示例描述：本章演示网页的整体设置。 a.htm 超级链接示例。 a_anchor.htm 超级链接锚点示例。 font_color.htm 文本颜色设置示例。 font_face.htm 文本字体设置示例。 font_h.htm 文本标题设置示例。 font_size.htm 文本尺寸设置示例。 font_style.htm 文本样式设置示例。 hr.htm 水平线设置示例。 html.htm 忽略标签的设置示例。 mail.htm 邮件链接的设置示例。 mar.htm 文字滚动的设置示例。 other.htm 其他修饰标签的设置示例。 p.htm 段落的设置示例。 string.htm 特殊字符的设置示例。 ul_ol.htm 列表的设置示例。 第5章（\chapter5） 示例描述：本章演示网页的整体设置。 img.htm 图片的对齐设置示例。 img_a.htm 图片的链接设置示例。 img_align.htm 图片的对齐设置示例。 img_alt.htm 图片的提示文字设置示例。 img_map.htm 图片的热区设置示例。 img_mar.htm 图片的滚动设置示例。 img_type.htm 不同的图片格式展示。 第6章（\chapter6） 示例描述：本章演示网页的整体设置。 bgsound.htm 页面背景音乐设置示例。 media_a.htm 页面插入多媒体资源示例。 time.htm 连接外部JavaScript程序示例。 第7章（\chapte7） 示例描述：本章演示网页的整体设置。 table.htm 3行5列的表格制作示例（Dreamweaver）。 table2.htm 用表格布局网页示例（Dreamweaver）。 table3.htm 完整的数据表格示例。 table4.htm 表格整体设置示例。 table_bg.htm 表格整体设置示例。 table_border.htm 表格边框设置示例。 table_border2.htm 表格边框设置示例2。 table_border3.htm 表格边框设置示例3。 table_cell.htm 表格间距设置示例。 table_html.htm 嵌套表格布局网页示例。 table_table.htm 表格的嵌套示例。 table_td.htm 表格的单元格设置示例。 table_tr.htm 表格的行设置示例。 第8章（\chapte8） 示例描述：本章演示网页的整体设置。 form.htm 表单整体设置示例。 form_1.htm 单行文本框和密码框控件设置示例。 form_2.htm 多行文本框控件设置示例。 form_3.htm 不同类型的按钮控件设置示例。 form_4.htm 单选框控件和复选框控件设置示例。 form_5.htm 下拉列表和列表框控件设置示例。 form_6.htm 图像域控件、文件域控件和隐藏域控件设置示例。 form_7.htm 表单控件的分组方法示例。 form_8.htm 用户注册表单页面示例。 form_rec.asp 显示提交数据的ASP页面。 第9章（\chapte9） 示例描述：本章演示网页的整体设置。 bottom.htm 底部帧链接页面示例。 frameset.htm 框架页面示例。 frameset_2.htm 复杂框架页面示例。 frameset_3.htm 框架综合示例。 iframe.htm 内嵌页面示例。 index.htm 浮动框架页面示例。 left.htm 左边帧链接页面示例。 left_2.htm 左帧页面示例。 mid.htm 中间帧链接页面示例。 right.asp 右边帧链接页面示例。 right_2.asp 右帧页面示例。 top.asp 顶部帧链接页面示例。 top_2.asp 顶帧页面示例。 第10章（\chapte10） 示例描述：本章演示网页的整体设置。 css.htm XHTML+CSS简单布局示例。 is_class.htm 常用接口示例。 table.htm 简单表格布局示例。 第11章（\chapte11） 示例描述：本章演示网页的整体设置。 box_border.htm 边框样式设置示例。 box_margin.htm 外边距设置示例。 box_padding.htm 内边距的设置示例。 div.htm 初识div标签示例。 div_2.htm 设置div样式示例。 div_align.htm 设置div水平居中示例。 div_clear.htm div的清除属性示例。 div_demo.htm 右边div元素宽度自适应示例。 div_demo2.htm div内容居中示例。 div_div.htm div嵌套示例。 div_float.htm 设置div浮动示例。 div_page.htm div网页布局示例。 nav_ul.htm 导航条布局示例。 nav_ul_a.htm 制作互动导航条示例。 nav_ul_li.htm Firefox下导航条制作示例。 pos_ab.htm CSS绝对定位示例。 pos_fix_li.htm CSS固定定位示例。 nav_rel.htm CSS相对定位示例。 第12章（\chapte12） 示例描述：本章演示网页的整体设置。 a_option.htm 选项卡容器示例。 a_tips.htm 关键词的注释示例。 bg_bg.htm 背景属性缩写示例。 bg_color.htm 背景色样式示例。 bg_fix.htm 固定背景示例。 bg_img.htm 背景图片平铺示例。 bg_nav.htm 背景图片制作导航示例。 bg_nav2.htm 单张背景图片制作导航示例。 bg_pos.htm 背景定位示例。 filter.htm 模糊滤镜的使用示例。 filter2.htm 滤镜综合实例示例。 font.htm 字体样式1示例。 font2.htm 字体样式2示例。 form.htm 表单界面示例。 img.htm 图片定位示例。 img2.htm 图文混和排版示例。 img3.htm 图片裁切示例。 img4.htm 图片裁切2示例。 li.htm 列表元素设计示例。 list.htm 列表设计示例。 p.htm 段落样式1示例。 p2.htm 段落样式2示例。 p3.htm 段落样式3示例。 p4.htm 段落样式4示例。 第13章（\chapte13） 示例描述：本章演示网页的整体设置。 a.htm 链接外部样式表文件的页面一示例。 b.htm 链接外部样式表文件的页面二示例。 c.htm 链接外部样式表文件的页面三示例。 alone.htm 同一页面代码重用示例。 css.css 共用部分的CSS代码。 ff_1.htm 属性选择符示例。 ff_2.htm 子对象选择符示例。 ff_3.htm 符号修饰选择符示例。 id_class.htm id和class示例。 if.htm 条件注释示例。 name.htm 命名示范示例。 simple.htm CSS属性值缩写示例。 第14章（\chapte14） 示例描述：本章演示网页的整体设置。 first.htm 第1个JavaScript程序示例。 第15章（\chapte15） 示例描述：本章演示网页的整体设置。 alert.htm 信息对话框示例。 bool.htm 布尔类型示例。 comp.htm 比较运算符的应用示例。 condition.htm 条件运算符的应用示例。 confirm.htm 选择对话框示例。 exp.htm 表达式的合并示例。 helloworld.htm “世界，你好”程序示例。 logic.htm 逻辑运算符的应用示例。 math.htm 基本算术运算符的应用示例。 math2.htm 赋值运算符的应用示例。 math3.htm 增量和减量运算符的应用示例。 prompt.htm 提示对话框示例。 str.htm 字符串操作示例。 str2.htm 加法运算符不同场合的应用示例。 var.htm 变量的使用示例。 第16章（\chapte16） 示例描述：本章演示网页的整体设置。 attr.htm 属性名操作示例。 break.htm 循环控制语句示例。 dead.htm 死循环演示示例。 dowhile.htm do...while循环语句示例。 for.htm for循环语句示例。 forin.htm for...in循环语句示例。 forin2.htm for..in遍历对象的成员示例。 function.htm 自定义函数演示示例。 function2.htm 自定义函数参数传递示例。 funvar.htm 变量的作用域示例。 if.htm if...else条件分支语句示例。 infun.htm 嵌套函数示例。 jsfun.htm JavaScript内置函数演示示例。 newfun.htm 构造函数示例。 newfun2.htm 自定义对象方法示例。 newobj.htm 创建一个新对象的示例。 return.htm 函数返回值示例。 switch.htm switch条件分支语句示例。 twice.htm 嵌套循环语句示例。 while.htm while循环语句示例。 with.htm with语句示例。 第17章（\chapte17） 示例描述：本章演示网页的整体设置。 array.htm 创建并访问数组示例。 const.htm Math对象的属性示例。 date.htm 显示日期时间示例。 element.htm 数组元素的操作示例。 func.htm 函数对象示例。 get.htm get前缀方法组示例。 mathmethod.htm Math对象的方法示例。 method1.htm join()方法和concat()方法示例。 method2.htm push()方法和pop()方法示例。 method3.htm unshift()方法和shift()方法示例。 method4.htm reverse()方法和sort()方法示例。 method5.htm 17.8 slice()方法示例。 method6.htm splice()方法示例。 mini-c.htm 小型计算器示例。 multi.htm 二维数组的应用示例。 set.htm set前缀方法组示例。 strlen.htm 字符串对象的属性示例。 strmethod1.htm 字符串对象的格式方法示例。 strmethod2.htm 字符串对象的操作方法2示例。 time.htm 时间计算程序示例。 to.htm 转字符串方法组示例。 第18章（\chapte18） 示例描述：本章演示网页的整体设置。 close.htm 网页窗口关闭功能示例。 history.htm history对象的应用示例。 interval.htm 简单网页动画示例。 location.htm location对象的应用示例。 navigator.htm navigator对象示例。 newwin.htm 可定制的弹出窗口示例。 screen.htm screen对象的应用示例。 timeout.htm 延时执行命令示例。 第19章（\chapte19） 示例描述：本章演示网页的整体设置。 a.htm 对象链接操作示例。 button.htm 按钮类型对象示例。 document.htm document对象的属性示例。 document2.htm document对象的方法示例。 form.htm form对象的数组访问方法示例。 form2.htm form对象的name属性访问方法示例。 image.htm 图像动态操作示例。 post.asp 注册提交数据ASP页面。 reg.htm 注册页面示例。 select.htm 选择类型对象示例。 text.htm 文本输入类型对象示例。 第20章（\chapte20） 示例描述：本章演示网页的整体设置。 dhtml.htm style对象的操作展示示例。 dhtml2.htm 网页换肤示例。 dhtml3.htm 动态添加节点示例。 dhtml4.htm 动态增加表格行示例。 event.htm 事件展示示例。 event_1.htm 监视事件相关元素示例。 event_2.htm 用户鼠标的检测示例。 event_3.htm 键盘按键检测示例。 event_4.htm 鼠标随意拖动网页元素示例。 event_5.htm 使用document.all访问HTML元素示例。 event_6.htm 使用id和name访问HTML元素示例。 event_7.htm 使用HTML标签名称访问HTML元素示例。 event_8.htm 使用节点方法访问HTML元素示例。 method.htm 事件方法展示示例。 style1.css 第1个外部样式表。 style2.css 第2个外部样式表。 第21章（\chapte21） 示例描述：本章演示网页的整体设置。 auto.htm “汽车消费”正文页面示例示例示例。 float.htm 对联广告示例。 float2.htm 固定对联广告示例。 float3.htm 移动对联广告示例。 frameset.htm 框架伸缩结构示例。 it.htm “IT资讯”正文页面示例示例。 left.htm 帖子标题列表页面。 menu_css.htm CSS二级导航条示例。 menu_css2.htm 完整CSS二级导航条示例。 menu_js.htm 二级水平导航（js实现）示例。 mid.htm 伸缩控制页面。 news.htm “今日要闻”正文页面示例。 right.htm 框架伸缩结构右边页面示例。 tab.htm 选项卡切换块示例。 tab2.htm 美化版选项卡切换块示例。 zoom.htm 动画进度条示例。 zoom2.htm 伸缩选项组示例。 第22章（\chapte22） 示例描述：本章演示网页的整体设置。 personal目录 个人网站完全实例。 第23章（\chapte23） 示例描述：本章演示网页的整体设置。 website 门户网站前台页面实例。
- 35KB
快速解决js动态改变dom元素属性后页面及时渲染的问题
2020-12-28今天实现一个进度条加载过程，dom结构其实就是两个div <div class=pbar> <div class=ui-widget-header id=percent_bar xss=removed></div> </div> 控制里层div的宽width属性，就能实现进度条往前走的效果。 我的进度条是显示下载文件的进度，简单实现一共100个文件的话，下载一个就1%，下载了20个就走到20%。于是代码实现如下： var fileCount=fileList.length(); fileList.foreach(function(i,obj){ ..
- 61KB
Vue.js中对css的操作（修改）具体方式详解
2020-12-12使用v-bind：class或者v-bind:style或者直接通过操作dom来对其样式进行更改； 1.v-bind:class || v-bind:style 其中v-bind是指令，: 后面的class 和style是参数，而class之后的指在vue的官方文档里被称为’指令预期值’（这个不必深究，反正个人觉得初学知道他叫啥名有啥用就好了）同v-bind的大多数指令（部分特殊指令如V-for除外）一样，除了可以绑定字符串类型的变量外，还支持一个单一的js表达式，也就是说v-bind：class的’指令预期值’除了字符串以外还可以是对象或者数组（‘v-bind：’中的v-bind可省略）。
43KBLazyImgv1.0图片延迟加载插件
2015-01-23注：LazyImg 必须定义lazy-data属性，属性值是src的图片路径 引入JS文件：<script type="text/javascript" src="js/lazyImg.v1.0.js"></script> 默认情况下: 在IMG中满足以任何一个条件，都会加载图片； 1、没有class属性 2、如果有class属性并且属性中不包含以"lazy-"为前缀的css样式名 如何禁止默认加载图片 JS代码: LzDefault.action = false; 如何在点击事件时显示图片 JS代码: LazyImg.lazy("lazy-name"); <img class="lazy-name" lazy-data="图片路径"/> "lazy-name" 中的name是可以自定义，"lazy-"是前缀必须存在
91KBjQuery详细教程
2003-12-10jQuery详细教程，讲解很透彻， 一. jQuery 语法实例 $(this).hide() 演示 jQuery hide() 函数，隐藏当前的 HTML 元素。 $("#test").hide() 演示 jQuery hide() 函数，隐藏 id="test" 的元素。 $("p").hide() 演示 jQuery hide() 函数，隐藏所有 元素。 $(".test").hide() 演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。 jQuery 语法 jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。 基础语法是：$(selector).action() • 美元符号定义 jQuery • 选择符（selector）“查询”和“查找” HTML 元素 • jQuery 的 action() 执行对元素的操作 示例 $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $("p.test").hide() - 隐藏所有 class="test" 的段落 $("#test").hide() - 隐藏所有 id="test" 的元素 提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。 文档就绪函数 您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中： $(document).ready(function(){ --- jQuery functions go here ---- }); 这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。 二. jQuery 选择器 在前面的章节中，我们展示了一些有关如何选取 HTML 元素的实例。 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。 jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。 选择器允许您对 HTML 元素组或单个元素进行操作。 在 HTML DOM 术语中： 选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。 jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素。 $("p") 选取 元素。 $("p.intro") 选取所有 class="intro" 的 元素。 $("p#demo") 选取 id="demo" 的第一个 元素。 jQuery 属性选择器 jQuery 使用 XPath 表达式来选择带有给定属性的元素。 $("[href]") 选取所有带有 href 属性的元素。 $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。 $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。 $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。 jQuery CSS 选择器 jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。 下面的例子把所有 p 元素的背景颜色更改为红色： 实例 $("p").css("background-color","red"); 更多的选择器实例 语法 描述 $(this) 当前 HTML 元素 $("p") 所有 元素 $("p.intro") 所有 class="intro" 的 元素 $(".intro") 所有 class="intro" 的元素 $("#intro") id="intro" 的第一个元素 $("ul li:first") 每个 的第一个 元素 $("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性 $("div#intro .head") id="intro" 的 元素中的所有 class="head" 的元素 三. jQuery 事件函数 jQuery 事件处理方法是 jQuery 中的核心函数。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。 通常会把 jQuery 代码放到 部分的事件处理方法中： 实例 $(do
- 46KB
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2020-11-22通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3d立方体的拖动旋转，并将旋转角度实时的反应至界面上显示。 实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性 从而通过改变transform：rotate属性值来达到3d立方体旋转的效果 HTML代码块： <body> <input type="button" class="open" value="点击散开"/> <input type="text" class="xNum" value=""/>//X轴旋转角度 <input type="
- 40KB
css3 transform及原生js实现鼠标拖动3D立方体旋转
2020-12-13本文通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3D立方体的拖动旋转，并将旋转角度实时的反应至界面上显示。 实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性。 从而通过改变transform：rotate属性值来达到3D立方体旋转的效果： HTML代码块： XML/HTML Code复制内容到剪贴板 <body> <input type="button" class="open" value="点击散开"/> <input type="text"
- 4KB
JavaScript Table行定位效果
2009-05-20一开始的需求只是表头部分在滚动时能一直固定在头部，那关键要实现的就是让tr能定位。 首先想到的方法是给tr设置relative，用ie6/7测试以下代码： Code <!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"> <body> <table cellpadding="5" cellspacing="0" border="1" width="100"> <tr style="position:relative; left:100px;"> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> </body> </html> 给tr设置relative后就能相对table定位了，看来很简单啊，但问题是这个方法ie8和ff都无效，而且存在很多问题，所以很快就被抛弃了。 ps：该效果用来做tr的拖动会很方便。 接着想到的是给table插入一个新tr，克隆原来的tr，并设置这个tr为fixed（ie6为absolute），例如： Code <!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"> <body> <table cellpadding="5" cellspacing="0" border="1" width="100"> <tr style="position:fixed; left:100px;"> <td>1</td> <td>2</td> </tr> <tr style="position:absolute; left:200px;"> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table> </body> </html> 第一个问题是fixed的tr在ie7中不能进行定位，而且td在定位后并不能保持在表格中的布局，这样在原表格插tr就没意义了。 ps：fixed的相关应用可参考仿LightBox效果。 最后我用的方法是新建一个table，并把源tr克隆到新table中，然后通过对新table定位来实现效果。 用这个方法关键有两点，首先要做一个仿真度尽可能高的tr，还有是要准确的定位，这些请看后面的程序说明。 程序说明 【克隆table】 克隆一个元素用cloneNode就可以了，它有一个bool参数，表示克隆是否包含子节点。 程序第一步就是克隆原table： this._oTable = $(table);//源table this._nTable = this._oTable.cloneNode(false);//新table this._nTable.id = "";//避免id冲突 要注意虽然ie的cloneNode参数是可选的（默认是false），但在ff是必须的，建议使用时都写上参数。 还要注意的是id属性也会被克隆，也就是克隆后会有两个相同id的元素（如果克隆对象有设置的话），这很容易会导致其他问题，程序会把克隆table的id属性设空。 ps：table请用class来绑定样式，用id的话新table就获取不了样式了。 克隆之后再设置样式： this._style.width = this._oTable.offsetWidth + "px"; this._style.position = isIE6 ? "absolute" : "fixed"; this._style.zIndex = 100; 一般来说offsetWidth是width+padding+border的结果，但table比较特别，测试下面的代码： Code <!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"> <body> <table border="5" id="t" style="padding:10px; width:100px;"> <tr> <td>1</td> <td>1</td> </tr> </table> <table width="100" id="t2" style="border:10px solid #000;"> <tr> <td>1</td> <td>1</td> </tr> </table> <script> alert(document.getElementById("t").offsetWidth); alert(document.getElementById("t2").offsetWidth); </script> </body> </html> 只要给table设置width（style或本身的width属性），不管设置padding和border是多少，offsetWidth都等于width的值。 经测量offsetWidth是没错的，那就是说是table的width设置的问题。 w3c的table部分中说width属性是the desired width of the entire table，我估计entire就是包含了padding和border，找不到什么其他说明，先这么理解吧。 定位方面，除了不支持fixed的ie6用absolute，其他都使用fixed定位。 【克隆tr】 table有一个rows集合，包括了table的所有tr（包括thead和tfoot里面的）。 程序的Clone方法会根据其参数克隆对应索引的tr： this._index = Math.max(0, Math.min(this._oTable.rows.length - 1, isNaN(index) ? this._index : index)); this._oRow = this._oTable.rows[this._index]; var oT = this._oRow, nT = oT.cloneNode(true); 由于tr可能是包含在thead这些中，所以还要判断一下： if(oT.parentNode != this._oTable){ nT = oT.parentNode.cloneNode(false).appendChild(nT).parentNode; } 然后再插入到新table中： if(this._nTable.firstChild){ this._nTable.replaceChild(nT, this._nTable.firstChild); }else{ this._nTable.appendChild(nT); } 因为程序允许修改克隆的tr，所以会判断有没有插入过，没有就直接appendChild，否则用replaceChild替换原来的tr。 【table的border和frame属性】 table的border属性用来指定边框宽度，table特有的frame属性是用来设置或获取表格周围的边框显示的方式。 w3c的tabel的frame部分说明frame可以是以下值： void: No sides. This is the default value. above: The top side only. below: The bottom side only. hsides: The top and bottom sides only. vsides: The right and left sides only. lhs: The left-hand side only. rhs: The right-hand side only. box: All four sides. border: All four sides. 这些值指明了要显示的边框。要留意的是虽然说void是默认值，但不设置的话其实是一个空值，这时四条边框都会显示。 还有frame对style设置的border没有效果，测试下面代码： Code <!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"> <body> <table width="100" border="5" frame="lhs"> <tr> <td>1</td> <td>1</td> </tr> </table> <table width="100" style="border:5px solid #000;" border="10" frame="lhs"> <tr> <td>1</td> <td>1</td> </tr> </table> </body> </html> 这里还可以看到如果同时设置table的border和style的border，那table的border就会失效。 程序中为了更美观会自动去掉新table上面和下面的边框，包括frame和style的： Code if(this._oTable.border > 0){ switch (this._oTable.frame) { case "above" : case "below" : case "hsides" : this._nTable.frame = "void"; break; case "" : case "border" : case "box" : this._nTable.frame = "vsides"; break; } } this._style.borderTopWidth = this._style.borderBottomWidth = 0; 其中空值在设置collapse之后会比较麻烦，在ie6/ie7中测试： Code <!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"> <body> <style type="text/css"> .t{width:100px; border-collapse:collapse;} .t td{border:5px solid #999;} </style> <table class="t"> <tr> <td>1</td> <td>1</td> </tr> </table> <br /> <table class="t" frame="vsides"> <tr> <td>1</td> <td>1</td> </tr> </table> <br /> <table class="t" border="1"> <tr> <td>1</td> <td>1</td> </tr> </table> <br /> <table class="t" border="1" frame="vsides"> <tr> <td>1</td> <td>1</td> </tr> </table> </body> </html> 后两个的转换还可以接受，所以在设置frame之前还是判断一下border先。 【获取背景色】 如果td是背景透明的话显然不太美观，最好是找一个合适的颜色来填充。 程序用的方法是，从当前td开始找，如果背景是透明的话，就再从父节点中找，直到找到有背景色为止。 一般来说透明的属性值是"transparent"，但在chrome里却是"rgba(0, 0, 0, 0)"，所以用了一个属性来保存透明值： this._transparent = isChrome ? "rgba(0, 0, 0, 0)" : "transparent"; 并在GetBgColor获取背景色程序中使用： while (bgc == this._transparent && (node = node.parentNode) != document) { bgc = CurrentStyle(node).backgroundColor; } return bgc == this._transparent ? "#fff" : bgc; 如果全部都是透明的话就会返回白色（#fff）。 这里没有考虑图片背景的情况，毕竟图片不一定会覆盖整个背景。 【parentNode/offsetParent/parentElement】 上面用到了parentNode，这里顺便说说它跟offsetParent，parentElement的区别。 先看看parentNode在w3c的说明： The parent of this node. All nodes, except Document, DocumentFragment, and Attr may have a parent. However, if a node has just been created and not yet added to the tree, or if it has been removed from the tree, this is null. 很简单，就是节点的父节点，看过dom都知道。 再看看比较容易区分的offsetParent，它在mozilla和msdn都说得比较模糊，在w3c就比较清楚了： The offsetParent attribute, when called on element A, must return the element determined by the following algorithm: 1，If any of the following holds true return null and stop this algorithm: A is the root element. A is the HTML body element. The computed value of the position property for element A is fixed. 2，If A is an area HTML element which has a map HTML element somewhere in the ancestor chain return the nearest ancestor map HTML element and stop this algorithm. 3，Return the nearest ancestor element of A for which at least one of the following is true and stop this algorithm if such an ancestor is found: The computed value of the position property is not static. It is the HTML body element. The computed value of the position property of A is static and the ancestor is one of the following HTML elements: td, th, or table. 4，Return null. 这里主要有四点： 1，如果是根元素、body元素或元素的position是fixed，将返回null； 2，如果是area元素，会返回最接近的map元素； 3，返回至少符合以下一个条件的最接近该节点的元素：1，元素的position不是static；2，是body元素；3，源元素的position是static，祖先元素中的以下元素：td，th或table。 4，返回null。 其中第三点是最常见的情况，详细可以看下面的测试： Code <!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"> <body> <table width="100" id="t"> <tr> <td><div id="t1"></div></td> <td id="t2"><div style="position:absolute;"> <div id="t3"></div> </div></td> </tr> </table> <div id="t4" style="position:fixed;"></div> <script> var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; alert($("t").offsetParent)//body alert($("t1").offsetParent)//td alert($("t2").offsetParent)//table alert($("t3").offsetParent)//div alert($("t4").offsetParent)//null </script> </body> </html> 可见offsetParent跟parentNode的区别还是很大的。 而parentNode跟parentElement除了前者是w3c标准，后者只ie支持，其他的区别就不是那么明显了。 在ie中大部分情况下两者的效果是一样的，当然如果是一模一样的话ie就没必要弄这么一个东西出来了，测试下面的代码： Code <!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"> <body> <script> var o = document.createDocumentFragment().appendChild(document.createElement("div")); alert(o.parentNode) alert(o.parentNode.nodeType)//11 alert(o.parentElement)//null alert(document.body.parentNode) alert(document.body.parentNode.nodeType)//1 alert(document.body.parentElement)//html alert(document.body.parentNode.parentNode) alert(document.body.parentNode.parentNode.nodeType)//9 alert(document.body.parentElement.parentElement)//null </script> </body> </html> 可以看到当父节点的nodeType不是1，即不是element节点的话，它的parentElement就会是null。 这就明白了名字中“Element”的含义了。 【设置td宽度】 接下来就要设置td宽度了，要获取某元素的宽度可以通过以下方法： 1，支持defaultView的可以直接用getComputedStyle获取width。 2，获取offsetWidth，再减去border和padding的宽度。 这个本来也可以，但td的border宽度的获取比较麻烦，下面有更方便的方法。 3，获取clientWidth，再减去padding的宽度。 这个跟方法2差不多，但更简单方便。 注意ie的currentStyle不像getComputedStyle能获取准确值，而只是一个设置值，像百分比、auto这些并不会自动转成准确值，即使是得到准确值也不一定是实际值，像td即使设置一个很大的准确值，实际值也不会超过table本身的宽度。 所以在td这种比较特殊的结构中，除非是很理想的状况，否则用currentStyle基本没戏，而且在这个效果中即使是差了1px也会看不舒服。 对于支持defaultView的当然可以直接获取，否则就用上面的方法3来获取： style.width = (document.defaultView ? parseFloat(css.width) : (o.clientWidth - parseInt(css.paddingLeft) - parseInt(css.paddingRight))) + "px"; 但这里不管哪个方法都有一个问题，就是出现scroll的情况，不过还好td这个元素即使设置了overflow为scroll也不会出现滚动条，除了ie8和chrome。 程序没对这个情况做处理，毕竟给td设scroll也不常见，而且支持这个的浏览器不多，没必要花太多时间在这里。 ps：关于td宽度的自动调整可以参考w3c的table-layout部分。 如果有影响原td结构的设置，例如colspan之类的就要留意，错误的结构很可能导致一些异常变形。 如果对原表格结构或内容做了修改，应该执行一次Clone方法重构新table。 本部分对体验比较重要，如果设置不当就会有变形的感觉，很不美观。 【borderCollapse】 上面说到td的border宽度的获取比较麻烦，那到底有多烦呢？ 如果只是一般情况的话，通过borderLeftWidth和borderRightWidth获取宽度就可以了。 ps：如果borderStyle是"none"的话，那么border就会没效，所以如果要取border宽度的话最好先判断一下borderStyle是不是"none"。 但table有一个特别的样式borderCollapse，设置table的边框模型。 它有两个值，分别是separate（分开，默认值）和collapse（合并）。 separate就是我们一般看到的效果，这里主要讨论collapse，先看mozilla怎么说的： In the collapsed border model, adjacent table cells share borders. 意思是在collapse border模型中，相邻的td会共用边框。看下面的例子会更明白： Code <!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"> <body> <style type="text/css"> .t{line-height:40px;width:200px; } .t td{border:5px solid #999;} </style> <table class="t" style="border-collapse:collapse;"> <tr> <td width="50"> </td> <td style="border-left-width:10px; border-left-style:dotted;"> </td> <td width="50"> </td> </tr> </table> <table class="t"> <tr> <td width="50"> </td> <td style="border-left-width:10px; border-left-style:dotted;"> </td> <td width="50"> </td> </tr> </table> </body> </html> 可以看到使用collapse之后，相邻td的边框都合并成一条而且是以相邻边框中宽度较大的那条为准。 那td跟table之间呢，参考下面的例子： Code <!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"> <body> <style type="text/css"> .t{line-height:40px;width:200px;border-collapse:collapse;} .t td{border:5px solid #999;} </style> <table class="t" id="t1"> <tr> <td width="50" style="border-left:10px dotted #999;"> </td> <td> </td> <td width="50"> </td> </tr> </table> <br /> <table class="t" id="t2" style="border-left:10px dotted #999;"> <tr> <td width="50"> </td> <td> </td> <td width="50"> </td> </tr> </table> </body> </html> 可见table和td之间也是遵从同样规则。 还有的是当设置了collapse那cellspacing就无效了。顺便说说border-spacing，它其实就是cellspacing在css中的样式形式，只是ie在ie8才开始支持，详细可以看mozilla的说明。 collapse的一个常见应用是做边框表格，例如1px边框的表格： Code <!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"> <body> <style type="text/css"> .t{line-height:40px;width:200px;} .t1{border-collapse:collapse;} .t1 td{border:1px solid #999;} .t2{background-color:#999;} .t2 td{background-color:#FFF;} </style> <table class="t t1"> <tr> <td width="50"> </td> <td> </td> <td width="50"> </td> </tr> </table> <table class="t t2" cellspacing="1"> <tr> <td width="50"> </td> <td> </td> <td width="50"> </td> </tr> </table> </body> </html> 前者用的collapse，后者是用table背景色模拟，虽然效果都一样，但前者显然较好，才是真正的“边框”。 在使用了collapse之后，要写一个通用的获取边框宽度程序会变得十分麻烦，而且有些情况下甚至没办法判断获取。 详细情况这里就不细说了，有兴趣研究的话可以看看w3c的The collapsing border model，当然要想全部了解的话还要在各个浏览器中研究。 【元素位置】 table的样式设置好后，还需要获取原table和原tr的位置参数，为后面的元素定位做准备。 要获取某个元素相对文档的位置，传统的做法是获取对象的offsetLeft/offsetTop，然后不断获取offsetParent的offsetLeft/offsetTop，直到找不到offsetParent为止。 得到的结果就是相对文档的位置了，上面已经介绍过offsetParent，原理应该都明白了吧。 程序的SetRect设置区域属性方法中也使用了这个思路： Code //获取原table位置 var o = this._oTable, iLeft = o.offsetLeft, iTop = o.offsetTop; while (o.offsetParent) { o = o.offsetParent; iLeft += o.offsetLeft; iTop += o.offsetTop; } this._oTableLeft = iLeft; this._oTableTop = iTop; this._oTableBottom = iTop + this._oTableHeight; //获取原tr位置 o = this._oRow; iTop = o.offsetTop; while (o.offsetParent) { o = o.offsetParent; iTop += o.offsetTop; } this._oRowTop = iTop; this._oRowBottom = iTop + this._oRow.offsetHeight; 不过这里介绍一个更好的方法，通过getBoundingClientRect方法来获取。 在mozilla是这么说明的： The returned value is a TextRectangle object, which contains read-only left, top, right and bottom properties describing the border-box, in pixels, with the top-left relative to the top-left of the viewport... 返回一个TextRectangle对象，包含left, top, right和bottom几个只读属性，以px为单位来表示边界框相对视窗左上角的位置。（偶英文烂啊） 注意是相对视窗，不是文档哦，如果要相对文档还必须加上scrollLeft/scrollTop。 通过下面的测试可以看到两个方法返回的结果都是相同的： Code <!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"> <body> <style type="text/css"> .t{line-height:40px;width:200px; border:10px solid; margin-top:900px; margin-left:500px;} </style> <div class="t" id="t"></div> <script> var o = document.getElementById("t"); var rect = o.getBoundingClientRect(); var iLeft1 = rect.left + document.documentElement.scrollLeft, iTop1 = rect.top + document.documentElement.scrollTop; var iLeft2 = o.offsetLeft, iTop2 = o.offsetTop; while (o.offsetParent) { o = o.offsetParent; iLeft2 += o.offsetLeft; iTop2 += o.offsetTop; } alert(iLeft1+"_"+iLeft2) alert(iTop1+"_"+iTop2) </script> </body> </html> 程序中如果支持getBoundingClientRect就会用它来获取位置参数： Code //用getBoundingClientRect获取原table位置 var top = this._doc.scrollTop, rect = this._oTable.getBoundingClientRect(); this._oTableLeft = rect.left + this._doc.scrollLeft; this._oTableTop = rect.top + top; this._oTableBottom = rect.bottom + top; //获取原tr位置 rect = this._oRow.getBoundingClientRect(); this._oRowTop = rect.top + top; this._oRowBottom = rect.bottom + top; 显然用getBoundingClientRect更方便快捷。 这个方法虽然是ie的产物，但已经是w3c的标准，而且ff3和Opera都已经支持了这个方法，基本可以放心使用，除了chrome。 这里只是简单介绍，想了解更多可以看w3c的View Module部分。 获取原table和tr的位置后，还需要计算新table的位置。 程序可以自定义新table位于视窗位置的百分比，例如顶部是0，中间是0.5，底部是1，可以在程序初始化时或用SetPos方法来设置。 这里主要获取视窗高度和新table在视窗的top值： this._viewHeight = document.documentElement.clientHeight; this._ntViewTop = (this._viewHeight - this._nTableHeight) * this._pos; 定位范围实际上是从视框顶部到视框高度减去新table高度的范围内的，所以计算时要先把视窗高度减去新table的高度。 【元素定位】 万事俱备，只欠定位了。 由于要根据窗口滚动状态来判断计算定位，scrollTop/scrollLeft的获取必不可少。 但在chrome中就算用了DOCTYPE，也要用document.body来获取scrollTop/scrollLeft，尽管它确实有document.documentElement。 对chrome了解不多，也不知哪里能查它的相关文档，程序里就直接做个判断算了： this._doc = isChrome ? document.body : document.documentElement; 定位的第一步就是判断是否需要定位，这里的判断标准有两个，第一个是原tr是否超过了视窗范围，还有是新table要显示的位置是否在原table的显示范围内。 第一点可以通过原tr位置的顶部和底部是否超过视窗的顶部和底部来判断： var top = this._doc.scrollTop, left = this._doc.scrollLeft ,outViewTop = this._oRowTop < top, outViewBottom = this._oRowBottom > top + this._viewHeight; if(outViewTop || outViewBottom){} 在看第二点之前先看看程序中的Auto属性，它是用来指定否自动定位的。 如果自动定位的话当原tr离开视框顶部新table就会定位到视框顶部，原tr离开底部新table就会定位到视框底部，这样看上去会比较自然顺畅。 如果不选择自动的话就会根据SetPos方法中计算得到的新table视窗top值来设置定位： var viewTop = !this.Auto ? this._nTableViewTop : (outViewTop ? 0 : (this._viewHeight - this._nTableHeight))//视窗top ,posTop = viewTop + top;//位置top 接着就判断新table要显示的位置是否在原table的显示范围内，这个可以通过新table位置的顶部和底部是否超过原table的顶部和底部来判断： if(posTop > this._oTableTop && posTop + this._nTableHeight < this._oTableBottom){} 当符合所有的条件就可以进行定位了，如果是fixed定位的就使用相对视窗的top值： this._style.top = viewTop + "px"; this._style.left = this._oTableLeft - left + "px"; 像ie6是absolute定位的就要使用相对文档的top值： this._style.top = posTop + "px"; this._style.left = this._oTableLeft + "px"; 考虑到左右滚动的情况，left也必须设置。 当然不符合条件就会隐藏新table，程序中给top设置一个很大的负值来间接“隐藏”它。 用负值是因为这样不会把ie6的页面拉长，不用display是因为上面需要获取它的offsetHeight，如果用display隐藏就获取不了啦。 最后把Run程序绑定到window的scroll事件中就可以了，而window在resize时视框高度会发生变化，所以resize事件要绑定SetPos程序。 【覆盖select】 只要用到了定位，就不得不面对一个老对手“ie6的select”。 我在之前的文章也介绍过一些解决方法（参考这里的覆盖select），这里不能直接隐藏select，那看来只能用iframe了。 但用iframe有一个很大的问题，在ie6测试下面的代码，并拖动滚动条： Code <!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"> <body> <style type="text/css"> body{height:1000px;} .t{height:300px;width:200px; border:1px solid; position:absolute; background:#FFF;top:0;left:0;} </style> <iframe class="t" id="t"></iframe> <select></select><br /> <select></select><br /> <select></select><br /> <select></select><br /> <select></select><br /> <select></select><br /> <select></select><br /> <select></select><br /> <select></select><br /> <select></select><br /> </body> </html> 可以看到，即使是iframe，在拖动滚动条的时候，select仍然在后面闪啊闪，在本程序中这个现象会尤其明显。 看来还得用隐藏select的方法，最好的做法是只隐藏在新table后面的select，而不影响其他select的正常显示。 那关键就是如何判断select是否在新table后面，这个可以通过位置坐标判断，刚好可以用到上面的getBoundingClientRect。 一般的思路是判断新table和select的坐标，根据位置判断select的显示和隐藏。 但如果有多个实例，可能会导致select在一个实例中要隐藏，却在另一个要显示的情况。 为了解决冲突，程序给select加了一个_count属性作为计数器，用来记录有多少实例把该select隐藏了。 如果当前实例判断该select要隐藏，就给其_count加1，隐藏后存放到实例的_selects集合中。 在恢复显示_selects中的select时，先给select的_count减1，如果得到的_count是0，那说明没有其他实例要隐藏它，就可以设置显示了，最后清空_selects集合。 在判断是否隐藏select前还必须恢复一次该实例_selects里面的select，否则就会造成_count只加不减的情况。 程序中的SetSelect方法就是用来判断和设置select的： Code this.ResetSelect(); var rect = this._nTable.getBoundingClientRect(); //把需要隐藏的放到_selects集合 this._selects = Filter(this._oTable.getElementsByTagName("select"), Bind(this, function(o){ var r = o.getBoundingClientRect(); if(r.top <= rect.bottom && r.bottom >= rect.top){ o._count ? o._count++ : (o._count = 1);//防止多个实例冲突 //设置隐藏 var visi = o.style.visibility; if(visi != "hidden"){ o._css = visi; o.style.visibility = "hidden"; } return true; } })) 其中ResetSelect方法是用来恢复显示select的： forEach(this._selects, function(o){ !--o._count && (o.style.visibility = o._css); }); this._selects = []; 但这个方法在快速滚屏时还是无能为力，而且select越多效率也随之下降，各位有更好方法的话欢迎交流。 【Chrome一个bug】 在测试的时候发现Chrome一个bug，测试下面代码： Code <!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"> <body> <table border="1"> <tr> <td id="tt"></td> </tr> </table> <div id="t"></div> <script> document.getElementById("t").offsetWidth; document.getElementById("tt").innerHTML = "<select><option>test</option></select>"; </script> </body> </html> 一个毫不相干的操作居然令table没有自动撑开，加上前面的问题，看来Chrome的路还很长啊。 使用说明 实例化一个TableFixed对象只需要一个参数table的id： new TableFixed("idTable"); 实例化时有4个可选属性： Index: 0,//tr索引 Auto: true,//是否自动定位 Pos: 0,//自定义定位位置百分比(0到1) Hide: false//是否隐藏（不显示） 其中Index和Pos在实例化之后就不能使用。 要修改克隆行可以用Clone方法，其参数是要克隆tr的索引。 要修改自定义定位位置可以用SetPos方法，其参数是要定位的位置百分比。 具体使用请参考实例。
高并发下的Nginx性能优化实战
2019-12-24<p> <b><span style="background-color:#FFE500;">【超实用课程内容】</span></b> </p> <p> <br /> </p> <p> <br /> </p> <p> 本课程内容包含讲解<span>解读Nginx的基础知识，</span><span>解读Nginx的核心知识、带领学员进行</span>高并发环境下的Nginx性能优化实战，让学生能够快速将所学融合到企业应用中。 </p> <p> <br /> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b><br /> </b> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b><span style="background-color:#FFE500;">【课程如何观看？】</span></b> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> PC端：<a href="https://edu.csdn.net/course/detail/26277"><span id="__kindeditor_bookmark_start_21__"></span></a><a href="https://edu.csdn.net/course/detail/27216">https://edu.csdn.net/course/detail/27216</a> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 移动端：CSDN 学院APP（注意不是CSDN APP哦） </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 本课程为录播课，课程永久有效观看时长，大家可以抓紧时间学习后一起讨论哦~ </p> <p style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <br /> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <strong><span style="background-color:#FFE500;">【学员专享增值服务】</span></strong> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b>源码开放</b> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 课件、课程案例代码完全开放给你，你可以根据所学知识，自行修改、优化 </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 下载方式：电脑登录<a href="https://edu.csdn.net/course/detail/26277"></a><a href="https://edu.csdn.net/course/detail/27216">https://edu.csdn.net/course/detail/27216</a>，播放页面右侧点击课件进行资料打包下载 </p> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p>
Java8零基础入门视频教程
2016-09-29这门课程基于主流的java8平台，由浅入深的详细讲解了java SE的开发技术，可以使java方向的入门学员，快速扎实的掌握java开发技术！
Java基础与实践
2018-07-31Java语言是目前流行的一门程序设计语言。本课程是一套全面讲解Java语言程序设计的开发类课程，由浅入深地介绍Java基础内容，主要包括基本类型及运算符、控制执行流程、字符串、面向对象、集合与数组、文件及流、异常、多线程等完整的Java知识体系。
手把手教你蓝牙协议栈入门
2020-07-16<p> 本课程定位是：引领想学习蓝牙协议栈的学生或者从事蓝牙，但是对蓝牙没有一个系统概念的工程师快速入门 </p> <p> 课程是多年从事蓝牙经验总结出来的，希望能让你看完有一种醍醐灌顶的感觉。 </p> <p> 不要在摸着石头过河了·学习完这些你肯定还是要继续学习蓝牙协议栈，但是至少懂了蓝牙的一些概念以及适合高效的学习方法 </p> <p> 本课程一共分为4个小节： </p> <p> 1）蓝牙教程计划.mp4 ，主要介绍下我们的视频规划以及后续的蓝牙教程规划 </p> <p> 2）蓝牙的前生后世.mp4 主要介绍下蓝牙的产生背景概念，以及蓝牙从开始产生到现在最新的5.2的发展过程，新赠的功能特性 </p> <p> 3）市面蓝牙架构调查.mp4 主要介绍市面蓝牙产品的架构以及HCI蓝牙芯片的详细架构，让你对蓝牙有一个整体的认识，对于后续做蓝牙产品选型大有帮助 </p> <p> 4）快速学习蓝牙文档介绍_工具介绍.mp4 主要介绍HCI蓝牙芯片的协议栈以及profile获取途径以及学习蓝牙的高效工具，引领你快速找到适合自己的方法来学习蓝牙 </p>
基于SSM技术的在线商城系统[实战视频]
2018-07-04本课程基于【SSM】【Maven】【BootStrap】【MySQL】【BootStrap】技术，使用IntelliJ IDEA开发工具。 主要是锻炼SSM技术的运用，通过项目实战，加强对框架技术的理解和运用，如果你是SSM的初学者，这套视频课程适合你！！
C语言入门--必须基础17讲
2017-07-28适合没有基础的人群学习C语言，简单的入门教程。帮助小白理解什么是开发，什么是编程。做的很简单，很多细节没有详细讲解，不适合用来深入研究。学了这个，你能理解什么是编程，什么是C语言。
SpringBoot实战教程：SpringBoot企业级线上商城项目讲解
2019-09-27<div style="color:rgba(0,0,0,.75);"> <span style="color:#4d4d4d;"> </span> <div style="color:rgba(0,0,0,.75);"> <span style="color:#4d4d4d;"> </span> <div style="color:rgba(0,0,0,.75);"> <div style="color:rgba(0,0,0,.75);"> <span style="color:#4d4d4d;">当前课程中商城项目的实战源码是我发布在 GitHub 上的开源项目 newbee-mall （新蜂商城），目前已有 6300 多个 star，</span><span style="color:#4d4d4d;">本课程是一个 Spring Boot 技术栈的实战类课程，课程共分为 3 大部分，前面两个部分为基础环境准备和相关概念介绍，第三个部分是 Spring Boot 商城项目功能的讲解，让大家实际操作并实践上手一个大型的线上商城项目，并学习到一定的开发经验以及其中的开发技巧。<br /> 商城项目所涉及的功能结构图整理如下：<br /> </span> </div> <div style="color:rgba(0,0,0,.75);"> </div> <div style="color:rgba(0,0,0,.75);"> <p style="color:#4d4d4d;"> <img alt="modules" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3N0b3JlL25ld2JlZS1tYWxsLXMucG5n?x-oss-process=image/format,png" /> </p> </div> <p style="color:rgba(0,0,0,.75);"> <strong><span style="color:#e53333;">课程特色</span></strong> </p> <p style="color:rgba(0,0,0,.75);"> </p> <div style="color:rgba(0,0,0,.75);"> </div> <div style="color:rgba(0,0,0,.75);"> <ul> <li> 对新手开发者十分友好，无需复杂的操作步骤，仅需 2 秒就可以启动这个完整的商城项目 </li> <li> 最终的实战项目是一个企业级别的 Spring Boot 大型项目，对于各个阶段的 Java 开发者都是极佳的选择 </li> <li> 实践项目页面美观且实用，交互效果完美 </li> <li> 教程详细开发教程详细完整、文档资源齐全 </li> <li> 代码+讲解+演示网站全方位保证，向 Hello World 教程说拜拜 </li> <li> 技术栈新颖且知识点丰富，学习后可以提升大家对于知识的理解和掌握，可以进一步提升你的市场竞争力 </li> </ul> </div> <p style="color:rgba(0,0,0,.75);"> </p> <p style="color:rgba(0,0,0,.75);"> <span style="color:#e53333;">课程预览</span> </p> <p style="color:rgba(0,0,0,.75);"> </p> <div style="color:rgba(0,0,0,.75);"> </div> <div style="color:rgba(0,0,0,.75);"> <p style="color:#4d4d4d;"> 以下为商城项目的页面和功能展示，分别为： </p> </div> <div style="color:rgba(0,0,0,.75);"> <ul> <li> 商城首页 1<br /> <img alt="" src="https://img-bss.csdnimg.cn/202103050347585499.gif" /> </li> <li> 商城首页 2<br /> <img alt="" src="https://img-bss.csdn.net/202005181054413605.png" /> </li> <li> </li> <li> 购物车<br /> <img alt="cart" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3QvY2FydC5wbmc?x-oss-process=image/format,png" /> </li> <li> 订单结算<br /> <img alt="settle" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3Qvc2V0dGxlLnBuZw?x-oss-process=image/format,png" /> </li> <li> 订单列表<br /> <img alt="orders" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3Qvb3JkZXJzLnBuZw?x-oss-process=image/format,png" /> </li> <li> 支付页面<br /> <img alt="" src="https://img-bss.csdn.net/201909280301493716.jpg" /> </li> <li> 后台管理系统登录页<br /> <img alt="login" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3QvbWFuYWdlLWxvZ2luLnBuZw?x-oss-process=image/format,png" /> </li> <li> 商品管理<br /> <img alt="goods" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3QvbWFuYWdlLWdvb2RzLnBuZw?x-oss-process=image/format,png" /> </li> <li> 商品编辑<br /> <img alt="" src="https://img-bss.csdnimg.cn/202103050348242799.png" /> </li> </ul> </div> </div> </div> </div>
-
下载
Proteus补丁.zip
Proteus补丁.zip
-
下载
面向集约化、智能化、智慧化的智能园区管理平台建设方案.pptx
面向集约化、智能化、智慧化的智能园区管理平台建设方案.pptx
-
下载
基于SpringBoot2.0的中小医院医疗信息管理系统.rar
基于SpringBoot2.0的中小医院医疗信息管理系统.rar
-
下载
优化模型.ppt
优化模型.ppt
-
下载
预警图pbiviz文件.rar
预警图pbiviz文件.rar
-
下载
protel99se连续放置汉字补丁
protel99se连续放置汉字补丁
-
下载
Applying UML 31-40.zip
Applying UML 31-40.zip
-
下载
java编程语言的特性.docx
java编程语言的特性.docx
-
下载
Canvas 小游戏 消灭方块
Canvas 小游戏 消灭方块
-
下载
LaTeXiT-2_16_2.dmg
LaTeXiT-2_16_2.dmg
员工认证VIP会员8折
学生认证VIP会员7折
