溢出属性、定位属性、js数据类型,数值型字符型内置方法

2022/4/28 6:15:45

本文主要是介绍溢出属性、定位属性、js数据类型,数值型字符型内置方法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

溢出属性

结构:
	overflow:visible/hidden /scroll/auto/inherit

具备的功能:

visible:默认值,内容不会被修剪,会呈现在元素框之外
hidden:内容会被修剪,并且其余内容是不可见的
scroll:内容会被修剪,但是浏览器会显示滚动条,以便查看其余的内容
auto:如果内容被修剪,则浏览器会显示滚动条
inherit:规定应该从父元素继承overflow属性的值,(ie浏览器不支持此属性值 )

定位属性position

定位的状态

1.静态定位		static
  	所有的标签默认都是静态定位即不能通过定位操作改变位置
2.相对定位		relative
  	相对于标签原来的位置做定位
3.绝对定位		absolute
  	相对于已经定位过的父标签做定位
    absolute 定位使元素的位置与文档流无关,因此不占据空间。
    absolute 定位的元素和其他元素重叠。
4.固定定位    fixed
  	相对于浏览器窗口做定位

定位操作

position static/relative/absolute/fixed
left\right\top\bottom:XXpx
    

z-index属性

'''动态弹出的分层界面 我们也称之为叫模态框'''
元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)
一个元素可以有正数或负数的堆叠顺序:
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

注意: 如果两个定位元素重叠,没有指定z-index,最后定位在HTML代码中的元素将被显示在最前面。

JavaScript简介

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
JavaScript 很容易学习。

# 3.JS最初由一个程序员花了七天时间开发的 里面存在很多bug
	为了解决这些bug一直在编写相应的补丁 补丁本身又有bug 最后导致了js中有很多不符合逻辑的地方(成了大家墨守成规的东西)
# 4.JavaScript与ECMAScript
	JavaScript原先由一家公司开发 希望其他公司都使用 最后被组织改名
# 5.版本问题
ECMA5
ECMA6

js注释

# 注释语法
	// 单行注释
  /*多行注释*/

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

变量声明

在js中定义变量需要使用关键字声明
1.var
var name = 'tuzi'
2.let
let name = 'tuzi'
'''var声明都是全局变量 let可以声明局部变量'''
js里面室友常量的:
常量声明:
	const pi = 3.14
    

数据类型

查看数据类型的方式

# typeof
typeof + 变量/常量名

用法:

image-20220427220144056

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

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

用法:

image-20220427220529207

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

# 类型名:String  
默认只能是单引号和双引号 
var name1 = 'tuzi'
var name2 = "tuzi"
格式化字符串小顿号
var name3 = `tuzi`
# 如果格式化的事多行文本,那有换行符就会自动加上\n

字符类型之字符的拼接

js中推荐使用加号
1 = 'tuzi'
var name2 = 'NB'
var name3 = name1+name2
console.log(name3)
# 输出结果 VM1066:1 tuziNB

字符类型之统计长度

js中使用length 		python中使用len()
var name = 'tuzi'
undefined
name.length
# 输出结果 4

字符类型之移除空白(不能指定)

js中使用trim()、trimLeft()、trimRight()
python中使用strip()、lstrip()、rstrip()
var s1 = '   123   '
s1.trim()
# 结果:'123'

字符类型之切片操作

js中使用substring(start,stop)、slice(start,stop)
    	前者不支持负数索引后者支持
python中使用[index1:index2]
# substring用法:
var s2 = 'tuzi is shuibi'
undefined
s2.substring(1,6)
# 结果:'uzi i'

s2.slice(-4,-1)
# 结果:'uib'

字符类型之大小写转换

js中使用.toLowerCase()、.toUpperCase()
python中使用lower()、upper()
# 用法:
s2.toLowerCase()
'tuzi is shuibi'
s2.toUpperCase()
'TUZI IS SHUIBI'

字符类型之字符串的格式化

js中使用格式化字符串(小顿号)
var name = 'tuzi'
var age = 18
console.log(`
my name is ${name} my age is ${age}`)
# my name is tuzi my age is 18
python中使用%或者format

字符类型之布尔类型(相当于python中的布尔值bool)

Boolean
js中布尔值是全小写
true false
布尔值为false的 0 空字符串 null undefined NaN

python中布尔值时首字母大写
True False
布尔值为False的 0 None 空字符串 空列表 空字典...
"""
  null的意思是空 undefined的意思是没有定义
"""

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

数组Array(相当于python中的列表)
var l1 = [11, 22, 33]

追加元素

js中使用push()  python中使用append()

l1.push(44)
console.log(l1)
VM2459:1 (4) [11, 22, 33, 44]

弹出元素

js和python都用的pop()
# 尾部弹出
l1.pop(22)
console.log(l1)
VM2509:1 (3) [11, 22, 33]

头部插入元素

js中使用unshift()  python中使用insert()

l1.unshift
l1.unshift(55)
console.log(l1)
VM2591:1 (3) [55, 11, 22,33]

头部移除元素

js中使用shift()    python中可以使用pop(0) remove() 

l1.shift(55)
console.log(l1)
VM2633:1 (2) [11, 22]

扩展列表

js中使用concat()   python中使用extend()

l1.concat(44,55)
(4) [11, 22, 33, 44, 55]

foreach

forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。
'''
forEach方法中的function回调有三个参数:
第一个参数是遍历的数组内容,
第二个参数是对应的数组索引,
第三个参数是数组本身
'''
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


这篇关于溢出属性、定位属性、js数据类型,数值型字符型内置方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程