JavaScript
Mr.Piglet
初生婴儿
展开
-
JavaScript学习笔记(四):JSON
什么是 JSON ?是 JavaScript 对象表示法(JavaScript Object Notation)是轻量级的文本数据交换格式独立于语言:使用 Javascript语法来描述数据对象,可通过 JavaScript 进行解析,使用 AJAX 进行传输JSON 具有自我描述性,更易理解 为什么使用 JSON?JSON 比 XML 更快更易...原创 2019-01-17 14:08:27 · 263 阅读 · 0 评论 -
JavaScript + CSS + HTML 单页切换导航菜单界面设计
单页切换导航菜单界面设计在撸码之前先来看看效果图:该页面效果中,在页面的左侧垂直排放一组导航按钮,当点击导航按钮时,相应的页面内容会在屏幕右侧显示。 代码实现HTML 页面设计:需引入下文的 JavaScript 脚本和 CSS 修饰onkeyup = "SomeJavaScriptCode":事件会在键盘按键被松开时发生。参数 描述 SomeJav...原创 2019-02-03 11:51:04 · 10210 阅读 · 0 评论 -
JavaScript + CSS/CSS3 + HTML 侧边栏界面设计
下文将介绍两种侧边栏的界面设计,一种是在页面的右边显示侧栏内容;另一种是在页面左边显示侧栏,同时主体内容随着侧栏的出现整体向右移动。 右侧边栏界面设计在撸码开始前先来看看效果图:右边侧栏的页面设计组成包含打开按钮、右侧栏(原始状态为隐藏,既 width = 0)、几个标签内容、关闭按钮等。通过点击事件显示右边侧栏(既改变侧栏 width 的值)。效果图明显有一个延迟显示的控制,...原创 2019-02-02 11:22:05 · 21371 阅读 · 10 评论 -
JavaScript学习笔记(三):DOM 事件更改图片、DOM EventListener
JavaScript HTML DOM 事件在事件发生时执行 JavaScript,比如:当用户点击鼠标时 当网页已加载时 当图像已加载时 当鼠标移动到元素上时 当输入字段被改变时 当提交 HTML 表单时 当用户触发按键时 小案例1:通过属性src改变图片当鼠标点击图片时,更换另一张图片。页面编写:<html> <head>...原创 2019-01-16 21:16:06 · 1854 阅读 · 0 评论 -
JavaScript + CSS/CSS3 + HTML 网页登陆 + 注册界面设计
登陆界面设计撸代码之前先来看一看效果图:登陆界面由一个简单的表单(头像、用户名、密码、登陆按钮、记住我、取消、忘记密码),创建了一个CSS3的缩放效果构成。需要做浏览器(Firefox、Safari and Chrome、Opera)兼容处理和 @media 简单响应式设计。文本输入框做了 required 必须填写条件,运用在项目中可以通过 JavaScript 约束验证 DO...原创 2019-02-01 12:05:12 · 26570 阅读 · 4 评论 -
JavaScript学习笔记(二):登陆验证(简单、表单),约束验证 DOM 方法(checkValidity()、setCustomValidity())
登陆信息验证当你在某些平台进行登陆或者注册操作是都会有信息的一个验证,没有填、漏填、错填信息等操作页面都会有一个信息的提示,“请填入信息”,“你的账号或密码填写错误”等提示信息,开发人员统称为用户操作异常。在开发时需要考虑到用户异常的操作,不给操作放行,并提示给用户相应的异常信息。这里通过“登陆简单验证”和"登陆表单验证"两个小案例演示异常的处理。 小案例:登陆简单验证工作原...原创 2019-01-16 16:52:13 · 1997 阅读 · 2 评论 -
JavaScript学习笔记(一):switch 语句嵌套,函数闭包
switch 语句的运用工作原理:首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。使用 break 来阻止代码自动地向下一个 case 运行;使用 default 来规定匹配不存在时做的事情。 小案例:通过点击按钮获得日期展示页面<!--switch 语句-->&l...原创 2019-01-16 14:35:40 · 2642 阅读 · 0 评论 -
JavaScript学习笔记(八):js 库 jQuery、Prototype、MooTools之间的区别
应对 JavaScript 高级程序设计(特别是对浏览器差异的复杂处理)的 JavaScript 框架主要为以下三种:jQuery —— 使用 CSS 选择器来访问和操作网页上的 HTML 元素(DOM 对象)。 Prototype —— 通过提供类和继承,用于执行常见 web 任务的简单 API和操作 HTML DOM。 MooTools ...原创 2019-01-24 11:08:22 · 317 阅读 · 0 评论 -
JavaScript学习笔记(七):js 浏览器对象模型 (BOM)
JavaScript Window - 浏览器对象模型 小案例1:显示浏览器窗口的高度和宽度innerHeight / clientHeight 浏览器窗口的内部高度(包括滚动条) innerWidth / clientWidth 浏览器窗口的内部宽度(包括滚动条)<p id="demo"></p><script> var ...原创 2019-01-23 22:35:31 · 300 阅读 · 0 评论 -
JavaScript学习笔记(五):HTML DOM 元素 (节点)的增改删查
创建新的 HTML 元素 (节点) - appendChild() / insertBefore()appendChild() 方法:1.通过 document.createElement("p") 创建节点 p 标签(para);2.通过 document.createTextNode("段落p3......") 创建新节点内容(node);3.通过 appendChild...原创 2019-01-17 15:09:15 · 245 阅读 · 0 评论 -
JavaScript学习笔记(六):JavaScript 对象
别怀疑,JavaScript是面向对象语言,但它是基于 prototype,而不是基于类,所以不会建类,也不会通过类来创建对象。下面介绍 JavaScript 创建对象的方法。 创建 JavaScript 对象创建新对象有两种不同的方法:定义并创建对象的实例(直接创建实例,不演示) 使用函数来定义对象,然后创建新的对象实例 小案例1:把方法添加到 JavaScript...原创 2019-01-23 15:07:06 · 316 阅读 · 1 评论