9.4周末总结
筛选器方法
下个元素：
$('#id').next() # 查找当前元素的下一个同级元素
$('#id').nextAll() # 查找当前元素的下面的所有同级元素
$('#id').nextUnitl('#id2') # 查找当前元素下面的同级元素直到id2为止
上个元素：
$('#id').prev() # 查找当前元素的上一个同级元素
$('#id').prevAll() # 查找当前元素的上面的所有同级元素
$('#id').prevUnitl('#id2') # 查找当前元素上面的同级元素直到id2为止
父亲元素：
$('#id').parent() # 查找当前元素的一个父亲元素
$('#id').parents() # 查找当前元素的所有父辈元素
$('#id').parentsUntil('#id2') # 查找当前元素的所有的父辈元素直到匹配到id2为止
儿子和兄弟元素：
$('#id').children() # 儿子们
$('#id').siblings() # 兄弟们，同级别上下所有的元素
链式操作：
底层原理：对象调用方法之后还会返回一个对象，从而实现链式操作的效果，链式操作实现一行代码可以操作所有的标签。
let $pEle = $('#d1')
$pEle.parent()
$pEle.parent().parent()
$pEle.parent().css('color','red').parent().css('border','2px bolid green')
查找：搜索所有与指定表达式匹配的元素
$('div').find('p') 等价于 $('div p')
筛选：筛选出与指定表达式匹配的元素集合。
$('div').filter('.c1') 等价于 $('div.c1')
操作标签
1.样式操作：
jQuery样式操作：
addClass() # 添加指定的类名
removeClass() # 移除指定的类名
hasClass() # 判断样式存不存在
toggleClass() # 切换css类名，如果有就移除没有就添加
js样式操作：
classList.add()
classList.remove()
classList.contains()
classList.toggle()
2.css操作：
jQuery操作：
jQuery对象.css('属性名','属性值')
js操作：
style.样式名 = '样式值'
3.位置操作
offset() # 获取匹配元素在当前窗口的相对偏移或设置元素位置
position() # 获取匹配元素相对父元素的偏移
scrollTop() # 获取匹配元素相对滚动条顶部的偏移
scrollLeft() # 获取匹配元素相对滚动条左侧的偏移
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。和 .position()的差别在于： .position()是相对于相对于父级元素的位移。
4.文本操作
HTML代码：
html() # 取得第一个匹配元素的html内容
html(val) # 设置所有匹配元素的html内容
文本值：
jQuery操作：
text() # 取得所有匹配元素的内容
text(val) # 设置所有匹配元素的内容
js操作：
innerText()
innerHTML()
值：
jQuery操作：val() # 取得第一个匹配元素的当前值
val(val) # 设置所有匹配元素的值
val([val1, val2]) # 设置多选的checkbox、多选select的值
设置值：
$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])
js操作：value()
5.属性操作
用于ID等或自定义属性
attr(attrName) # 返回第一个匹配元素的属性值
attr(attrName, attrValue) # 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2}) # 为所有匹配元素设置多个属性值
removeAttr() # 从每一个匹配的元素中删除一个属性
6.prop和attr区别
'''attr针对动态变化的属性没有办法判断，永远只能判断页面已经写死的代码，若想判断动态变化的属性需要使用prop，主要用于checkbox、radio和option'''
总结：对于标签上有的能看到的属性和自定义的属性都用attr；对于返回布尔值的比如checkbox、radio和option是否被选中都用prop。
7.文档处理
添加到指定元素的内部的后面：
$(a).append(b) # 把b追加到a
$(a).appendTo(b) # 把a追加到b
添加到指定元素的内部的前面：
$(A).prepend(B) # 把B前置到A
$(A).prependTo(B) # 把A前置到B
添加到指定元素的外部的后面：
$(A).after(B) # 把B放到A的后面
$(A).insertAfter(B) # 把A放到B的后面
添加到指定元素外部的前面：
$(A).before(B) # 把B放到A的前面
$(A).insertBefore(B) # 把A放到B的前面
移除和清空元素：
remove() # 从DOM中删除所有的匹配的元素。整个标签都没有了
empty() # 删除匹配的元素集合中所有的子节点。只有内容没有了，标签还有
jQuery绑定事件
方式一：
jQuery对象.事件名(function(){
事件代码
})
方式二：
jQuery对象.on('事件名',function(){
事件代码
})
补充：
鼠标事件
click() :单击事件、触发或将函数绑定到指定元素的click事件
mouseover(): 触发或将函数绑定到指定元素的mouseover事件
mouseout() ：触发或将函数绑定到指定元素的mouseout的事件
键盘事件：
keydown(): 按下按键时、触发或将函数绑定到指定元素的keydown事件
keyup(): 释放按键时、触发或将函数绑定到指定元素的keyup事件
keypress(): 产生可打印的字符时、触发或将函数绑定到指定元素的keypress事件
表单事件：
focus() : 获得焦点、触发或将函数绑定到指定元素的focus事件
blur() : 失去焦点、触发或将函数绑定到指定元素的blur事件
1.克隆事件
$(选择器).clone();
1）clone()：克隆默认情况下只会克隆标签的样式，不会克隆标签的事件。
2）clone(true)：克隆对方的所有功能
2.hover事件
鼠标放上或者移走都可以设置事件
$('p').hover(function (){
alert('来了老弟')
},
function (){
alert('慢走哦~')
}
)
3.input监听事件
实时监听，每输入输一个字都会校验。能够检测textarea,input:text,input:password和input:search这几个元素的内容变化，在内容修改后立即被触发，不像onchange事件需要失去焦点才触发。
阻止后续事件、事件冒泡、事件委托
1.阻止后续事件
能够触发form表单提交数据的动作的标签有两个：
<input type="submit">
<button></button>
给已经有的事件的标签绑定事件，会先执行绑定的事件，然后再执行已有的事件。可以让标签之间绑定的事件不在执行。
方式一：return false
方式二：e.preventDefault()
2.事件冒泡
涉及到标签嵌套并且有相同事件的时候，那么会逐级往上反馈并执行。
当标签嵌套时给标签绑定事件后，会逐层往上执行，若自己的事件执行完后上层有点击事件也会执行依次向上。
若不想发生事件冒泡：
方式一：return false
方式二：e.stopPropagation()
3.事件委托
事件绑定的默认情况下是不会对动态创建的标签生效，如果想要生效那么需要事件委托。
<div>
<button>点点1</button>
<button>点点2</button>
</div>
$('div').on('click','button',function () {
alert('你犯困的样子萌萌哒')
})
'''委托指的是标签内部的标签'''
Bootstrap框架
1）官网下载，本地导入
2）使用CDN加速服务：
https://www.bootcdn.cn/
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.js"></script>
web框架
1.本质
基于互联网的web服务端的socket服务端，连接客户端和数据库。
2.纯手撸web框架
1）socket服务端代码
2）HTTP协议
3）根据网址后缀的不同请求不同的的内容
4）请求方式
GET：朝服务端索要数据
POST：朝服务端提交数据
5）从请求数据格式中筛选出用户输入的网址后缀
target_url = data.decode('utf8').split(' ')[1]
6）代码缺陷
socket代码重复编写
针对请求数据格式的处理复杂且重复
针对不同网址后缀的匹配方式过于低下
import socket
server = socket.socket() # TCP协议
server.bind(('127.0.0.1', 8080)) # IP协议 PORT协议
server.listen(5) # 连接池
while True:
sock, address = server.accept()
data = sock.recv(1024)
sock.send(b'HTTP/1.1 200 OK\r\n\r\n')
# print(data.decode('utf8')) # 从字符串中截取出需要的内容
target_url = data.decode('utf8').split(' ')[1] # / /index /login /reg /xxx
if target_url == '/index':
sock.send(b'index view')
elif target_url == '/login':
sock.send(b'login view')
elif target_url == '/reg':
sock.send(b'reg view')
else:
sock.send(b'404 error')
3.基于wsgiref模块撸
wsgiref内部封装了socket代码和对请求数据的处理
from wsgiref.simple_server import make_server
def run(request, response):
"""
:param request: 请求数据
:param response: 响应数据
:return: 返回给客户端的数据
"""
print(request) # 自动将请求数据全部处理成字典k:v键值对形式
response('200 OK', []) # 固定代码 无需掌握
return [b'hello big baby']
if __name__ == '__main__':
server = make_server('127.0.0.1', 8080, run) # 任何访问127.0.0.1:8080的请求都会给第三个参数加括号调用
server.serve_forever() # 永久启动
1）wsgiref模块解决了两个问题
1.socket代码重复编写造轮子
2.针对请求数据格式的处理复杂且重复
2）思考如何再次实现根据不同的网址后缀返回不同的内容(函数化)
先从大字典中查找出记录网址后缀的键值对
不推荐使用连续的多个if判断
针对面条版的代码首先应该考虑封装成函数
def index(request):
return 'index'
def login(request):
return 'login'
def register(request):
return 'register'
def error(request):
return '404 error'
urls = (
('/index', index),
('/login', login),
('/register', register),
)
3）根据py文件中功能的不同划分到不同的py文件(模块化)
urls.py 对应关系
views.py 功能函数
start.py 启动文件
templates文件夹 存储html
动静态网页
动态网页
页面上的数据不是全部写死的 有些是动态获取(后端传入)
静态网页
页面上的数据直接写死的 要想改变只能修改源码
实际需求
后端代码回去当前时间 然后让前端页面展示
1.字符串替换
2.将字典数据传递给html页面并且想要在页面上操作字典数据
我们无法自己实现>>>:在html页面上使用类似于后端的语法操作数据
jinja2模块
jinja2能够让我们在html文件内使用类似于后端的语法来操作各种数据类型
pip3 install jinja2
from jinja2 import Template
def get_dict(request):
user_dict = {'name': 'jason', 'pwd': 123, 'hobby': ['read', 'run', 'music']}
with open(r'templates/myhtml04.html','r',encoding='utf8') as f:
data = f.read()
temp = Template(data)
res = temp.render(data=user_dict) # 将字典传递给html页面 页面上通过data即可获取(data仅仅是一个变量名)
return res
将来写前后端非常方便，通过模板语法形式可以控制页面的展示
<h1>{{ data }}</h1>
<h1>{{ data['name'] }}</h1>
<h1>{{ data.get('pwd') }}</h1>
<h1>{{ data.hobby }}</h1>
{% for user in user_data %}
<tr>
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
</tr>
{% endfor %}
python主流框架
django框架
大而全 自身携带的功能非常的多 类似于航空母舰
缺陷:开发小项目的时候使用该框架有点笨重(大材小用)
flask框架
小而精 自身携带的功能非常的少 类似于特种兵 主要依赖于第三方模块
缺陷:受限于第三方模块的开发
tornado框架
异步非阻塞 该框架快到可以作为游戏服务器
缺陷:上手难度是三者最高的
fastapi框架、sanic框架、...
Django框架
下载：pip install --index-url http://mirrors.aliyun.com/pypi/simple/ django==2.2.22
--trusted-host mirrors.aliyun.com
1.版本问题
1.X:同步 1.11
2.X:同步 2.2
3.X:异步 3.2
ps:你无论使用什么版本都可以 区别不大 2.2
2.启动注意事项
1）计算机名称尽量不要有中文
2）项目中所有的py文件名尽量不要用中文
3）不同版本的python解释器配合不同版本的django 会有一些报错
仔细查找一下报错信息 里面会提示你是哪个py文件里面的代码出错
找到那一行代码 把逗号删除即可
widgets.py 152
4）一个pycharm窗口只允许有一个项目 不要做项目的嵌套
3.验证django是否下载成功
cmd终端输入django-admin
4.命令操作
创建Django项目：django-admin startproject 项目名
启动django项目：先切换到项目目录下，执行启动目录：python36 manage.py runserver ip:port
访问Django服务器：浏览器直接访问
创建APP应用：python38 manage.py startapp 应用名
5.pycharm操作
1）新建一个项目选择Django
2）选择好下载好的Djangopython版本的解释器
3）更改项目名
4）填写APP应用名称
'''在启动Django项目的时候一定要确保一个端口只有一个项目，否则启动的是第一个项目的窗口，后面的启动修改页面没有效果'''
6.命令行与pycharm操作的区别
1）命令行不会自动创建templates文件夹
2）命令行不会在配置文件编写关于templates文件夹的配置
'DIRS': [os.path.join(BASE_DIR, 'templates')]
3）pycharm自动创建的第一个应用会自动注册到配置文件中
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
4）针对db.sqlite3文件不用去在乎它有没有创建 只要运行了django会自动出来
7.目录结构
-mysite文件夹名称
--mysite同名文件夹
----__init__.py 少用，主要做一些冷门配置
----settings.py 项目配置文件
----urls.py 总路由层，对应关系(目前简单的理解:网址后缀跟函数名)
--manage.py 项目入口文件
-templates文件夹 存储项目所需的html文件
--db.sqlite3 运行项目后自动创建(django自带的小型数据库)
--应用文件夹：通过命令创建(可以创建任意个数)
----migrations文件夹 存储数据迁移记录
----__init__.py 很少用，主要做一些冷门配置
----admin.py django提供的后台管理
----apps.py 用于配置文件的应用注册(创建的应用都需要去配置文件中注册)
----models.py 模型层(与数据库相关)，存储与数据库表相关的类
----views.py 视图层(编写当前应用核心业务逻辑代码)，存储业务相关的逻辑代码(函数、类)
----tests.py 自带的测试文件
核心文件：
urls.py 路由层
views.py 视图层
templates 模板层
models.py 模型层
8.小白必会三板斧
HttpResponse
主要用于直接返回字符串类型的数据
render
主要用于返回html页面 并且支持模板语法
redirect
主要用于页面重定向
浙公网安备 33010602011771号