前端基础知识

XerCis

于 2019-12-03 17:13:40 发布

阅读量316

点赞数

分类专栏：前端文章标签： HTML CSS JavaScript jQuery AJAX

本文链接：https://blog.csdn.net/lly1122334/article/details/103277062

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

前端主要知识有

HTML：定义网页内容
CSS：描述网页布局
JavaScript：描述网页行为
JQuery：JavaScript库，简化操作
AJAX：异步JavaScript+XML，实现不重载对页面更新

文章目录

零、常见问题
一、HTML
二、CSS
三、JavaScript
四、JQuery
五、AJAX
常用

零、常见问题

一、HTML

简介

注释

<!--注释内容-->

默认编码

<meta charset="UTF-8">

文档标题

写在<head></head>之间

<title>文档标题</title>

声明文档

声明为HTML5文档，确保浏览器知道文档类型

<!DOCTYPE html>

基础标签

标签	功能
<br>	换行
<hr>	水平线
<h1> - <h6>	标题
<p>	段落
<pre>	预格式化文本
<del>	删除字
<ins>	字下划线
<cite>	作品标题

头部

在元素中可以插入脚本（scripts），样式文件（CSS）和各种meta信息。

可以添加在头部区域的标签有：

标签	功能
<title>	标题
<style>	样式
<meta>	基本元数据，常用于网页描述、编码、关键词、作者等
<link>	定义文档与外部资源的关系，常用于链接到样式表
<script>	脚本
<noscript>	脚本未被执行的替代内容
<base>	该HTML所有的<a>的默认链接

标题 title

为页面设置图标

<link rel="shortcut icon" href="me.jpg">
<title>我是标题</title>

样式 style

背景设为黄色，段落设为蓝色

<style type="text/css">
    body {
        background-color: yellow
    }
    p {
        color: blue
    }
</style>

元数据 meta

为搜索引擎定义关键词

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

编码为UTF-8

<meta charset="UTF-8">

描述内容

<meta name="description" content="前端基础知识">

作者

<meta name="author" content="XerCis">

每30秒刷新页面

<meta http-equiv="refresh" content="30">

链接 link

<link rel="stylesheet" type="text/css" href="styles.css">

rel为当前文档与被链接文档间的关系
type为被链接文档的MIME（扩展类型）
href为被链接文档的位置

<table border="1" cellspacing="0">
    <caption>成绩单</caption>
    <tr>
        <th>姓名</th>
        <th>语文成绩</th>
    </tr>
    <tr>
        <td>小明</td>
        <td>70</td>
    </tr>
    <tr>
        <td>小红</td>
        <td>80</td>
    </tr>
    <tr>
        <td>小蓝</td>
        <td>90</td>
    </tr>
</table>

在这里插入图片描述

列表

列表分为有序列表<ol></ol>和无序列表<ul></ul>，标签为<li></li>
有序ordered，无序unordered

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>JQuery</li>
</ol>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>JQuery</li>
</ul>

在这里插入图片描述
有序列表通过指定type=""更换符号

属性	描述
默认	阿拉伯数字1.2.3.
“A”	大写字母A.B.C.
“a”	小写字母a.b.c.
“I”	罗马数字ⅠⅡⅢ
“i”	小写罗马数字ⅰⅱⅲ

无序列表通过使用CSS更换符号

属性	描述
默认	圆点●
style=“list-style-type:circle”	圆圈○
style=“list-style-type:square”	正方形■

更多符号

层叠样式表CSS

添加方法

内联样式：元素属性中使用"style"属性
内部样式表：在头部<head></head>间使用<style></style>
外部引用：使用外部CSS文件

优先级：内联样式>内部样式表>外部引用

最好使用外部引用

内联样式

元素属性中使用"style"属性

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

背景颜色

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

在这里插入图片描述

字体

<code style="font-family:Consolas;color:blue;font-size:17px;">print("Hello World!")</code>

在这里插入图片描述
文本对齐

<h1 style="text-align:center;">居中对齐</h1>

内部样式表

在头部<head></head>间使用<style></style>

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部引用

使用外部CSS文件

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

布局

区域 div

布局

利用div的多重嵌套

