<!--文本框--><inputtype="text"><!--密码框--><inputtype="password"><!--单选框，ps.单选框之间必须具备相同的 name 属性, 才能实现 多选一 效果--><!--radio表示是自选框--><inputtype="radio"name="sex">男<inputtype="radio"name="sex"checked="checked">女<!--复选框--><inputtype="checkbox">吃饭 <inputtype="checkbox">睡觉 <inputtype="checkbox">打游戏<!--普通按钮--><inputtype="button"value="我是个按钮"><!--提交按钮，必须放到form标签内，点击后会尝试给服务器发送--><!--清空按钮，必须放到form标签内，点击后会将form内所有的用户输入内容重置--><formaction="test.html"><inputtype="text"name="username"><inputtype="submit"value="提交"></form><!--选择文件--><inputtype="file">

<!--文本域中的内容, 就是默认内容, 注意, 空格也会有影响--><textarearows="3"cols="50"></textarea>

<!--option 中定义 selected="selected" 表示默认选中--><select><option>北京</option><optionselected="selected">上海</option></select>

<h1>hello</h1><h2>hello</h2><h3>hello</h3><h4>hello</h4><h5>hello</h5><h6>hello</h6>

<p>这是一个段落</p>

br 是一个单标签(不需要结束标签)br 标签不像 p 标签那样带有一个很大的空隙. <br/>是规范写法. 不建议写成 <br>

<strong>strong 加粗</strong><b>b 加粗</b><em>倾斜</em><i>倾斜</i><del>删除线</del><s>删除线</s><ins>下划线</ins><u>下划线</u>

<imgsrc="rose.jpg"><!--img 标签必须带有 src 属性. 表示图片的路径-->

<imgsrc="rose.jpg"alt="鲜花"title="这是一朵鲜花"width="500px"height="800px"border="5px">

<ahref="http://www.baidu.com">百度</a>

<ahref="1.html">点我跳转到 1.html</a>

<ahref="#">空链接</a>

<ahref="test.zip">下载文件</a>

<ahref="http://www.sogou.com"><imgsrc="rose.jpg"alt=""></a>

<ahref="#one">第一集</a><ahref="#two">第二集</a><pid="one">第一集剧情 <br>第一集剧情 <br>...</p><pid="two">第二集剧情 <br>第二集剧情 <br>...</p>

<tablealign="center"border="1"cellpadding="20"cellspacing="0"width="500"height="500"><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>张三</td><td>男</td><td>10</td></tr><tr><td>李四</td><td>女</td><td>11</td></tr></table>

一、HTML常见标签

（1） 注释标签

ctrl + / 快捷键可以快速进行注释/取消注释

<!-- 我是注释 -->

（2）标题标签: h1-h6

有六个，从h1到h6，数字越大，字体越小，也越细。外边距 margin

【2】边框

1. 基础属性

• 粗细: border-width
• 样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
• 颜色: border-color

div {    width: 500px;    height: 250px;    border-width: 10px;    border-style: solid;    border-color: green;}border: 1px solid red;		<!--支持简写, 没有顺序要求-->border-top/bottom/left/right		<!--可以改四个方向的任意边框-->

2. 边框会撑大盒子

相当于使用面积，套用面积的区别

• 通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子.

<!--* 为通配符选择器-->* {    box-sizing: border-box;}

【3】内边距

padding 设置内容和边框之间的距离

基础写法

默认内容是顶着边框来放置的. 用 padding 来控制这个距离可以给四个方向都加上边距

• padding-top
• padding-bottom
• padding-left
• padding-right

注意:

• 整个盒子的大小从原来的 300 * 200 => 310 * 205. 说明内边距也会影响到盒子大小(撑大盒子).
• 使用 box-sizing: border-box 属性也可以使内边距不再撑大盒子. (和上面 border 类似)

复合写法
可以把多个方向的 padding 合并到一起

padding: 5px; 表示四个方向都是 5px
padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)

【4】外边距

1. 基础写法

控制盒子和盒子之间的距离，可以给四个方向都加上边距

• margin-top
• margin-bottom
• margin-left
• margin-right

2. 复合写法

