文章目录
第三章: HTML、CSS、JavaScript终极篇
jQuery框架
jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“
使用JQuery需要注意的事项
*****************************
一定要确保先导入JQuery之后才能使用
*****************************
下载
https://jquery.com/
使用
方式1:(不受网络限制)
新建一个js文件,将代码拷贝进去即可
方式2:(引入CDN)
必须要有网
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
语法结构
$(选择器).action() 等价于 jQuery(选择器).action()
基本选择器
$('#d1')
$('.c1')
$('p')
使用jQuery查找出来的结果都是一个数组对象(jQuery对象)
$('p#d1')
$('p.c1')
组合选择器
$("x y");// x的所有后代y(子子孙孙)
$("x > y");// x的所有儿子y(儿子)
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素,从 0 开始计数
:odd // 匹配所有索引值为奇数的元素,从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
属性选择器
$('[name]')
$('[name="jason"]')
$('p[name="jason"]')
表单筛选器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
# 仅仅是给你提供了一种更加方便的查找form表单内标签的方法,你也可以不使用它
注意事项
$(':checked') # 会将默认选中checkbox和option都找到
"""
最好加上标签限制
$('input:checked')
"""
筛选器方法(多了解一点)
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们(同级别上下所有)
样式操作
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加。
css("color","red")//DOM操作:tag.style.color="red"
$("p").css("color", "red"); //将所有p标签的字体设置为红色
文本操作
$('#d1').text()
"
div>p
div>span
div>p
"
$('#d1').html()
"
<p>div>p</p>
<span>div>span</span>
<p>div>p</p>
"
$('#d1').text('<h1>111</h1>') # 不识别HTML
k.fn.init [div#d1]
$('#d1').html('<h1>111</h1>') # 识别HTML
k.fn.init [div#d1]
属性选择器
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
在获取raido、checkbox、option简易使用prop不要用attr
标签操作
let aEle = document.createElement('a')
let $aEle = $('<a>')
事件操作
方式1:
$(选择器).事件名(function(){事件代码})
$('#d1').click(function(){
alert(123)
})
方式2:
$(选择器).on('事件名',function(){事件代码})
$('#d1').on('click',function(){
alert(123)
})
事件案列
克隆事件
clone()
默认情况下只会克隆标签
加了参数true也会克隆事件
hover事件
$('p').hover(
function () {
alert('大爷 您来了啊')
},
function () {
alert('下次 还要来哦')
}
)
input事件
$('input').on('input',function () {
console.log($(this).val())
})
事件冒泡
阻止事件冒泡的两种方式
方式1
return false
方式2
$('span').click(function (e) {
e.stopPropagation()
})
文档加载
$(document).ready(function(){
// 在这里写你的JS代码...
})
$(function(){
// 你在这里写你的代码
})
事件委托
将事件委托给标签内部的标签
// 事件委托
// 将body内点击事件委托给body内的button按钮执行
$('body').on('click','button',function () {
alert(123)
})
动画效果
// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义(了解即可)
animate(p,[s],[e],[fn])
each循环
$('ul li').each(function(a,b){
console.log(a,b)
})
$.each([111,222,333,444],function(a,b){
console.log(a,b)
})
Boostarp框架
版本有2、3、4我们主要用3版本
下载
1.直接下载压缩包
2.也可以不下载而使用网络CDN的形式
简单使用
*************************
Bootstrap的js动态效果需要用到jQuery
也就意味着你在使用Bootstrap要先导入jQuery
*************************
导入
1.导入本地的
2.使用网络CDN
布局容器
<!-- 左右有留白的-->
<!-- <div class="container"></div>-->
<!-- 左右没有留白的-->
<div class="container-fluid"></div>
"""
在使用前端框架的时候我们很少需要自己书写css代码
我们只需要修改标签的class属性值即可
"""
起手先写一个容器,之后在里面书写页面内容
栅格系统
一个row默认会被均分为12份
使用col-md-n去划分对应的份数
一定要记住一行只有12份
针对不同的浏览器屏幕大小可以动态调节布局样式
col-md
col-xs
col-sm
col-lg
表格标签
<table class="table table-hover table-striped">
表单标签
class='form-control'
按钮标签
class='btn btn-danger'
图标
fontawesome
http://www.fontawesome.com.cn/
弹出框
sweetalert
https://www.sweetalert.cn/guides.html#getting-started
手写一个web框架
必备知识点
1.python基础
2.网络编程
3.HTTP协议
不要求能写出代码,但是一定要理解思路
1.根据用户输入的地址后缀不同返回不同的内容
我们得想办法获取到用户输入的地址
纯手撸
import socket
server = socket.socket()
server.bind(('127.0.0.1',8080))
server.listen()
"""
GET / HTTP/1.1\r\n
Host: 127.0.0.1:8080\r\n
Connection: keep-alive\r\n
Upgrade-Insecure-Requests: 1\r\n
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.92 Safari/537.36\r\n
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8\r\n
Accept-Encoding: gzip, deflate, br\r\n
Accept-Language: zh-CN,zh;q=0.9\r\n
\r\n
"""
while True:
conn, addr = server.accept()
data = conn.recv(1024)
conn.send(b'HTTP/1.1 200 OK\r\n\r\n')
# 先将请求信息转换为字符串
res = data.decode('utf-8')
# 利用字符串切割
target_url = res.split(' ')[1]
# 根据后缀的不同返回不同的内容
if target_url == '/index':
# conn.send(b'index')
with open(r'myhtml.html','rb') as f:
data = f.read()
conn.send(data)
elif target_url == '/login':
conn.send(b'login')
else:
conn.send(b'hello world')
conn.close()
基于wsgiref
# 简易版本
from wsgiref.simple_server import make_server
def run(env,response):
"""
:param env:请求相关的数据
:param response: 响应相关的数据
:return:
"""
# 固定写法 无需考虑
response('200 OK', [])
# print(env) # 是一个请求数据相关的字典 是由wsgiref自动帮我们处理好的
current_url = env.get('PATH_INFO')
if current_url == '/index':
return [b'index']
elif current_url == '/login':
return [b'login']
else:
return [b'404 NOT FOUND']
if __name__ == '__main__':
# 监听本地8080端口 只要有请求来就会自动调用run方法
server = make_server('127.0.0.1',8080,run)
server.serve_forever() # 启动服务端
# 自动封装版本
根据功能的不用拆封成不同的py文件
views.py
urls.py
templates文件夹
'''
该版本添加功能只需要在两个文件内修改代码即可
urls.py
views.py
'''
# 基于封装好的小框架实现动态展示当前事件
1.访问一个url
2.后端利用时间模块获得时间
3.将时间展示到html页面上
import time
def get_time(env):
current_time = time.strftime('%Y-%m-%d %X')
with open(r'templates/mytime.html','r',encoding='utf-8') as f:
data = f.read()
# 利用字符串的替换
data = data.replace('asdashdjas',current_time)
return data
# 将一个字典返回给html页面展示给用户看(并且这个字段在html页面上还可以使用字典的方法)
"""
jinja2模板语法
pip3 install jinja2
"""
{{ user }}
{{ user.username }}
{{ user['password'] }}
{{ user.get('hobby') }}
模板语法:可以让你在后端html文件上使用后端的语法快速的处理数据
# 我们可以联想一下借助于我们封装的框架将MySQL数据库里面的数据展示到前端浏览器页面
1.pymysql模块
2.jinja2模板语法
import pymysql
# 获取数据库里面的数据展示到前端
def get_info(env):
conn = pymysql.connect(
host = '127.0.0.1',
port = 3306,
user = 'root',
password = '123',
db = 'db666',
charset = 'utf8'
)
cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
sql = 'select * from userinfo'
cursor.execute(sql)
data = cursor.fetchall() # [{},{},{},{}]
with open(r'templates/myinfo.html','r',encoding='utf8') as f:
data1 = f.read()
temp = Template(data1)
res = temp.render({"user_list":data})
return res
django简介
python中web框架有很多,django只是其中一款使用最为普遍功能非常强大的一款而已
我们如果学好了django,后续学习其他框架都是非常容易的
最为主流的python三大web框架
django
大而全,自带的功能组件非常的多,类似于航空母舰
可能会比较的笨重
flask
小而精,自带的功能组件非常的少,类似于游骑兵
非常依赖于第三方的功能模块
# 如果将flask第三方模块全部加起来,甚至可以超过django
tornado
异步非阻塞框架
效率非常的高,高到甚至可以开发游戏服务器
django
1.X
学习1.X
2.X
暂时不考虑(差距很少)
3.X
新增了一个异步模块,这个模块它写的不太好,暂时就不要考虑使用
下载
pip3 install django==1.11.11
如何验证
cmd窗口直接输入
django-admin
作者:吴常文
出处:https://blog.csdn.net/qq_41405475
本文版权归作者和CSDN共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。