devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端+数据库+djago入门(前端部分)

作者：很楠不爱3 | 2024-02-16 18:35:59

赞

踩

前端+数据库+djago入门(前端部分)

 Flask用于网页搭建

  1. 用flask建立网页

  1. from flask import Flask
  2.  
  3. app = Flask(__name__)
  4.  
  5. # 创建了网址 /show/info 和 函数index 的对应关系
  6. # 以后用户在浏览器上访问 /show/info, 网站自动执行
  7. @app.route("/show/info")
  8. def index():
  9.     return "中国联通"
  10.  
  11. if __name__ == '__main__':
  12.     app.run()

浏览器识别标签和数据方式

<span style='color:red;'>联通</span>

从文件中导入样式

  1. from flask import Flask, render_template
  2.  
  3. app = Flask(__name__)
  4.  
  5. # 创建了网址 /show/info 和 函数index 的对应关系
  6. # 以后用户在浏览器上访问 /show/info, 网站自动执行
  7. @app.route("/show/info")
  8. def index():
  9.     # return "<span style = 'color:red;'>中国</span>联通"
  10.     return render_template("index.html")
  11. if __name__ == '__main__':
  12.     app.run()

浏览器标签的认识

head部分的固定格式

<head>

<meta charset = "UTF-8"> #编码

<title> </title>

</head>

 div和span功能

<div>内容</div>

#div表示一个内容占一整行（块级标签）

<span>内容</span>

#span标签称为行内标签，有多大占多大内存，

超链接

<a></a>

<a herf= "www.xx.com">点击跳转</a>

案例是在本地网页上，额外创建一个get_news网页页面

  1. from flask import Flask, render_template
  2.  
  3. app = Flask(__name__)
  4.  
  5. # 创建了网址 /show/info 和 函数index 的对应关系
  6. # 以后用户在浏览器上访问 /show/info, 网站自动执行
  7. @app.route("/show/info")
  8. def index():
  9.     # return "<span style = 'color:red;'>中国</span>联通"
  10.     return render_template("index.html")
  11. if __name__ == '__main__':
  12.     app.run()
  13.  
  14. @app.route("/get/news")
  15. def get_news():
  16.     # return "<span style = 'color:red;'>中国</span>联通"
  17.     return render_template("get_news.html")
  18. if __name__ == '__main__':
  19.     app.run()

图片展示

<img /> 

<img  src = "图片地址" />

图片标签是自闭合标签，

显示自己的图片：

-在自己的项目中创建static的目录，并且把照片防止这个目录中;

-在页面上引入图片： <img src="/static/xx.jpg" / >

图片宽度和高度的设置，也可使设置成百分比：

<img style="height:1000px; width:500px" src="/static/chuck.jpg"/>
设置链接当前页面打开与新标签页打开

在当前页面打开：

<a href = "/get/news">点击跳转</a>

在新标签页打开：

<a href = "/get/news" target = "_blank">点击跳转</a>

列表标签

不带序号的列表写法：

<ul>
    <li>123</li>
    <li>456</li>
    <li>789</li>
</ul>

带序号的列表写法：

<ol>
    <li>123</li>
    <li>456</li>
    <li>789</li>
</ol>

表格标签

  1. <table>
  2.     <thead>
  3.         <tr>    <th>ID</th>   <th>姓名</th>   <th>年龄</th>    </tr>
  4.     </thead>
  5.     <tbody>
  6.         <tr>    <td>10</td> <td>小样</td>           <td>29</td></tr>
  7.         <tr>    <td>11</td> <td>小zi</td>    <td>25</td></tr>
  8.         <tr>    <td>12</td> <td>xiaofe</td>    <td>26</td></tr>
  9.     </tbody>
  10. </table>

 input系列

常规文本的输入：

<input type="text">

密码框的创建：

<input type="password">

单选点击框的建立

<input type="radio" name = "n1">男
<input type="radio" name = "n1">女

下拉框的建立

<!--这是单选框-->
<select>
    <option value="kuang">beijign</option>
    <option>shanghai</option>
    <option>chongqing</option>