<body style="color:#FFFFFF;">
<div style="width:100%;">
    <div style="background-color:#de7d2c;">
        <h1 style="margin-bottom:0;text-align:center;">顶部</h1>
    </div>
    <div style="background-color:#14446a;height:200px;width:10%;float:left;">
        菜单<br>
        按钮1<br>
        按钮2<br>
        按钮3
    </div>
    <div id="content" style="background-color:#b3a896;height:200px;width:80%;float:left;">
        中间内容
    </div>
    <div id="right" style="background-color:#000000;height:200px;width:10%;float:right;">
        信息内容
    </div>
    <div id="bool" style="background-color:#fada8d;clear:both;text-align:center;">
        作者、版权信息
    </div>
</div>
</body>

在这里插入图片描述

表单

表单用于收集用户输入

标签	描述
<form>	表单
<input>	输入，用type指定类型
<textarea>	文本域（多行输入）
<label>	输入标题
<fieldset>	定义了一组相关的表单元素
<legend>	<fieldset>的标题
<select>	下拉选项列表
<optgroup>	选项组
<option>	下拉列表选项
<button>	点击按钮
<datalist>	预定义选项列表
<keygen>	密钥对生成器
<output>	计算结果

更多功能强大的表单属性

输入 input

input的type属性大全

input标签的基本属性

属性值	描述
text	文本框
password	密码框
radio	单选
checkbox	复选
submit	提交
reset	重置
hidden	隐藏值，常作为默认值，可由JavaScript改变
button	按钮
image	图像，可用图像作为提交按钮

同一组的按钮，name取值要相同
name为控件命名
value为提交值
checked="checked"则默认选中
使用autofocus可自动聚焦
input的type="submit"或"image"时指定formaction属性可定义目标，formmethod属性可定义提交方式，formtarget属性定义提交后的展示
输入框指定placeholder属性可加提示文字，指定required属性必填才能提交，

<form action="" method="get">
    姓名:<input type="text" name="name"><br>
    密码:<input type="password" name="pwd"><br>
    <input type="radio" name="male" value="male" checked="checked">男<br>
    <input type="radio" name="female" value="female">女<br>
    <input type="checkbox" name="hobby" value="html">喜欢HTML<br>
    <input type="checkbox" name="hobby" value="python" checked="checked">喜欢Python<br>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>

在这里插入图片描述
带边框表单
利用<fieldset>包含输入内容，<legend>为标题

<form action="" method="get">
    <fieldset>
        <legend>个人信息</legend>
        姓名:<input type="text" name="name"><br>
        密码:<input type="password" name="pwd"><br>
        <input type="radio" name="male" value="male">男<br>
        <input type="radio" name="female" value="female">女<br>
        <input type="checkbox" name="hobby" value="Bike">喜欢HTML<br>
        <input type="checkbox" name="hobby" value="Car">喜欢Python<br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </fieldset>
</form>

在这里插入图片描述
必须填写内容

<form action="" method="get">
    <input type="text" required placeholder="必填">
    <br>
    <input type="submit">
</form>

在这里插入图片描述

文本域 textarea

<form action="" method="get">
    <textarea name="data" rows="10" cols="30">数据内容</textarea><br>
    <input type="submit" value="提交">
</form>

在这里插入图片描述

下拉列表

结合<select>和<option>，写上selected则为首选项

<form action="" method="get">
    <select name="hobby">
        <option value="HTML">HTML</option>
        <option value="CSS">CSS</option>
        <option value="JavaScript" selected>JavaScript</option>
        <option value="JQuery">JQuery</option>
    </select>
</form>

在这里插入图片描述

数据列表 datalist

<form action="" method="get">
    <input list="browsers" name="browser">
    <datalist id="browsers">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
    </datalist>
    <input type="submit">
</form>

在这里插入图片描述

打开文件

多选文件

<form action="" method="post">
    选择图片: <input type="file" name="img" multiple>
    <br>
    <input type="submit">
</form>

框架 iframe

通过使用框架，可以显示不止一个页面（放广告的好地方）

<iframe src="URL"></iframe>

<iframe src="https://www.baidu.com/" height="400" width="100%" frameborder="0" scrolling="auto"></iframe>
<iframe src="https://cn.bing.com/" height="400" width="100%" frameborder="0" scrolling="auto"></iframe>

在这里插入图片描述

嵌入百度地图

<iframe src="https://cie.nwsuaf.edu.cn/" width="400" height="300"></iframe>
<iframe src="baidumap.html" width="400" height="300" scrolling="no"></iframe>

在这里插入图片描述

脚本 script

写入页面

<script>
    document.write("<h1>标题</h1>");
</script>

事件响应
button设置onclick函数

<h1 id="title">标题</h1>

<script>
    function changeTitle() {
        document.getElementById("title").innerHTML = "我变了";
    }
</script>

