JavaScript基础习题
1.实现输入框的双向绑定
解析:所谓双向绑定,即view->model, model->view,可以考虑对象劫持,监听对象属性的变化
<input type="input" id="input">
<span id="show"></span>
<script>
var obj = {};
Object.defineProperty(obj, 'txt', {
get: function () {
return obj;
},
set: function (newValue) {
document.getElementById('input').value = newValue;
document.getElementById('show').innerHTML = newValue;
}
});
document.getElementById('input').addEventListener('keyup', function (e) {
obj.txt = e.target.value;
});
</script>
2.CSS中的“父相子绝”定位
在实际应用开发中,有个不成文的规定,“父相子绝”,一般的应用场景是子元素居中对齐等,以及行内元素的布局;
其实绝对定位(absolute)的参照对象是——离他最近的已定位的祖先元素,这句话有两个关键词;
一个是“离它最近的祖先元素”,意思是那个参照元素不一定是父元素,也可以是爷爷元素,爷爷的爷爷元素等等,如果他的祖先里同时有2个及以上的元素,就参照离他最近的元素定位;
还有一个是“已定位”,这个定位也不一定非要相对定位,也可以是绝对定位,为什么一般用相对定位呢?因为相对定位的特性是虽然它定位了,就算给了偏移量它离开了原来的地方,但是它原来的地方也不会让出来,这样的好处是原来在他周围的其他元素不会因为它的离开而改变位置使页面布局错乱。
3.实现元素的垂直居中定位
.wraper{
position: relative;
.box{
position: absolute;
top: 50%;
left: 50%;
margin:-50px 0 0 -50px;
}
} .wraper{
position: relative;
.box{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
} .wraper{
position: relative;
.box{
display:flex;
justify-content: center;
align-items: center;
}
}
JavaScript基础习题的更多相关文章
- JavaScript基础
JavaScript基础 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处 ...
- 一步步学习javascript基础篇(0):开篇索引
索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...
- 前端之JavaScript基础
前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
- 一步步学习javascript基础篇(3):Object、Function等引用类型
我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...
- Javascript基础回顾 之(三) 面向对象
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
- Javascript基础回顾 之(二) 作用域
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
- Javascript基础回顾 之(一) 类型
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
- JavaScript 基础回顾——对象
JavaScript是基于对象的解释性语言,全部数据都是对象.在 JavaScript 中并没有 class 的概念,但是可以通过对象和类的模拟来实现面向对象编程. 1.对象 在JavaScript中 ...
- javascript基础01
javascript基础01 Javascript能做些什么? 给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 如实现到轮播图.拖拽.放大镜等,而动态的数据就好比不像没有 ...
随机推荐
- 移动架构-json解析框架
JSON在现在数据传输中占据着重要地位,相比于xml,其解析和构成都要简单很多,第三方的解析框架也不胜枚举,这里之所以要自定义一个json解析框架,一方面是更好的了解json解析过程,另一方面是有时候 ...
- netcore mvc菜单,角色,权限
netcore mvc快速开发系统(菜单,角色,权限[精确到按钮])开源 AntMgr https://github.com/yuzd/AntMgr 基于netcore2.0 mvc 开发的 快速搭建 ...
- 502 BAD GATEWAY-k8s的cgroup限制了apache的可用内存
1.release的组件逻辑图 2.表象:按F12,总是报502 BAD GATEWAY 3.nginx日志 [error] #: * upstream prematurely closed conn ...
- golang中switch用法细节
1. switch穿透-fallthrough, 如果在case语句块后增加fallthrough,则会继续执行下一个case,也叫switch穿透,默认只穿透一层 2. Type Switch: s ...
- 嵌入式Linux学习笔记之第一阶段---基础篇
嵌入式Linux学习分五个阶段 第一阶段: 01嵌入式环境搭建初期 02C语言语法概述 03C语言内存操作 04c语言函数 05linux基础 06gun基础 第二阶段: 01-linux之io系统编 ...
- scratch少儿编程——03、动作:运动的开始,游戏的基础。
各位小伙伴大家好: 从这一期开始我们来学Scratch的具体操作. 第一季我们会从每一个脚本模块开始.一个程序块一个程序块去操作,感受它的效果. 今天我们来一起学习程序区的脚本类动作模块的指令. 动作 ...
- 如何用Dome4j(2.2.1)创建Xml
XML解析器常见的有两种: 1.SAX解析器,用于xml的简单API 2.DOM解析器,文档对象模型 DOM就是利用对象来把文本模型化,但是模型实现有以下几个基本的点: 1. 用来表示.操作文档的接口 ...
- 使用paypal-php-sdk开发php国际支付
参考:https://github.com/paypal/PayPal-PHP-SDK/wiki https://blog.csdn.net/markely/article/details/79044 ...
- 简单二次封装的Golang图像处理库:图片裁剪
简单二次封装的Golang图像处理库:图片裁剪 一.功能 Go语言下的官方图像处理库 简单封装后对jpg和png图像进行缩放/裁剪的库 二.使用说明 1.首先下载 go get -v -u githu ...
- SQL Server 2017命令创建新账户(test-user),并分配数据库权限
-- 1. 创建登录账号USE [master];GOCREATE LOGIN [test-user] WITH PASSWORD = 'xysu7SZ193SNX6E{{HxubPE3}vr',DE ...