第三章： HTML、CSS、JavaScript终极篇

第三章： 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&gt;p</p>
    <span>div&gt;span</span>
    <p>div&gt;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共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。