<button type="button" onclick="changeTitle()">改变标题</button>

处理CSS

<h1 id="title">标题</h1>

<script>
    function changeColor() {
        x = document.getElementById("title");//找元素
        x.style.color = "#de7d2c";//变颜色
    }
</script>

<button type="button" onclick="changeColor()">改变颜色</button>

字符实体

HTML中的预留字符必须替换为字符实体，如<和>

显示	实体
空格	&nbsp
<	&lt
>	&gt

实体大全

拖放

在这里插入图片描述

<head>
    <style type="text/css">
        #div1 {
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    </style>
    <script>
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("Text", ev.target.id);
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</head>

<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="me.jpg" draggable="true" ondragstart="drag(event)" width="100" height="100">
</body>

在这里插入图片描述

视频音频

视频
 音频

Web存储

比cookie更好的本地存储方式，可实现关闭页面仍继续计数等功能

localStorage：长久保存网站数据，没有过期时间直至手动清除
sessionStorage：临时保存数据，关闭后删除

更多Web存储内容

二、CSS

简介

CSS (Cascading Style Sheets)，层叠样式表，用于控制页面样式和布局

CSS规则：选择器 {属性:值; 属性:值}，如p {color:red;text-align:center;}

CSS写在<style></style>中

添加方法

内联样式：元素属性中使用"style"属性
内部样式表：在头部<head></head>间使用<style></style>
外部引用：使用外部CSS文件

优先级：内联样式>内部样式表>外部引用

最好使用外部引用

若多重引用，重叠的会被优先级更高的覆盖，不重叠的会被继承

选择器

id选择器 #

id 选择器可以为标有特定id的HTML元素指定样式， CSS的id选择器为#

<head>
    <style>
        #p1 {
            color: red;
        }
    </style>
</head>

<body>
<p id="p1">Hello World!</p>
<p>这个段落不受影响</p>
</body>

class选择器

class选择器用于描述一组元素的样式， CSS的class选择器为.

<head>
    <style>
        .center {
            text-align: center;
        }
    </style>
</head>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中</p>
</body>

背景 background

效果	描述
background-color	背景颜色
background-image	背景图像
background-repeat	平铺
background-attachment	背景图像固定或滚动
background-position	背景图像起始位置

Alt

<head>
    <style>
        body {
            background-image: url("texture.png");
        }
    </style>
</head>
</head>
<body>
<p>Hello World!</p>
</body>

在这里插入图片描述

背景设图片不重复、且不影响文字

<head>
    <style>
        body {
            background-image: url("texture.png");
            background-repeat:no-repeat;
            background-position:right top;
            margin-right:30px;
        }
    </style>
</head>
</head>
<body>
<p>Hello World!</p>
</body>

简写属性顺序：background-color→background-image→background-repeat→background-attachment→background-position

以上可简写为

background: #ffffff url("texture.png") no-repeat right top;

设置固定图像

在这里插入图片描述

<head>
    <style>
        body {
            background: #FFFFFF url("logo.png") no-repeat right top fixed;
        }
    </style>
    <script>
        for (i = 0; i < 100; i++) {
            document.write("Hello World<br>");
        }
    </script>
</head>

页面滚动，图片位置仍保持不变

可将图片转为base64编码并内嵌在HTML文件中

文本 text

效果	描述
text-align	文本对齐
text-decoration	文本装饰，主要用于删除超链接下划线
text-transform	文本转换
text-indent	文本缩进
line-height	行距
vertical-align	垂直对齐
text-shadow	文本阴影

字体 font

效果	描述
font-style	字体样式，normal为默认值，italic为斜体
font-variant	以小型大写字体或者正常字体显示
font-weight	字体粗细
font-size	字体大小
font-family	字体，可为多个

简写顺序font-style→font-variant→font-weight→font-size→font-family
font-style和font-variant一般为normal
font-weight为bold时加粗

链接 link

链接有多个状态，可设置不同状态下的样式

链接状态	描述
a:link	未访问过的链接
a:visited	已访问过的链接
a:hover	鼠标放在链接上
a:active	链接被点击瞬间

链接显示顺序存在链路状态，建议以下顺序不变