</select>
<!--这是复选框-->
<select multiple>
    <option value="kuang">beijign</option>
    <option>shanghai</option>
    <option>chongqing</option>

</select>

多行文本：

<textarea> </textarea>

案例：flask搭建用户注册页面（无提交功能）
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <h1>用户注册</h1>
  9. <div>
  10.     用户名：<input type="text">
  11. </div>
  12.  
  13. <div>
  14.     密码：<input type="password">
  15. </div>
  16.  
  17. <div>
  18.     性别：
  19.     <input type="radio">男
  20.     <input type="radio">女
  21. </div>
  22.  
  23. <div>
  24.     性别：
  25.     <input type="checkbox">篮球
  26.     <input type="checkbox">足球
  27.     <input type="checkbox">羽毛球
  28. </div>
  29.  
  30. <div>
  31.     城市：
  32.     <select name="" id="">
  33.         <option value="">北京</option>
  34.         <option value="">上海</option>
  35.         <option value="">成都</option>
  36.     </select>
  37. </div>
  38.  
  39. <div>
  40.     擅长领域：
  41.     <select multiple>
  42.         <option value="">打游戏</option>
  43.         <option value="">睡觉</option>
  44.         <option value="">吃饭</option>
  45.     </select>
  46. </div>
  47.  
  48. <div>
  49.     备注：<textarea> </textarea>
  50. </div>
  51.  
  52. <div>
  53.     <input type="button" value="submit按钮">
  54.     <input type="submit" value="submit按钮">
  55. </div>
  56. </body>
  57. </html>

提交内容<form></form>

用form与submit按钮结合，可以将提交的内容，提交到“提交的地址”中。button只是按钮，不能做上传 

<from method = "get" action = "提交的地址"提交的内容/form>

加name属性，让输入的内容会被submit到新地址中(采用get的方式)

CSS 

应用方式

1. 应用在标签上
2.在head标签写style标签

3. 写到文件中（适用于写多个页面）

  不同的选择器

1.类选择器
2. id选择器
3. 标签选择器
  1. <style>
  2.         <!--        类选择器-->
  3.         .c1{
  4.             color:red;
  5.         }
  6.         <!--        id选择器-->
  7.         #c2{
  8.             color:green;
  9.         }
  10.         <!--        标签选择器-->
  11.         li{
  12.             color:yellow
  13.         }
  14.  
  15.     </style>
4. 属性选择器

程序中的".yy li {  }"就属于属性选择，只有yy属性的标签，会应用这个颜色

  1.     <style>
  2.         <!--        类选择器-->
  3.         .c1{
  4.             color:red;
  5.         }
  6.         <!--        id选择器-->
  7.         #c2{
  8.             color:green;
  9.         }
  10.         <!--        标签选择器-->
  11.         li{
  12.             color:yellow
  13.         }
  14.  
  15.     .yy li{
  16.         color:red; 
  17.     }
  18.  
  19.     </style>
  20. </head>
  21. <body>
  22.  
  23.     <div class = "yy">
  24.         <a >百度</a>
  25.         <a >guge</a>
  26.         <div>
  27.             <a >guge</a>
  28.         </div>
  29.         <ul>
  30.             <li>beijing</li>
  31.             <li>shanghai</li>
  32.             <li>chengdu</li>
  33.         </ul>
  34.     </div>

5. 后代选择器

CSS样式

宽度和高度
  1. .cl{
  2.     height:300px;
  3.     width:500 px;
  4. }

注意事项：

  • 宽度，支持百分比
  • 行内标签：默认无效
  • 块级标签：默认有效
行内和块级
  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Title</title>
  4.     <style>
  5.       .c1{
  6.         display: inline-block;
  7.  
  8.         height: 100px;
  9.         width: 500px;
  10.         border:1px solid red;
  11.       }
  12.     </style>
  13. </head>
  14. <body>
  15.  
  16.   <span class="c1">
  17.     zhongguo
  18.   </span>
  19.   <span>meiguo</span>
  20. </body>
  21. </html>

