无基础前端入门

最新推荐文章于 2024-06-23 20:25:44 发布
最新推荐文章于 2024-06-23 20:25:44 发布
阅读量117 收藏
点赞数
文章标签： html 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhexiangsi/article/details/129895441
版权
本文介绍了前端开发的基础知识，包括HTML标签如

、、等，CSS样式如颜色、字体、布局，以及JavaScript的基本语法、DOM操作和事件处理。还提到了BootStrap框架的使用，以及如何利用它构建导航和栅格系统。

摘要由CSDN通过智能技术生成

前端学习笔记

1. 浏览器能识别的标签

浏览器可以识别很多标签+数据，例如：
	<h1>中国</h1>  -> 浏览器看见加大加粗
	<span style='color:red'>中国</span>  -> 浏览器看到字体变红

1.1 编码(head)

<meta charset="UTF-8">

1.2 title(head)

<head>
	<meta charset="UTF-8">
	<title>中国</title>
</head>

1.3 标题(body)

<body>
	<h1>一级标题</h1>
	<h2>二级标题</h2>
	<h3>三级标题</h3>
	<h4>四级标题</h4>
	<h5>五级标题</h5>
	<h6>六级标题</h6>
</body>

1.4 div和span(body)

<div>内容</div>

<span>内容</span>

  • div，一个占一整行。 [块级标签]

  • span，有多大占多少。 [行内/内联标签]

注意：这两个标签 + CSS样式可实现很多功能。

1.4.5 超链接(div)

跳转到其他网站，需输入整个url:
<a href="https://cn.bing.com/">点击跳转</a>

跳转到自己其他的网站:
<a href="http://127.0.0.1:8000/show/info">点击跳转</a>
<a href="/show/info">点击跳转</a>

# 当前页面跳转
<a href="/show/info">点击跳转</a>

# 新的Tab页面打开
<a href="/show/info" target="_blank">点击跳转</a>

1.4.6 图片(div)

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

直接显示别人的图片地址(可能存在防盗链):
<img src="https://pic4.zhimg.com/v2-b23f984c2aeaa7bed12e890b4338d499_720w.jpg" />

显示自己的图片:
	- 自己项目中创建：static目录，图片要放在static
	- 在页面上引入
		<img src="/static/1.jpg" />
  • 关于设置图片的高度和宽度
<img src="图片地址" style="height: 100px; width: 200px;"/>
<img src="图片地a址" style="height: 10%; width: 20%;"/>

小结

  • 学习的标签
<h1></h1>
<div></div>
<span></span>
<a></a>
<img />
  • 划分
块级标签：
	<h1></h1>
	<div></div>
行内标签：
	<span></span>
	<a></a>
	<img></img>
  • 嵌套
<div>
    <span>时间：</span>
    <span>2022-11-05</span>
    <img />
    <a></a>
    
    <a href="">
        <img src="图片地址" />
    </a>
</div>

1.4.7 列表(body)

  • 无序列表
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
  • 有序列表
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

1.4.8 表格(body)

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>01</td>
            <td>Sam</td>
            <td>男</td>
            <td>18</td>
        </tr>
        <tr>
            <td>02</td>
            <td>Rose</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>03</td>
            <td>Tank</td>
            <td>男</td>
            <td>18</td>
        </tr>
    </tbody>
</table>

1.4.9 input系列

#文本框
<input type="text" />

#密码框
<input type="password" />

#文件框
<input type="file" />

#单选框
<input type="radio" name="n1"/>男
<input type="radio" name="n1"/>女

#复选框
<input type="checkbox" />篮球
<input type="checkbox" />足球
<input type="checkbox" />排球

#按钮
<input type="button" value="确认"/>	-->普通按钮
<input type="submit" value="确认"/>	-->提交表单

1.4.10 下拉框

#单选
<select>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
</select>

#多选
<select multiple>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
</select>

1.4.11 多行文本

<textarea></textarea>

知识点补充

浏览器向后端发送请求

  • GET请求 【URL方法 / 表单提交】

    • 现象：GET请求、跳转、向后台传入数据数据会拼接在URL上。

      https://www.sogou.com/web?query=安卓&age=19&name=xx

​ 注意：GET请求数据会在URL中体现。

  • POST请求 【表单提交】
    • 现象：提交数据不在URL中二十在请求体中。
页面上的数据，想要提交到后台

  • form标签包裹要提交的数据的标签

    • 提交方式：method=“get”
    • 提交的地址：action=“目的地址”
    • 在form标签里面必须有一个submit标签

  • 在form里面的一些标签：input / select / textarea

    • 一定要写name属性

