css补充及js基础

最新推荐文章于 2024-08-21 11:04:16 发布

越墨

最新推荐文章于 2024-08-21 11:04:16 发布

阅读量225

点赞数 2

分类专栏：前端文章标签： css javascript

本文链接：https://blog.csdn.net/qq_39787513/article/details/108362782

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

css补充及js基础

一、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 (){函数内容})()

示例：
运行结果

越墨

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css补充及js基础

css补充及js基础一、CSS补充1、选择器优先级2、margin补充3、overflow二、JS基础1、js代码的引入方式2、变量3、数据类型4、流程控制5、运算符6、for循环7、while循环8、函数一、CSS补充1、选择器优先级<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> &lt
复制链接

扫一扫

专栏目录