前端复习
Web前端 --- HTML = Tag + CSS + JavaScript
Tag --- Content --- 承载内容
CSS --- Display --- 渲染内容（显示）
JS --- Behavior --- 交互式行为
~ ECMAScript - 核心语法
~ BOM - 浏览器对象模型 - window
~ DOM - 文档对象模型 - document
- 获取元素：getElementById() / getElementsByTagName() / getElementsByClassName() / querySelector() / querySelectorAll() / parentNode / children / previousElementSibling / nextElementSibling / firstElementChild / lastElementChild
- 删除元素：父节点.removeChild(子节点)
- 创建元素：document.createElement(标签名) / 父节点.appendChild(子节点) / 父节点.insertBefore(子节点, 参照节点)
- 修改元素：textContent / innerHTML / setAttribute()
- 页面链接：
- 锚点链接：去顶部
- 功能链接：
1. 原生js代码实现
动态列表 - 锐客网 * {
margin: 0;
padding: 0;
}
body {
background-color: #000;
}
#app {
width: 30%;
margin: 20px auto;
}
#fruits>li {
width: 90%;
height: 40px;
background-color: #6cc0ac;
margin: 3px 0;
text-align: center;
color: #fff;
font-size: 20px;
list-style-type: none;
line-height: 40px;
}
#fruits>li>a {
float: right;
color: #fff;
text-decoration: none;
margin-right: 10px;
}
#fruits+div {
margin-top: 20px;
}
#fname {
width: 70%;
height: 30px;
border-radius: 8px;
border: none;
outline: none;
font-size: 20px;
text-align: center;
vertical-align: middle;
background-color: #999;
}
#ok {
width: 18%;
height: 30px;
background-color: #a74f58;
color: #fff;
border: none;
outline: none;
font-size: 14px;
vertical-align: middle;
}
- 苹果×
- 香蕉×
- 榴莲×
- 火龙果×
2. jQuery实现
动态列表 - 锐客网 * {
margin: 0;
padding: 0;
}
body {
background-color: #000;
}
#app {
width: 30%;
margin: 20px auto;
}
#fruits>li {
width: 90%;
height: 40px;
background-color: #6cc0ac;
margin: 3px 0;
text-align: center;
color: #fff;
font-size: 20px;
list-style-type: none;
line-height: 40px;
}
#fruits>li>a {
float: right;
color: #fff;
text-decoration: none;
margin-right: 10px;
}
#fruits+div {
margin-top: 20px;
}
#fname {
width: 70%;
height: 30px;
border-radius: 8px;
border: none;
outline: none;
font-size: 20px;
text-align: center;
vertical-align: middle;
background-color: #999;
}
#ok {
width: 18%;
height: 30px;
background-color: #a74f58;
color: #fff;
border: none;
outline: none;
font-size: 14px;
vertical-align: middle;
}
- 苹果×
- 香蕉×
- 榴莲×
- 火龙果×
3. vue实现
动态列表 - 锐客网 * {
margin: 0;
padding: 0;
}
body {
background-color: #000;
}
#app {
width: 30%;
margin: 20px auto;
}
#fruits>li {
width: 90%;
height: 40px;
background-color: #6cc0ac;
margin: 3px 0;
text-align: center;
color: #fff;
font-size: 20px;
list-style-type: none;
line-height: 40px;
}
#fruits>li>a {
float: right;
color: #fff;
text-decoration: none;
margin-right: 10px;
}
#fruits+div {
margin-top: 20px;
}
#fname {
width: 70%;
height: 30px;
border-radius: 8px;
border: none;
outline: none;
font-size: 20px;
text-align: center;
vertical-align: middle;
background-color: #999;
}
#ok {
width: 18%;
height: 30px;
background-color: #a74f58;
color: #fff;
border: none;
outline: none;
font-size: 14px;
vertical-align: middle;
}
-
{{ fruit }}
×
推荐阅读
- 小学英语必考的10个知识点归纳，复习必备！
- 私有化轻量级持续集成部署方案--03-部署web服务（下）
- Jsr303做前端数据校验
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- spring|spring boot项目启动websocket
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- 前端代码|前端代码 返回顶部 backToTop
- OC:|OC: WKWebView详解
- WKWebview|WKWebview js 调用oc 和oc调用js
- javaweb|基于Servlet+jsp+mysql开发javaWeb学生成绩管理系统