标签：console log 标签 前端 js var name
前端（四）
浮动
# 标签一浮动，就不分块标签和行内标签
div{
/*float: left;*/ # 往左浮
float: right; # 往右
}
浮动带来的影响
# 父标签塌陷
# 在块级标签内的浮动可能会导致父标签塌陷，解决方式可以用以下：
#d2{
clear: left; /*在父块下，定义一个新块，然后样式写成清除浮动(这个标签左边不能有浮动的元素)*/
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
/*通用解决父标签塌陷问题*/
溢出
p{
border: 2px solid red;
width: 100px;
height: 100px;
/*overflow: visible;*/ /*默认*/
/*overflow: hidden;*/ /*溢出部分直接截断*/
/*overflow: scroll;*/ /*内容被修剪，加滚动条查看*/
overflow: auto; /*如果溢出加滚动条*/
}
溢出案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
border: 2px solid black;
border-radius: 50%;
margin: 0 auto;
overflow: hidden;
}
img{
width: 100%;
}
</style>
</head>
<body>
<div>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fgroup_topic%2Fraw%2Fpublic%2Fp106878681.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1683808925&t=efa6bf623c6a76ac45e97f283debdc48" alt="哎呦~你干嘛">
</div>
</body>
</html>
定位
1. static
# 所有标签默认都是静态的，都是不可移动的
/*position: static; !*静态的不可移动标签的位置*!*/
2. 相对定位(relative)
# 相对自己原来的位置进行移动
p{
width: 100px;
height: 100px;
background: red;
position: relative; /*相对定位(更改position，标签的性质就变了，从不可移动的标签变成可移动标签)*/
left: 30px; # 如果写负数就是往相反的地方移动
top: 50px;
}
3. 绝对定位(absolute)
# 依据已经定位过的父标签进行移动,如果没有父标签，就相对于body标签
#d1{
position: relative;
left: 120px;
top: 120px;
}
#d2{
position: absolute; /*绝对定位*/
left: 50px;
top: 50px;
}
<div id="d1" style="width: 100px; height: 100px; background: blue">123
<div id="d2" style="width: 200px ; height: 200px; background: yellow">
</div>
</div>
4. 固定定位(fixed)
# 相对浏览器进行定位
#d4{
position: fixed;
right: 30px;
bottom: 50px;
}
<div style="height: 500px;background: red "></div>
<div style="height: 500px;background: blue "></div>
<div style="height: 500px;background: yellow "></div>
<div id="d4" style="width: 100px;height: 100px;background: green">回到顶部</div>
透明度(opacity)
1. rgba
# 只能对颜色进行透明
2. opacity
# 可以对颜色和字体进行透明
JavaScript
# 与Java无关，叫这名就是蹭热度，小黑子。简称js
js核心结构：
1. 核心(ECMAScript)
2. 文档对象类型(DOM)
3. 浏览器对象模型(BOM)
"""
脚本语言
轻量级编程语言
可插入HTML页面的编程代码
插入HTML后可由所有的现代浏览器执行
很容易学习
"""
js
1. 书写位置
"""
js文件
HTML的文档中的Script标签内
浏览器的控制台
"""
2. 引入方式
"""
Script标签中写
Script中的src属性
"""
3. 注释
// # 单行注释
/**/ # 多行注释
4. 结束符
js每行都要加;结尾
# 不写也不报错，推荐写
5. 变量
var name = 'kevin'; # es5的语法
let name = 'kevin'; # es6的语法
# 平时写都选择es6版本，es6兼容es5
6. 变量命名规范
# 如Python
# 推荐下划线，也可驼峰
# 字母下划线数字$
7. 常量
# Python中没真正意义上的常量，默认全大写就是常量
# js中有
# js中定义常量 const PI = 3.14
数据类型
js也是一门面向对象的语言，一切皆对象
1. js和python是一门拥有动态类型的语言
2. js中不缺分整型和浮点型，统称数值类型（number）
var a = 100;
typeof a;
"""
整型
浮点型
NaN
"""
3. 字符串
var name = 'kevin'; # 可以单引号和双引号，在浏览器控制台查看结果
console.log(name);
var name1 = "kevin";
console.log(name1);
4. 模板类型
var name = 'jacl';
var age = 18;
var str = 'my name is ${name},my age is ${age}' # ｛里的｝必须存在不然报错
console.log(str)
5. 字符串的拼接
# js中用+
6. NaN
NaN：not a number
7. 类型转换
eg：把字符串的数字转为整形数字
int('123') # python中
parseInt('123')
parseFloat('123')
console.log(parseInt('123'), typeof parseInt('123')) # 用这个查看
console.log(parseFloat('123.123'), typeof parseFloat('123.123')) # 转换的话如果是数字开头可以转，如果不是，就会返回NaN
数据类型内置方法
var str = 'hello';
console.log(str.length) /*查看长度*/
var str1 = ' hello you '
console.log(str1.trim()) /*去除空格*/
console.log(str1.trimLeft()) /*去除左边空格*/
console.log(str1.trimRight()) /*去除右边空格*/
console.log(str.charAt(2)) /*查看第某个字符*/
console.log(str1.indexOf(str)) /*返回括号里面的字符是否在前面的字符串里*/
console.log(str.toUpperCase()) /*转大写*/
console.log(str.toLowerCase()) /*转小写*/
str3 = 'xx|zz|cc|vv|bb'
console.log(str3.split('|')) /*切分*/
布尔值
python中布尔值是True和false
js中全小写
"""
0 空字符串 null NaN undefined
这些在js中都是假的
"""
null和undefined的区别
null表示空，一般指定或者清空一个变量才会使用
var name = null
undefined 表示当声明一个变量但是为初始化，默认值是undefined
var name
数组
# 一维数组
var l = [1,2,3,4]; # 可以存放任意数据类型，索引取值，从0开始
# 多维数组
var ll = [1,2,[3,4,[5,6]]]; # 取值和python类似ll[2[2[0]]] = 5
var l1 = [1,2,3];
# 数组内置方法
l.push(1); # 尾部追加的元素
l.pop(); # 弹出尾部并获取
l.shift(); # 移除头部的元素
l.unshift(); # 头部插入元素
l.slice(); # 切片
l.reverse(); # 翻转
l.join('|'); # 拼接成字符串
l.concat(l1) # 连接数组
l.soft(); # 排序
l.forEach(function (value,index,array){
console.log(value, index,array)
}) # 循环输出数组里面的元素
l = l.map(function (value,index,array){
console.log(value,index,array)
return value+1
})
console.log(l) # 循环数组，对元素进行一定的操作
for (var i=0; i<l.length;i++){ # js的for循环语法
} # i++是先使用i后++，++i是先+后使用
运算符
# 基本与python中类似
1 == '1' true 弱等于
1 === '1' false 强等于
&& 与
|| 或
！非
流程控制
if-else：
if-else if-else:
switch(flag){
case 1:
break;
case 2:
break;
case 3:
break;
default:
# 都没有执行这个，可以没有
}
# 与Java类似
三元运算
# python中叫三元表达式
res = a if 条件 else b
# js 如同Java中的问好表达式
a > b ? a:b
标签：console,
log,
标签,
前端,
js,
var,
name
From： https://www.cnblogs.com/juzixiong/p/17329583.html