`内容回顾`

浮动

"""主要用于页面布局"""
	可以让块级标签出现在同一行
    	float:left\right
            eg:正常网站都在使用
"""浮动的元素就是脱离文档流>>>:父标签塌陷"""
	通用的解决方案
    	.clearfix:after {
            content:'';
            display:block;
            clear:both
        }
	# 谁塌陷就给谁添加该class属性值

定位

静态定位	static
	所有标签默认的定位状态 该状态下是无法通过定位移动
相对定位	relative
	相对于标签原来的位置
绝对定位	absolute
	相对于已经定位过的父标签
固定定位	fixed
	相对于浏览器窗口

溢出

# 标签内元素大于标准尺寸
	overflow:hidden
"""例:圆形头像"""

透明度
```
rgba(1,1,1,0.5)
opacity:0.5
```
模态框
```
z-index:999
```

博客园首页搭建

1.先利用div和span完成页面布局
2.填充页面基本内容
3.调整页面样式
# 知识内容整合练习

JS简介

注释、结束符、历史背景、引入方式

内容概要

变量与常量
基本数据类型
数据类型内置方法
函数
常见内置对象
BOM与DOM操作

内容详细

变量与常量

在JS中声明变量需要使用关键字
	老版本	var(全部都是全局变量)
    新版本	let(可以声明局部变量)
    # 推荐使用let(其实问题不大)
在JS中声明常量也需要使用关键字
	const # 声明一个真正意义上的常量
    
如何创建变量
	var name = 'tom'
    let name = 'tony'
如何创建常量
	const pi = 3.14
    
"""
可以编写JS代码的地方
	1.pycharm提供的JS文件
	2.直接使用浏览器提供的编程环境
"""
ps:pycharm在使用上述关键字的时候如果出现了报错,说明JS版本没有选择6
需要我们自定义设置 settings>>>Languages&Frameworks>>>javaScript>>>ECMAScript 6+

基本数据类型

python基本数据类型
	int整型、float浮点型、list列表、dict字典、tuple元组、str字符串、bool布尔值、set集合
JS基本数据类型
	number、string、boolean、undefined、object()
    
查看数据类型
	python中使用type()
    JS中使用typeof

number类型

# 数值类型:包含了整型与浮点型
parseInt、parseFloat

NaN:Not A Number
"""NaN属于数值类型 表示的意思是 不是一个数字"""

string类型

