技术教程 编程教程 day27 CSS浮动、溢出 & js基本语法 & DOM文档流操作 正文

day27 CSS浮动、溢出 & js基本语法 & DOM文档流操作

2023-02-12,,,,

接day26CSS=>CSS定位

overflow属性

值 描述 示例
visible 默认值，内容不会被修剪，会呈现在元素框之外
hidden 内容会被修剪，并且其余内容是不可见的 overflow: hidden;
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 overflow: scroll;
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit 继承父类元素的overflow属性值

z-index属性

1）此属性指定了一个元素的堆叠顺序（哪个元素应该放在上面或者下面）

2）值越大，越靠上

3)没有指定z-index，后面的元素会压住前面的元素

值 描述 示例
number 根据数字确定堆叠顺序，值越大，越靠前 z-index: 999;
auto overflow: auto;
inherit 继承父元素的z-index属性值 overflow: inherit;

7.4 top/bottom/left/right属性

定位一个元素的上外边距与其包含块上边框之间的偏移量。

top: 10%; //元素向下移动10%

left: -10px; //元素向左移动10像素

8 CSS显示

8.1 display属性

值 描述
值 描述
none 此元素不会被显示
block 此元素将显示为块级元素，此元素前后会带有换行符
inline 默认值，此元素会被显示为内联元素
inline-block 行内块元素
table 此元素会作为块级表格来显示（类似table标签），表格前后带有换行符
table-row 此元素会作为一个表格行显示（类似tr）
table-cell 此元素会作为一个表格单元格显示（类似td和th）
inherit 继承父元素的display属性的值

8.2 visibility属性

值 描述
none 此元素不会被显示
block 此元素将显示为块级元素，此元素前后会带有换行符
inline 默认值，此元素会被显示为内联元素
inline-block 行内块元素
table 此元素会作为块级表格来显示（类似table标签），表格前后带有换行符
table-row 此元素会作为一个表格行显示（类似tr）
table-cell 此元素会作为一个表格单元格显示（类似td和th）
inherit 继承父元素的display属性的值
值 描述
visible 默认值，元素是可见的
hidden 元素不可见，但是原有的位置还存在
collapse 在表格元素中使用，此值可以删除一行或一列，但是不会影响表格布局；被行和列占据的空间会l留给其他内容使用；此值在其他元素中使用，等效于hidden；
inherit 继承父元素的visibility属性的值

9 CSS伪类

伪类用于定义元素在特殊状态下的样式。

例如，它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

值 描述 示例
:link 选择未访问的链接时 a:link
:visited 选择访问过的链接时 a:visited
:hover 鼠标悬停状态（鼠标悬停事件） a:hover
:active 选择正在活动的链接时
:focus 获得焦点时的状态（获得焦点事件） input:focus
:first-letter 选择每个p标签的首字母 p:first-letter
:first-line 选择每个p标签的第一行
::before 在每个p标签之前插入内容 p::before{content: "hi ";}
::after 在每个p标签之后插入内容
:lang(language_code) 为元素的lang属性选择一个初始值 p:lang(en)示例：当鼠标放在图片上悬停时，修改图片尺寸img:hover{width: 200px;height: 200px;} 
<img src="../../img/icon.jpg" width="100px" height="100px" />

HTML的lang属性可用于声明网页或部分网页的语言。这对搜索引擎和浏览器是有帮助的；

示例：

<html lang="en"></html>

<p lang="zh"></p>

ISO 639-1 语言代码

en 英语

zh 中文简体/繁体

fr 法语

it 意大利语

ja 日语

ko 朝鲜语/韩语

ru 俄语

CSS浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框（父级框元素）或另一个浮动框为止。

如果元素设置了浮动，后面紧邻的元素则会受到浮动的影响，若要不受影响，则要在后面清除浮动（可用clear:both;等方法），在两个相邻元素设置相同浮动的情况下，两元素将按顺序相邻摆放。这种定位使得元素脱离DOM文档流。

如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。

特点：

1 设置元素浮动，元素相当于往上移动一个图层；

2 设置元素浮动，元素会具有内联元素的特性，即跟其他相邻的浮动元素在同一行；

属性 描述 值

clear 指定不允许元素的哪一侧有浮动元素 left

right

both 两边

none

inherit

float 指定一个盒子（元素）是否浮动 left

right

none

inherit继承父元素

示例：

<html>

	<head>

		<style>

			div{

				border: 0px solid #000000;

				width: 100px;

				height: 100px;

				margin: 5px;

				color: white;

			}

		</style>

	</head>

	<body>

		<div style="float: left; background-color: black;">1</div>

		<div style="float: left; background-color: red;">2</div>

		<div style="float: left; background-color: blue;">3</div>

	</body>

