JavaScript简介

最新推荐文章于 2024-10-01 20:12:28 发布

乔治我的M4呢？

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量1.4k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_64178950/article/details/124457014

版权

JavaScript简介

1 > 溢出属性
2 > 定位属性
- 2.1 > 定位状态
- 2.2 > 定位操作
3 > z-index属性
4 > JavaScript简介
- 4.1 > 变量与注释
- 4.2 > 数据类型

1 > 溢出属性

当文本内容超出标签的最大范围就需要使用到这个溢出属性。具体操作代码如下：


	overflow: hidden;		# 直接隐藏文本内容
	overflow：auto\scroll;	# 提供滚动条查看

例如当我们有一张图片超出div标签的最大范围，想将图片放在div当中，固定代码如下：


	div {
		overflow: hidden;
	}
	
	div img {
		width: 100%
	}

2 > 定位属性

2.1 > 定位状态

	
	1.静态定位	static
		所有的标签默认都是静态定位即不能通过定位操作来改变位置
		
	2.相对定位	relative
		相对于标签原来的位置做定位

	3.绝对定位	absolute
		相对于已经定位过的父标签做定位

	4.固定定位	fixed
		相对于浏览器窗口做定位

2.2 > 定位操作

定位操作分为绝对定位与固定定位。
固定定位的意思就是固定在一个地方不会随着网页的变化而变化。
绝对定位当中如果没有父类标签没有定位，则以boby为准，相当于变成相对定位。
使用的关键字就是position，当我们想改变定位状态必须要使用该关键字参数，改成除了静态定位的其他三种定位方式。因为若不加，默认就是静态定位不能更改。具体操作如下：


<style>
    div {
        height: 200px;
        width: 200px;
        background-color: pink;
        position: relative;		# 使用相对定位，相对于标签原来位置做定位
        left: 100px;			# 从左往右移动100px的位置
    }
</style>
<body>
    <div>

    </div>
</body>

3 > z-index属性

我们将动态弹出的分层界面简称为模态框，模态框的形成是因为在前端界面中其实是一个三位坐标系，有xyz轴，其中z轴是指向我们用户的，模态框就是在z轴进行设置操作。z-index就是用来控制z轴的。

我们在设置z-index属性的时候呢背景颜色，我们可以通过rgba（）来设置背景的透明度。


	rgba(128,128,128,0.5)		# 最后一个参数可以调整颜色透明度

4 > JavaScript简介

JavaScript简称JS，也是一门前端的编程语言。前端由于非常受制于后端，所有有一些人异想天开想要通过js来编写后端代码一统江湖，由此开发了一个叫nodejs的工具(支持js跑在后端服务器上)。但是这个工具并不好用。

JS最初是由一个程序员花了七天时间开发的，里面存在着很多的BUG，所有为了解决这些BUG一直需要编写相应的补丁，补丁本身又有bug最后导致了js中有很多不符合逻辑的地方（成了需要大家墨守成规的东西）。

JavaScript原先由一家公司开发希望其他公司都使用最后被组织改名。它有常用的两个版本ECMA5和ECMA6 。

4.1 > 变量与注释

js的编写位置在pycharm提供的JS文件当中，或者在浏览器提供的js环境中，目前学习阶段推荐在浏览器当中去编写js代码。

1 > 注释语法


		// 单行注释
		/*多行注释*/

2 > 结束符号


	分号结束		console.log('hello world');

3 > 变量声明


	在js中定义变量需要使用关键字声明
		1.var	(ECMA6之前使用的)
			var name = 'jason'
		2.let	(ECMA6之后使用的)
			let name = 'jason'
		'''
			var 声明都是全局变量	let可以声明局部变量
		'''

4 > 常量声明


	const pi = 3.14

4.2 > 数据类型

1 > 数值类型(相当于python里面的整型 int 和浮点型 float )


	Number
	NaN:属于数值类型	意思是'不是一个数字'(not a number)
	parseInt('abc')		不报错返回NaN
	parseFloat('abc')	不报错返回NaN

2 > 字符类型(相当于python里面的字符串str)

String

	默认只能是单引号和双引号
	
	var name = 'bob'
	var name1 = 'bob'
	
	1.字符的拼接
		js中推荐使用加号
		
	2.统计长度
		js中使用length	python中使用len()
		
	3.移除空白（不能指定）
		js中使用trim()、trimLeft()、trimRight()
		python中使用strip()、lstrip()、rstrip()
		
	4.切片操作
		js中使用substring(start, stop)、slice(start, stop)
		前者不支持负数索引后者支持
	
		python中使用[index1: index2]
		
	5.大小写转换
	  	js中使用.toLowerCase()、.toUpperCase()
	    python中使用lower()、upper()
    
  6.切割字符串
	  	js中和python都是用split() 但是有点区别
	    	ss1.split(' ')
	      	['jason', 'say', 'hello', 'big', 'baby']
	      ss1.split(' ', 1)
	      	['jason']
	      ss1.split(' ', 2)
	      	['jason', 'say']
	      	
  7.字符串的格式化
	  	js中使用格式化字符串(小顿号)
	    	var name = 'jason'
	      var age = 18
	      console.log(`
	      	my name is ${name} my age is ${age}
	      `)
	      my name is jason my age is 18
	    python中使用%或者format

3 > 布尔类型(相当于python中的布尔值bool)

Boolen

	js中布尔值是全小写
		true false
		布尔值为false (0 空字符串 null undefined NaN)
						null的意思是空 undefined的意思是没有定义
	
	python
		True False
		布尔值为false (0 None 空字符串 空列表 空字典...)

4 > 对象(相当于python中的列表、字典、对象)

数组（相当于python中的列表）
	Array
		var	l1 = [11, 22, 33]
	
	1.追加元素
		js中使用		push()

		python中使用	append()

	2.弹出元素
		js和python都用的pop()
	
	 3.头部插入元素
	 	js中使用unshift()  python中使用insert()

	4.头部移除元素
		js中使用shift()    python中可以使用pop(0) remove() 

	5.扩展列表
		js中使用concat()   python中使用extend()
	
	6.forEach
		var l2 = ['jason', 'tony', 'kevin', 'oscar', 'jerry']
		
		l2.forEach(function(arg1){console.log(arg1)})
			'''
				VM3143:1 jason
			    VM3143:1 tony
			    VM3143:1 kevin
			    VM3143:1 oscar
			    VM3143:1 jerry
			'''
		l2.forEach(function(arg1,arg2){console.log(arg1,arg2)})
			'''
				VM3539:1 jason 0
			    VM3539:1 tony  1
			    VM3539:1 kevin 2
			    VM3539:1 oscar 3
			    VM3539:1 jerry 4
			'''			
		l2.forEach(function(arg1,arg2,arg3){console.log(arg1,arg2,arg3)})
			'''
			VM3663:1 jason 0 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
			VM3663:1 tony 1  ['jason', 'tony', 'kevin', 'oscar', 'jerry']
			VM3663:1 kevin 2 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
			VM3663:1 oscar 3 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
			VM3663:1 jerry 4 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
			'''
	
	7.splice
		splice(起始位置,删除个数,新增的值)