Javascript

CSS+JS

本文主要是介绍CSS+JS,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

目录
  • 溢出属性
  • 定位属性
  • z-index属性
  • JavaScript简介
  • 变量与注释
  • 数据类型及内置方法
    • 数值类型(Number)
    • 字符串(String)
      • 常用方法
    • 布尔值(Boolean)
    • 对象(Object)
      • 数组(Array)
        • 常用方法

溢出属性

/*文本内容超出了标签的最大范围*/
  overflow: hidden;
    /*直接隐藏文本内容*/
  overflow: auto\scroll; 
    /*提供滚动条查看*/
  
/*溢出实战案例*/
	div {
            overflow: hidden;
        }
	div img {
            width: 100%;
        }

可以用溢出属性来实现圆形头像

image.png

定位属性

# 1.定位的状态
  1.静态定位		static
  	所有的标签默认都是静态定位即不能通过定位操作改变位置
  2.相对定位		relative
  	相对于标签原来的位置做定位
  3.绝对定位		absolute
  	相对于已经定位过的父标签做定位
  4.固定定位    fixed
  	相对于浏览器窗口做定位
# 2.定位操作
	{
      position: absolute\relative;
	  left\right\top\bottom:px and %;
    }
  # 绝对定位
  	如果父级设置了position属性,例如position:relative;,那么子元素就会以父级的左上角为原始点进行定位。
  	如果没有父标签或者父标签没有定位 则以body为准 相当于变成了相对定位
  	固定定位
  		eg:右下方回到底部
      	position: fixed;
      	right: 0;
      	bottom: 50px;
# 3.是否脱离文档流
脱离文档流:
	绝对定位
	固定定位
不脱离文档流:
	相对定位

z-index属性

设置对象的层叠顺序。

  1. z-index 值表示谁压着谁,数值大的压盖住数值小的,
  2. 只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index
  3. z-index值没有单位,就是一个正整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素。
  4. 从父现象:父亲怂了,儿子再牛逼也没用
"""前端界面其实是一个三维坐标系 z轴指向用户"""
动态弹出的分层界面 我们也称之为叫模态框
# 补充知识
rgba(128,128,128,0.5)  最后一个参数可以调整颜色透明度
RGBA 即红色、绿色、蓝色、透明度(英语:Red, Green, Blue、Alpha)。

image.png

JavaScript简介

# 1.JavaScript与Java没有半毛钱关系
	之所以叫这么个名字纯粹是为了蹭当时Java的热度
# 2.JavaScript简称JS 也是一门前端的编程语言
	前端由于非常受制于后端,所以有一些人异想天开想要通过js来编写后端代码一统江湖 由此开发了一个叫nodejs的工具(支持js跑在后端服务器上)>>>:不好用
# 3.JS最初由一个程序员花了七天时间开发的 里面存在很多bug
	为了解决这些bug一直在编写相应的补丁 补丁本身又有bug 最后导致了js中有很多不符合逻辑的地方(成了大家墨守成规的东西)
# 4.JavaScript与ECMAScript
	JavaScript原先由一家公司开发 希望其他公司都使用 最后被组织改名
# 5.版本问题
	ECMA5
  	ECMA6

变量与注释

变量声明

  1. JavaScript的变量名可以使用_,数字,字母,$组成,不能以数字开头。
  2. 声明变量使用 var(let) 变量名; 的格式来进行声明
1.注释语法
	// 单行注释
	/*多行注释*/
2.结束符号
	分号结束   console.log('hello world');
3.变量声明
	在js中定义变量需要使用关键字声明
	3.1.var
  		var name = 'jason'
	3.2.let
  		let name = 'jason'
  	'''var声明都是全局变量 let可以声明局部变量'''
4.常量声明
	const pi = 3.14
/*
注意:
变量名是区分大小写的。
推荐使用驼峰式命名规则。
保留字不能用做变量名。
*/

数据类型及内置方法

JavaScript拥有动态类型

var x;  // 此时x是undefined
var x = 1;  // 此时x是数字
var x = "Alex"  // 此时x是字符串 

数值类型(Number)

// JavaScript不区分整型和浮点型,就只有一种数字类型。
var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123
NaN:属于数值类型 意思是'不是一个数字'(not a number)
	parseInt('abc')  不报错返回NaN
	parseFloat('abc') 不报错返回NaN

字符串(String)

// 默认只能是单引号和双引号 
    	var name1 = 'rain'
    	var name2 = "rain"
// 格式化字符串小顿号
		var name3 = `rain`
		var name = 'rain'
		var age = 18
      console.log(`
      	my name is ${name} my age is ${age}
      `)
      my name is rain my age is 18
// 字符的拼接
        var name4 = 'rain' + 'NB' // 推荐使用加号

常用方法

方法 说明
.length 返回长度
.trim() 移除空白
.trimLeft() 移除左边的空白
.trimRight() 移除右边的空白
.charAt(n) 返回第n个字符
.concat(value, ...) 拼接(推荐使用+号)
.indexOf(substring, start) 子序列位置
.substring(from, to) 根据索引获取子序列(不支持负数索引)
.slice(start, end) 切片(支持负数索引)
.toLowerCase() 小写
.toUpperCase() 大写
.split(delimiter, limit) 分割(delimiter指定分割开始的位置,limit=返回的个数)

布尔值(Boolean)

// js中布尔值是全小写
	var bool1 = true
	var bool1 = false
// 布尔值为false的
    0 空字符串 null undefined NaN
/*
null表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null;
undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。
*/

对象(Object)

JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...此外,JavaScript 允许自定义对象。

JavaScript 提供多个内建对象,比如 String、Date、Array 等等。

对象只是带有属性和方法的特殊数据类型。

数组(Array)

数组对象的作用是:使用单独的变量名来存储一系列的值。类似于Python中的列表。

var l1 = [11, 22, 33]
常用方法
方法 说明
.push() 追加元素
.pop() 弹出元素
.unshift() 头部插入元素
.shift() 头部移除元素
.concat() 扩展列表
.forEach() 将数组的每个元素传递给回调函数
.splice() 删除元素,并向数组添加新元素。(起始位置,删除个数,新增的值)
这篇关于CSS+JS的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!