# 定义字符串类型的方式
	1.单引号
    2.双引号
    3.`号
    	let s1 = `
        	jason
            tom
            tony
        `
# 在JS中字符串的拼接推荐使用+号
	let s3 = s1+s2

# 格式化输出(模板字符串的功能)
	var name = 'jason'
    var age = 18
    `my name is ${name},my age is ${age}`

boolean类型

在python中布尔值类型首字母大写
	True False
在JS中布尔值类型全部小写
	true fales

null与undefined类型

null表示的意思是空
undefined表示的意思是未定义
	eg:null意思是厕纸用完了 undefined意思是厕所纸都没装

对象值数组类型

# 对应到python中就是列表list
var l1 = [1,2,3,4,5,6,7]
l1.splice(2,1)  # 第一个参数是其实位置 第二个参数是删除元素的个数
l1 = [1,2,4,5,6,7]

运算符

1.比较运算符
	==	弱等于  # 会自动转换数据类型至相同状态 例：10 == '10' 结果为:true
    ===	强等于	  # 不会自动转换数据类型 例:10 === '10' 结果为:false

2.逻辑运算符
	python中
    	and or not
	JS中
    	&& || !

流程控制

"""if判断"""
python中
	if 条件:
        条件成立之后执行的代码
	elif 条件:
        if条件不成立，elif条件成立之后执行的代码
	else:
        条件都不成立之后执行的代码
JS中
	if(条件){
        条件成立之后执行的代码
    }else{
        条件不成立执行的代码
    }
    
    if(条件1){
        条件1成立之后执行的代码
    }else if(条件2){
        条件2成立之后执行的代码
    }else{
        条件都不成立执行的代码
    }
"""switch"""
var day = new Date().getDay(); # 获取当前时间
    switch (day) {
      case 0:
      console.log("Sunday");
      break;
      case 1:
      console.log("Monday");
      break;
    default:
      console.log("...")
    }
    
"""for循环"""
	for(起始值;循环条件;每次循环后执行的操作){
        for循环体代码
    }
    	for(var i=0;i<10;i++){
            console.log(i);
        }
	# 练习:如何使用for循环取出数组内的每个元素
    	var l1 = [11,22,33,44,55]
        for(let i=0;i<l1.length;i++){
            console.log(l1[i])
        }
"""while循环"""
	while(循环条件){
        循环体代码
    }

三元运算符

在python中
	res = '吃饭' if < 10 else '不吃饭'
在JS中
	res = 18 > 10 ? '吃饭':'不吃饭'

函数

在python中
	def 函数名(参数1,参数2...)
    	"""函数注释"""
        函数体代码
        return返回值
    
在JS中
	function 函数名(参数1,参数2...){
        // 函数注释
        函数体代码
        return 返回值
    }
"""
arguments参数 可以获取传入的所有数据
	也支持return和匿名函数
"""
var f = v => v;
// 等同于
var f = function(v){
    return v;
}

自定义对象

# 相当于python中的字典类型
	方式1: var d = {'name':'tom',;age:18}
	方式2: var d = Object({'name':'tom','age':18})

class MyDict(dict):
    def __getattr__(self,item):
        return self.get(item)
    def __setattr__(self,key,value):
        self[key] = value
        
res = MyDict(name='tom',age=18)
print(res.name)  # tom
print(res.age)  # 18
res.xxx=123
print(res.xxx)  # 123
print(res)  # {'name': 'tom', 'age': 18, 'xxx': 123}

内置对象

# 如果需要使用内置对象 需要关键字 new
在python中
	import date
    date()
在JS中
	new date()
    
##########################################################
序列化
	python中
    	import json
        json.dumps() # 序列化
        json.loads() # 反序列化
	JS中
    	JSON.stringify() # 序列化
        JSON.parse() # 反序列化
"""
如果当前js中有一个布尔值true需要基于网络发送给python程序并且放python转换成布尔值 该如何操作？
	1.在JS中使用JSON.stringify()序列化成json格式字符串
	2.基于网络发送给python程序(自动编码)
	3.python接收 解码并反序列化
"""
##########################################################

regexp对象
	方式1:var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
	方式2:var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}/;

全局匹配
	正则表达式的最后不加g则表示匹配成功就结束 加g表示全局匹配
    # 全局匹配会有一个lastindex属性
    reg2
    /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
    reg2.test('jason666')
    true
    reg2.test('jason666')
    false
    reg2.lastIndex
    0
    reg2.test('jason666')
    true
    reg2.lastIndex
    8
校验时不传参数默认传的是undefined

BOM与DOM操作

BOM		浏览器对象模型>>>:使用JS操作浏览器
DOM		文档对象模型>>>:使用JS操作前端页面

BOM操作

window.open()				- 打开新窗口
window.close()				- 关闭当前窗口
window.history.forward()	// 前进一页
window.history.back()		// 后退一页
window.location.href		- 获取URL
window.location.href='URL'	// 跳转到指定页面
window.location.reload()	重新加载页面
window.alert('内容')			- 弹框内容
window.confirm('内容')		- 弹框有返回值(bool值)
window.prompt('内容')			- 用户可填写的弹框

setTimeout()  				- 计时相关，几秒弹框一次...
clearTimeout()
setInterval()
clearInterval()

posted on 2022-02-12 19:11 Henrywuovo 阅读(47) 评论(0) 收藏举报

刷新页面返回顶部