margin: 10px; // 四个方向都设置
margin: 10px 20px; // 上下为 10, 左右 20
margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40

3. 块级元素水平居中

• 前提:
  （1）指定宽度(如果不指定宽度, 默认和父元素一致)
  （2）把水平 margin 设为 auto

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

• 注意
  （1）这个水平居中的方式和 text-align 不一样.
  （2）margin: auto 是给块级元素用得到.
  （3）text-align: center 是让行内元素或者行内块元素居中的
  （4）对于垂直居中, 不能使用 "上下 margin 为 auto " 的方式

【5】去除浏览器默认样式

• 浏览器会给元素加上一些默认的样式, 尤其是内外边距. 不同浏览器的默认样式存在差别
• 为了保证代码在不同的浏览器上都能按照统一的样式显示, 往往我们会去除浏览器默认样式
• 使用通配符选择器即可完成这件事情.

* {    marign: 0;    padding: 0;}

三、u、ol、内边距 padding、表格、视频、b、简洁且功能丰富的JavaScript框架，它封装了JavaScript常用的功能代码, 提供了简洁而强大的选择器和DOM操作方法

1. 引入依赖

使用JQuery需要先引⼊对应的库
在使用jQuery CDN时，只需要在HTML⽂档中加入如下代码

< script src=“https://code.jquery.com/jquery-3.7.1.min.js”>

这个URL是CDN(内容分发网络)服务提供商为jQuery库提供的⼀个统一资源定位符，也可以使⽤其他公司提供的CDN地址

2. JQuery 语法

jQuery 语法是选取 HTML 元素后对其操作

基础语法

$(selector).action()

• $() 是⼀个函数, 它是 jQuery 提供的⼀个全局函数, ⽤于选择和操作 HTML 元素.
• Selector 选择器, ⽤来"查询"和"查找" HTML 元素
• action 操作, 执行对元素的操作

JQuery 的代码通常都写在 document ready 函数中.

document：整个文档对象, ⼀个页面就是⼀个文档对象, 使用document表示

这是为了防止文档在完全加载（就绪）之前运行jQuery 代码，即在文档加载完成后才可以对 页面进行操作。HTML

1. 概念

HTML是超文本标记语言，超文本是指文本、会换行且每个标题之间是有空格，这两个样式是自带的。<divclass="box green"></div>

• 语法细节
  （1）类名用 . 开头的
  （2）下方的标签使用 class 属性来调用
  （3）一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代码更好复用)
  （4）如果是长的类名, 可以使用 - 分割
  （5）不要使用纯数字, 或者中文, 以及标签名来命名类名

【3】id 选择器

• CSS 中使用 # 开头表示 id 选择器
• id 选择器的值和 html 中某个元素的 id 值相同
• html 的元素 id 不必带 #
• id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)

<style>#ha{color:red;}</style><divid="ha">蛤蛤蛤</div>

【4】通配符选择器

使用 * 的定义, 选取所有的标签，页面的所有内容都会被改成 红色，不需要被页面结构调用，主要用来消除边距

* { color: red;}

【5】复合选择器（选学）

（1） 后代选择器 / 包含选择器.

• 元素 1 和 元素 2 要使用空格分割
  元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1

元素1 元素2 {样式声明}

<!--把 ol 中的 li 修改颜色, 不影响 ul--><ul><li>aaa</li><li>bbb</li><li>ccc</li></ul><ol><li>ddd</li><li>eee</li><li>fff</li></ol>ol li {    color: red;}

<!--元素 2 不一定非是 儿子, 也可以是孙子--><ul><li>aaa</li><li>bbb</li><li><ahref="#">ccc</a></li></ul>ul li a {    color: yellow;}或者ul a {    color: yellow;}

（3）伪类选择器

I. 链接伪类选择器

1. a:link 选择未被访问过的链接
2. a:visited 选择已经被访问过的链接
3. a:hover 选择鼠标指针悬停上的链接
4. a:active 选择活动链接(鼠标按下了但是未弹起)

<ahref="#">小猫</a>a:link {    color: black;    /* 去掉 a 标签的下划线 */    text-decoration: none;}a:visited {    color: green;}a:hover {    color: red;}a:active {    color: blue;}