</html>

JavaScript

1 javascript简介

javascript 简称JS，是一种基于对象Object和事件驱动Event Driver的解释型脚本语言，用于增强HTML页面的动态交互性。

2 特点

1)嵌套在HTML中；

2)环境支持，JS在运行中需要浏览器环境的支持，如果使用的浏览器不支持js脚本，那么浏览器在运行时将忽略js代码；

3)解释执行，无需经过专门编译器的编译，在嵌入脚本的HTML文档载入时被浏览器逐行地解释执行；

4)弱类型语言，js中不需要指定变量的类型；

5)基于对象，js提供了很多内建对象，也允许定义新的对象，还提供对DOM（文档对象模型）的支持；

6)事件驱动，HTML中控件（如文本框、按钮）的相关事件触发时可以自动执行js代码；

7)跨平台，js是依赖浏览器运行的，与具体的操作系统无关。

3 基本语法

3.1 引入JS脚本

内部引入

<script type="text/javascript">

//js脚本代码

</script>

外部引入js文件



<head>

<script type="text/javascript" src="../js/div.js"></script>

</head>

3.2 声明变量

JS中的任何数据类型的变量都可以用var关键字声明；

示例：

var no = 1;

var str = "abc";

var obj = {

	name: "张三",

	age: 12

};

3.3 数据类型

3.3.1 五种原始数据类型

数据类型 说明 示例

Number 数字类型

可以声明整数、小数、正数、负数 var no1 = 1;

var no2 = new Number(12);

var no3 = 12.12;

var no4 = -12.123;

Boolean 布尔类型

0-false

1-true var no_bt = true;

var no_bf = false;

var no_nf = new Boolean(0);

var no_nt = new Boolean(-1);

var no_nt2 = new Boolean(2);

//赋值非0都是true

String 字符串类型 var str1 = "李四";

var str2 = new String("abc");

Null 空值，属于Object类型 var no = null;

Undefined 无（未找到），表示变量未初始化或未接收到函数的返回值； var no = undefined;

3.3.2 引用类型

数据类型 说明 示例

Array 数组 var arr = [1,2,3];

//一个数组可以存放不同类型的元素

var arr2 = [1, "abc", true];

//声明数组元素

var arr3 = new Array(1,2,3);

//声明数组长度

var arr4 = new Array(3);

arr4[0]='a';

arr4[1]='b';

arr4[2]='c';

//获取数组长度

console.info(arr4.length);

Object 对象 var obj = {

//属性

name:"张三",

age:12,

addr:"青岛"

}

日期类型

Date() var d = new Date();

//把Date对象的日期转为字符串

//Tue Jul 20 2021

console.info(d.toDateString());

//把Date对象转为字符串

//Tue Jul 20 2021 17:58:27 GMT+0800 (中国标准时间)

console.info(d.toString());

//返回四位数字的年份

d.getFullYear();

//返回月份0-12

d.getMonth();

//返回一个月中的第几天

d.getDate();

//返回小时0-23

d.getHours()

//返回分钟0-59

d.getMinutes();

//返回秒数0-59

d.getSeconds();

//返回1970年1月1日至今的毫秒数（时间戳）

d.getTime();

正则类型

RegExp() var str = "15701238485";

//方式1 创建正则表达式

var regx = /^1[345789]\d{9}$/;

//方式2 创建正则表达式对象

var regx = new RegExp("^1[345789]\d{9}$");

//test()方法验证字符串是否跟正则表达式匹配，返回布尔值

var tar = regx.test(str);

console.info(tar);

Function 函数 //构造一个名为t的函数

var t = function(){};

3.3.3 数据类型转换

1 parseInt()转成数字类型

示例：

var no = "1";

console.info(no+1);//打印结果 11

var no2 = parseInt(no);

console.info(no2+1);//打印结果 2

注意当转换失败时，会报NaN（Not a Number），指不是一个数字，所以导致转换失败；

可以用isNaN()方法验证，将要类型转换的值是否是数字；

示例：

var no = "1";

var tar = isNaN(no);

2 parseFloat()转成小数

3.4 运算符

3.4.1 算术运算符

加法运算符
减
乘

/ 除

% 取模（取余）

++ 自增 var no = 1;

//++在变量后，变量先参与代码执行，后自加1

console.info(no++);

//++在变量前，变量先自加1，后参与代码执行

console.info(++no);

-- 自减

3.4.2 赋值运算符

= 等于 var no = 1;

+= 加等于 var no += 1; 等价于 var no = no + 1;

-= 减等于

*= 乘等于

/= 除等于

%= 取模等于

3.4.3 比较运算符

==	等于（判断值）	var no = 1;

var no2 = "1";