使用块级行内标签，可以将span的行内标签，也加上宽度和高度等格式。

 字体和颜色

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Title</title>
  4.     <style>
  5.       .c1{
  6.         color: red;
  7.         font-size:58px;
  8.         font-weight:10px;
  9.         font-family:"Arial,verdana, sans-serif";
  10.       }
  11.     </style>
  12.  
  13.  
  14. </head>
  15. <body>
  16. <div class=" c1">zongguo</div>
  17. <div>meiguo</div>
  18. </body>
  19. </html>

主要有文字的大小，颜色，字体，粗细

文字对齐方式：
  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Title</title>
  4.     <style>
  5.       .c1{
  6.         color: red;
  7.         font-size:25px;
  8.         height: 150px;
  9.         width:300px;
  10.       }
  11.       .c2{
  12.         text-align: center;
  13.         line-height: 150px ;#这是文字上下居中的方式
  14.  
  15.       }
  16.     </style>
浮动
  1. </head>
  2. <body>
  3. <div style="float:right">meiguo</div> #这样字体会出现在最右面
  4. </body>
  5. </html>

Javascript

  1. <script type="text/javascript">
  2.     function myFun() {
  3.         alert("shide")
  4.         confirm("dddd")
  5.     }
  6. </script>
javascript的两种位置

1.放在body的最下方（常用）

2. 放在head中（不常用，这样页面在加载时会出现js的效果栏）

js的两种存放位置

1. 直接写在文件中

2. 从js文件中导入到html文件中

1.1注释

html: 

<!--注释-->

css注释

/* 注释 *、

js注释

  1. // 注释
  2.  
  3. /* 注释 */
js定义变量和输出变量
  1. var name = "gaoqian";
  2.  
  3. console.log(name);

1.2 字符串类型

var name = "zhongguo liantong";

// 输出字符串长度
var v1 = name.length;
var v2 = name[0];

// 去除空白
var v3 = name.trim()

// 切片
var v4 = name.substring(0,2)//前取后不取
 采用js获取标签内的内容
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.  
  7.     
  8. </head>
  9. <body>
  10.  
  11. <span id = txt>欢迎大家光临我的家</span>
  12.  
  13. <script type="text/javascript">
  14.     // 1. 去html中找某个标签并获取他的内容(DOM)
  15.     vat tag = document.getElementById(txt);
  16.     var datastring = tag.innerText;
  17.  
  18.     console.log(datastring);
  19. </script>
  20.  
  21. </body>
  22. </html>

案例：JS写跑马灯 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.  
  7.     
  8. </head>
  9. <body>
  10.  
  11. <span id = txt>我爱宝贝羊羊</span>
  12.  
  13. <script type="text/javascript">
  14.     function show(){
  15.         // 1. 去html中找某个标签并获取他的内容(DOM)
  16.         var tag = document.getElementById("txt");
  17.         var datastring = tag.innerText;
  18.         //2. 动态起来，把文本中的第一个字符获取到，并放到字符串的最后面
  19.         var firstchar = datastring[0];
  20.         var otherstring = datastring.substring(1, datastring.length);
  21.         var newtext = otherstring + firstchar
  22.         // 3.在html中更新内容
  23.         tag.innerText = newtext;
  24.     }
  25.     // js中的定时器
  26.     setInterval(show,300);
  27. </script>
  28.  
  29. </body>
  30. </html>

1.3数组 

// 定义

var v1 = [11,22,33,44];

var v2=  ([11,22,33,44]);

v1.push(" xx")  //尾部追加

v1.unshift(" xx")  //头部追加

v1.splice(1(索引位置)，0（表示消掉的元素数目，如果是1，等于是替换），“XX”)  //在指定索引位置插入XX

v1.pop  //尾部删除

v1.shift  //头部删除

v1.splice(索引位置，1)  //指定位置删除

 数组循环

var v1 = [11,22,33,44];

for (

        var in v1

)

或者这样：

var v1 = [11,22,33,44]

for (var i=0; i < v1.length; i++){

}

