Python基础（七）

DOM

定义HTML和XML的访问标准

• DOM 节点
  在html中所有的东西 都是节点;

​ 整个文档节点: document
​ html元素节点: element
​ html属性节点: attr
​ html内容节点: text (包含 空格)
​ 注释节点: comment

• 节点关系:
  父节点
  子节点
  祖辈节点
  后辈节点
  同辈节点

• 节点访问:
  方法
  getElementById( )
  getElementsByTagName( )
  getElementsByClassName( )
  getAttributeNode( ) 获取属性节点
  getAttribute( ) 获取属性值

• 属性
  attributes 获取属性节点
  parentNode 获取父级节点
  childNodes 获取子级节点

    		parentElement 	获取父级元素
    		children 		获取子级元素
  

• 节点属性
  nodeName
  文档节点的 nodeName 始终都是 #document
  元素节点的 nodeName 始终都是 标签名
  属性节点的 nodeName 始终都是 属性名
  内容节点的 nodeName 始终都是 #text

​ nodeValue
​ 元素节点的 nodeValue 始终都是 null 就是 undefined
​ 属性节点的 nodeValue 始终都是 属性值
​ 内容节点的 nodeValue 始终都是 正文内容

​ nodeType
​ document 9
​ element 1
​ attr 2
​ text 3
​ comment 8

• 节点操作
  修改属性值
  元素节点.setAttribute(属性名, 属性值)
  元素节点.属性名 = ‘值’

​ 创建节点
​ 属性: document.createAttribute(‘属性名’);
​ 元素: document.createElement(‘标签名’);

​ 删除节点
​ 属性: removeAttribute()
​ 或者 把值设置为null
​ 元素: removeChild(节点) 删除父节点的一个子节点
​
​ 替换节点
​ 属性: setAttribute(属性名, 属性值)
​ 元素: replaceChild(新节点,旧节点);

​ 插入节点
​ 属性: setAttribute(属性名, 属性值)
​ 元素:
​ appendChild(node) 插入子节点
​ insertBefore(新节点, 旧节点) 指定位置插入节点

​ 克隆节点
​ cloneNode()
​ false(默认值)
​ true(全部复制)

jQuery

是Javascript的一个轻量级框架 写得少 干得多

优势：开源 便捷的选择器 方便的DOM操作 动画操作 简化ajax 兼容性

jQuery基本语法

​ $(对象).操作(function(){
​ 代码块
​ })

​ 简化写法
​ $(function(){
​ 代码块
​ });

别名

	var $ = 'name';
	// $('h1').css('color','red');

	// 解决方案1:  原始
	jQuery('h1').css('color','red');

	// 解决方案2:  别名 
	var jq = jQuery;
	jq('h1').css('font-size','18px');

Ajax

asyn javasc and xml

异步的js和xml

HTTP基本原理

请求：客户端向服务器请求一个文件

响应：服务器将文件内容返回给客户端，文件有了输出才算真正的响应

主要用于在无刷新的情况下，局部改变数据

$.ajax({
url: ‘py地址’,
type: ‘传输方式’,
data: {参数名1:参数值1, 参数名2:参数值2, …},
data: ‘参数名1=参数值1&参数名2=参数值2&…’,
success: function(){
响应成功后, 功能代码块
},

​ error: function(){
​ 响应失败后, 功能代码块
​ }
​ })

注意:
url: ajax要传输的地址
type: 默认get
data: 常用 json格式
也可以用 "参数名1=参数值1&参数名2=参数值2& … "
success: 请求成功会后的 回调函数
error: 请求失败之后的 回调函数

​ datatype: 预期服务器返回的数据类型

准备 server.py 文件 (用于挂起服务器用的)
			代码: 
				from http.server import HTTPServer, CGIHTTPRequestHandler			
			# 设置 web端口, 可修改, 建议改成大点的千位数
			port = 8000 

			# 开启服务器
			httpd = HTTPServer(('', port), CGIHTTPRequestHandler)
			print('服务器已启动')
			httpd.serve_forever() 	# 监听服务器端口, 该文件不能中断, 一旦中断, 服务器就不能正常使用了

	通过 cmd(管理员身份运行):
		常见cmd命令:
			cd  	进入某目录
			dir 	查看当前目录的所有文件

			python xxxx.py 	当场运行该 py文件 (需要先安装python环境)

Bootstrap

简介: 是一个前端框架

作用: 常用于 响应式布局, 移动设备

官方地址:
http://www.bootcss.com/

下载安装:
https://v3.bootcss.com/getting-started/#download

至2019年1月, 推荐使用BootStrap 3

BootStrap 的结构
css
bootstrap.css 学习班 (良好的代码排版)
bootstrap.min.css 实际开发使用的版本, 被压缩过的
bootstrap-theme.css 主题
js 基于jQ的js
fonts 字体图标

免费主题模板
http://www.bootswatch.com

Bootstrap
起步

数据库

定义

​ 是按照数据结构来组织, 存储 和 管理数据的 仓库 库 database 表 table

分类

关系型数据库

​ 优点：保持数据的一致性 擅长做复杂数据查询 支持事务

​ 缺点： 读写性能比非关系的差一点 表结构固定, 不灵活

非关系型数据库

​ 优点：读写速度快 格式灵活 开源

​ 缺点：表结构复杂, 导致复杂查询能力较弱 不支持事务

注释

​ /* 多行注释 * / – 单行 # 单行

基本语法

​ 命令大写, 自定义名字小写 自定义名字 不能使用关键字 每条命令 均已 分号结尾.

常见命令

​ 设置密码 set password = password(‘密码’) 查看数据库 show databases; 创建数据库 create database 库名; create database if not exists 库名; create database if not exists 库名 default charset=编码; 删除数据库 drop database 库名; 使用数据库 use 库名; 查看数据表 show tables; 创建数据表

create table if not exists `表名`(
			`字段名` 	字段类型 	字段属性,
 			`字段名` 	字段类型 	字段属性,
 		...
 			`字段名` 	字段类型 	字段属性 		(最后一个字段的分号, 不能写)
  	)engine=引擎 default charset=编码;

​ 删除数据表 drop table 表名 查看表结构 desc 表名 查看建表语句 show create table 表名