css补充及js基础
一、CSS补充
1、选择器优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color:red;
}
/* css继承效果 -- 优先级0 */
/*元素选择器--优先级是1*/
/*优先级相同的,会优先显示后面的*/
span{
color:blue;
}
/*类值选择器优先级为10*/
.c1{
color:yellow;
}
.c2{
color:pink;
}
/*id选择器优先级为100*/
#d1{
color:aqua!important;
}
/*!important优先级最高*/
/* 多级选择器,优先级累加,但不进位,即11个类值选择器也大不过一个id选择器 */
</style>
</head>
<body>
<div class="c1">
野火烧不尽
<span class="c2 c3" id="d1">春风吹又生</span>
</div>
</body>
</html>
页面效果:
2、margin补充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cc{
height:100px;
width:600px;
border:1px solid red;
}
.c1{
height:50px;
width:100px;
background-color:green;
margin-left:10%; /* 父级标签宽度的10% */
}
</style>
</head>
<body>
<div class="cc">
<div class="c1"></div>
</div>
</body>
</html>
页面效果:
3、overflow
溢出处理,如果内容超过边框,则隐藏
overflow:hidden 直接隐藏
overflow:auto 隐藏,附加滚轮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height:100px;
width:100px;
border:1px solid blue;
overflow:hidden;
}
#d1{
height:100px;
width:100px;
border:1px solid red;
overflow:auto;
}
</style>
</head>
<body>
<div>
悄悄的我走了,
正如我悄悄的来;
我挥一挥衣袖,
不带走一片云彩。
</div>
<br>
<div id="d1">
轻轻的我走了,
正如我轻轻的来;
我轻轻的招手,
作别西天的云彩。
</div>
</body>
</html>
页面效果:
二、JS基础
js分为以下三个部分:
- ECMAjavascript 核心(js代码)
- BOM 浏览器对象模型(js操作浏览器,帮你做事情)
- DOM html文档对象模型(通过js代码控制html文档中的所有标签)
1、js代码的引入方式
方式1、script标签中写js代码
<script>
js代码
</script>
建议放到body标签下面
方式2、创建.js结尾的文件,写js代码,通过script标签的src属性来引入
<script src="路径"></script>
2、变量
var 变量=赋值 //声明变量
示例:
var a=11;
a
只声明不赋值,默认值为undefined:
3、数据类型
typeof +变量 查看变量类型
1)number类型
在js中,数字、小数皆为number类型
数字类型可做加减乘除以及取余运算。
2)字符串
字符串可通过索引取值或通过charAt获取:
切片:变量.substring(起始值,结束值);
移除两端空格:
变量.trim() 可加Left和Right选择去除左、右空格
3)布尔类型(true或false)
4)数组(array)
类似python中列表
var a=[元素1,元素2,元素3];
数组常用方法:
(1) 通过索引取值:
(2) 尾部追加元素
变量.push(元素);
(3) 尾部移除一个元素
变量.pop();
(4) 头部插入一个元素
变量.unshift();
(5) 头部移除一个元素
变量.shift();
(6) 指定索引位置删除及插入元素
变量.splice(从哪删(索引),删几个(个数),删除位置替换的新元素(可不写,可写多个))
(7) 切片
变量.slice(start,end)
(8)原数组反转
变量.reverse()
(9)将数组连接起来形成一个字符串
变量.join(连接符);
(10) 连接数组
var 数组3=数组1.concat(数组2)
(11) 对原数组进行排序(只能根据acsii码排序)
变量.sort();
如果要按照数字大小排列需自定义规则进行排序:
5)自定义对象类型
类似于python中字典,键可以不加引号
变量={key1:“value1”,key2,“value2”}
增删改查时键必须加引号
- 可通过键取值、改值
- 删除键值对:delete 变量[‘键’]
- 新增:变量[‘新键’]=‘新值’
4、流程控制
if (条件1){
执行内容
}
else if (条件2){
执行内容
}
else{
执行内容
}
示例:
5、运算符
1)比较运算符
== //等于,弱比较运算符,只判断值,不判断数据类型
=== //等于,强比较运算符,即判断类型也判断值
!= //不等于,弱比较运算符
!== //不等于,强比较运算符
>= //大于等于
<= //小于等于
> //大于
< //小于
示例:
2)算数运算符
+ - * / % ++ --
++ //自增
-- //自减
a++ //先执行逻辑,最后a自加1
++a //a先自加1,再执行逻辑
示例:
6、for循环
1)循环数组
默认遍历出的是索引
方式1:
for (var i in 数组){
console.log(数组[i])
};
示例:
方式2:
for (var i=0;i<数组.length;i++){
console.log(数组[i])
} ;
示例:
循环自定义对象时循环出的是键,需要通过键去找值
7、while循环
var i=0
while (i < 固定值){
执行内容
i++;
}
示例:
8、函数
1)普通函数
function 函数名(形参){
函数内容
}
函数名(实参)
示例:
2)匿名函数
var 变量=function (形参){
函数内容
}
示例:
3)自执行函数
(function (){函数内容})()
示例: