6.DOM
DOM,就是一个模块,模块可以对HTML页面中的标签进行操作。
// 根据ID获取标签
var tag = document.getElementById("xx");
// 获取标签中的文本
tag.innerText
// 修改标签中的文本
tag.innerText = "哈哈哈哈哈";
// 创建标签 <div>哈哈哈哈哈</div>
var tag = document.createElement("div");
// 标签写内容
tag.innerText = "哈哈哈哈哈";
<ul id="city">
<li>北京</li>
</ul>
<script type="text/javascript">
var tag = document.getElementById("city");
// <li>北京</li>
var newTag = document.createElement("li");
newTag.innerText = "北京";
tag.appendChild(newTag);
</script>
6.1 事件的绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="点击添加" onclick="addCityInfo()">
<ul id="city">
</ul>
<script type="text/javascript">
function addCityInfo() {
var newTag = document.createElement("li");
newTag.innerText = "联通";
var parentTag = document.getElementById("city");
parentTag.appendChild(newTag);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入内容" id="txtUser"/>
<input type="button" value="点击添加" onclick="addCityInfo()">
<ul id="city">
</ul>
<script type="text/javascript">
function addCityInfo() {
// 1.找到输入标签
var txtTag = document.getElementById("txtUser");
// 2.获取input框中用户输入的内容
var newString = txtTag.value;
// 判断用户输入是否为空,只有不为空才能继续。
if (newString.length > 0) {
// 3.创建标签 <li></li> 中间的文本信息就是用户输入的内容
var newTag = document.createElement("li");
newTag.innerText = newString;
// 4.标签添加到ul中
var parentTag = document.getElementById("city");
parentTag.appendChild(newTag);
// 3.将input框内容清空
txtTag.value = "";
}else{
alert("输入不能为空");
}
}
</script>
</body>
</html>
注意:DOM中还有很多操作。
DOM可以实现很多功能,但是比较繁琐。
页面上的效果:jQuery来实现 / vue.js / react.js
知识点的回顾
-
编码相关
文件存储时,使用某种编码,打开时就需要使用相同的编码,否则就会乱码。 字符底层存储时本质上都是0101010101010101。 字符和二进制的对应关系(编码): - ascii编码,256中对应关系。 - gb2312,gbk,中文和亚洲的一些国家【中文是2个字节】 - unicode,ucs2/ucs4,包括现在发现的所有文明。 - utf-8编码,【中文是用几个字节?3字节】 Python默认解释器编码(utf-8) python.exe 代码文件 如果你将代码文件保存成了gbk编码,将Python模式解释器编码修改成gbk
data = "中" res = data.encode('utf-8') print(res) # b'\xe4\xb8\xad' data = "国" res = data.encode('gbk') print(res) # b'\xb9\xfa'
-
计算机中的单位
位/字节/KB/M/G/T... 办流量/硬盘/内存
-
字符串格式化(三种)
v1 = "我是{},锦娘{}".format("武沛齐",77) # 推荐 v2 = "我是%s,今年%d岁" %("武沛齐",77, ) name = "武沛齐" age = 19 v3 = f"我是{name},今年{age}岁"
-
数据类型
常见数据类型:int、bool、str、list、tuple、dict、set、float、None - 哪些转化弄成布尔值为False:空、None、0 - 可变和不可变划分,可变的有哪些:list、set、dict - 可哈希和不可哈希,不可哈希的有哪些:list、set、dict - 字典的键/集合的元素,必须是可哈希的类型(list、set、dict不能做字典的键和集合元素) 主要数据类型: - str - 独有功能:upper/lower/startswith/split/strip/join 注意:str不可变,不会对原字符串进行修改,新的内容。 - 公共功能:len/索引/切片/for循环/判断是否包含 - list - 独有功能:append、insert、remove、pop... 注意:list可变,功能很多都是对原数据操作。 - 公共功能:len/索引/切片/for循环/判断是否包含 - dict - 独有功能:get/keys/items/values - 公共功能:len/索引for循环/判断是否包含(判断键效率很高)
-
运算符
基本运算符:加减乘除、... 一般: 1>2 and 3<10 特殊的逻辑运算(整体结果取决于谁?) v1 = 99 and 88 # 88 v2 = [] or 10 # 10 v3 = "联通" or [] # "联通"
-
推导式(简化生成数据)
data = [] for i in range(10): data.append(i) v1 = [ i for i in range(10) ] v2 = [ i for i in range(10) if i<5 ] # [0,1,2,3,4]
-
函数编程
函数的基础知识 - 定义 - 参数,概念:位置传参/关键字传参/参数默认值/动态参数*args,**kwargs - 返回值 - 函数中一旦遇到return就立即返回,后续代码不再执行。 - 函数么有返回值默认返回None 函数的进阶: - Python中是为函数为作用域。 - 全局变量和局部变量,规范:全局变量(大写)、局部变量(小写)。 - 在局部变量中可以使用global关键字,global的作用?引用全局的那个变量(不是在局部新建)。 内置函数(python内部提供的函数): - bin/hex/odc/max/min/divmod/sorted/open文件操作 文件操作: - 基本操作:打开、操作、关闭,为了防止忘记关闭文件,可以怎么做?with - 打开文件时有模式: - r/rb,读 【文件不存在,报错】 【文件夹不存在,报错】 - w/wb,写(清空) 【文件不存在,自动新建】 【文件夹不存在,报错】 - a/ab,追加 【文件不存在,自动新建】 【文件夹不存在,报错】 注意:os.makedirs/os.path.exsits、是否存在,不存在新建目录。
-
模块
模块的分类: - 自定义模块: - os.path,导入模块时python内部都回去那个目录找。 - 自己写py文件时,不要与python内置模块同名。 - import/from xx import xx - 内置模块:time/datetime/json/re/random/os.. - 第三方模块:requests、openpyxl、python-docx、flask、bs4 查看当前目录下所有的文件:os.listdir / os.walk 关于时间模块:时间戳 / datetime格式 / 字符串 ,三种时间格式可以互相转化。 关于JSON模块: - JSON本质是字符串,有一些自己格式的要求,例如:无元组/无单引号。 - json.dumps序列化时,只能序列化Python常用数据类型: +-------------------+---------------+ | Python | JSON | +===================+===============+ | dict | object | +-------------------+---------------+ | list, tuple | array | +-------------------+---------------+ | str | string | +-------------------+---------------+ | int, float | number | +-------------------+---------------+ | True | true | +-------------------+---------------+ | False | false | +-------------------+---------------+ | None | null | +-------------------+---------------+ 关于re正则模块: - 正则:\d \w - 贪婪匹配和非贪婪匹配(默认),想让他不贪婪个数后面 ? 。 - re.search/re.match/re.findall 第三方模块,都有哪些方式可以让我们安装第三方模块。 - pip管理工具 - 源码 - wheel包
-
面向对象
目标:不是为了用面向对编程(推荐使用函数编程,面向对象要看的懂)。 面向对象三大特性:封装、继承、多态。
-
前端开发
- 前端知识点分为三部分: - HTML,标签具有模式特点。 - CSS,修改标签的特点。 - JavaScript,动态。 - HTML标签 - div/span/a/img/input/form/table/ul... - 块级和行内标签,例如:div span 默认谁是块级标签?div 注意:css样式,发现行内标签设置高端、宽度、内边距、外边距都是无效。 - form表单 + input/select/textarea 数据框 - action,提交地址 - method,提交方式 - form标签中有一个submit - 内部标签都需要设置name属性 - CSS样式 - 局部一定会用到的样式:div + float(脱离文档流,clear:both; clearfix) - 高度和宽度 - 边距 - 内边距,padding - 外边距,margin - 字体大小/颜色 - 边框 - 背景颜色 - hover,鼠标放上去就会触发的CSS样式。