案例： 使用js创建li标签 
  1. <body>
  2. <ul id="city">
  3.  
  4. </ul>
  5.  
  6. <script type="text/javascript">
  7.     var citylist = ["beijign","shanghai","dongjing"];
  8.     for (var idx in citylist){
  9.         var text = citylist[idx];
  10.  
  11.         //创建li
  12.         var tag = document.createElement("li");
  13.         tag.innerText= text;
  14.  
  15.         //添加到id= city那个标签里，DOM
  16.         var parentTag = document.getElementById("city");
  17.         parentTag.appendChild(tag);
  18.     }
  19. </script>
  20.  
  21. </body>

1.4 对象(python中字典)

两种表述方式

一

info = {

        "name":"zhouzhou",

        "age":18

}

二

info = {

        name:"zhouzhou";

        age:18

}

js的增删查改 

// 引用

info.age

// 更改

info.name = ="chenyang"

//删除

delete info ["age"]

js的循环写法

info = {

        "name":"zhouzhou",

        "age":18

}

for (var key in info){

// key = name/age

data = info[key]

}

1.5 条件语句

1.6 函数

DOM

DMO，就是一个模块，模块可以对HTML页面中的标签进行操作。

// 根据ID获取标签

var tag = documnet.getElementById("XX");

//获取标签中的文本

tag.innerText

//修改标签中的文本

tag.innerText = "哈哈哈哈"；

//创建标签<div></div>

var tag = document.creatElemet("div");

1事件的绑定

    

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Title</title>
  4.  
  5.     
  6. </head>
  7. <body>
  8. <input type="button" value="点击添加" onclick="addCityInfo()">
  9. <ul id="city">
  10.  
  11.  
  12. </ul>
  13.  
  14. <script type="text/javascript">
  15.     function addCityInfo(){
  16.         var newtage = document.createElement("li");
  17.         newtage.innerText = "联通"
  18.         var paraentTag = document.getElementById("city");
  19.         paraentTag.appendChild(newtage);
  20.  
  21.     }
  22. </script>
  23.  
  24. </body>
  25. </html>

2. 将用户输入的内容建立成li列表

  1. <body>
  2. <input type="text" placeholder="请输入内容" id = "txtUser"/>
  3. <input type="button" value="点击添加" onclick="addCityInfo()">
  4. <ul id="city">
  5.  
  6. </ul>
  7.  
  8. <script type="text/javascript">
  9.     function addCityInfo(){
  10.         //1. 找到输入标签
  11.         var txtTag = document.getElementById("txtUser");
  12.         //2. 获取input框中用户输入的内容
  13.         var newString = txtTag.value;
  14.         //3. 创建标签 <li> </li>中间的文本信息就是用户输入的内容
  15.         var newTag = document.createElement("li");
  16.         newTag.innerText = newString;
  17.         // 4. 标签添加到ul中
  18.         var parentTag = document.getElementById("city");
  19.         parentTag.appendChild(newTag);
  20.     }
  21. </script>
  22.  
  23. </body>
2.1 仅当输入框有内容时才新建列表

添加了一个if判断条件

  1. <body>
  2. <input type="text" placeholder="请输入内容" id = "txtUser"/>
  3. <input type="button" value="点击添加" onclick="addCityInfo()">
  4. <ul id="city">
  5.  
  6. </ul>
  7.  
  8. <script type="text/javascript">
  9.     function addCityInfo(){
  10.         // 1. 找到输入标签
  11.         var txtTag = document.getElementById("txtUser");
  12.         // 2. 检查输入框中是否有内容
  13.         if (txtTag.value !== "") {
  14.             // 3. 获取input框中用户输入的内容
  15.             var newString = txtTag.value;
  16.             // 4. 创建标签 <li> </li>中间的文本信息就是用户输入的内容
  17.             var newTag = document.createElement("li");
  18.             newTag.innerText = newString;
  19.             // 5. 标签添加到ul中
  20.             var parentTag = document.getElementById("city");
  21.             parentTag.appendChild(newTag);
  22.         } else {
  23.             alert("请在输入框中输入内容！");
  24.         }
  25.     }
  26. </script>
  27. </body>