注意事项
（1）按照 LVHA 的顺序书写, 例如把 active 拿到前面去, 就会导致 active 失效. 记忆规则 “绿化”
（2）浏览器的 a 标签都有默认样式, 一般实际开发都需要单独制定样式.
（3）实际开发主要给链接做一个样式, 然后给 hover 做一个样式即可. link, visited, active 用的不多

a {    color: black;}a:hover {    color: red;}

II. :focuse 伪类选择器

（3）常用元素属性

【1】字体属性

设置字体

• 字体名称可以用中文, 但是不建议
• 多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体)
• 如果字体名有空格, 使用引号包裹
• 建议使用常见字体, 否则兼容性不好

<style>.font-family .one{font-family:'Microsoft YaHei';}.font-family .two{font-family:'宋体';}</style><divclass="font-family"><divclass="one">这是微软雅黑    </div><divclass="two">这是宋体    </div></div>

大小

• 不同的浏览器默认字号不一样, 最好给一个明确值. (chrome 默认是 16px)
• 可以给 body 标签使用 font-size
• 要注意单位 px 不要忘记，如果写错了，浏览器会进行容错处理，以默认的字体大小展示
• 标题标签需要单独指定大小

<!--实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮-->p {    font-size: 20px;}

粗细

• 可以使用数字表示粗细.
• 700 == bold, 400 是不变粗, == normal取值范围是 100 -> 900

p { font-weight: bold;    font-weight: 700;}

文字样式

/* 设置倾斜 */font-style: italic;/* 取消倾斜 */font-style: normal;

【2】文本属性

（1） 文本颜色

设置文本颜色

color: red;
color: #ff0000; ------ 十六进制形式，全部两两相同，可以简写
color: rgb(255, 0, 0); ------ 红、蓝，数值越大，饱和度越高

<style>.color{color:red;/* color: rgb(255, 0, 0); *//* color: #ff0000; */}</style><divclass="color">这是一段话</div>

（2） 文本对齐

控制文字水平方向的对齐，不光能控制文本对齐, 也能控制图片等元素居中或者靠右

text-align: [值];

取值

• center: 居中对齐
• left: 左对齐
• right: 右对齐

（3）文本装饰

text-decoration: [值];

常用取值:

• underline 下划线. [常用]
• none 啥都没有. 可以给 a 标签去掉下划线.
• overline 上划线. [不常用]
• line-through 删除线 [不常用]

（4）文本缩进

text-indent: [值];

控制段落的 首行 缩进 (其他行不影响)

• 单位可以使用 px 或者 em.
• 使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小
• 缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)

（5）行高

line-height: [值];

【3】背景属性

（1）背景颜色

<!--默认是 transparent (透明) 的. 可以通过设置颜色的方式修改-->background-color: [指定颜色]

<style>body{background-color:#f3f3f3;}.bgc .one{background-color:red;}.bgc .two{background-color:#0f0;}.bgc .three{/* 背景透明 */background-color:transparent;}</style><divclass="bgc"><divclass="one">红色背景</div><divclass="two">绿色背景</div><divclass="three">透明背景</div></div>

（2）背景图片

比 image 更方便控制位置(图片在盒子中的位置)
background-image: url(…);

注意:

1. url 不要遗漏.
2. url 可以是绝对路径, 也可以是相对路径
3. url 上可以加引号, 也可以不加

<style>.bgi .one{background-image:url(rose.jpg);height:300px;}</style><divclass="bgi"><divclass="one">背景图片</div></div>

（3）背景平铺

background-repeat: [平铺方式]

• 默认是 repeat.
• 背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方

重要取值:

• repeat: 平铺
• no-repeat: 不平铺
• repeat-x: 水平平铺
• repeat-y: 垂直平铺

<style>.bgr .one{background-image:url(rose.jpg);height:300px;background-repeat:no-repeat;}.bgr .two{background-image:url(rose.jpg);height:300px;background-repeat:repeat-x;}.bgr .three{background-image:url(rose.jpg);height:300px;background-repeat:repeat-y;}</style><divclass="bgr"><divclass="one">不平铺</div><divclass="two">水平平铺</div><divclass="three">垂直平铺</div></div>

（4）背景位置

background-position: x y;
修改图片的位置

参数有三种风格:

1. 方位名词: (top, left, right, bottom)
2. 精确单位: 坐标或者百分比(以左上角为原点)
3. 混合单位: 同时包含方位名词和精确单位

<style>.bgp .one{background-image:url(rose.jpg);height:500px;background-repeat:no-repeat;background-color:purple;background-position:center;}</style><divclass="bgp"><divclass="one">背景居中</div></div>

注意:

• 如果参数的两个值都是方位名词, 则前后顺序无关. (top left 和 left top 等效)
• 如果只指定了一个方位名词, 则第二个默认居中. (left 则意味着水平居中, top 意味着垂直居中. )
• 如果参数是精确值, 则的的第一个肯定是 x , 第二个肯定是 y. (100 200 意味着 x 为 100, y 为 200)
• 如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中
• 如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100, 垂直居中)

