第十四篇：JavaScript基础
一、CSS内容补充之position
10.position:fixed；固定div在页面的一个位置；
top:0;
right:0;
left:0;
position:absolute + relative;依据父标签定位；
11.屏蔽层：
position:fixed
top:0;
right:0;
left:0;
bottom:0;
opacity:0.5; 设置透明度；
z-index:10 分层，最大的在上面；
二、CSS内容补充之overflow
12.overflow:auto,hidden;
三、CSS内容补充之hover
13.hover,当鼠标移动到当前标签上时当前属性生效；
四、CSS内容补充之background
14.background-color;
background-image:url('img.jpg'),默认div内平铺；
background-repeat:no-repeat, 不重复
repeat-x 横向重复
repeat-y; 纵向重复
background-position-x:10px；背景图坐标显示；图标；
五、JavaScript代码存在新式
JavaScript
1. 独立的语言，浏览器具有js解释器；
1.存在于
html中；
head标签中<script type="text/javascript">
文件中：
<script src="js文件路径">
注意：js代码放置在<body>标签内部最下方，利于用户体验友好；
代码注释： //注释内容，多行注释/* 注释内容 */
2.基本数据类型；
变量：
python:
name = 'alex'
JavaScript:
name = 'alex' #全局变量
var name = 'alex' #局部变量
函数：
function func(){
var name = 'alex'
}
ps:写js代码临时可以在浏览器终端console里；
数字
parseInt()
parseFloat()
字符串
a = "alex"
a.charAt(索引位置) 按下标取字符串内的字符；
a.substring(起始位置,结束位置) 取字符串区间；
a.length 获取长度；
列表（数组）
六、JavaScript数组和字典以及for循环
字典
布尔值
小写，
条件语句
if(条件){
}else if(条件){
}else{
}
== 值相等
!= 不等
=== 值和类型都相等
!==
&& and
|| or
for循环
1.循环时，循环的是元素的索引
a = [11,22,33]
for(var item in a){
consple.log(item);
}
2.
for(var i=0;i<10;i++){
}
第二种循环不支持字典循环；
定时器：
function f1() {alert(123)}
setInterval("f1();",2000);
//创建定时器，执行代码，间隔时间；毫秒；
console.log("内容");
八、JavaScript函数的定义
九、Dom直接选择器和间接选择器
获取html文档内容：
<div id="i1">欢迎</div>
tag = document.getElementById('i1')
content = tag.innerText
tag.innerText = "123"
Dom操作
1.找到标签
a.直接找：
document.getElementById('i1')
document.getElementsByTagName('div')
document.getElementsByClassName('c1')
b.间接
parentElement //父节点标签元素
children //所有子标签
firstElementChild //第一个子标签元素
lastElementChild //最后一个子标签元素
nextElementSibling //下一个兄弟标签元素
previousElementSibling// 上一个兄弟标签
2.操作标签
a.获取标签中的文本内容
标签.innerText
修改
标签.innerText = "new_text"
b. className
classList.add("样式名")
classList.remove("样式名")
PS：
<div onclick='func();'>点我</div>
<script>
function func(){
}
</script>
c.checkbox
获取值
checkbox对象.checked
设置值
checkbox对象.checked = true
回顾：
HTML
一大堆标签，块级和行内；
CSS
position
background
text-aling
margin
padding
font-size
z-index
over-folw
hover
opacity
float (clear:both)
line-height
border
color
display
实战练习：模态对话框、全选反选取消
例子：
莅临指导
多选反选
模态对话框
左侧菜单
返回顶部
作业：
1.登录，注册
2.后台管理页面
-左侧菜单
-右边表格，全选反选，模态框，返回顶部；
3.商城页面
第十四篇：JavaScript基础的更多相关文章
- 前端第四篇---前端基础之jQuery
前端第四篇---前端基础之jQuery 一.jQuery介绍 二.jQuery对象 三.jQuery基础语法 四.事件 五.动画效果 六.补充each 一.jQuery简介 1.jQuery介绍 jQ ...
- 解剖SQLSERVER 第十四篇 Vardecimals 存储格式揭秘（译）
解剖SQLSERVER 第十四篇 Vardecimals 存储格式揭秘(译) http://improve.dk/how-are-vardecimals-stored/ 在这篇文章,我将深入研究 ...
- 第十四篇 Integration Services：项目转换
本篇文章是Integration Services系列的第十四篇,详细内容请参考原文. 简介在前一篇,我们查看了SSIS变量,变量配置和表达式管理动态值.在这一篇,我们使用SQL Server数据商业 ...
- Python之路【第十四篇】：AngularJS --暂无内容-待更新
Python之路[第十四篇]:AngularJS --暂无内容-待更新
- 【译】第十四篇 Integration Services：项目转换
本篇文章是Integration Services系列的第十四篇,详细内容请参考原文. 简介在前一篇,我们查看了SSIS变量,变量配置和表达式管理动态值.在这一篇,我们使用SQL Server数据商业 ...
- 跟我学SpringCloud | 第十四篇：Spring Cloud Gateway高级应用
SpringCloud系列教程 | 第十四篇:Spring Cloud Gateway高级应用 Springboot: 2.1.6.RELEASE SpringCloud: Greenwich.SR1 ...
- SpringBoot第二十四篇：应用监控之Admin
作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/11457867.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言 前一章(S ...
- Egret入门学习日记 --- 第十四篇（书中 5.4~5.6节 内容）
第十四篇(书中 5.4~5.6节 内容) 书中内容: 总结 5.4节 内容重点: 1.如何编写自定义组件? 跟着做: 重点1:如何编写自定义组件? 文中提到了重要的两点. 好,我们来试试看. 第一步, ...
- Spring Cloud第十四篇 | Api网关Zuul
本文是Spring Cloud专栏的第十四篇文章,了解前十三篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring C ...
- spring cloud系列教程第四篇-Eureka基础知识
通过前三篇文章学习,我们搭建好了两个微服务工程.即:order80和payment8001这两个服务.有了这两个基础的框架之后,我们将要开始往里面添加东西了.还记得分布式架构的几个维度吗?我们要通过一 ...
随机推荐
- 如何提高UI自动化稳定性？
1尽量使用相对路径的xpath表达式定位元素 2查找元素优先使用显示等待方式 3用例与用例之间避免产生依赖,用例可以单独运行 4用例执行结束之后要对测试场景进行还原,避免影响到其他用例的执行 5脚本执 ...
- 《Document-level Relation Extraction as Semantic Segmentation》论文阅读笔记
原文 代码 摘要 本文研究的是文档级关系抽取,即从文档中抽取出多个实体之间的关系.现有的方法主要是基于图或基于Transformer的模型,它们只考虑实体自身的信息,而忽略了关系三元组之间的全局信息. ...
- RocketMQ(1) 基础介绍和单机-集群安装
1. MQ简单介绍 1.1 应用场景 应用解耦 系统的耦合性越高,容错性就越低.以电商应用为例,用户创建订单后,如果耦合调用库存系统.物流系统.支付系统,任何一个子系统出了故障或者因为升级等原因暂时不 ...
- Java abstract 小测试
1 package com.bytezreo.abstractTest; 2 3 /** 4 * 5 * @Description abstract 小测试 6 * @author Bytezero· ...
- Java instanceof 全小写 关键字使用
1 package com.bytezreo.duotai2; 2 3 import java.sql.Date; 4 5 /** 6 * 7 * @Description 面向对象的特征三 ---- ...
- docker 安装 es-head 以及Content-Type header请求头错误解决
拉取es-head镜像,启动 docker pull mobz/elasticsearch-head:5 docker run -itd --name es-head -p 9100:9100 mob ...
- 新零售SaaS架构：订单履约系统架构设计（万字图文总结）
什么是订单履约系统? 订单履约系统用来管理从接收客户订单到将商品送达客户手中的全过程. 它连接了上游交易(客户在销售平台下单环)和下游仓储配送(如库存管理.物流配送),确保信息流顺畅.操作协同,提升整 ...
- 6、mysql的SQL优化
1. 大批量插入数据 1) 主键顺序插入 因为InnoDB类型的表是按照主键的顺序保存的,所以将导入的数据按照主键的顺序排列,可以有效的提高导入数据的效率.如果InnoDB表没有主键,那么系统会自动默 ...
- Windows10 windows installer卸载或安装不了软件怎么办？
先说我的方法: 1.把安装出现问题的软件或者想要卸载的软件的安装目录下的所有文件都删除. 2.用清理软件清理一下垃圾,包括注册表,这里我自己使用的是火绒->安全工具- ...
- Apollo3-Blue-MCU芯片典型硬件电路解析
一 芯片简介 1.简介 Apollo3 Blue Wireless SoC是一款超低功耗无线mcu芯片,它的运行功耗降至6μA/ MHz以下.该器件采用ARM Cortex M4F内核,运行频率高达9 ...