1022-前端开发

顾久_4481 · 2023 年10 月 22 日 01:26

前端知识

jquery-1.8.3.min.js.zip (32.6 KB)

前端是指与用户直接交互的那一部分软件系统或网站。它主要负责展示和呈现用户界面，与用户进行交互，并将用户的操作传递给后台进行处理。

前端开发中基础三大件：

HTML（超文本标记语言）：用于定义网页结构和内容。
CSS（层叠样式表）：用于设置界面的样式、布局和外观。
JavaScript：一种高级编程语言，用于实现网页的交互功能和动态效果。

前端开发的目标是创建一个直观、吸引人且易于使用的用户界面。开发人员需要考虑到用户体验、界面设计、页面加载速度和跨浏览器的兼容性等方面的因素。

同时，前端开发也与后端开发密切相关，前端和后端之间需要进行数据交互和通信。因此，前端开发人员通常需要与后端开发人员进行协作，以确保前后端的一致性和顺畅的用户体验。

HTML

超文本标记语言（HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

HTML文档后缀名

HTML页面文件以 .html 做为文件后缀，系统自动解析由浏览器打开执行。

HTML 文档基本结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>首页</title>
    </head>
    <body>
        <h1>我的第一个标题</h1>
        <p>我的第一个段落。</p>
    </body>
</html>

<!DOCTYPE html> : 文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。
<html>...</html> : html 标签是 HTML 文档的开始和结束标签。网页从 <html> 这里开始，到 </html> 结束。
<head>...</head> : head 标签用于定义文档的头部信息,可以对页面进行设置标题、编码格式以及引入css和js文件等。
<body>...</body> : body 标签用于编写网页上显示的内容。

HTML 标签

HTML 不是一种编程语言，而是一种标记语言，HTML 标记标签通常被称为 HTML 标签 (HTML tag)，HTML 标签是由尖括号包围的关键词。

按语法形式划分，标签可以分为以下两种形式：

双标签：标签是成对出现的，标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签。
单标签：单标签是存在开始标签，没有结束标签。

按布局效果划分，标签还可以分为以下两种形式：

行标签：多个标签元素不会换行。
块标签：每个标签元素会独占一行。

标签不区分大小写，但是推荐使用小写。

HTML 常用标签

<br>: 换行标签
<hr>: 分割线标签
<img>: 图片标签，用于展示图片
<a></a>: 超链接标签，用来插入一个链接地址
<div></div>: 用来布局页面结构
<h1></h1> ~ <h6></h6>: 标题标签，共有6级。
<p></p>: 段落标签，用来显示文字段落
<ul></ul>: 无序列表标签
<ol></ol>: 有序列表标签
<li></li>: 列表项标签，无序列表和有序列表都使用 li 标签做为列表项标签
<table></table>: 表格标签，用来定义一个表格
<tr></tr>: 表格行标签，需要配合 table 标签使用，用来定义表格中的行
<th></th>: 表头标签，需要配合 tr 标签使用，用来定义表格中的表头元素
<td></td>: 单元格标签，需要配合 tr 标签使用，用来定义表格中的单元格元素
<form></form>: 表单标签，用于收集页面中用户的输入数据，并提交到服务器
<input></input>: 表单元素标签，用来定义输入项，通过 type 属性控制元素类型
- type="text" 定义单行文本输入框
- type="password" 定义密码输入框
- type="radio" 定义单选框
- type="checkbox" 定义复选框
- type="file" 定义上传文件
- type="submit" 定义提交按钮
- type="reset" 定义重置按钮
- type="button" 定义一个普通按钮
<textarea></textarea>: 多行文本输入框
<select></select>: 下拉标签
<option></option>: 下拉项标签，需配合 select 标签使用
<span></span>: 范围标签，一般用来包含一段需要特殊处理的文字时使用。

CSS

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言。

CSS 文件扩展名为 .css。

CSS 引入方式

行内式：通过 style 属性，直接在标签上为标签设置样式
内嵌式（内部样式）：通过 style 标签批量编写样式，一般在 head 标签中编写
外链式：样式代码编写在 CSS 文件中，在页面文件的 head 标签中通过 <link> 标签引入样式文件。

CSS 样式格式规则

    选择器{
        样式规则属性名1：属性值1;
        样式规则属性名2：属性值2;
        样式规则属性名3：属性值3;
    }

CSS 选择器

需要使用 CSS 为 HTML 页面文件中的元素添加样式，需要通过 CSS 选择器，选中页面中的元素，然后才能让样式作用在元素上。

常用选择器如下：

标签选择器

使用 HTML 标签名 做为选择器选定元素，会选中页面中所有指定标签的元素并设定样式

CSS:
p{
    color: red;
}

HTML:
<p>文本1</p>
<div>文本2</div>
<p>文本3</p>

