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

  1. 前端第四篇---前端基础之jQuery

    前端第四篇---前端基础之jQuery 一.jQuery介绍 二.jQuery对象 三.jQuery基础语法 四.事件 五.动画效果 六.补充each 一.jQuery简介 1.jQuery介绍 jQ ...

  2. 解剖SQLSERVER 第十四篇 Vardecimals 存储格式揭秘（译）

    解剖SQLSERVER 第十四篇    Vardecimals 存储格式揭秘(译) http://improve.dk/how-are-vardecimals-stored/ 在这篇文章,我将深入研究 ...

  3. 第十四篇 Integration Services：项目转换

    本篇文章是Integration Services系列的第十四篇,详细内容请参考原文. 简介在前一篇,我们查看了SSIS变量,变量配置和表达式管理动态值.在这一篇,我们使用SQL Server数据商业 ...

  4. Python之路【第十四篇】：AngularJS --暂无内容-待更新

    Python之路[第十四篇]:AngularJS --暂无内容-待更新

  5. 【译】第十四篇 Integration Services：项目转换

    本篇文章是Integration Services系列的第十四篇,详细内容请参考原文. 简介在前一篇,我们查看了SSIS变量,变量配置和表达式管理动态值.在这一篇,我们使用SQL Server数据商业 ...

  6. 跟我学SpringCloud | 第十四篇：Spring Cloud Gateway高级应用

    SpringCloud系列教程 | 第十四篇:Spring Cloud Gateway高级应用 Springboot: 2.1.6.RELEASE SpringCloud: Greenwich.SR1 ...

  7. SpringBoot第二十四篇：应用监控之Admin

    作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/11457867.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言   前一章(S ...

  8. Egret入门学习日记 --- 第十四篇（书中 5.4~5.6节 内容）

    第十四篇(书中 5.4~5.6节 内容) 书中内容: 总结 5.4节 内容重点: 1.如何编写自定义组件? 跟着做: 重点1:如何编写自定义组件? 文中提到了重要的两点. 好,我们来试试看. 第一步, ...

  9. Spring Cloud第十四篇 | Api网关Zuul

    ​ 本文是Spring Cloud专栏的第十四篇文章,了解前十三篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring C ...

  10. spring cloud系列教程第四篇-Eureka基础知识

    通过前三篇文章学习,我们搭建好了两个微服务工程.即:order80和payment8001这两个服务.有了这两个基础的框架之后,我们将要开始往里面添加东西了.还记得分布式架构的几个维度吗?我们要通过一 ...

随机推荐

  1. C#多线程(8)：线程完成数

    目录 解决一个问题 CountdownEvent 类 构造函数和方法 示例 解决一个问题 假如,程序需要向一个 Web 发送 5 次请求,受网路波动影响,有一定几率请求失败.如果失败了,就需要重试. ...

  2. Go语言的100个错误使用场景（55-60）｜并发基础

    目录 前言 8. 并发基础 8.1 混淆并发与并行的概念(#55) 8.2 认为并发总是更快(#56) 8.3 分不清何时使用互斥锁或 channel(#57) 8.4 不理解竞态问题(#58) 8. ...

  3. 可视化学习：使用WebGL实现网格背景

    前言 作为前端开发人员,我们最关注的就是应用的交互体验,而元素背景是最基础的交互体验之一.一般而言,能够使用代码实现的界面,我们都会尽可能减少图片的使用,这主要是有几方面的原因,第一,是图片会消耗更多 ...

  4. python使用selenium适配谷歌浏览器插件， chromedriver与chrome各版本及下载地址

    python selenium使用,需要谷歌chromedriver.exe插件 chromedriver.exe插件是放在python的安装目录下(亲测,其它的都不对) 以下是chromedrive ...

  5. 用几张图实战讲解MySQL主从复制

    本文分享自华为云社区<结合实战,我为MySQL主从复制总结了几张图!>,作者: 冰 河. MySQL官方文档 MySQL 主从复制官方文档链接地址如下所示: http://dev.mysq ...

  6. 删除文件或目录 被进程占用或锁定locked 查询进程 资源监视器-cpu-关联句柄-输入文件全路径

    删除文件或目录 被进程占用或锁定 查询进程 资源监视器-cpu-关联句柄-输入文件全路径 右键点击桌面的Win图标,点击"任务管理器">>点击左上角"性能&q ...

  7. open cv java 可以 对图片进行分析，得到数据。考试答题卡 2B铅笔涂黑嘎达 识别

    open cv java 可以 对图片进行分析,得到数据.考试答题卡 2B铅笔涂黑嘎达 识别

  8. Kotlin学习快速入门（11）—— 枚举类的使用

    原文地址:Kotlin学习快速入门(11)-- 枚举类的使用 - Stars-One的杂货小窝 由于有时候偶尔用到枚举类,所以简单记录一下,和Java的一起对比记录 下面以一个简单的四季设计一个枚举类 ...

  9. 用于演示文稿的新 Dapr 幻灯片

    Dapr 官方博客上(https://blog.dapr.io/posts/2024/03/10/new-dapr-slide-deck-for-your-presentations/)发布了一个新的 ...

  10. FreeRTOS教程9 软件定时器

    1.准备材料 正点原子stm32f407探索者开发板V2.4 STM32CubeMX软件(Version 6.10.0) Keil µVision5 IDE(MDK-Arm) 野火DAP仿真器 XCO ...