console.info(no == no2);//返回true

===	全等（同时判断值和类型）	var no = 1;

var no2 = "1";

console.info(no === no2);//返回false

!=	不等于（判断值）

>  	大于（判断值）	var no = 2;

var no2 = "1";

console.info(no > no2);//返回true

>=	大于等于

<	小于

<=	小于等于

3.4.4 逻辑运算符

&& 与 and a && b;

a=true 且 b=true，则返回true，否则返回false

|| 或 or a || b;

a和b都等于false，则返回false，否则返回true

! 非 not !true 等于 false

3.4.5 三元运算符(条件运算符)

Condition ? Value if true : value if false;

示例：

var text = (a > b) ? "yes" : "no";

3.5 分支语句

if语句

if(condition){

} else if(condition){

} else {

}

switch语句

switch(){

case v1:

break;

case v2:

break;//跳出分支

default:

//当所有的case值都不匹配时，执行default分支

}

3.6 循环语句

for/in循环

示例：

//创建对象

var user = {

name:"张三",

	age: 12,

	sex: "男"

}

for(key in user){

//获取对象的属性值

	var value = user[key];

	console.info(key + ":"+ value);

}

for循环

var arr = [1,2,3,4];

for(var i = 0; i < arr.length; i++){

console.info(arr[i]);

}

while循环

while(condition){

}

do while()循环

do{

}while(condition);

break与continue关键字

break 跳出循环，循环终止；

continue 跳出本次循环，继续下一次循环；

3.7 函数function

函数用function关键字声明

function 函数名{

return [返回值];

}

无参无返回值函数

function f1(){

}

有参无返回值函数

function f2(a, b){

	//参数列表中的形参，不需要用var声明

}

有参有返回值函数

function f3(a, b){

	return a+b;

}

调用函数

f1();

f2(1, 2);

var c = f3(1, 2);

3.8 对象

创建对象

var user = {

//对象属性

	name:"张三",

	age: 12,

	sex: "男",

//对象方法

	move:function(){

		console.info("user is moving");

	}

}

获取对象属性值

var property = user.name;

或者

var property = user["age"];

修改属性值

user.name = "李四";

或

user["age"] = 20;

添加属性

user.addr = "青岛";

删除属性

delete user.addr;

3.9 DOM文档对象模型

DOM(Document Object Model) 文档对象模型

当页面被加载时，浏览器会创建页面的DOM，可以把DOM理解为当前被加载的HTML页面的对象；

3.9.1 document对象

getElementById()

根据标签的id，返回一个标签对象(element)

示例：

var ele = document.getElementById("user_name");

console.info(ele.value);

getElementsByName()

根据标签name属性值，返回一个标签对象的集合

示例：

var ele = [];

ele = document.getElementsByName("p2");

console.info(ele[0].innerHTML);

getElementsByTagName()

根据标签名，返回一个标签对象的集合

3.9.2 element对象

属性

element.attributes; 返回标签中的属性对象集合

element.innerHTML; 设置或返回标签元素的内容;

内容中包含的子HTML标签会当成字符串处理；

获取标签内容

var c = element.innerHTML;

设置标签内容

element.innerHTML = "abc";

element.innerText 设置或返回标签元素的内容;

内容中的子HTML标签会显示样式；

element.id; 设置或获取元素的id

element.value; 设置或获取元素的value属性值； //获取value属性值

var v = element.value;

//给value属性赋值

element.value = "1";

element.className; 设置或获取元素的class属性值

element.style; 设置会或获取元素的样式 element.style = "font-size: 10px";

方法

ele.getAttribute(); 获取元素的指定属性值 var c = ele.getAttribute("align");

ele.setAttribute(); 设置元素属性值 ele.setAttribute("align","left");

ele.hasAttribute(); 判断元素是否有该属性值，返回布尔值 var bo = ele.hasAttribute("width");

console.info(bo);//true/false

ele.removeAttribute(); 从元素中移除指定属性 ele.removeAttribute("width");

ele.toString(); 把元素转换为字符串

3.9.3 DOM事件

onBlur 元素失去焦点事件

onfocus 元素获得焦点

onchange 元素内容改变时

onclick 点击触发事件

ondblclick 双击触发事件

onmouseout 鼠标从元素上移开

onmouseover 鼠标移到某元素上

onsubmit 提交按钮被点击

onreset 重置按钮被点击

示例：

day27 CSS浮动、溢出 & js基本语法 & DOM文档流操作的相关教程结束。

《day27 CSS浮动、溢出 & js基本语法 & DOM文档流操作.doc》

下载本文的Word格式文档，以方便收藏与打印。

Copyright 2023. 昆居客 - IT编程,互联网信息技术文档大全!