类选择器

类选择器需要结合标签的 class 属性使用，通过 class 属性为标签指定类名，使用 .类名 形式选择所有页面中具有指定类名的元素。

CSS:
.text{
    color: red;
}

HTML:
<p class="text">文本1</p>
<div  class="text">文本2</div>
<p>文本3</p>

id选择器

id选择器需要结合标签的 id 属性使用，通过 id 属性为标签指定 id 名，使用 #id名 形式选择具有指定 id 名的元素。

理论上，一个 id 名在页面中是唯一存在的。

CSS:
#text{
    color:red;
}

HTML:
<p id="text">文本1</p>
<p>文本2</p>

层级选择器（后代选择器）

根据层级关系选择后代标签，以 选择器1 选择器2 开头，主要应用在标签嵌套的结构中，减少命名,选择器可以使用任意形式的选择器。

层级关系不止父子关系，祖孙关系也成立。


div p span{
    color: red;
}

HTML

<p>文本<span>一</span></p>
<div>
    <p>文本<span>二</span></p>
</div>
<div>文本<span>三</span></div>

组选择器

组选择器为多个任意选择器的组合，多个选择器之间以 , 分割开, 组中所有选择器对应的元素都会被选中。一般用来设置公共的样式。

CSS:
p, div, h1{
    color:red;
}

HTML:
<h1>A</h1>
<div>B</div>
<p>C</p>
<p>D</p>

伪类选择器

用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器

<style type="text/css">
    .box1{width:100px;height:100px;background:gold;}
    .box1:hover{width:300px;}
</style>

<div class="box1">这是一个div标签</div>

CSS 样式属性

布局类属性

width: 设置元素宽度
height: 设置元素高度
background: 设置元素背景色和背景图片，设置背景图片需要使用 url() 函数
border: 设置边框样式
margin: 设置外边距
padding: 设置内边距
display: 设置元素布局状态等。

文本类属性

color: 设置字体颜色
font-size: 设置字体大小
font-weight: 设置字体加粗
line-height: 设置行高
text-align: 设置平水对齐方式
text-decoration: 设置文字下划线
text-indent: 设置文字首行缩进

JavaScript

JavaScript是运行在浏览器端的脚本语言, 是由浏览器解释执行的, 简称 JS ，文件名以 .js 做为后缀。

同为解释型的脚本语言 Python，两者的语法形式上，有很多相似之处。

JS 引入方式

行内式：直接在标签上编写 JS 代码，一般用于事件处理。
内嵌式：通过 <script></script> 来编写 JS 代码，可在页面的任意位置编写，一般在 head 标签中出现。
外链式：通过 <script src="js文件路径"></script> 引入 JS 文件中的代码，当使用 script 标签引入 JS 文件时，不可以在代码块中再编写 JS 代码。

JS 语法

注释
- 单行注释：以 // 开头
- 多行注释：以 /* */ 包裹的内容
定义变量

使用 var 关键字定义变量

var n = 100;
var s = "hello";

定义函数

使用 function 关键字定义函数，函数体使用 {} 包裹。

function show(){
    consolg.log("Show Run")
}

运算符

关系运算符： == 等于，只比较数值，不比较类型； === 全等于，即比较数值，也比较类型。
逻辑运算符： && 逻辑与， || 逻辑或， ! 逻辑非

条件语句


// 方式一
if(条件){

}

// 方式二
if(条件){

}else{

}

// 方式三
if(条件1){

}else if(条件2){

}else if(条件3){

}
...
else{

}

循环语句

// for
for(var i=0;i<10;i++){

}

// while

var i = 0
while (i < 10){

    i++
}

// do-while

var i = 0
do{
    i++
}while(n < 10);

字符串及操作

字符串和数字类型或字符串类型的数据，直接可以使用 + 进行连接
字符串.length ：获取字符串长度
字符串.substring(): 提取字符串中介于两个指定下标之间的字符。
字符串.lastIndexOf(): 从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。

数组与操作

数组定义与 Python 列表定义完全相同。

数组.length 可获取数组元素个数
数组.push(值) 可向数组中添加数据
数组.pop() 从数组中删除最后一个元素
数组.splice(start,num, ele1,...,eleN) 向数组中插入，删除，替换数据。

对象

JS 中的对象定义，和 Python 中的字典完全相同，对象的属性名，即 key 不需要使用引号包裹。

var oObj = {
   name:"Tom",
   age:88
}

定时器

js 定时器有两种创建方式：

setTimeout(func[, delay, param1, param2, …]) ：以指定的时间间隔（以毫秒计）调用一次函数的定时器
setInterval(func[, delay, param1, param2, …]) ：以指定的时间间隔（以毫秒计）重复调用一个函数的定时器

参数说明：