2.2 只有当输入内容不一致时，才创建新列表
  1. <body>  
  2. <input type="text" placeholder="请输入内容" id="txtUser" />  
  3. <input type="button" value="点击添加" onclick="addCityInfo()" />  
  4. <ul id="city">  
  5.   
  6. </ul>  
  7.   
  8. <script type="text/javascript">  
  9.     var lastInput = ""; // 用于存储上一次输入的内容  
  10.   
  11.     function addCityInfo() {  
  12.         // 1. 获取输入框中的当前内容  
  13.         var currentInput = document.getElementById("txtUser").value;  
  14.         // 2. 检查当前内容与上一次输入的内容是否相同  
  15.         if (currentInput !== lastInput) {  
  16.             // 如果不同，则执行以下操作  
  17.             lastInput = currentInput; // 更新上一次输入的内容为当前内容  
  18.             // 3. 获取input框中用户输入的内容  
  19.             var newString = currentInput;  
  20.             // 4. 创建标签 <li> </li>中间的文本信息就是用户输入的内容  
  21.             var newTag = document.createElement("li");  
  22.             newTag.innerText = newString;  
  23.             // 5. 标签添加到ul中  
  24.             var parentTag = document.getElementById("city");  
  25.             parentTag.appendChild(newTag);  
  26.         } else {  
  27.             alert("您输入的内容与上次相同，无需重复添加！");  
  28.         }  
  29.     }  
  30. </script>  
  31. </body>
2.3 输入完成后清空输入框 

下面的第6步就可以起到清空输入框的作用

        // 5. 标签添加到ul中
        var parentTag = document.getElementById("city");
        parentTag.appendChild(newTag);
    } else {
        alert("请在输入框中输入内容！");
    }
    //6. 将inPut框清空
    txtTag.value = "";
}

 JQuery引入

DOM有很多功能，但是比较繁琐，

所以在网页设计中，会用jquery来设计。

JQuery是javascript的第三方模块（第三方类库）

利用JQuery查改标签中的内容
  1. <body>
  2. <h1 id="txt"> 中国联通</h1>
  3.  
  4. <script src="static/js/jquery-3.7.1.js"></script>
  5. <script type="text/javascript">
  6.     // 1. 找到id = txt的标签
  7.     // 2.修改内容
  8.     $("#txt").text("广西联通");
  9. </script>
  10. </body>
寻找标签
1. ID选择器

<h1 id="txt"> 移动</h1>

<h1 > 联通</h1>

<h1 > 电信</h1>

