当前位置: 首页 > news >正文

CSS以及JavaScript

目录

一.CSS

1.overflow溢出属性

2.定位

二.JavaScript基础

1.JavaScript引入方式

2.JavaScript数据类型

常用方法:

字符串常用方法:

在js里,什么是真,什么是假

数组的常用方法

运算符

(1)算数运算符:+

(2)比较运算符==与===

(3)逻辑运算符

3.流程控制

(1)if判断

(2)switch-case语法

(3)for循环

(4)while循环

(5)三元运算符

4.函数

(1)格式

(2)无参函数

(3)有参函数

(4)关键字arguments

(5)函数的返回值

(6)匿名函数

5.JSON对象


一.CSS

1.overflow溢出属性

visible默认值,内容不会被修剪,会呈现在元素框之外
hidden内容会被修剪,并且其余内容是不可见的
scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容
auto

如果内容被修剪,则浏览器会显示滚动条以便查看其余内容

  • overflow(水平和垂直均设置)
  • overflow-x(设置水平方向)
  • overflow-y(设置垂直方向)

2.定位

静态定位:默认情况下,所有的标签都是静止的,不能够移动(static)

相对定位:相对于自己原来的位置进行移动(relative)

绝对定位:相对于父类标签移动,如果没有父元素,那就按照body移动(absolute)

固定定位:相对于浏览器窗口定位(fixed)

二.JavaScript基础

实际上,一个完整的JavaScript实现是由以下3个不同部分组成的:

  • 核心(ECMAScript)
  • 文档对象模型(DOM)Document object model (整合js、css、html)
  • 浏览器对象模型(BOM)Broswer object model(整合js和浏览器)

1.JavaScript引入方式

  1. Script标签内写代码
  2. <script src="yscript.js"></script>

注释:

  1. //            这是单行注释
  2. /*   */      这是多行注释

变量:

  1. JavaScript的变量名可以使用_,数字,字母,$组成,不能以数字开头
  2. 声明变量使用     “var  变量名;”   的格式来进行声明

常量:

  1. const PI = 3.14

2.JavaScript数据类型

JavaScript拥有动态类型

常用方法:

parseInt("123")返回123
parseInt("ABC")返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字
parseFloat("123.456")返回123.456

字符串常用方法:

.length返回长度
.trim()移除空白
.trimLeft()移除左边的空白
.trimRight()移除右边的空白
.charAt(n)返回第n个字符
.concat(value, ...)拼接
.indexOf(substring, start)子序列位置
.substring(from, to)根据索引获取子序列
.slice(start, end)切片
.toLowerCase()小写
.toUpperCase()大写
.split(delimiter, limit)分割

在js里,什么是真,什么是假

a=true
b=false
只需要记住什么是假,其余的都是真
""(空字符串)、0、null、undefined、NaN都是false

数组的常用方法

.length数组的大小
.push(ele)尾部追加元素
.pop()获取尾部的元素
.unshift(ele)头部插入元素
.shift()头部移除元素
.slice(start, end)切片
.reverse()反转
.join(seq)将数组元素连接成字符串
.concat(val, ...)连接数组
.sort()排序
.forEach()将数组的每个元素传递给回调函数
.splice()删除元素,并向数组添加新元素
.map()返回一个数组元素调用函数处理后的值的新数组

运算符

(1)算数运算符:+
  • +在前面
    • 先增加后赋值
  • +在后面
    • 先赋值后增加
var a = 10;
// undefined
var res1 = a++;
// undefined
var res2 = ++a;
// undefined
res1
// 10
res2
// 12
(2)比较运算符==与===
  • 当使用“==”比较运算符时,会进行类型转换然后再比较
    • 如果操作数的类型不同,则会尝试将他们转换为相同的类型,然后再进行比较
  • 而使用“===”严格相等运算符时,不会进行类型转换
    • 它要求操作数的值和类型都相同才会返回true

==:弱等于

        内部自动转换成相同的数据类型比较了

===:强等于

        内部不做类型转换

1 == '1';
true
1 === '1';
false
(3)逻辑运算符
  • Python中:and  or  not
  • JavaScript中:&&  ||  !
5 && '5';
'5'
0 || 1;
1
!5 && '5';
'5'

3.流程控制

(1)if判断

// if - else

if (条件){条件成立执行的代码块}else{条件不成立时执行的代码块}

// if - else if - else

if (条件){条件成立执行的代码块}else if(条件){条件成立执行的代码块}else{条件不成立时执行的代码块}

// () 条件 {} 执行的代码块

var age = 10;
if (age>=18){console.log("你好")
}else{console.log("滚蛋")
};
// if - else
if (age >= 18 ){console.log("你好")
}else if(age<10){console.log("萝莉酱")
}else{console.log("滚蛋")
};

(2)switch-case语法

  • 提前定义好可能出现的条件和解决方式
    • break
      • 如果不加break,匹配成功之后会依次执行
    • default
      • 所有条件都不成立时走的代码