第一个参数 func , 表示定时器要执行的函数名
第二个参数 delay, 表示时间间隔，默认是0，单位是毫秒
第三个参数 param1, 表示定时器执行函数的第一个参数，一次类推传入多个执行函数对应的参数。

js 清除定时器分别使用:

clearTimeout(timeoutID) 清除只执行一次的定时器(setTimeout函数)
clearInterval(timeoutID) 清除反复执行的定时器(setInterval函数)

JQuery

jQuery是对JavaScript的封装，它是免费、开源的JavaScript函数库，jQuery 极大地简化了 JavaScript 编程，jQuery实现交互效果更简单。

JQuery 引入

本地引入

<script src="js/jquery-1.8.3.min.js"></script>

在线引入

// 微软CDN
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>

// Google CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

// 百度 CDN:
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

// 新浪 CDN:
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

JQuery 入口

为了方便通过 JQuery 操作 HTML 中的元素，需要在页面加载完成后，再执行 JQuery 代码，有两种方式实现。

将 <script></script> 标签中的 JQuery 代码放到 HTML 文档最后。
在 head 标签中的 <script></script> 中的代码中使用 JQuery 提供的 ready 事件，等待加载完页面再执行 JS 代码

<head>
<script type="text/javascript">
    /*
    // ready 事件
    $(document).ready(function(){
        var $div = $('#dd');
        alert('jquery获取的div：' + $div);
    });
    */

    // 上面ready的写法可以简写成下面的形式：
    $(function(){
        var $div = $('#dd');
        alert('jquery获取的div：' + $div);
    }); 
</script>
</head>
<body>
    <div id="dd">A</div>
</body>

选择器

JQuery 可以直接使用 CSS 的选择器语法选中标签，进行操作。

选择元素时，选择器需要使用 $("选择器") 形式使用。

var ele = $(".dd");
alert(ele)

<div class="dd">A</div>

获取和设置元素内容

text(): 获取和设置元素的文本，不能解析 HTML 代码
html(): 获取的设置元素的 HTML 内容，可以解析 HTML 代码
append(): 向元素中追加 HTML 内容

<script>
    $(function(){
        var $div = $("#dd");
        //  获取标签的html内容
        var result = $div.html();
        alert(result);
        result = $div.text();
        alert(result);
        //  设置标签的html内容，之前的内容会清除
        $div.html("<span style='color:red'>你好</span>");
        //  追加html内容
        $div.append("<span style='color:red'>你好</span>");
    });
</script>

<div id="dd">
    <p>hello</p>
</div>

获取和设置元素属性

JQuery 中可以使用 元素.prop() 方法获取和设置元素的属性。

参数是字符串属性名，则为获取属性值，$a.prop("id");
参数是 JS 对象，则是设置属性值，$a.prop({"href":"http://www.baidu.com","title":'这是去到百度的链接',"class":"a01"});
可以使用 val() 方法，对 input 标签进行获取和设置值。

<style>
    .a01{
        color:red;
    }
</style>

<script>
    $(function(){
        var $a = $("#link01");
        var $input = $('#input01')

        // 获取元素属性
        var sId = $a.prop("id");
        alert(sId);

        // 设置元素属性
        $a.prop({"href":"http://www.baidu.com","title":'这是去到百度的链接',"class":"a01"});

        //  获取value属性
        // var sValue = $input.prop("value");
        // alert(sValue);

        // 获取value属性使用val()方法的简写方式
        var sValue = $input.val();
        alert(sValue);
        // 设置value值
        $input.val("222222");
    })
</script>

<a id="link01">这是一个链接</a>
<input type="text" id="input01" value="111111">

JQuery 删除元素

remove(): 删除被选元素（及其子元素）
empty(): 从被选元素中删除子元素

AJAX 发起网络请求

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简单的说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示，实现页面的局部数据刷新。

发送 GET 方式的请求

格式：$.get( URL [, data ] [, callback ] [, dataType ] )

参数：

URL：发送请求的 URL字符串。
data：可选的，发送给服务器的字符串或 key/value 键值对。
callback：可选的，请求成功后执行的回调函数。
dataType：可选的，从服务器返回的数据类型。默认：智能猜测（可以是xml, json, script, 或 html）。

$.get("/login", {"username": "Tom","passwd":"123"}, function (data){
    console.log(data);
}, json)

发送 POST 方式的请求

格式：$.post( URL [, data ] [, callback ] [, dataType ] )

参数：

URL：发送请求的 URL字符串。
data：可选的，发送给服务器的字符串或 key/value 键值对。
callback：可选的，请求成功后执行的回调函数。
dataType：可选的，从服务器返回的数据类型。默认：智能猜测（可以是xml, json, script, 或 html）。

$.post("/login", {"username": "Tom","passwd":"123"}, function (data){
    console.log(data);
}, json)