（5）背景大小

background-size: length|percentage|cover|contain;

• 可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
• 也可以填百分比: 按照父元素的尺寸设置
• cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。strong、内容 content、s、链接等等。del、

  文章目录

  • 一、

    （1）HTML 文件基本结构

    <html><head><title></title></head><body></body></html>

    1. • html 标签是整个 html 文件的根标签(最顶层标签)
       • head 标签中写页面的属性
       • body 标签中写的是页面上显示的内容
       • title 标签中写的是页面的标题

    2. 标签是有层次关系的 ------ 父子关系 / 兄弟关系。HTML常见标签

• 二、HTML
• • 1. 概念
  • • （1）HTML 文件基本结构
    • （2）HTML代码框架
  • 2. 、p、CSS

    1. CSS基本语法规范

    前言：CSS可以控制页面的展示效果，HTML决定页面结构

    • 选择器 + {一条/N条声明}
      • 选择器决定针对谁修改 (找谁)
      • 声明决定修改啥. (干啥)
      • 声明的属性是键值对. 使用 ; 区分键值对, 使用 : 区分键和值
        

    CSS 要写到 style 标签中(后面还会介绍其他写法)
    style 标签可以放到页面任意位置. 一般放到 head 标签内
    CSS 使用 /* */ 作为注释. (使用 ctrl + / 快速切换)

    规范

    • 样式大小写
      虽然 CSS 不区分⼤⼩写, 我们开发时统⼀使⽤⼩写字⺟
    • 空格规范
      冒号后⾯带空格
      选择器和 { 之间也有⼀个空格

    2. 用法

    （1） 引用方式

    【1】内部样式表

    1. 概念：写在 style 标签中. 嵌入到 html 内部，虽然从理论上来说，style 放到 html 的哪里都行，但是一般都是放到 head 标签中

    2. 优点: 这样做能够让样式和页面结构分离.

    3. 缺点: 分离的还不够彻底. 尤其是 css 内容多的时候

    【2】行内样式表

    1. 概念：通过 style 属性, 来指定某个标签的样式，只适合于写简单样式. 只针对某个标签生效
    2. 缺点:
       • 不能写太复杂的样式.
       • 这种写法优先级较高, 会覆盖其他的样式

    <style>div{color:red;<!--被覆盖了，字是绿色的-->   }</style><divstyle="color:green">绿色</div>

    【3】外部样式

    实际开发中最常用的方式

    1. 创建一个 css 文件
    2. 使用 link 标签引入 css

    <linkrel="stylesheet"href="[CSS文件路径]"><!--stylesheet 表示引入的是一个样式表-->

    优点: 样式和结构彻底分离了.
    缺点: 受到浏览器缓存影响, 修改之后 不一定 立刻生效

    关于缓存:
    这是计算机中一种常见的提升性能的技术手段.
    网页依赖的资源(图片/CSS/JS等)通常是从服务器上获取的. 如果频繁访问该网站，那么这些外部资源就没必要反复从服务器获取. 就可以使用缓存先存起来(就是存在本地磁盘上了). 从而提高访问效率.
    可以通过 ctrl + F5 强制刷新页面, 强制浏览器重新获取 css 文件

    （2）选择器

    【1】标签选择器

    • 特点：
      （1）能快速为同一类型的标签都选择出来.
      （2）但是不能差异化选择

    <style>p{color:red;}div{color:green;}</style><p>猫猫</p><div>狗狗</div>

    【2】类选择器

    • 特点:
      （1）差异化表示不同的标签
      （2）可以让多个标签的都使用同一个标签

    <style>.blue{color:blue;}.box{width:200px;height:150px;}.green{background-color:green;}</style><divclass="blue">猫猫1</div><div>猫猫2</div、i、标记表示由许许多多的标签组成。ul、span …
    特点:
    不独占一行, 一行可以显示多个
    设置高度, 宽度, 行高无效
    左右外边距有效(上下无效). 内边距有效.
    默认宽度就是本身的内容
    行内元素只能容纳文本和其他行内元素, 不能放块级元素
    注意:
    a 标签中不能再放 a 标签 (虽然 chrome 不报错, 但是最好不要这么做)
    a 标签里可以-放块级元素, 但是更建议先把 a 转换成块级元素
    【3】行内元素和块级元素的区别
    （1）块级元素独占一行, 行内元素不独占一行
    （2）块级元素可以设置宽高, 行内元素不能设置宽高.
    （3）块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置
    【4】改变显示模式
    使用 display 属性可以修改元素的显示模式，可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素
    （1）display: block 改成块级元素 [常用]
    （2）display: inline 改成行内元素 [很少用]
    （3）display: inline-block 改成行内块元素
    3. 盒模型
    【1】概述
    每一个 HTML 元素就相当于是一个矩形的 “盒子”
    这个盒子由这几个部分构成：边框 border、这种关系构成了一个DOM树

  • 每一个标签都相当于是一个对象，可以对对象进行增删查改操作

  （2）HTML代码框架

  可以通过！+ 回车的方式快速生成代码框架

  <!DOCTYPEhtml><!-- DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件 --><htmllang="en"><!-- lang 属性表示当前页面是一个 "英语页面",(有些浏览器会根据此处的声明提示是否进行自动翻译)--><head><metacharset="UTF-8"><!--页面的字符编码方式是utf-8--><metahttp-equiv="X-UA-Compatible"content="IE=edge"><!--content="IE=edge" 表示IE浏览器渲染效果按照IE浏览器最高版本展示--><metaname="viewport"content="width=device-width, initial-scale=1.0"><!--name="viewport" 表示移动端适配--><title>Document</title></head><body><!-- 这是内容 --></body></html>

  2. 、li …

  1. 特点:
     • 独占一行
     • 高度, 宽度, 内外边距, 行高都可以控制.
     • 宽度默认是父级元素宽度的 100% (和父元素一样宽)
     • 是一个容器(盒子), 里面可以放行内和块级元素.

  <style>.demo1 .parent{width:500px;height:500px;background-color:green;}.demo1 .child{/* 不写 width, 默认和父元素一样宽 *//* 不写 height, 默认为 0 (看不到了) */height:200px;background-color:red;}</style><divclass="demo1"><divclass="parent"><divclass="child">child1        </div><divclass="child">child2        </div></div></div>

  2. 注意:
     • 文字类的元素内不能使用块级元素
     • p 标签主要用于存放文字, 内部不能放块级元素, 尤其是 div

  【2】行内元素/内联元素

  常见的元素：a、比如head和body是html的子标签，head和body是兄弟关系。声音、JavaScript

  1. 概念

  【1】JavaScript 是什么

  JavaScript (简称 JS), 是⼀个脚本语言, 解释型或即时编译型的编程语言. 虽然它是作为开发Web页面的脚本语言而出名，但是它也被⽤到了很多非浏览器环境中

  虽然 Java 和 JavaScript 名字很像，但其实他们之间的语法风格相差许多

  【2】HTML-CSS-JS

  HTML：网页的结构（骨）
CSS：网页的表现（皮）
JavaScript：网页的行为(魂)

  2. 使用

  【1】引入方式

  引入方式	语法描述	示例
  行内样式	直接嵌入到html元素内部	< input type="button" value="点我⼀下" οnclick="alert('haha')">
  内部样式	定义< scrip> 标签，写到scrip标签中	< script> alert("haha"); < /script>
  外部样式	定义< scrip> 标签，通过src属性引到外部 js 文件	< script src="hello.js">< /script>

  对比：
（1）内部样式会出现大量的代码冗余, 不方便后期的维护，所以不常用
（2）行内样式, 只适合于写简单样式. 只针对某个标签生效. 缺点是不能写太复杂的jS
（3）外部样式，html和js实现了完全的分离, 企业开发常用方式

  【2】基础语法

  1. 变量

  变量有三种声明方式

  关键词	解释	示例
  var	早期JS中声明变量的关键字, 作用域在该语句的函数内	var name = 'zhangsan';
  les	ES6 中新增的声明变量的关键字, 作用域为该语句所在的代码块 内	les name = 'zhangsan';
  const	声明常量的，声明后不能修改	const name = 'zhangsan';

  注意
（1）JavaScript 是⼀门动态弱类型语言，变量可以存放不同类型的值(动态)，随着程序的运⾏, 变量的类型可能会发生改变

  varname ='zhangsan';varage =20;vara =10;// 数字a ="hehe";// 字符串

  Java是静态强类型语⾔, 在变量声明时, 需要明确定义变量的类型. 如果不强制转换, 类型不会发生变化

  变量名命名规则
（1）组成字符可以是任何字⺟、如果在文档没有完全加载之前就运⾏函数，操作可能失败

  $(document).ready(function(){// jQuery functions go here});

  3. JQuery 选择器

  语法	描述
  $("*")	选取所有元素
  $(this)	选取当前 HTML 元素
  $("p")	所有 < p> 元素
  $("p:first")	选取第⼀个 元素
  $("p:last")	最后⼀个 < p> 元素
  $(".box")	所有 class="box" 的元素
  $("#box")	id="box" 的元素
  $(".intro .demo")	所有 class="intro" 且 class="demo" 的元素
  $("p.intro")	选取 class 为 intro 的 < p> 元素
  $("ul li:first")	选取第⼀个 < ul> 元素的第⼀个 < li> 元素
  $(":input")	所有 元素
  $(":text")	所有 type="text" 的 元素
  $(":checkbox")	所有 type="checkbox" 的 元素

  4. JQuery 事件

  概念

  JS 要构建动态页面, 就需要感知到用户的行为，
用户对于页面的⼀些操作(点击, 选择, 修改等) 操作都会在浏览器中产生⼀个个事件, 被 JS 获取到, 从而进行更复杂的交互操作

  事件由三部分组成

  1. 事件源: 哪个元素触发的
  2. 事件类型: 是点击, 选中, 还是修改?
  3. 事件处理程序: 进⼀步如何处理. 往往是⼀个回调函数

  常见的事件

  事件	代码
  文档就绪事件(完成加载)	$(document).ready(function)
  点击事件	$(selector).click(function)
  $双击事件	$(selector).dblclick(function)
  元素的值发生改变	$(selector).change(function)
  鼠标悬停事件	$(selector).mouseover(function)

  5. 操作元素

  获取/设置元素内容

  有参数时, 就进⾏元素的值设置, 没有参数时, 就进行元素内容的获取

  JQuery方法	说明
  text()	设置或返回所选元素的文本内容
  html()	设置或返回所选元素的内容（包括 HTML 标签）
  val()	设置或返回表单字段的值

  获取/设置元素属性

  JQuery attr() 方法用于获取属性值

  获取/返回css属性

  css() 方法设置或返回被选元素的⼀个或多个样式属性

  添加元素

  • 添加 HTML 内容
    1. append() : 在被选元素的结尾插⼊内容
    2. prepend() : 在被选元素的开头插⼊内容
    3. after() : 在被选元素之后插⼊内容
    4. before() : 在被选元素之前插⼊内容

  删除元素

  删除元素和内容，⼀般使用以下两个 jQuery 方法：

  1. remove() : 删除被选元素（及其子元素）
  2. empty() : 删除被选元素的子元素