总结

  1. 称呼

    - HTML标签

  2. HTML标签 (默认格式样式，可修改)

  3. HTML标签与编程语言无关

  4. 提醒：HTML标签比较多，不必逐一学会，上述为开发页面必备

2. css样式

CSS，专门用来“美化”标签

  • 基础CSS，写简单页面 & 看懂 & 改
  • 模块，调整和修改

2.1 快速了解

<img src="..." style="height: 100px;" />

<div style="color: red;">中国</div>

2.2 CSS应用方式

1. 在标签上
<img src="..." style="height: 100px;" />

<div style="color: red;">中国</div>
2. 在head标签中写style标签(*)
<head>
    <style>
        .c1{
            color: red;
        }
    </style>
</head>

<div class="c1">中国</div>
3. 写到文件中(*)
.c1{
    height: 100px;
}

.c2{
    color: red;
}

<head>
    <link rel="stylesheet" href="common.css" />
</head>

<div class="c1">中国</div>
<div class="c2">中国</div>

2.3 选择器

  • ID选择器

    #c1{
    
}

<div id="c1"></div>

  • 类选择器 (最多)

    .c1{
    
}

<div class="c1"></div>

  • 标签选择器

    div{
    
}

<div>xxx</div>

  • 属性选择器

    input[type="text"]{
	border: 1px solid red;
}
.v1[xx="123"]{
	color: gold;
}

    <input type="text">
<input type="password">

<div class="v1" xx="123">a</div>
<div class="v1" xx="456">b</div>

  • 后代选择器

    .yy li{
    color: pink;
}
.yy > a{
    color: dodgerblue;
}

    <div class="yy">
    <a>百度</a>
    <div>
        <a>谷歌</a>
    </div>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
</div>

关于选择器：

  • 多：类选择器、标签选择器、后代选择器
  • 少：属性选择器、ID选择器

关于多个样式 & 覆盖的问题：

<head>
    <style>
        .c1{
            color: red;
            border: 1px solid red;
        }
        .c2{
			font-size: 28px;
            color: green;
        }
    </style>
</head>
<body>
    <div class="c1 c2">中国</div>
</body>

补充：下面的不要覆盖上面

<head>
    <style>
        .c1{
            color: red !important;
            border: 1px solid red;
        }
        .c2{
			font-size: 28px;
            color: green;
        }
    </style>
</head>
<body>
    <div class="c1 c2">中国</div>
</body>

2.4 样式

1. 高度和宽度
.c1{
    height: 300px;
    width: 500px;
}

注意事项：

  • 宽度，支持百分比
  • 行内标签，默认无效；块级标签，默认有效(右侧空白可通过浮动使用)
2. 块级和行内标签
  • 块级
  • 行内
  • CSS样式：标签 -> display: inline-block

示例：行内 & 块级特性

