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基础习题的更多相关文章

  1. JavaScript基础

    JavaScript基础 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处 ...

  2. 一步步学习javascript基础篇(0):开篇索引

    索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...

  3. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  4. 一步步学习javascript基础篇(3):Object、Function等引用类型

    我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...

  5. Javascript基础回顾 之(三) 面向对象

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  6. Javascript基础回顾 之(二) 作用域

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  7. Javascript基础回顾 之(一) 类型

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  8. JavaScript 基础回顾——对象

    JavaScript是基于对象的解释性语言,全部数据都是对象.在 JavaScript 中并没有 class 的概念,但是可以通过对象和类的模拟来实现面向对象编程. 1.对象 在JavaScript中 ...

  9. javascript基础01

    javascript基础01 Javascript能做些什么? 给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 如实现到轮播图.拖拽.放大镜等,而动态的数据就好比不像没有 ...

随机推荐

  1. NET Core 3.0中的WPF

    在.NET Core 3.0中的WPF中使用IOC图文教程   我们都知道.NET Core 3.0已经发布了第六个预览版,我们也知道.NET Core 3.0现在已经支持创建WPF项目了,刚好今天在 ...

  2. TCP使用

    TCP使用注意事项总结   目录 发送或者接受数据过程中对端可能发生的情况汇总 本端TCP发送数据时对端进程已经崩溃 本端TCP发送数据时对端主机已经崩溃 本端TCP发送数据时对端主机已经关机 某个连 ...

  3. python爬虫的入门问题

    第一张图是代码,爬的是亚马逊的一个商品网页,能爬出来内容,但是内容之间有很多空白换行,这是什么原因?要怎么解决?

  4. 【转载】熟练利用google hacking来辅助我们快速渗透

    转载于:https://klionsec.github.io/2014/12/14/search-hacking/?tdsourcetag=s_pcqq_aiomsg 0x01 google hack ...

  5. 什么是H5?

    总听到很多人说H5,现在H5很火,到底H5是什么,以下发表个人对H5的理解. HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年. ...

  6. Jenkins+maven+gitlab自动化部署之基础环境部署(一)

    从一个二线城市,来到上海,刚入职,老大就给任务,为了减少开发打包部署时间,需要搭建一套自动化部署环境.接到任务后,赶紧上网查找资料,以及了解jenkins作用等等,用了一周时间,了解了个大概,由于都是 ...

  7. insert 一条数据 然后拿出这条数据在数据库中生成的ID

    [insert 一条数据 然后拿出这条数据在数据库中生成的ID] <insert id="insert" parameterType="management&quo ...

  8. 数据类型 _python

    字符串 str # a ="asd bfg" # print(a.capitalize()) #首字母大写 # print(a.title()) #每个单词首字母大写 # prin ...

  9. WUSTOJ 1239: n皇后问题(Java)

    题目链接:

  10. 数据结构——java实现队列

    顺序队列: 概念: 队列是一种先进先出的线性表,只允许在一端插入,另一端删除.允许插入的一端称为队尾,允许删除的一端称为队头 顺序队列的实现: import org.junit.jupiter.api ...