var num = 2;
switch (num) {case 0:console.log("喝酒");break;case 1:console.log("吃饭");break;case 2:console.log("打牌");break;default console.log("走人")
}

(3)for循环

for (起始条件,结束条件,循环条件){条件成立执行的代码}

// 打印 0-9 的数字
for (let i=0;i<10;i++){console.log(i)
}// 打印列表内的每一个值
var ll = [11,22,33,44,55,66,77];
for (let i = 0;i < ll.length; i++){console.log(ll[i])
};

(4)while循环

while (条件){条件成立执行的代码}

var i = 0;
while (i<100){console.log(i)i++;
};

(5)三元运算符

  • 在python中
res = 4 if 1 > 2 else 6
  • 在JavaScript中
var res = 1 > 2 ? 4 : 6;
// 6var res = 1 > 2 ? 4 : (8 > 5 ? 999 : 888);
// 999

4.函数

  • 在Python中定义函数需要用 def
  • 在JavaScript中定义函数需要用 function

(1)格式

// 格式
function 函数名(形参,形参,形参,形参...){函数体代码
}

(2)无参函数

// 无参函数
function func1(){console.log("我是无参函数")
}func1()

(3)有参函数

// 有参函数
function func2(a,b){console.log(a,b)
};func2(1,2)
function func2(a,b){console.log(a,b)
};func2(1,2)
// VM3577:2 1 2func2(1,2,3,4,5,6,7)
// VM3577:2 1 2func2(1)
//VM3577:2 1 undefined
  • 在js中传多了只拿对应的数据
  • 在js中传少了也不会报错

(4)关键字arguments

function func3(a,b,c){console.log(arguments)console.log(a,b,c)
};
function func3(a,b,c){console.log(arguments)console.log(a,b,c)
};func3(1,2,3,4,5,6,7)/*
VM3668:2 Arguments(7) [1, 2, 3, 4, 5, 6, 7, callee: ƒ, Symbol(Symbol.iterator): ƒ]
VM3668:3 1 2 3
*/
  • 能够获取到函数接收到的所有参数

用途:

function func4(a,b,c){if (arguments.length > 3){console.log("传多了")}else if (arguments.length < 3){console.log("传少了")}else{console.log(a,b,c)}
};

(5)函数的返回值

  • 使用关键字 return

  • 返回单个值

function index(){return 666
};
  • 返回多个值要用数组约束
function index(){return [777,88,99]
};

JavaScript不支持解压赋值

(6)匿名函数

function (){};// 自调用
function (){}();// 变量存储
var b = function (){}

5.JSON对象

json.dumps  ------------------->JSON.stringify()
json.loads--------------------->JSON.parse()
var obj1 = 

1. 先序列化
var res=JSON.stringify(obj1) # '{"name": "Alex", "age": 18};'

python:
    json.loads(res) # {"name": "Alex", "age": 18};
    
2. 反序列化
var str1 = '{"name": "Alex", "age": 18}'; # json.dumps
js反序列化:
    JSON.parse(str1)     # {"name": "Alex", "age": 18}

http://www.lryc.cn/news/215104.html

相关文章:

  • JVM——类的生命周期(加载阶段,连接阶段,初始化阶段)
  • CSS中实现元素居中的几种方法总结
  • 保护听力戴什么耳机比较好?开放式耳机能保护听力吗?
  • 【JVM】垃圾回收机制
  • MySQL数据库入门到精通——运维篇(2)
  • 投资者如何保障个人利益?行业律师与欧科云链专家给出建议
  • 【办公软件】C#调用NPOI实现Excel文件的加载、导出功能
  • UVA 11990 “Dynamic‘‘ Inversion 区域树 + 树状数组
  • 邮件钓鱼分析
  • Android 小技巧
  • Centos MySQL --skip-grant-tables详解
  • Linux:进程控制的概念和理解
  • ubuntu20.04编译安装nginx
  • 操作系统的分页
  • 微服务环境搭建
  • ffmpeg 截取命令
  • TypeScript深度剖析:TypeScript 中枚举类型应用场景?
  • [推荐]SpringBoot,邮件发送附件含Excel文件(含源码)。
  • node学习之包管理器
  • 自动驾驶车辆轨迹跟踪
  • React的useEvent 和 ahooks 的 useMemorizedFn 的深度分析和对比
  • 基于goframe2.5.4、vue3、tdesign-vue-next开发的全栈前后端分离的管理系统
  • LInux之在同一Tomcat下使用不同的端口号访问不同的项目
  • 梦百合上榜2023鼎革奖数字化转型先锋榜
  • 沉痛悼念科研分公司
  • Django的网站项目开发好了,该用何种方案在Centos上部署【答:Gunicorn(uWSGI)+Nginx】
  • 基于PyTorch的中文情绪分析器设计与开发
  • HT5010 音频转换器工作原理
  • ubuntu18.04如何更新到22.04
  • 嵌入式软件开发:第二部分–七个步骤计划