Python前端基础 ---HTML CSS JavaScript jQuery

最新推荐文章于 2022-06-26 11:38:37 发布

su-lemon

最新推荐文章于 2022-06-26 11:38:37 发布

阅读量266

点赞数 2

分类专栏： Python Python前端文章标签： python 前端 html css JavaScript jQuery

本文链接：https://blog.csdn.net/weixin_43634617/article/details/84038464

版权

Python 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

Python前端

1 篇文章 0 订阅

订阅专栏

前端基础

1、html基础

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>html基础</title>
</head>
<body>
	<div>标签</div>
</body>
</html>

第一个页面

<!--文档类型采用html5版本标准-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>abc</title>
</head>
<body>
    <!--自定义标签-->
    <ooo style="color: darkred">ooo</ooo>
    <!--系统标签: 具有一定的语义及样式-->
    <!--h123456-->
    <h1>一级标题</h1>
    <aaa>一级标题</aaa>
    <!--div | span | i | b | img | a | form | table | link-->
</body>
</html>
<!--双标签: 可以包含子内容-->

<!--单标签: 可以完成指定功能-->

2、css基础

标签选择器：div
类选择器：.div
id选择器：#div
后代|子代选择器：body div | body > div

第一种样式

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--嵌套css样式-->
    <style>
        /*采用css语法*/
        /*
        选择器 {
            样式1: 样式1值;
            样式2: 样式2值;
        }
        */
        /*标签选择器*/
        div {
            font-size: 30px;
            color: #f00;
        }
        /*.代表class,类选择器*/
        .d {
            width: 300px;
            height: 300px;
            background-color: cyan;
        }
        /*#代表id, id选择器*/
        #d1 {
            border-radius: 50%;
        }
        /*子代选择器 | 后代选择器*/
        /*body > .d | body .d*/
        body > .d {
            line-height: 300px;
            text-align: center;
        }
        /*span是.bd的后代,而不是子代,是p的子代*/
        .bd span {
            /*margin-left: 100px;*/
        }
        .bd > span {
            margin-left: 100px;
        }
    </style>
</head>
<body class="bd">
    <p>
        <span>12345</span>
    </p>
    <!--div为标签的标签名: div-->
    <!--class为标签的类名: d-->
    <!--id为标签的id名: d1-->
    <div class="d" id="d1">一段普通的文本</div>
    <!--h1为标签的标签名-->
    <h1></h1>
</body>
</html>

3、js基础(JavaScript)

js选择器1：document.getElementById() | document.getElementsByClassName()
js选择器2：document.querySelector() | document.querySelectorAll()

第一条脚本

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>脚本</title>
    <style>
        /*嵌套css*/
    </style>
</head>
<body class="bd">
    <p class="p1">12345</p>
    <p class="p2">上山打老虎</p>
</body>
<script>
    // javascript语法

    // 通过js选择器查找页面中的标签 => 操作标签
    // var关键词就是用来声明变量的
    var ps = document.getElementsByTagName('p');
    // 打印语句
    console.log(ps);
    console.log(ps[0]);
    // innerText代表标签的文本
    console.log(ps[0].innerText);
    // 修改内容,给innerText重新赋值
    ps[0].innerText = "一二三四五";

    // getElement...By...是通过名字来获取
    // [body] => body
    var bd = document.getElementsByClassName('bd')[0];
    console.log(bd)

    // 满足css选择器语法的js选择器
    var body = document.querySelector('.bd');
    console.log(body)

    var ps = body.querySelectorAll('body p');
    console.log(ps)
</script>
</html>

4、jq基础(jQuery)

$.ajax({
    url: "http://127.0.0.1:5000/testAction",
    data: {
        usr: "zero",
        ps: "123456"
    },
    success: function (data) {
        console.log(data);
    }
});

第一条请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq请求</title>
</head>
<body>
    <h1>登录</h1>
    <input type="text" class="inp1">
    <input type="password" class="inp2">
    <button>请求</button>
</body>
<!--使用jq之前要导入jq, 通过script的src属性进行导入-->
<script src="jquery-3.3.1.min.js"></script>
<script>
    var h1 = document.querySelector("h1");
    var btn = document.querySelector("button");
    var inp1 = document.querySelector(".inp1");
    var inp2 = document.querySelector(".inp2");
    // 然按钮具有点击事件
    btn.onclick = function () {
        // 输入框的内容由value存储
        console.log(inp1.value); // => usr
        console.log(inp2.value); // => ps

        $.ajax({
            url: "http://127.0.0.1:5000/testAction",
            data: {
                usr: inp1.value,
                ps: inp2.value
            },
            success: function (data) {
                h1.innerText = data
            }
        });
    }
</script>
</html>