<head>
    <style>
        .c1{
            display: inline-block;
            
            height: 300px;
    		width: 500px;
            color: red !important;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <span class="c1">中国</span>
    <span class="c1">美国</span>
    <span class="c1">俄国</span>
</body>

示例：块级 & 行内标签的设置

<head>
    <style>
        
    </style>
</head>
<body>
    <div style="display: inline;">中国</div>
    <span style="display: block;">美国</span>
</body>
3. 字体设置
  • 颜色
  • 大小
  • 加粗
  • 字体格式
<head>
    <style>
        .c1{
            color: red !important;
            font-size: 50px;
            font-weight: 400;
            font-family: Microsoft Yahei;
        }
    </style>
</head>
<body>
    <div class="c1">中国</div>
</body>
4. 文字对齐方式
<head>
    <style>
        .c1{
            height: 300px;
    		width: 500px;
            border: 1px solid red;
            
            text-align: center;		/* 水平方向居中*/
            line-height: 300px;		/* 垂直方向居中*/
        }
    </style>
</head>
<body>
    <div class="c1">中国</div>
</body>
5. 浮动
<body>
    <span>中国</span>
    <span style="float: right">俄国</span>
</body>

div默认块级标签，如果浮动起来就不一样

<head>
    <style>
        .c1{
            float: left;
            height: 200px;
            width: 150px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c1"></div>
    <div class="c1"></div>
</body>

如果让标签浮动起来之后，就会脱离文档流，需在最后加style="clear: both"

<head>
    <style>
        .c1{
            float: left;
            height: 200px;
            width: 150px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div style="background-color: dodgerblue">
        <div class="c1"></div>
    	<div class="c1"></div>
    	<div class="c1"></div>
        <div style="clear: both"></div>
    </div>
    <div>中国</div>
</body>
6. 内边距

内边距，自己内部增加像素

<head>
    <style>
        .c1{
            height: 200px;
            width: 150px;
            border: 1px solid red;
            
            padding-top: 10px;
            padding-left: 10px;
            padding-right: 10px;
            padding-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="c1">111</div>
    <div class="c1">222</div>
</body>

<head>
    <style>
        .c1{
            height: 200px;
            width: 150px;
            border: 1px solid red;
            
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="c1">111</div>
    <div class="c1">222</div>
</body>

<head>
    <style>
        .c1{
            height: 200px;
            width: 150px;
            border: 1px solid red;
            
            padding: 10px 10px 10px 10px;
        }
    </style>
</head>
<body>
    <div class="c1">111</div>
    <div class="c1">222</div>
</body>
7. 外边距

外边距，距离外部增加像素

<head>
    <style>
        .c1{
            height: 200px;
            width: 150px;
            border: 1px solid red;
            
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="c1">111</div>
    <div class="c1">222</div>
</body>

总结

  • body标签，默认有一个外边距，造成页面四边都有白色间隙，如何去除？

    body{
    margin: 0;
}

  • 内容居中

    • 文本居中，文本会在这个区域剧中

      <div style="height: 300px; width: 500px; text-align: center;">中国</div>

    • 区域居中，自己要有宽度 + margin-left: auto; margin-right:auto;

      .container{
	width: 1000px;
	margin: 0 auto;
}

<div class="container">中国</div>

  • 父亲没有高度或宽度，会被孩子支撑起来

  • 如果存在浮动，一定要在同级最后加style="clear: both"

  • 如果要用别人的样式，F12查看并调用

  • 先分析确定整体板块，然后填充样式

知识点补充

  • a标签是行内标签，行内标签的高度、内外边距，默认无效。

  • 垂直方向居中

    • 文本 + line-height: 300px;
    • 图片 + 边距

  • a标签默认有下划线，加text-decoration: none;可以去除

  • 设置透明度

    opacity: 0.5;		/* 0 - 1 */
1. 鼠标放上去之后发生的变化hover(伪类)
- 变色
.c1:hover{
    color: red;
}
- 字体变大
a:hover{
    font-size: 50px;
}
- 出现下拉框，图片等
.download{
    display: none;
}
.app:hover .download{
    display: block;
}
2. after(伪类)
.c1:after{
	content: "第一";
}

<div class="c1">中国</div>

很重要，可以解决浮动脱离文档流的问题

.clearfix:after{
	content: "";
	display: block;
	clear: both;
}
.item{
	float: left;
}

<div class="clearfix">
    <div class="item">111</div>
    <div class="item">222</div>
    <div class="item">333</div>
</div>
3. position
  • fixed
  • relative
  • absolute
1. fixed

固定在窗口的某个位置。

案例：返回底部

.back{
	position: fixed;
	width: 40px;
	height: 40px;
	border: 1px solid red;
	right: 10px;
	bottom:50px;
}

<div style="height: 1000px; background-color: black"></div>
<div class="back"></div>

案例：对话框

.dialog{
	positon: fixed;
	width: 400px;
	height: 400px;
	background-color: white;

	left: 0;
	right: 0;
	margin: 0 auto;

	top:200px;
	z-index: 1000;
}
.mask{
	positon: fixed;
	background-color: black;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	opacity: 0.7;
	z-index: 999;
}

<div style="height: 1000px">111</div>
<div class="mask"></div>
<div class="dialog"></div>

可以通过z-index实现遮罩顺序，z-index大的在上面

2. relative和absolute
.c1{
	height: 400px;
	width: 400px;
	border: 1px solid red;
	margin: 100px;

	position: relative;
}
.c1 .c2{
	height: 40px;
	width: 40px;
	background-color: black;

	position: absolute;
	right: 10px;
	bottom: 10px;
}

<div class="c1">
    <div class="c2"></div>
</div>
4. border
.c1{
	height: 400px;
	width: 400px;
	margin: 100px;
	border: 1px solid red;
	border-left: 10px solid black;
	
}

<div class="c1"></div>

边框透明色

.c1{
	height: 400px;
	width: 400px;
	margin: 100px;
	background-color: #5f5750;
	border-left: 10px solid transparent;
}
.c1:hover{
	border-left: 10px solid red;
}

<div class="c1">中国</div>
5. 背景色
.c1{
	height: 400px;
	width: 400px;
	margin: 100px;
	background-color: #5f5750;	
}

<div class="c1">中国</div>

注意：以上CSS样式不是全部，但不必逐一学会，上述为开发页面必备

3. BootStrap

已经写好的CSS样式，如果想要使用BootStrap

  • 下载BootStrap
  • 使用
    • 在页面上引入BootStrap
    • 编写HTML时，按照BootStrap的规定来编写 + 自定制

3.1 导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-5.1.3-dist/css/bootstrap.css">
</head>
<body>
<div class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</div>
</body>
</html>

3.2 栅格

  • 把整体划分为12个格子

  • 分类

    • 响应式，根据屏幕宽度不同

      .col-sm-	≥576px	
.col-md-	≥768px
.col-lg-	≥992px
.col-xl-	≥1200px
.col-xxl-	≥1400px

    • 非响应式

      <div class="col-xs-6" style="background-color: red">111</div>
<div class="col-xs-6" style="background-color: green">222</div>

    • 列偏移

      <div class="col-sm-offset-2 col-sm-6" style="background-color: green">222</div>

案例：登录

  • 宽度 + 区域居中
  • 内边距
  • 表单

案例：后台管理

  • 导航
  • 新建，按钮
  • 表格

3.3 图标

  • Bootstrap有但不多

  • Font Awesome组件

    • 下载

      https://fontawesome.dashgame.com/

    • 引入

      <link rel="stylesheet" href="static/piugins/font-awesome-4.7.0/css/font-awesome.css">

    • 使用

3.4 Bootstrap依赖

BootStrap依赖JavaScript的类库，JQuery

  • 下载JQuery，在页面上应用JQuery
  • 在页面上应用BootStrap的JavaScript的类库

4. JavaScript

前端三大组件：

  • HTML，纯简陋静态

  • CSS，好看

  • JavaScript，动态

    • 编程语言，浏览器就是它的语言解释器

    • DOM和BOM

      相当于编程语言内置的模块
例如：python中的re、random、time、json模块等

    • 类库(模板)

      JQuery是JavaScript的类库相当于编程语言的第三方模块
例如：requests、openpyxl

4.1 代码位置

<head>
    <title></title>
    <style></style>
    
    <!-- 位置1 -->
    <script type="text/javascript">
    	// 编写JavaScript代码
    </script>
</head>

<body>
    .
    .
    .
    <!-- 位置2 -->
    <script type="text/javascript">
    	// 编写JavaScript代码
    </script>
</body>

JS代码的存在形式：

  • 当前HTML中

    <script type="text/javascript">
    	// 编写JavaScript代码
</script>

  • 在其他js文件中，导入使用

    <head>
    <title></title>
    <style></style>
    
    <!-- 位置1 -->
    <script src="static/1.js"></script>
</head>

    <body>
    .
    .
    .
    <!-- 位置2 -->
    <script src="static/1.js"></script>
</body>

4.2 注释

  • HTML的注释

    <!-- 注释内容 -->

  • CSS的注释，在style代码块中

    /* 注释内容 */

  • JavaScript的注释，在script代码块中

    // 注释内容
/* 注释内容 */

4.3 变量

  • 定义
<script type="text/javascript">
    var name = "张三";
</script>
  • 输出
<script type="text/javascript">
    var name = "张三";
    
    console.log(name);
</script>

4.4 字符串类型

// 声明
var name = "张三"；
var name = String("张三");

// 常见功能
var name = "中国共产党";

var v1 = name.length;
var v2 = name[0];		// name.charAt(0)
var v3 = name.trim();	// 去空白
var v4 = name.substring(1，2);	// 前取后不取
案例：跑马灯
<span id="txt">中国共产党万岁</span>
<script type="text/javascript">
    function show(){
    	// 1.去HTML中找到某个标签并获取它的内容(DOM)
        var tag = document.getElementById("txt");
        var dataString = tag.innerText;
        
        // 2.动态，把文本中的第一个字符放在字符串的最后
        var firstChar = dataString(0);
        var otherString = dataString.substring(1, dataString.length);
        var newText = otherString + firstChar;
        
        // 3.在HTML标签中更新内容
        tag.innerText = newText;
    }
    
    // JavaScript中的定时器
    setInterval(show, 1000);
</script>

4.5 数组

// 定义
var v1 = [1,2,3,4];
var v2 = Array([1,2,3,4]);

// 操作
var v1 = [1,2,3,4];

v1[0]
v1[1] = "中国"；

v1.push("qwe");			// 尾部追加[1,2,3,4,"qwe"]
v1.unshift("qwe");		// 首部增加["qwe",1,2,3,4]
v1.splice(索引,替换的数量,元素)
v1.splice(2,0,"中国");   // [1,2,"中国",3,4]

v1.pop()		// 尾部删除
v1.shift()		// 首部删除
v1.splice(2,1)	// 删除索引为2的元素 [1,2,4]

var v1 = [1,2,3,4];
for(var index in v1){
    // index = 0/1/2/3		data = v1[index]
}

for(var i = 0; i < v1.length; i++){
    // i = 0/1/2/3		data = v1[index]
}

注意：break和continue

案例：动态数据
<ul id="city"></ul>

<script type="text/javascript">
   	var cityList = ["北京","上海","广州","深圳"];
    for(var index in cityList){
        var text = cityList[index];
        
        // 创建 <li></li>
        var tag = document.createElement("li");
        // 在li标签中写入内容
        tag.innerText = text;
        
        // 添加到id=city的标签里面(DOM)
        var parentTag = document.getElementById("city");
        parentTag.appendChild(tag);
    }
</script>

4.6 对象(字典)

info = {
    "name": "中国",
    "year": "73"
}

info = {
    name: 中国,
    year: 73
}

info.year
info.name = "China"

info["year"]
info["name"] = "China"

delete info["year"]

info = {
    name: 中国,
    year: 73
}

for(var key in info){
	// key = name/year		data = info[key]
}

案例：动态表格

<table border="1">
    <thead>
        <tr>
        	<th>ID</th>
            <th>name</th>
            <th>year</th>
        </tr>
    </thead>
    <tbody id="body">
    	
    </tbody>
</table>
<script type="text/javascript">
   	var info = {id: 1, name: 中国, year: 73};
    // 创建 <tr></tr>
    var tr = document.createElement("tr");
    for(var key in info){
        var text = info[key];
        
        // 创建 <td></td>
        var td = document.createElement("td");
        // 在td标签中写入内容
        td.innerText = text;
        
        // 添加到tr标签里面
        tr.appendChild(td);
    }
    // 添加到id=body的标签里面(DOM)
 	var parentTag = document.getElementById("body");
	parentTag.appendChild(tr);
</script>

<table border="1">
    <thead>
        <tr>
        	<th>ID</th>
            <th>name</th>
            <th>year</th>
        </tr>
    </thead>
    <tbody id="body">
    	
    </tbody>
</table>
<script type="text/javascript">
    var dataList = [
        {id: 1, name: 中国, year: 73},
        {id: 1, name: 中国, year: 73},
        {id: 1, name: 中国, year: 73}
    ];
    for(var index in dataList){
        var info = dataList[index];
    	// 创建 <tr></tr>
    	var tr = document.createElement("tr");
    	for(var key in info){
        	var text = info[key];
        
        	// 创建 <td></td>
        	var td = document.createElement("td");
        	// 在td标签中写入内容
        	td.innerText = text;
        
        	// 添加到tr标签里面
        	tr.appendChild(td);
    	}
    	// 添加到id=body的标签里面(DOM)
 		var parentTag = document.getElementById("body");
		parentTag.appendChild(tr);
    }
</script>

4.7 条件语句

if (条件) {
    
}else{
    
}

if (1 == 1) {
    
}else{
    
}

if (条件) {
    
}else if (条件) {
    
}else if (条件) {
    
}else{
    
}

4.8 函数

function func(){
    ...
}
    
func()

5. DOM

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

// 根据ID获取标签
var tag = document.getElementById("xxx");

// 获取标签中的文本
tag.innerText

// 修改标签中的文本
tag.innerText = "哈哈哈"

// 创建标签 <div></div>
var tag = document.createElement("div");

// 标签写内容
tag.innerText = "哈哈哈";

// 向标签中添加数据
var tag = document.getElementById("xxx");
var newTag = document.createElement("ooo");
newTag.innerText = "哈哈哈";
tag.appendChild(newTag);

5.1 事件绑定

<input type="button" value="添加" onclick="addCityInfo"/>
<ul id="city"></ul>

<script type="text/javascript">
   	function addCityInfo(){
        var newTag = document.createElement("li");
		newTag.innerText = "哈哈哈";
        
        var tag = document.getElementById("city");
        tag.appendChild(newTag);
    }
</script>

<input type="text" placeholder="请输入内容" id="txtUser"/>
<input type="button" value="添加" onclick="addCityInfo"/>
<ul id="city"></ul>

<script type="text/javascript">
   	function addCityInfo(){
        // 1.找到输入标签
        var txtTag = document.getElementById("txtUser");
        
        // 2.获取input框中用户输入的内容
        var newString = txtTag.value;
        
        // 判断输入是否为空，只有不空才能继续
        if (newString.length > 0){
            // 3.创建标签 <li></li> 中间的文本信息就是用户输入的内容
            var newTag = document.createElement("li");
			newTag.innerText = "哈哈哈";
        
            // 4.标签添加到ul中
        	var tag = document.getElementById("city");
        	tag.appendChild(newTag);
            
            // 5.将input框内容清空
            txtTag.value = "";
        }else{
            alert("输入不能为空")
        }
    }
</script>

注意：

DOM中还有很多操作，可以实现很多功能，但是比较繁琐。

页面上的效果：JQuery来实现 / vue.js / react.js

6.JQuery

JQuery是一个JavaScript第三方模块(第三方类库)

  • 基于JQuery，自己开发一个功能
  • 现成的工具 依赖JQuery，例如：BootStrap动态效果

6.1 寻找标签(直接寻找)

  • ID

    <h1 id="txt">中国</h1>
<h1>中国</h1>
<h1>中国</h1>

    $("#txt")

  • 样式选择器

    <h1 class="c1">中国</h1>
<h1 class="c1">中国人</h1>
<h1 class="c2">中国</h1>

    $("#.c1")

  • 标签选择器

    <h1 class="c1">中国</h1>
<div class="c1">中国人</div>
<h1 class="c2">中国</h1>

    $("h1")

  • 层级选择器

    <h1 class="c1">中国</h1>
<h1 class="c1">
    <div class="c2">
    	<span></span>
        <a></a>
    </div>
</h1>
<h1 class="c2">中国</h1>

    $(".c1 .c2 a")

  • 多选择器

    <h1 class="c1">中国</h1>
<h1 class="c1">
    <div class="c3">
    	<span></span>
        <a></a>
    </div>
</h1>
<h1 class="c2">中国</h1>

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

  • 属性选择器

    <input type="text" name="n1"/>
<input type="text" name="n1"/>
<input type="text" name="n2"/>

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

6.2 间接寻找

  • 找到兄弟

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

    $("#c1").prev()			// 上一个
$("#c1")
$("#c1").next()			// 下一个
$("#c1").next().next()	// 下一个的下一个

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

  • 找父子

    <div>
    <div>    
    	<div>北京</div>    
    	<div id="c1">上海
        	<div>青浦区</div>
            <div class="p">宝山区</div>
            <div>浦东新区</div>
        </div>    
    	<div>广州</div>    
    	<div>深圳</div>
	</div>
	<div>    
    	<div>北</div>    
    	<div>上</div>    
    	<div>广</div>    
    	<div>深</div>
	</div>
</div>

    $("#c1").parent()			// 父亲
$("#c1").parent().parent()	// 父亲的父亲

$("#c1").children()			// 所有的孩子
$("#c1").children(".p")		// 所有的孩子中寻找class=p

$("#c1").find(".p")			// 所有的子孙中寻找class=p
$("#c1").find("div")		// 所有的子孙中寻找div标签

案例：菜单切换

<head>
    <style>
        .menus{
            width: 300px;
            height: 800px;
            border: 1px solid red;
        }
        .menus .header{
         	background-color: gold;
            padding: 10px 5px;
            border-bottom: 1px dotted #dddddd;
        }
        .menus .header a{
			display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted #dddddd; 
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
  	<div class="menus">
        <div class="item">
            <div class="header" onclick="clickMe(this);">1111</div>
            <div class="content hide">
                <a>1000</a>
                <a>0100</a>
                <a>0010</a>
                <a>0001</a>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="clickMe(this);">2222</div>
            <div class="content hide">
                <a>2000</a>
                <a>0200</a>
                <a>0020</a>
                <a>0002</a>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="clickMe(this);">3333</div>
            <div class="content hide">
                <a>3000</a>
                <a>0300</a>
                <a>0030</a>
                <a>0003</a>
            </div>
        </div>
    </div>
    
    <script src="static/jquery-3.6.1.min.js"></script>
    <script>
    	function clickMe(self){
            // 让自己下面的功能展示出来
            $(self).next().removeClass("hide");
            
            // 找父亲->父亲的所有兄弟->每个兄弟的子孙中寻找 class=content，添加hide样式
            $(self).parent().siblings().find(".content").addClass("hide");
        }
    </script>
</body>

6.3 操作样式

  • addClass
  • removeClass
  • hasClass，检查是否有样式及样式的内容

6.4 值的操作

<div id="c1">内容</div>

$("#c1").text()		// 获取文本内容
$("#c1").text()		// 设置文本内容

<input type="text" id="c2"/>

$("#c1").val()			// 获取用户输入的值
$("#c1").val("哈哈哈")	  // 设置值

案例：动态创建数据

<input type="text" id="txtUser" placeholder="用户名"/>
<input type="text" id="txtEmail" placeholder="邮箱"/>
<input type="button" value="提交" onclick="getInfo()"/>

<ul id="view">
    
</ul>

<script src="static/jquery-3.6.1.min.js"></script>
<script>
	function getInfo(){
        // 1.获取用户输入的用户名和邮箱
        var username = $("#txtUser").val();
        var email =$("#txtEmail").val();
        var newString = username + "-" + email;
        
        // 2.创建li标签，在li标签内部写入内容
        var li = $("<li>").text(newString);
        
        // 3.把新创建的li标签添加到ul里面
        $("#view").append(li);
    }
</script>

6.5 事件

<input type="button" value="提交" onclick="getInfo()"/>

<script>
	function getInfo(){
		
    }
</script>

<ul>
	<li>百度</li>
    <li>搜狗</li>
    <li>谷歌</li>
</ul>

<script>
	$("li").click(function(){
        // 点击li标签，自动执行该函数
        // $(this)   当前点击的标签
    })
</script>

在JQuery中可以删除某个标签

<div id="c1">内容</div>

$("#c1").remove();

当页面框架加载完成之后执行代码：

<ul>
	<li>百度</li>
    <li>搜狗</li>
    <li>谷歌</li>
</ul>

<script>
    $(function(){
        // 当页面框架加载完成之后，自动就执行
        $("li").click(function(){
            $("this").remove();
        })    
    })
</script>

案例：表格操作

<table border="1">
    <thead>
        <tr>
        	<th>ID</th>
            <th>name</th>
            <th>func</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>1</td>
            <td>111</td>
            <td>
            	<input type="button" value="删除" class="delete"/> 
            </td>
        </tr>
        <tr>
        	<td>2</td>
            <td>222</td>
            <td>
            	<input type="button" value="删除" class="delete"/> 
            </td>
        </tr>
        <tr>
        	<td>3</td>
            <td>333</td>
            <td>
            	<input type="button" value="删除" class="delete"/> 
            </td>
        </tr>
    </tbody>
</table>

<script src="static/jquery-3.6.1.min.js"></script>
<script>
	$(function(){
        // 找到所有class=delete的标签，绑定事件
        $(".delete").click(function(){
            // 删除当前行的数据
            $(this).parent().parent().remove();
        })
    })
</script>

7. 前端整合

  • HTML
  • CSS
  • JavaScript、JQuery
  • BootStrap(动态效果依赖JQuery)

总结

  • 了解HTML标签、标签结构，基于它可以实现简单的页面

  • CSS，了解基本样式；在别人模板的基础上该就可以

  • JavaScript、JQuery，了解基本使用

    • 事件绑定 / 寻找标签 / 操作标签
    • 导入现成插件

后续开发过程中，对于前端就是在BootStrap的基础上进行整改

海中的涟漪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端 五彩导航，鼠标经过即可变色
qq_55061257的博客
07-22 1737
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>综.
很色，非常色，十分色，格外色，异常色，特别色，相当色，太色了！
热门推荐
coldwindflyrain的专栏
06-18 183万+
■■★●◆lightpink（浅粉红)■■★●◆pink（粉红）■■★●◆crimson（腥红）■■★●◆lavenderblush（苍白的紫罗兰红）■■★●◆palevioletred（脸红的淡紫红）■■★●◆hotpink（热情的粉红）■■★●◆mediumvioletred（适中的紫罗兰红）■■★●◆orchid（兰花紫）■■★●◆thistle（苍紫）■■★●◆plum（轻紫）■■★●◆v
那些小众却深得网友喜爱的导航网站
GJQI12的专栏
08-23 2万+
事实上，很久很久以前，我所知的导航网站，仅停留在： hao123，QQ 导航、搜狗导航 等类型的页面，直到后来在知乎上意外的看到其它网友推荐的 快搜 这个站点，才发现原来导航页的整合还可以这样子。 半个月前，我自己也做了一个针对北邮人的导航网站，在知乎专栏里更新的文章中，有知友也曾在留言里反馈到，事实上还有好些比较小众却深得粉丝钟爱的导航网站，为此专门做一个小整理推荐。各位看官可以根据自己的
【web2】jquary，bootstrap，vue
最新发布
OpenBMC开发
06-23 2237
文章目录1.案例_隔行换色2.js中的正则表达式3.案例_表单校验4.jquery框架引入5.jquery版本介绍6.jquery对象7.jquery的页面加载事件8.jquery基本选择器引入9.层级选择器10.属性选择器11.基本过滤选择器12.表单属性过滤选择器 1.案例_隔行换色 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>
一级变色导航
玉安_ZhangDe的博客
03-23 3万+
话不多说先看效果再上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt.
哈哈,好玩的东西（18＋，女生莫入！）活节彩蛋
madein82的专栏
09-30 2193
有点色~~不过没有病毒的~~放心拉~~纯粹是国外的“复活节彩蛋”.               “在windows界面，点“开始”---“运行”--输入telnet bingo.ru 最后点确定运行          注：没有病毒
iOS之导航渐变---／导航透明/隐藏导航栏以及手势返回遇到的问题,状态栏颜色和背景颜色,tabbarItem角标、导航背景颜色
代码解释生活
07-11 3250
// CZNavTableViewController.h // 导航栏渐变透明效果 #import <UIKit/UIKit.h> @interface CZNavTableViewController :UITableViewController @end ================ // CZNavTableViewController.m ...
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频尚品汇项目源码
03-06
【标题】中的“尚硅谷前端入门html+css零基础教程”指的是一个由尚硅谷教育机构提供的，面向初学者的前端开发课程，主要涵盖了HTML（超文本标记语言）和CSS（层叠样式表）的基础知识。这个教程是为那些对前端开发...
前端基础入门html技术
11-18
前端入门提供给刚入刚的小伙伴们免费学习
小白入门前端基础笔记
06-16
前端基础技术笔记（适合小白），内容：HTML，CSS，JavaScript基础
31个前端入门练手项目合集，源码，2022年最新.zip
05-10
31个前端入门练手项目合集，源码，2022年最新，助你牢牢掌握前端基础知识。 31个前端入门练手项目合集，源码，2022年最新，助你牢牢掌握前端基础知识。 31个前端入门练手项目合集，源码，2022年最新，助你牢牢...
Web前端攻城狮培养计划-前端零基础入门
09-21
在“Web前端攻城狮培养计划-前端零基础入门”这个学习资源中，你将踏上成为一名优秀的Web前端开发者的旅程。这个课程专为初学者设计，无论你是否具备编程背景，都能逐步掌握Web前端开发的核心技能。以下是这个课程...
这个骚网站，它又上新了....
纯洁的微笑
07-26 2万+
Cxy521.com （记忆点：程序员我爱你）！Cxy521.com （记忆点：程序员我爱你）！Cxy521.com （记忆点：程序员我爱你）！1新Logo大家知道，我和不会笑青年创建了一...
iOS 导航栏颜色渐变
g510941365的博客
02-18 1519
#import "ViewController.h" @interface ViewController () @property (nonatomic,strong)UIImageView * back; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; /
【资源分享】综合性的导航网站
cccccww的博客
06-09 7万+
网址导航，是一个集合较多网址，并按照一定条件进行分类的一种网址站，是互联网最早的网站形式之一。
[仿hao123网址导航源码] 2013最新版 第十版 火艳登场！
Pontusbai
01-13 1289
仿hao123网址导航源码] 2013最新版 第十版 火艳登场！ http://hao123.ycff.com/
2017-9-16(沉浸式状态栏StatusBar)
weixin_34111819的博客
01-23 237
这篇文章更多是一个总结别人的学习成果，如有冒犯请联系本人立即删除。 使用了文章内容的链接如下：Android 沉浸式状态栏攻略 让你的状态栏变色吧(鸿洋)Android状态栏微技巧，带你真正理解沉浸式模式（郭霖）Android App 沉浸式状态栏解决方案Android踩坑记之沉浸式StatusBarAnroid沉浸式状态栏android全屏／沉浸式状态栏下，各种键盘挡住输入框解决办法(郭霖推荐文...
十大优秀网址导航站介绍
applebooks2009的专栏
07-13 2万+
研读了一篇互联网上广为流传的《“2009年最受欢迎的十大网址导航站”评选结果》热门文章，从文章的表述中不难看出，该评选活动组织周密、评选依据充分、评选结果公开公正，无论从哪个角度来看，都可以看出那些评选结果代表了网友们的共同心声。　　《“2009年最受欢迎的十大网址导航站”评选结果》文章内容具体是　　以下为引用的内容：　　2009年有几十家知名大型网站联合推出网址导航站的投票评选活动，
设置导航栏的背景色和标签栏的背景色
梁森的博客
04-29 4032
在开发中我们有时的需求是设置导航栏和标签栏的颜色，而实际我们如果直接设置背景颜色并不会达到我们预期的效果，设置的颜色只是浅浅的一层颜色，这是因为我们设置的背景色被覆盖了，并没有直接显示给我们。而我们如果效果达到预期的效果则需要调用设置背景图片的方法。 方法如下： 1.设置导航栏(navigationBar)的背景色：  [self.navigationBar setBackgrou
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值