$(#"标签名")

2. 样式选择器

<h1 class="c1"> 移动</h1>

<h1 class="c2"> 联通</h1>

<h1 class="c3"> 电信</h1>

$(".c1")

3. 标签选择器

<h1 class="c1"> 移动</h1>

<div> class="c2"> 联通</div>

<h1 class="c3"> 电信</h1>

$("h1")

多选择器
<h1 class = "c1">中国联通</h1>
<h1 class = "c1">
    <div class = "c3">
        <span> </span>
        <a></a>
    </div>
</h1>

<h1 class = "c2">中国联通</h1>
<ul>
    <li>xx</li>
    <li>xx</li>
</ul>

$("#c3,#c2,li")

属性选择器
<input type="text" name="n1" />
<input type="text" name="n1" />
<input type="text" name="n2" />

$("input[name = 'n1']")

间接寻找
<div>
    <div>北京</div>
    <div id="c1">上海</div>
    <div>广州</div>
    <div>深圳</div>
</div>

$("#c1").prev() //找上一个标签

$("#c1").next()  // 找下一个标签

$("#c1").next.next() 

$("#c1").siblings()    //找所有的标签

案例1：使用JQuery点击文字显示下拉标签，再次点击隐藏
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .menus {
  8.             width: 200px;
  9.             height: 800px;
  10.             border: 1px solid red;
  11.         }
  12.         .menus .header{
  13.             background-color: gold;
  14.             padding: 10px 5px;
  15.         }
  16.         .menus .content a{
  17.             display: block;
  18.             padding: 5px 5px;
  19.             border-bottom: 1px dotted #dddddd;
  20.  
  21.         }
  22.         .hide{
  23.             display: none;
  24.         }
  25.     </style>
  26.  
  27. </head>
  28.  
  29. <body>
  30.  
  31. <div class="menus">
  32.     <div class="items">
  33.         <div class="header" onclick="clickMe(this);">上海</div>
  34.         <div class="content hide" >
  35.             <a href="">青朴朴</a>
  36.             <a href="">海淀</a>
  37.             <a href="">朝阳</a>
  38.         </div>
  39.  
  40.     </div>
  41.     <div class="items">
  42.         <div class="header" onclick="clickMe(this);">北京</div>
  43.         <div class="content hide">
  44.             <a href="">日本</a>
  45.             <a href="">美国</a>
  46.             <a href="">朝鲜</a>
  47.         </div>
  48.  
  49.     </div>
  50. </div>
  51. <script src="static/js/jquery-3.7.1.js"></script>
  52. <script>
  53.     function clickMe(self){
  54.         var hasHide = $(self).next().hasClass("hide");
  55.         if(hasHide){
  56.             $(self).next().removeClass("hide");
  57.         }else{
  58.             $(self).next().addClass("hide");
  59.         }
  60.     }
  61. </script>
  62. </body>
  63. </html>
 案例2：使用JQuery，一次只显示一个下拉框的文字点击文字显示下拉标签，再次点击隐藏
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .menus {
  8.             width: 200px;
  9.             height: 800px;
  10.             border: 1px solid red;
  11.         }
  12.         .menus .header{
  13.             background-color: gold;
  14.             padding: 10px 5px;
  15.         }
  16.         .menus .content a{
  17.             display: block;
  18.             padding: 5px 5px;
  19.             border-bottom: 1px dotted #dddddd;
  20.  
  21.         }
  22.         .hide{
  23.             display: none;
  24.         }
  25.     </style>
  26.  
  27. </head>
  28.  
  29. <body>
  30.  
  31. <div class="menus">
  32.     <div class="items">
  33.         <div class="header" onclick="clickMe(this);">上海</div>
  34.         <div class="content hide" >
  35.             <a href="">青朴朴</a>
  36.             <a href="">海淀</a>
  37.             <a href="">朝阳</a>
  38.         </div>
  39.  
  40.     </div>
  41.     <div class="items">
  42.         <div class="header" onclick="clickMe(this);">北京</div>
  43.         <div class="content hide">
  44.             <a href="">日本</a>
  45.             <a href="">美国</a>
  46.             <a href="">朝鲜</a>
  47.         </div>
  48.  
  49.     </div>
  50.     <div class="items">
  51.         <div class="header" onclick="clickMe(this);">深圳</div>
  52.         <div class="content hide" >
  53.             <a href="">青朴朴</a>
  54.             <a href="">海淀</a>
  55.             <a href="">朝阳</a>
  56.         </div>
  57.  
  58.     </div>
  59.     <div class="items">
  60.         <div class="header" onclick="clickMe(this);">广州</div>
  61.         <div class="content hide">
  62.             <a href="">日本</a>
  63.             <a href="">美国</a>
  64.             <a href="">朝鲜</a>
  65.         </div>
  66.  
  67.     </div>
  68. </div>
  69. <script src="static/js/jquery-3.7.1.js"></script>
  70. <script>
  71.     function clickMe(self){
  72.         // 把自己下面的内容展示出来
  73.         $(self).next().removeClass("hide");
  74.         // 找父类，并把其他父类级标签找出来，再去每个子标签中寻找class="content"，添加hide样式
  75.         $(self).parent().siblings().find(".content").addClass("hide")
  76.  
  77.  
  78.     }
  79. </script>
  80. </body>
  81. </html>
案例3  动态获取用户输入的账号密码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.  
  7. </head>
  8.  
  9. <body>
  10. <input type="text" id="txtuser" placeholder="username">
  11. <input type="text" id="txtEmail" placeholder="email">
  12. <input type="button" value="提交" onclick="getinfo()">
  13.  
  14. <ul id="view">
  15. </ul>
  16.  
  17.  
  18. <script src="static/js/jquery-3.7.1.js"></script>
  19. <script>
  20.     function getinfo(){
  21.         //1. 获取用户输入的应户名和邮箱
  22.         var username = $("#txtuser").val();
  23.         var email = $("#txtEmail").val();
  24.         //2. 创建li标签，在li标签内部写入内容$("<li>")
  25.         var newli = $("<li>").text(username);
  26.         // 3.把新创建的li标签添加到ul里面；
  27.         $("#view").append(newli);
  28.  
  29.     }
  30. </script>
  31. </body>
  32. </html>

绑定事件 

  1. <body>
  2. <ul>
  3.     <li>百度</li>
  4.     <li>谷歌</li>
  5.     <li>搜狗</li>
  6. </ul>
  7.  
  8. <script src="static/js/jquery-3.7.1.js"></script>
  9. <script>
  10.     $("li").click(function (){
  11.         var text = $(this).text();
  12.         console.log(text);
  13.     })
  14. </script>
  15. </body>
  16. </html>

在JQuery可以删除某个标签

  1. <div id="c1">内容</div>
  2. $("#c1").remove();

表格操作

案例4：点击删除表格的一行
  1. <body>
  2. <table border="1">
  3.     <thead>
  4.         <tr>
  5.             <th>ID</th>
  6.             <th>姓名</th>
  7.             <th>操作</th>
  8.         </tr>
  9.     <tbody>
  10.         <tr>
  11.             <td>1</td>
  12.             <td>小周</td>
  13.             <td>
  14.                 <input type="button" value="删除" class="delete">
  15.             </td>
  16.         </tr>
  17.  
  18.         <tr>
  19.             <td>2</td>
  20.             <td>小陈</td>
  21.             <td>
  22.                 <input type="button" value="删除" class="delete">
  23.             </td>
  24.         </tr>
  25.  
  26.         <tr>
  27.             <td>3</td>
  28.             <td>小李</td>
  29.             <td>
  30.                 <input type="button" value="删除" class="delete">
  31.             </td>
  32.         </tr>
  33.  
  34.         <tr>
  35.             <td>4</td>
  36.             <td>小吴</td>
  37.             <td>
  38.                 <input type="button" value="删除" class="delete">
  39.             </td>
  40.         </tr>
  41.  
  42.         <tr>
  43.             <td>5</td>
  44.             <td>小赵</td>
  45.             <td>
  46.                 <input type="button" value="删除" class="delete">
  47.             </td>
  48.         </tr>
  49.  
  50.  
  51.     </tbody>
  52.  
  53.     </thead>
  54. </table>
  55. <script src="static/js/jquery-3.7.1.js"></script>
  56. <script>
  57. $(function(){
  58. // 1.找到所有class=delete的标签，绑定事件
  59.     $(".delete").click(function (){
  60.         //删除当前行的数据
  61.         $(this).parent().parent().remove();
  62.  
  63.     })
  64. })
  65.  
  66.  
  67. </script>
  68.  
  69.  
  70.  
  71. </body>

故障分析

CSS & Jquery

boostarp5导航条中下拉框不生效问题并报错

将其中的boostarp.js更换为bootstrap.bundle.js如下（如果你下载的是boostarp5生产文件，那么在boostarp.js的同级目录下应该有此文件，其他引入方式可能需要自行尝试）

boostarp中某些组件需要使用Popper.js，但是在boostarp.js中没有集成，而boostarp.bundle.js中集成了popper.js库。
Popper.js 是一个 JavaScript 库，用于在 web 开发中实现弹出式框、下拉菜单、提示框和工具提示等 UI 组件的定位和定界。它可以帮助开发者更精确地控制这些 UI 组件的位置和行为，以便它们可以根据页面上的其他元素或触发事件进行动态定位。

  1.     <script src="static/js/jquery-3.7.1.js"></script>
  2.     <script src="static/plugins/bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>
css中，使用子类但是没有出现效果

比如在下面的代码中，定义.menus .header这个子类，需要在.menus后面加一个空格，才能被识别到。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .menus{
  8.             width: 200px;
  9.             border: 1px solid red;
  10.         }
  11.         .menus .header{
  12.             background-color: gold;
  13.             padding: 20px 10px;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div class="menus">
  19.         <div class="header">大标题</div>
  20.         <div class="item">内容</div>
  21.  
  22.     </div>
  23.  
  24. </body>
  25. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/96144
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号