<head>
    <meta charset="UTF-8">
    <style>
        a:link {color:#de7d2c;text-decoration:none;}         /*未访问链接*/
        a:visited {text-decoration:none;}                    /*已访问链接*/
        a:hover {color:#14446a;text-decoration:underline;}   /*鼠标放上*/
        a:active {color:#b3a896;text-decoration:underline;}  /*点击瞬间*/
    </style>
</head>
</head>
<body>
<a href="#">超链接</a>
</body>

链接框

<head>
    <meta charset="UTF-8">
    <style>
        a:link, a:visited {
            display: block;
            font-weight: bold;
            color: #FFFFFF;
            background-color: #98bf21;
            width: 120px;
            text-align: center;
            padding: 4px;
            text-decoration: none;
        }

        a:hover, a:active {
            background-color: #7A991A;
        }
    </style>
</head>
</head>
<body>
<a href="#">超链接</a>
</body>

在这里插入图片描述

Overflow

Overflow属性可以控制内容溢出时添加滚动条

值	描述
visible	默认值，内容会呈现在元素框外
hidden	内容被修剪，其余内容不可见
scroll	内容被修剪，显示滚动条
auto	如果内容被修剪，显示滚动条
inherit	从父元素继承overflow的值

<head>
    <style>
        div.ex1 {
            background-color: lightblue;
            width: 110px;
            height: 110px;
            overflow: scroll;
        }

        div.ex2 {
            background-color: lightblue;
            width: 110px;
            height: 110px;
            overflow: hidden;
        }

        div.ex3 {
            background-color: lightblue;
            width: 110px;
            height: 110px;
            overflow: auto;
        }

        div.ex4 {
            background-color: lightblue;
            width: 110px;
            height: 110px;
            overflow: visible;
        }
    </style>
</head>
</head>
<body>
<h2>overflow: scroll:</h2>
<div class="ex1">Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!</div>

<h2>overflow: hidden:</h2>
<div class="ex2">Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!</div>

<h2>overflow: auto:</h2>
<div class="ex3">Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!</div>

<h2>overflow: visible (默认):</h2>
<div class="ex4">Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!</div>
</body>

在这里插入图片描述

导航栏

三、JavaScript

简介

JavaScript是可插入HTML页面的脚本语言，可直接写入HTML、对事件进行响应、改变HTML内容等。

细节

标签中写onclick事件回调函数时，不是οnclick=函数名，而是 οnclick=函数名()
外部JavaScript文件不使用<script>标签，直接写JavaScript代码
加载HTML文档后再调用document.write会覆盖整个文档（例如按钮）

输出

JavaScript可以通过不同的方式输出数据：

window.alert()弹出警告框
document.write()将内容写到HTML中
innerHTML写到HTML元素中
console.log()写到浏览器控制台中

window.alert()弹出警告框

<script>
    window.alert("Hello World!");
</script>

document.write()将内容写到HTML中

<script>
    document.write("Hello World!");
</script>

innerHTML写到HTML元素中

<p id="demo"></p>
<script>
    document.getElementById("demo").innerHTML = "Hello World!"
</script>

console.log()写到浏览器控制台中，按F12点击"Console"菜单

<script>
    console.log("Hello World!");
</script>

在这里插入图片描述

语法

var声明变量
;用于分隔语句（可选）
//用于注释，/**/用于多行注释
function用于定义函数
数据类型：数字，字符串，数组，对象
===为绝对相等，即数据类型与值都相等
++自增，--自减，支持赋值运算符+=等
三目运算符?:

关键字	描述
for	条件为true时执行
for … in	用于遍历数组或对象属性
while	条件为true时执行
do … while	条件为true时执行
break	跳出循环
continue	跳过循环当前迭代执行下一轮
if … else	用于基于不同的条件来执行不同的动作
function	定义一个函数
return	退出函数
switch	执行不同的动作
throw	抛出错误
var	声明一个变量
try	错误处理，与 catch 一同使用
catch	语句块，在 try 语句块执行出错时执行 catch 语句块

代码折行使用反斜杠\

document.write("Hello World!")

等价于

document.write("Hello \ 
    World!");

数据类型有数字，字符串，数组，对象等

var length = 16;                                  // Number 通过数字字面量赋值 
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

JavaScript类似Python中的字典（键的命名可以没有双引号），有两种方式访问属性

person.lastName

或

person["lastName"]

对象方法

<p id="demo"></p>
<script>
    var person = {
        firstName: "John",
        lastName : "Doe",
        fullName : function()
        {
            return this.firstName + " " + this.lastName;
        }
    };
    document.getElementById("demo").innerHTML = person.fullName();
</script>

常见的HTML事件

事件	描述
onchange	HTML元素改变
onclick	点击
onmouseover	移动鼠标
onmouseout	移开鼠标
onkeydown	按下键盘按键
onload	浏览器完成页面加载

字符串

通过索引[]访问单个字符
内置属性.length获取字符串长度
indexOf()定位字符串中某字符首次出现的位置，没找到返回-1
match()匹配内容，成功则返回内容本身，不成功返回null
replace()替换内容
toUpperCase()和toLowerCase()用于大小写转换
trim()移除首尾空白
split()根据分隔符转数组
+运算符为字符串拼接。若数字与字符串相加，返回字符串

用双引号构建的是字符串，用new String构建的是字符串对象，两者并不绝对相等，建议不要创建字符串对象

<p id="demo"></p>
<script>
var x = 10;
var y = "10";
document.getElementById("demo").innerHTML = Boolean(x == y);
</script>

结果为true

===为绝对相等，即数据类型与值都相等

<p id="p1"></p>
<p id="p2"></p>
<script>
    var x = "Hello";              // x是字符串
    var y = new String("Hello");  // y是对象
    document.getElementById("p1").innerHTML = x==y;
    document.getElementById("p2").innerHTML = x===y;
</script>
</body>

结果分别为true和false

更多JavaScript 字符串属性和方法

循环

for循环

<script>
    n = [1,2,3,4,5]
    for(var i=0;i<n.length;i++){
        document.write(n[i]+" ")
    }
</script>

for in 循环，不同于Python拿到的是每个对象，JavaScript拿到的是下标

<script>
    n = [1, 2, 3, 4, 5]
    subject = ["Chinese", "Math", "English"]
    person = {"name": "XerCis", "age": 22}
    for (i in n) {
        document.write(n[i] + " ")
    }
    document.write("<br>")
    for (i in subject) {
        document.write(subject[i] + " ")
    }
</script>

while循环

<script>
    var i = 0;
    while (i < 5) {
        document.write(i + " ");
        i += 1;
    }
</script>

do while循环

<script>
    var i = 0;
    do {
        document.write(i + " ");
        i += 1;
    } while (i < 5)
</script>

类型转换

方法

使用函数，如String()、Number()
通过自身转换，如xxx.toString()

调试

打印调试值：console.log()，打开浏览器F12→Console

设置断点：代码中使用debugger关键字，打开浏览器F12→刷新→Sources

<p id="demo"></p>
<script>
    var x = "Hello World!";
    debugger;
    console.log(x)
    document.getElementById("demo").innerHTML = x;
</script>

误区

浮点型数据

<p id="p1"></p>
<p id="p2"></p>
<script>
var x = 0.1;
var y = 0.2;
var z = x + y;
document.getElementById("p1").innerHTML = z;
document.getElementById("p2").innerHTML = (z==0.3);
</script>

结果为false

字符串与数值判等

<p id="demo"></p>
<script>
var x = 10;
var y = "10";
document.getElementById("demo").innerHTML = Boolean(x == y);
</script>

结果为true

表单验证

必填字段

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <script>
        function validateForm() {
            var x = document.forms["myForm"]["fname"].value;
            if (x == null || x == "") {
                alert("请输入名字");
                return false;
            }
        }
    </script>
</head>
<body>
<form name="myForm" action="" onsubmit="return validateForm()" method="get">
    名字: <input type="text" name="fname">
    <input type="submit" value="提交">
</form>
</body>
</html>

在这里插入图片描述

或直接使用required字段

<form action="" method="post">
  <input type="text" name="fname" required="required">
  <input type="submit" value="提交">
</form>

在这里插入图片描述

必选项目

<head>
    <meta charset="utf-8">
    <script>
        function check() {
            var x = document.forms["myForm"]["gender"].value;
            if (x == null || x == "") {
                alert("未选性别")
                return false
            }
        }
    </script>
</head>
<body>
<form name="myForm" action="" onsubmit="return check()" method="get">
    <input type="radio" name="gender" value="male">男<br>
    <input type="radio" name="gender" value="female">女<br>
    <input type="submit" value="提交">
</form>
</body>

JSON

JSON（JavaScript Object Notation），JS对象简谱

JSON是用于存储和传输数据的格式，通常用于服务端向网页传输数据

JSON规则

数据为键值对
数据由逗号分隔
大括号{}保存对象
方括号[]保存数组

"sites":[
{"name":"Baidu", "url":"www.baidu.com"},
{"name":"Google", "url":"www.google.com"},
{"name":"Bing", "url":"www.bing.com"}
]

JSON字符串转JavaScript对象JSON.parse()

<script>
    var text = '{ "sites" : [' +
        '{ "name":"Runoob" , "url":"www.runoob.com" },' +
        '{ "name":"Google" , "url":"www.google.com" },' +
        '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

    var obj = JSON.parse(text);
    for (i in obj["sites"]) {
        document.write(obj["sites"][i].name + " " + obj["sites"][i].url + "<br>")
    }
</script>

将JavaScript值转换为JSON 字符串JSON.stringify()

<script>
    var text = {
        "sites": [{"name": "Runoob", "url": "www.runoob.com"},
            {"name": "Google", "url": "www.google.com"},
            {"name": "Taobao", "url": "www.taobao.com"}]
    }
    document.write(JSON.stringify(text))
    document.write("<br>")
    document.write("<pre>" + JSON.stringify(text, null, 4) + "</pre>")//格式化输出
</script>

DOM

DOM，文档对象模型（Document Object Model）

HTML DOM可访问HTML，实现改变元素、属性、CSS、对事件做出反应的功能

HTML DOM事件让JavaScript监听不同事件并作出处理，更多HTML DOM 事件对象

查找元素

查找元素有三种方法：

通过id：document.getElementById()
通过类名：getElementsByClassName获得数组
通过标签名：getElementsByTagName()获得数组
可嵌套调用

<p id="p1"></p>
<p class="p2"></p>
<p class="p2"></p>
<h1></h1>
<h1></h1>
<script>
    //通过id
    var p1 = document.getElementById("p1")
    p1.innerHTML = "Hello World!"

    //通过类名
    var p2 = document.getElementsByClassName("p2")
    for (i in p2) {
        p2[i].innerHTML = "Hello World!"
    }

    //通过标签名
    var h = document.getElementsByTagName("h1")
    for (i in h) {
        h[i].innerHTML = "Hello World!"
    }
</script>

嵌套调用

<div id="d1">
    <p></p>
    <p></p>
    <p></p>
</div>
<script>
    //嵌套调用
    var d1 = document.getElementById("d1")
    var p = d1.getElementsByTagName("p")
    for (i in p) {
        p[i].innerHTML = "Hello World!"
    }
</script>

改变HTML

改变内容xxx.innerHTML= 新HTML，如xxx.innerHTML=“Hello World!”
改变属性xxx.attribute = 新属性值，如xxx.src = “logo.png”
改变样式xxx.style.property = 新样式，如xxx.style.fontFamily=“Arial”
添加节点createElement()和createTextNode()后该元素调用appendChild()，找到某位置尾插xxx.appendChild()或头插xxx.insertBefore()
删除节点xxx.removeChild()
替换节点xxx.replaceChild()

添加节点，尾插

<div id="div1">
</div>
<script>
    var para = document.createElement("p");
    var node = document.createTextNode("这是一个新的段落。");
    para.appendChild(node);

    var element = document.getElementById("div1");
    element.appendChild(para);
    document.getRootNode().appendChild(para)
</script>

添加节点，头插

<div id="div1">
    <p id="p1">Hello</p>
    <p id="p2">World</p>
</div>

<script>
    var para = document.createElement("p");
    var node = document.createTextNode("这是一个新的段落。");
    para.appendChild(node);

    var element = document.getElementById("div1");
    var child = document.getElementById("p1");
    element.insertBefore(para, child);
</script>

HTML DOM 导航

document.body直接返回HTML<body>，为一个HTMLElement对象

<script>
    var para = document.createElement("p");
    var node = document.createTextNode("Hello World!");
    para.appendChild(node);
    document.body.appendChild(para)
</script>

DOM事件

JavaScript HTML DOM 事件

四、JQuery

简介

jQuery是一个JavaScript库，极大地简化了JavaScript编程

安装方法：

jQuery官方下载，选择Download the compressed, production（用于实际网站，已压缩）
使用CDN加载，可使用百度CDN或BootCDN

百度CDNhttps://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

在<head></head>中引用JQuery库

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

语法

基础语法$(selector).action()

文档就绪

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

等价于

$(function(){
 
   // 开始写 jQuery 代码...
 
});

选择器

JQuery选择器基于CSS选择器，JQuery的选择器均以$()开头

元素选择器

隐藏所有p元素：$(“p”)

<script>
    $(function () {
        $("button").click(function () {
            $("p").hide();
        });
    });
</script>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>隐藏p元素</button>

#id 选择器

隐藏id为demo的元素：$("#demo")

<script>
    $(function () {
        $("button").click(function () {
            $("#demo").hide();
        });
    });
</script>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p id="demo">这是另一个段落。</p>
<button>隐藏id为demo的元素</button>

.class 选择器

隐藏class为demo的所有元素：$(".demo")

<script>
    $(function () {
        $("button").click(function () {
            $(".demo").hide();
        });
    });
</script>
<h1>这是一个标题</h1>
<p class="demo">这是一个段落。</p>
<p class="demo">这是另一个段落。</p>
<button>隐藏class为demo的元素</button>

JQuery选择器更多实例，基于CSS选择器

事件

jQuery 事件

常见DOM事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click单击	keypress摁下	submit提交	load加载
dblclick双击	keydown按下	change改变	resize调整窗口大小
mouseenter鼠标进入	keyup松开	focus获得焦点	scroll滚动
mouseleave鼠标离开		blur失去焦点
hover鼠标悬停

定义

$("p").click(function(){
    // 动作触发后执行的代码
});

常用方法

jQuery效果

toggle()显示/隐藏，hide()和show()的结合
fadeIn()淡入隐藏元素（元素style属性为display:none;）
fadeOut()淡出
fadeToggle()淡入/淡出，fadeIn()和fadeOut()的结合
fadeTo()渐变为给定的不透明度（0-1）
slideDown()下滑隐藏元素
slideUp()上滑（拉起）
slideToggle()上滑/下滑，slideDown()和slideUp()的结合

可以把方法链接在一起，Chaining允许在一条语句中运行多个jQuery方法（在相同的元素上）

<script>
    $(function () {
        $("button").click(function () {
            $("#demo").fadeOut("slow").fadeIn("slow").css("color", "red")
        });
    });
</script>
<p id="demo">淡出淡入变红</p>
<button>点我</button>

获取/设置DOM内容

text()所选元素的文本内容
html()所选元素的内容（包括HTML标记）
val()表单字段的值
attr()属性值

text()和html()的区别在于有无HTML标记

<script>
    $(function () {
        $("#text").click(function () {
            alert($("#demo").text())
        });
        $("#html").click(function () {
            alert($("#demo").html())
        });
    });
</script>
<p id="demo">这是加粗文本：<b>你好</b></p>
<button id="text">text()文本内容</button>
<button id="html">html()文本内容</button>

val()获取表单字段中的值

<script>
    $(function () {
        $("#val").click(function () {
            alert($("#demo").val())
        });
    });
</script>
<input type="text" id="demo" value="XerCis">
<button id="val">val()文本内容</button>

attr()获取属性值

<script>
    $(function () {
        $("#attr").click(function () {
            alert($("#demo").attr("href"))
        });
    });
</script>
<a href="https://www.baidu.com/" id="demo">百度链接</a>
<button id="attr">attr("href")获取属性href</button>

设置值

<script>
    $(function () {
        $("#text").click(function () {
            $("#demo").text("Hello World!")
        });
        $("#html").click(function () {
            $("#demo").html("<b>Hello World!</b>")
        });
        $("#val").click(function () {
            $("#demo2").val("小明")
        });
    });
</script>
<p id="demo">这是加粗文本：<b>你好</b></p>
<input type="text" id="demo2" value="XerCis"><br>
<button id="text">text()文本内容设置为Hello World</button><br>
<button id="html">html()文本内容设置为Hello World（加粗）</button><br>
<button id="val">val()表单的值设置为小明</button>

回调函数有两个参数：当前元素下标，原始值

return返回希望修改的值

<script>
    $(function () {
        $("#text").click(function () {
            $(".demo").text(function (i, origText) {
                alert("下标" + i + ":" + origText);
                return "Hello World!";
            });
        });
    });
</script>
<p class="demo">Hello</p>
<p class="demo">World!</p>
<button id="text">text()文本内容设置为Hello World</button>

添加元素

append元素尾插（内部嵌入）
prepend()元素头插
after()尾插（外部添加）
before()头插

可同时添加多个元素

append和prepend()

<script>
    $(function () {
        $("#demo").append(" Hello ", "World! ");
        $("#demo").prepend("早上好！");
    });
</script>
<p id="demo">XerCis</p>

after()和before()

<script>
    $(function () {
        $("#demo").after("after()尾插");
        $("#demo").before("before()头插");
    });
</script>
<p id="demo">Hello World!</p>

删除元素

remove()移除，删除元素及其子元素，参数可以是jQuery选择器
empty()清空，删除子元素

<script>
    $(function () {
        $("#remove").click(function () {
            $("#div1").remove();
        })
        $("#empty").click(function () {
            $("#div2").empty();
        })
    });
</script>
<div id="div1" style="background-color: gold; height:100px; width:300px;">
    <p>Hello World!</p>
    <p>Hello World!</p>
</div>
<div id="div2" style="background-color: gold; height:100px; width:300px;">
    <p>XerCis</p>
    <p>XerCis</p>
</div>
<button id="remove">remove</button>
<button id="empty">empty</button>

CSS操作

jQuery 获取并设置 CSS 类

$("p").css({"background-color":"gold","font-size":"200%"});

遍历

jQuery 遍历

五、AJAX

简介

AJAX是HTML与服务器交换数据的技术，它在不重载页面的情况下，实现了对网页的部分更新。

AJAX的核心是XMLHttpRequest对象，该部分使用JQuery调用（实际上可以不用）

AJAX 教程

AJAX默认只能传文本，不能传文件，需要通过XMLHttpRequest对象和post方法实现

test.txt

Hello World!

<script>
    $(function () {
        $("button").click(function () {
            $("#div1").load("test.txt");
        });
    });
</script>

<div id="div1"></div>
<button>获取外部内容</button>

load()方法

$(selector).load(URL,data,callback);
load()方法从服务器加载数据，并把返回的数据放入被选元素中

test.txt

<h1>标题</h1>
<p id="p1">Hello World!</p>

<script>
    $(function () {
        $("#b1").click(function () {
            $("#div1").load("test.txt");
        });
        $("#b2").click(function () {
            $("#div2").load("test.txt #p1");
        });
    });
</script>

<div id="div1"></div>
<div id="div2"></div>
<button id="b1">获取外部内容</button>
<button id="b2">获取外部p1</button>

回调函数参数responseTxt, statusTxt, xhr

responseTxt：成功时的结果
statusTXT：调用的状态
xhr：XMLHttpRequest 对象

<script>
    $(function () {
        $("button").click(function () {
            $("#div1").load("test1.txt", function (responseTxt, statusTxt, xhr) {
                if (statusTxt == "success")
                    alert("加载成功：" + responseTxt);
                if (statusTxt == "error")
                    alert("加载失败：" + xhr.status + " " + xhr.statusText);
            });
        });
    });
</script>

<div id="div1"></div>
<button>获取外部内容</button>

get()和post()方法

GET请求数据
POST提交要处理的数据，同时请求

以下测试需要使用Web服务器，可以使用PHP，本人使用Python中的Tornado，可参考本人的文章：Tornado入门

$.get() 方法

$.get(URL, callback);

项目结构
在这里插入图片描述

index.html

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <script src="../static/jquery-3.4.1.min.js"></script>
</head>

<body>
<script>
    $(function () {
        $("button").click(function () {
            $.get("/test", {"name": "XerCis"}, function (data, status) {
                alert("数据: " + data + "\n状态: " + status);
                $("#div1").append(data)
            });
        });
    });
</script>

<div id="div1"></div>
<button>get()</button>
</body>
</html>

server.py

import os
import sys
import tornado.web
import tornado.locks
import tornado.ioloop
from tornado.options import define, options

define("port", default=8888, help="运行端口", type=int)
define("debug", default=True, help="debug模式")

current_path = sys.path[0]


class MainHandler(tornado.web.RequestHandler):
    def get(self):
        self.render("templates/index.html")


class TestHandler(tornado.web.RequestHandler):
    def get(self):
        name = self.get_argument("name")
        self.write("<p>Hello {}!</p>".format(name))


def main():
    app = tornado.web.Application(
        [
            (r"/", MainHandler),
            (r"/test", TestHandler),
            (r"/static/(.*)", tornado.web.StaticFileHandler, {"path": os.path.join(current_path, "static")}),
            (r"/templates/(.*)", tornado.web.StaticFileHandler, {"path": os.path.join(current_path, "templates")}),
        ],
        debug=options.debug,
    )
    app.listen(options.port)
    print("http://localhost:{}/".format(options.port))
    tornado.ioloop.IOLoop.current().start()


if __name__ == "__main__":
    main()

运行结果
在这里插入图片描述

页面会更新
在这里插入图片描述

$.post() 方法

$.post(URL, data, callback);

上传文件

常用

<p style="font-weight: lighter;">字体粗细：lighter</p>
<p style="font-weight: normal;">字体粗细：normal</p>
<p style="font-weight: bold;">字体粗细：bold</p>
<p style="font-weight: bolder;">字体粗细：bolder</p>

<p style="color:red">字体颜色</p>