前端总结（html css js jQuery）

最新推荐文章于 2024-04-15 07:09:54 发布

康康的码农之路

最新推荐文章于 2024-04-15 07:09:54 发布

阅读量681

点赞数 3

分类专栏： java Web笔记

本文链接：https://blog.csdn.net/qq_39892275/article/details/118640755

版权

java Web笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

前端三剑客总结`在这里插入代码片`

架构模式：c/s 和 b/s （客户端/服务器浏览器/服务器）
我们学的是b/s架构模式。
资源分类：动态和静态资源动态资源需要用到数据库（不是动一动就是动态资源）

一.html负责页面的内容和结构（超文本标记语言，不仅仅限于文本，还可以加入图片，视频什么的）

(1)语法格式(包含标签和属性)

1.文件后缀名.html或者.htm
2. 标签分类双边标签如：<htm></html> 单边标签 <meta charset='UTF-8'/>
3. 在标签中定义属性，可以一下子定义多个，值用引号引起来，属性之间加空格就行
4. 标签名都是定义好的，可以使用但是不可以随便命名
5. 标签不区分大小写

（2)HTMl常见标签

1.标题标签<h1></h1> (可以使用到h1到h6 大小是从大到小 )
2.段落标签 <p></p>
3.文本格式话化标签（1.<br/>(换行标签)，2.<hr/>分割线标签，3.<b> <b/><strong></strong>加粗标签 ,4.<em></em><i></i>斜体标签,5.<sub></sub>上标标签,6.<sup></sup>下标标签,7.<font></font> 字体格式话标签,8.<center></center>居中标签）
4.多媒体标签（1.<img/>html图片标签，2.<audio/> 音频标签，3.<video/> 视频标签）
      img属性：src 链接图片， width height 宽高， alt当图片加载不出来就显示文本，title 当鼠标停留再图片上面显示文字。
例如:<img src=”” width=”” height=”” alt=”” title=”” />
      audio属性：src 链接音频 controls 向用户显示控件 loop 循环播放 muted 当开始播放时默认静音
      video属性：同audio属性
5.列表标签（1.<ul></ul>无序标签，2.<ol></ol>有序标签，3.<li></li>列表项）
     ul标签属性：type 取值：A、a 、I 、i 、1 等(默认type=“1”)
     ol标签属性：type取值：disc 实心圆、square 方块、circle 空心圆(默认type=“disc”)
6.超链接标签
     用于<a></a>标签
     <a href="" target="">热点文字或图片</a>
     注：把href的页面给了target的页面
7.表格标签（HTML中一个表格由<table>标签及一个或多个<tr>加若干<td>标签组成。都是双标签）
     组成结构：在一个table标签放进去tr行标签，在tr行标签放进去td列标签，th标签是一个表头标签，放进去tr标签默认字体加粗，caption是表格的标题成对的，与tr标签同级。
      属性：最重要的两个属性1.rowspan合并行   2.colspan合并列
       在合并的时候写上合并的数值，并且删除掉要合并的对应的行或者列
      假如要合并行，在tr标签中用rowspan用写上对应的合并数值，然后删除掉后面的列下面tr中包含的td标签
      假如要合并列，在tr中的td标签中用colspan中写上对应的数值.然后删除掉这个数值包含的td标签（这个td标签之后的td标签）

示例：

学生信息表
学号	姓名	性别	个人简介
1001	柳岩	女	我大, 我骄傲
1002	刘涛	女	我是一名演员
1003	宝强	男	我是一名演员

代码：

 <body>
    <table border="1px" width="500px" height="200px" cellspacing="0px" cellpadding="0px" align="center">
        <caption>
            <h2>学生信息表</h2>
        </caption>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>个人简介</th>
        </tr>
        <tr align="center">
            <td>1001</td>
            <td>柳岩</td>
            <td>女</td>
            <td>我大, 我骄傲</td>
        </tr>
        <tr align="center">
            <td>1002</td>
            <td>刘涛</td>
            <td>女</td>
            <td rowspan="2">我是一名演员</td>
        </tr>
        <tr align="center">
            <td>1003</td>
            <td>宝强</td>
            <td>男</td>

        </tr>
        
    </table>
</body>

表单标签
作用：表单的主要作用是接受用户输入的信息，然后用户提交的时候，浏览器将表单中的信息打包发送的服务器，从而实现用户与web服务器的交互。
组成：表单是控件的容器，一个表单是有form元素，表单控件和表单按钮三部分构成。
（1）表单标签
<form></form>表单标签是在页面中创建一个表单，表单标签相当于一个容器，本身是不显示的，只有在里面放进去各种标签，才会显示出效果，如果数据要提交给服务器，负责收数据的标签必须放在form表单之内。
属性：action:提交的服务器地址，methdod:数据提交的方式：get或者post，enctype:数据提交的编码方式。
（2）输入域标签
<input></input>通过type属性达到不同收集信息的目的。

重要的几个type属性：
属性值说明
text 文本框(默认)，单行的输入字段，用户可在其中输入纯文本。
password 密码框。内容为非明文 |
radio 单选框。必须将其设置为同一组(name的名字必须相同)
checkbox 复选框。必须将其设置为同一组(name的名字必须相同)
file 附件框、文件选取。用于文件上传。
hidden 隐藏域。数据可以通过表单发送至服务器，但是浏览器不会显示。
submit 提交按钮。用于控制表单提交数据。name属性一般不用设置，设置value属性将按钮起一个名字
reset 重置按钮。用于将所有的表单输入项恢复到默认状态
image 图形提交按钮
button 普通按钮。需要和JavaScript事件一起用

input的属性:
id为当前组件提供一个唯一的标识
type定义表单输入项input的组件类型详见下一个表格type属性值说明
name为当前组件提供一个名称服务器会根据当前的名称获取当前组件提供的数据，只要这个数据要进行提交，name属性必须设置！
value为当前组件设置值。value属性的设置策略：①文本框、密码框这样的表单输入项，可以不强制指定value，因为用户可以自由输入②单选框、复选框这样的表单输入项，必须强制指定value，因为用户无法输入，只能选择，如果不指定value，那么提交上去的只有on
checked设置单选框/复选框的默认选中状态（全选、反选）
readonly设置该标签的参数值只读，用户无法手动更改。但是数据是可以正常提交disabled设置该标签不可用（禁用），参数值无法更改，且参数值也无法提交
size组件的长度maxlength设置允许输入的最大的长度
placeholder输入框的提示信息，占位符，用于提示用户输入的规则、规范

(3)下拉列表标签(<select></select>)
select属性：name属性，提交服务器的依据，multiple属性：可以选择多个下拉列表
option:属性：value属性：下拉框默认的值，selected属性，默认选择

  <form action="#" method="get">
        <!--下拉框-->
        <select name="city" multiple>
            <option value="bj">北京</option>
            <option value="sh" selected>上海</option>
            <option value="gz" >广州</option>       
        </select>
        </form>

(4)文本域标签
属性：cols设置列数 rows设置行数
(5)按钮标签<button></button>
与input标签不同的是：button内部可以放置内容，比如文本或图像

html框架标签
<frameset></frameset>
frameset之间可以一直嵌套，它的内部用<frame>标签确定页面的位置
frameset不能和body共存，它有两个属性。rows和cols来进行分割页面
一般用百分比加*分割页面，
frame的属性：src指定页面的路径，norsize框架分割后禁止调整 name属性：该框架的名称用于和a标签target连用

<frameset rows="30%,*" border="10" bordercolor="red">
    <frame src="top.html"/ noresize>
    <frameset cols="30%,*">
        <frame src="left.html"/>
        <frame src="right.html" noresize name="right" />
    </frameset>
</frameset>

在这里插入图片描述
left页面：

star页面：

运行页面：

10.div和span标签
注：DIV是一个块级元素, 默认没有任何样式, 需要配合CSS一起使用才能发挥作用,用div+css可以制作出精美的网页;
区别：DIV是一个块级元素, 它包含的元素会自动换行, 单独占一行;
Span是一个行内元素, 它包含的元素不会自动换行, 有多少内容就占多少空间;

html5新特性
什么是html5?
HTML5 是最新的 HTML 标准。
HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
HTML5 拥有新的语义、图形以及多媒体元素。
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 语义标签，多媒体内容，更好的页面结构，更好的形式处理等

二.css负责修饰页面

（1）引入方式

1.行间引入

<div style="width: 200px; height: 200px; background-color: red;"></div>

2.内部引入（放在head标签）

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
     </style>

3.外部引入（放在head标签）
在外部创建css文件，使用link标签
在这里插入图片描述
一个小知识点：…/代表返回上一级

（2）选择器（类选择器，id选择器，标签选择器）

标签选择器
id选择器
类选择器

在这里插入图片描述

样式冲突问题
同级选择器：后覆盖前的原则
不同选择器：优先级大的选择器会被采用（标签 < 类class < id < 行间引入style）优先级从小到大

(3)常见的css样式

尺寸（width、height）
可以用像素（记得加px）,也可以用百分比（参照物是父标签）
边框的设置（样式，宽度，颜色）（上下左右四条边）
（1）样式
solid 实体线
dashed 虚线
dotted 点状线
double 双层边框
（2）宽度 px
（3）颜色 rgb 英语单词
（4）例如：

            border-left: 5px blue solid;
            border-top: 5px yellow dashed;
            border-right: 5px cyan dotted;
            border-bottom: 5px green double

如果四条边框一样的话，直接写border就行

边框圆角（左上，右上，右下，左下）顺时针方向
  原理：从每个角出发，向两条边出发相同的长度，然后形成一个弧度。
   四个角的效果不一致，分开设置的！
border-top-left-radius: 30px;
border-top-right-radius: 60px;
border-bottom-right-radius: 90px;
border-bottom-left-radius: 120px;
一样的话直接写border-radius:设置就行了
如果是写四个参数：依次是左上，右上，右下，左下
如果是写三个参数：依次是左上，    右上，左下，    右下
如果是写二个参数：依次是左上，右下;    右上，左下
如果是写一个参数：则是全部
记忆方法：根据角的对称性来记忆
文本样式
color：字体颜色：英文单词、十六进制代码、rgb(0_255，0255, 0~255)
font-size：字体大小
font-weight：字体加粗效果
bold值，可以实现字体加粗效果
font-style：字体样式
italic值，可以实现字体倾斜
font-family：字体，想要呈现不同的字体，首先你得保证浏览器内能有识别的字体库！
text-decoration：文本修饰
underline下划线、overline上划线、line-througn删除线、none无修饰
text-align：文本横向的对齐方式
默认值left左对齐、center居中对齐、right右对齐
letter-spacing：字符间距
line-height: 行高
单行文本行高与容器高度一致，可以实现垂直居中
多行文本行高的设置会影响行与行之间的距离，为了确保行间距产生，那么行高的值要大于字体大小
记忆方法：作用在单个字的（颜色，样式，大小，字体，粗细），作用在段落的（文本修饰，对齐方式，行高），作用在字与字之间的（字符间距）
背景样式
属性：
background-color：背景颜色
background-image：url(“路径”) 背景图片
background-size：背景图片的尺寸
background-repeat：背景重复效果
默认值为repeat，既有横向重复，也有纵向重复
repeat-x，只有横向重复
repeat-y，只有纵向重复
no-repeat，没有重复
background-position：背景图片的位置
background-position-x，设置背景图片的横向位置：left、center、right
background-position-y，设置背景图片的纵向位置：top、center、bottom
background-position：横向位置纵向位置
伪类选择器（主要是针对a标签设置的）

     /* 未被访问时 */
        a:link {
            color: red;
            text-decoration: none;
        }
        /* 访问过后 */
        a:visited {
            color: blue;
        }
        /* 鼠标悬停时 */
        a:hover {
            color: yellow;
            text-decoration: underline;
        }
        /* 正在访问 */
        a:active {
            color: springgreen;
        }

注意：顺序不能改变，不然无效。记忆方式（lvha）

盒模型
盒模型，是每个标签都具备的内容，组成部分，从外往内分别是：
（1）外边距margin
它一旦设置了外边距，在这个范围之内，不可以有别的元素内容。
它有四个方向依次是：上，左，下，右。
它的复合写法：和边框圆角一样（对称关系）
它的冲突问题：纵向冲突：取最大值作为两者之间的距离
横向冲突：取和作为两者之间的距离
它的距离问题：如果是父子级关系，子级的外边距是边框外侧到父级边框内侧的距离
如果是同级关系，外边距就是边框外侧到边框外侧的距离
（2）边框border
（3）内边距padding（同外边距）
（4）内容content

注意：
（1）、在盒模型的加持下，一个元素，现在显示的范围应该包含哪些内容？
横向：边框左侧+左侧的内填充padding+宽度width+右侧的内填充padding+边框右侧
纵向：边框上侧+上侧的内填充padding+高度height+底部的内填充padding+边框底侧

(2)、在盒模型的加持下，一个元素的作用范围包含哪些内容？
横向：边框左侧+左侧的内填充padding+宽度width+右侧的内填充padding+边框右侧+左右侧的外边距margin
纵向：边框上侧+上侧的内填充padding+高度height+底部的内填充padding+边框底侧+上下侧的外边距margin

浮动（float）
浮动的知识点：
(1)、浮动的值有两个：left和right。left左浮动，浮动元素从父级容器左侧开始横向排版，空间不足自动换行，right右浮动，浮动元素从父级容器右侧开始横向排版，空间不足自动换行！
(2)、我们使用浮动是需要用浮动带来的快捷布局方式，但是不能让浮动元素对其他正常的布局产生影响！因为浮动元素是脱离文档流的，属于一种漂浮状态！
(3)、我们需要清除浮动带来的影响，在浮动元素的同级以下，设置一个空的div，并为其设置clear这个css样式，取值有三种：left、right、both
left 只清除左浮动
right 只清除右浮动
both 左右浮动都清除
清除浮动后，浮动元素保留布局效果，垂直落入文档流，那么就占据空间！
定位（potion）
在设定了potion属性之后，可以用left、right、top、bottom这四个属性，来改变元素的位置
当元素设定了potion属性之后有两种方式
（1） relative(相对定位)
偏移的参照为自身原先的位置
left正值向右偏移、right正值向左偏移、top正值向下偏移、bottom正值向上偏移
（2）absolute（绝对定位）
偏移的参照为父级标签的位置
left正值，从父级左侧向右偏移
right正值，从父级右侧向左偏移
top正值，从父级顶部向下偏移
bottom正值，从父级底部向上偏移
注意：如果元素设置了定位属性为absolute，其父级或者父级的父级没有设置任何的定位属性，那么偏移参照物为浏览器的可视化窗口

三.JavaScript负责动态交互，js用于定义网页行为的，页面中的标签操作（增删改查），页面中的动态效果，页面中的数据交互等。

js的引入方式

行间引用

<button onclick="alert('我被点了~')">点我啊~</button>

内部引用
（1）使用<script></script>标签引入，可以放在头标签，body标签，body同级标签之后。
(2) 内部引用的时候要注意它的加载顺序，因为文档是按照从上往下加载的，如果放到头标签或者body标签内的最上面，就会出现还没有加载html的内容与结构，就加载了js脚本语言，没有效果，建议一般情况放在body标签内的最后，或者body同级标签的后面、
(3)如果一定要放在别的位置，推荐用windows.onload()等方法
外部引用
在外部创建js文件（位置和内部引用一样，注意加载顺序）
引用方式

 <script src="js/action.js">
        //alert("我执行了吗？"); 该代码书写了也不执行！
    </script>

注意：不要在外部引用的js标签书写js代码了，因为没有效果。可以尝试创建一个js文件引入，或者在新的<scritp></script>写js代码

js的组成部分

ECMAScript:js的基础语法，包含了基本的语句结构，变量，运算符，数组，事件，对象等，才能知道js代码如何书写。
DOM（document object model）文档对象模型，它的存在，让我们可以灵活的操作页面中的内容，操作文档中的标签和内容，就是所谓的增删改查
BOM（browser object model）浏览器对象模型，操作浏览对象

js的基础语法

js中变量的声明
js是一种弱类型语言，在js中声明变量统一用var关键字。
js的数据类型
获取js变量数据类型的方法为typeof(变量名)
常见的数据类型：
string 字符串类型
number 数值类型
boolean 布尔类型true or false
object 对象类型
undefined 未定义类型
null 空类型
function 方法、函数类型
打印的方式(两种)
（1）console.log();在控制台查看
（2）alert(); 其结果会在浏览器以弹窗的方式实现
运算符
赋值运算符：=
算术运算符：+ - * / % ++ –
复合运算符：+= -= *= /= %=
关系运算符：> < >= <= == != === !==
注意：==值相等就为真。===不仅值相等，类型也得相同
逻辑运算符：
&& 逻辑与并且 and
|| 逻辑或或者 or
！逻辑非取反 not
三元运算符：：? :
程序结构(和Java结构一样)
顺序结构、分支结构、循环结构
1. 数组结构
  （1）创建数组
  var arr = new Array(); 空数组
  var arr = new Array(默认长度) 默认长度的数组
  var arr = [元素列表]; 具有初值的数组
  （2）数组的特点
  在JS中，数组元素的类型可变
  在JS中，数组的长度可变
  （3）数组中的属性
  length 获取数组长度、元素个数
  （4）数组中你的常方法
  push();最后面添加
  unshift();最前面添加
  pop();删除最后第一个元素
  shift();删除第一个元素
2. 方法function对象
  （1）function 方法名(参数列表) {
  方法体
  }
  （2）var 方法名 = function(形式参数列表){方法体};
3. date日期对象
  （1）创建日期对象（var now = new Date() 获取当前时间）
  （2）日期对象常用的方法
            toLocaleString()：根据本地时间格式，把 Date 对象转换为字符串。
            getTime()：返回 1970 年 1 月 1 日至今的毫秒数
            getHours()：返回小时数。
            getMinutes()：返回分钟数。
            getSeconds()：返回秒数。

事件（表示js在网页中的行为，比如登录，注册按钮的点击，表单的提交，表单的校验等都需要用到事件）

事件的分类（鼠标事件，键盘事件，表单事件）
知识点先知：
（1）先获取标签对象
（2）js中为标签添加事件的语法格式：
标签对象.事件名称 = function() {
事件行为、要做什么
}
1.鼠标事件（点击事件、移入事件、移出事件）
（1）点击事件
div.onclick = function() {
}
（2）移入事件
div.onmouseover = function() {
}
（3）移出事件
div.onmouseout = function() {
}

键盘事件（抬起，按下，长按）
（1）按下事件
document.onkeydown = function() {
}
（2）抬起事件
document.onkeyup = function() {
console.log(“键盘抬起了”);
}
（3）长按事件
document.onkeypress = function() {
console.log(“按住不撒手”);
}
表单事件（聚焦，失焦）
（1）聚焦
unameInput.onfocus = function() {
this.value = “张二麻子”;
}
（2）失焦
unameInput.onblur = function() {
}

DOM操作（对页面的增删改查）

如何获取页面标签
（1）通过id获取
var div = document.getElementById(“d”);
div.style.color = “red”;
（2）通过类名获取，一组标签，不可以直接操作，想要操作先通过下标获取
var div = document.getElementsByClassName(“c”)[0];
div.style.color = “pink”;
（3）通过标签名获取，一组标签，不可以直接操作，想要操作先通过下标获取
var divs = document.getElementsByTagName(“div”);
for (var i = 0; i < divs.length; i++) {
divs[i].style.fontSize = “30px”;
}
（4）通过表单元素数据关键字name属性的值来获取标签，一组标签
该方法专门用于获取表单标签input、select、textarea，因为只有它们三个有name属性！
var usernameInput = document.getElementsByName(“username”)[0];
usernameInput.value = “王二驴子”;
改变标签（可以改变标签的css样式，标签的文本内容，标签的行间属性）
（1）css样式的修改
获取div对象
div.style.fonSize=“50px”;
(2)文本内容的修改
先知：如果是表单标签需要使用value属性
如果是普通标签需要使用innerText或者innerHTML属性
innerText只能处理纯文本
innerHtml既可以处理纯文本，还可以解析html结构
获取对象
i.value=“王二麻子”
（3）行间属性的修改
标签对象.属性名=“值”
标签对象.setAttribute(“属性名”，“属性值”)

DOM对象模型

背景故事：当页面被加载初始化时，会在内存中创建一个全局的对象，来描述当前窗口的属性或者行为，这个对象称为浏览器对象模型。
BOM中有一个最核心的对象window，代表浏览器的窗口，这个窗口分为6大子模块
1. document 文档对象
2. frames HTML页面的框架对象
3. screen 屏幕对象
4. history 浏览历史对象
5. location 窗口位置对象
6. navigator 导航对象，获取到浏览器的相关信息
注意：所有的浏览器都支持window对象，而且我们在使用window的子模块时，可以省略window的书写

定时器

定时器有两种，单次定时器和循环定时器

单次定时器
单次定时器最大的存在意义：可以让方法或者脚本功能延迟执行！
setTimeout(方法, 延迟时间单位是毫秒)
方法会在指定的延迟时间到达后，执行！执行一次
2.循环定时器
循环定时器最大的存在意思：可以让方法或者脚本功能反复执行！
setInterval(方法，方法执行的间隔时间单位毫秒)
每隔指定的时间，方法执行一次
该方法除了开启循环定时器之外，还返回了定时器对象
注意：clearInterval(定时器对象) 可以关闭循环定时器

窗口的弹窗（alert(),confirm(),prompt()）

1.alert()
窗口的弹窗
2. confirm
确认框返回值为布尔值
如果为true，代表点击了确认按钮
如果为false，代表点击了取消按钮
3. prompt()
它有两个参数，
（1）提示文本
（2）输入框中的默认值（类似于占位符）
它也有返回值
点击确定返回输入的文本内容
点击取消返回null

四. jQuery的使用

一.jQuery的认知

1.什么是jQuery
jQuery是一个简洁，快速的js框架，用更少的代码做更多的事情，提供了一种你简单的js计模式，优化了BOM操作，事件处理，动画设计与Ajax交互
2. jQuery的引入(和js的引入一样注意文档加载的顺序)
知识点先知：在想要书写jQuery代码的html页面内，使用script标签来导入外界的jQuery文件，导入后，才能书写jQuery的代码

 <script src="js/jquery-3.6.0.js"></script>

jQuery的核心对象
知识点先知：
jQuery的核心对象：$ 或者 jQuery
$(“选择器”) ==> jQuery对象！
核心对象本质上是个方法，该方法支持传递选择器，来得到对应的标签，返回值是jQuery对象！
（1）jQuery语言的特点
不论传递什么类型的选择器，jQuery对象中不论有几个标签，都可以直接操作这个对象，因为内置了隐式循环

4.jQuery中的文档加载（两种）
（1）$(function() {
$(“div”).css(“font-size”, “30px”);
})

（2）$(document).ready(function() {
$(“div”).css(“font-weight”, “bold”);
})
注意：js中的window.onload 与 jQuery中文档加载的方法有什么区别？
(1)jQuery中文档加载的方式有两种，而js中只有一种！
(2)、js中的window.onload只能执行一次，书写多遍，也只执行一次！但是jQuery中文档加载的方式可以执行多次！
(3)、window.onload必须等到页面内所有元素都加载完毕后才能执行
jQuery中的方式，只需要等到HTML的DOM结构加载完毕时就可以执行
所以jQuery加载的时间点要比js中加载的时间点早

jQuery对象与js对象的转换
知识点先知：jQuery的语法(操作方法)只有jQuery对象能调用，换句话说就是，jQuery对象有专门的操作方法，js对象有专门的操作方法，这两者是不能混着用的
（1）js对象转变为jQuery对象
得到js对象
var div1 = document.getElementsByTagName("div")[0];
转化为jQuery对象
var divs = $("div");
(2)jQuery对象转化为js对象（两种方式）
（1） var div1 = divs[0];
（2）var div2 = divs.get(0);

二. jQuery强大的css选择器

基本选择器（标签、id、类class、*通配选择器）
$("#d").css(“color”, “red”);
//类class选择器
$(".c").css(“font-size”, “20px”);
//标签选择器
$(“div”).css(“font-weight”, “bold”);
//通配选择器
$("").css(“text-align”, “center”);
层级选择器（后代选择器，子代选择器，相邻兄弟选择器，一般兄弟选择器）
后代选择器 parent child，使用空格隔开。获取到父级元素下所有的child(儿子、孙子、曾孙子、…)(祖孙关系)
子代选择器 parent > child，用>隔开。获取到父级下的子元素(儿子)(父子关系)
相邻兄弟选择器 prev + next，使用+隔开，获取到prev元素同级以下紧挨着的next元素(兄弟关系)
一般兄弟选择器 prev ~ next，使用~隔开，获取到prev元素同级以下所有的next元素(兄弟关系)
过滤选择器
可以在一组元素中找到某些特定位置上的元素，因为过滤选择器中可以用到下标！
:first 第一个
:last 最后一个
:eq(下标) 指定索引下的
:gt(下标) 大于指定索引下的所有
:lt(下标) 小于指定索引下的所有
:odd 奇数下标下的所以
:even 偶数下标下的所有
:not() 除去括号内的

<script>
  //获取第一个div
    $("div:first").css("color", "red");
    //获取最后一个div
    $("div:last").css("color", "pink");
    //获取指定下标下的div，第四个
    $("div:eq(3)").css("color", "yellow");
    //获取下标小于指定下标的div
    $("div:lt(3)").css("font-size", "25px");
    //获取下标大于指定下标的div
    $("div:gt(3)").css("font-size", "35px");
    //奇数下标的
    $("div:odd").css("font-weight", "bold");
    //偶数下标的
    $("div:even").css("font-style", "italic");
    //去除
    $("div:not(.c)").css("letter-spacing", "10px"); 
    </script>

表单选择器（基本表单选择器，表单过滤选择器）
基本表单选择器
:input 所有的input元素
:text 所有类型为text的input元素
$(“input:text”) 找所有类型为text文本输入框的input标签
:password
:checkbox
:radio
…
表单过滤选择器
:checked 选择被选中的单选框或者复选框
:selected 选择被选中的option下拉选项
:enabled 选择可用的表单元素
:disabled 选择禁用的表单元素
特殊选择器
this是js对象，如果我们想要在jQuery中使用this的话，需要用$(this)来表示

三. jQuery下的DOM操作

样式操作
1. css()
  css(“样式名称”, “值”) 一个样式赋值
  css({
  “样式名称”: “值”,
  “样式名称”: “值”,
  … 最后一组不要加逗号！
  }) 一次性改变多个样式

<script>
       $("div").css("color", "red");
   $("div").css({
       "font-size": "30px",
       "font-weight": "bold"
   })
   </script>

 2.  类名操作
        addClass()  添加类名
        removeClass()   删除类名
        toggleClass()   切换类型，有则删，无则加
        类名写在双引号中，多个类名空格隔开！

    <script>
   $("div").addClass("italic spacing");
   $("div").removeClass("italic");
   $("div").toggleClass("italic");
   </script>

属性操作
jQuery中操作标签行间属性的方法为：prop()；
prop(“行间属性名”) 获取行间属性的值
prop(“行间属性名”, “行间属性值”) 赋值、修改行间属性
内容操作
Query中操作标签文本内容的方法
表单元素标签：val()
普通标签：text()、html()
以上三个方法如果在使用不传参数，那就是在取值，获取文本内容
如果传递了字符串类型的参数，则为赋值或者修改

<script>
console.log($("div").text());
    console.log($("div").html());
    //修改
    $("div").text("<a href='http://www.baidu.com'>百度</a>");
    $("div").html("<a href='http://www.baidu.com'>百度</a>");
    </script>

文档操作
（1）添加操作
先创建要添加的标签，然后用jQuery对象添加
var a = $(“html结构”);
var a = $(“<a href='http://www.baidu.com'>百度”);
然后用方法把jQuery对象添加进去到标签的各个地方
内部添加的方法
A,append(B); B.appendTo(A); 把B添加到A内部的最后面
A,prepend(B); B.prependTo(A); 把B添加到A内部的最前面
外部添加的方法
A.after(B); B.insertAfter(A)；在A同级以下紧挨着的位置添加B;
A.before(B); A.insertBefore(B); 在A同级以上紧挨着的地方添加B；
(2)删除操作
删除操作的方法有三个
empty();它的本质是清空文本内容而不是删除
remove(); 它的作用是删除一切删除内容标签结构（“支持标签传递”）
detach(); 它的作用的保留结构如果再添加回标签会保留它的结构（例如点击事件什么的）
jQuery的遍历操作
有两种方式
(1) jQuery对象集合.each(function(index,element){
遍历的代码
})
index 是下标索引 element是获取到的每个js对象
(2)$.each(jQuery对象集合,function(){
遍历的代码
})
index 是下标索引 element是获取到的每个js对象

四.jQuery中动画效果

根据控制属性实现动画效果

通过改变标签的height,width,不透明度opacity 这三个css样式来实现动画效果
三个方法：show(),hide(),toggle();
其中togle();是切换show()和hide()方法中的动画效果
通过改变标签的不透明度opacity来实现动画效果
三个方法：fadeIn()淡入显示 fadeOut()淡出显示 fadeToggle();
fadeToggle():是切换fadeIn()和fadeOut()的
通过改变标签的height来实现动画效果
三个方法：slideDown();slideUp(); slideToggle();
slideToggle();是切换slideDown();和slideUp方法的；

自定义动画

用于创建自定义动画的函数
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象的中的每一个属性都可以表示一个可变化的样式属性。
所有的属性都必须用驼峰形式比如用marginLeft代替margin-left
函数animate(params,[speed],[fn])
参数解析
1.params:一组包含作为动画属性和终值的样式属性和乃其值的集合
2.speed：三种预定速度之一的字符串（”slow“,“normal”,or"fast"）或表示动画时长的毫秒数值（如：1000）
3.fn:在动画完成时执行的函数，每个元素执行一次

 <script>
    $("div").click(function() {
        /*
            animate方法，自定义动画，需要给定动画效果
            动画效果的给定，就是设定样式的改变
        */
        $(this).animate({
            "left": "500px",
            "top": "100px"
        }, 2000, function() {
            $(this).hide(1000);
        })
    })
</script>

五.jQuery表单校验插件validation

针对表单校验的问题，jQuery提供了一个插件，叫做validation，这个插件内置了许多默认的校验规则，我们针对某些常见的或者通用的校验内容，可以直接给定其提供的校验规则，而不需要再书写额外的校验代码，提高了开发效率！

使用步骤
（1）下载
下载地址：
https://github.com/jquery-validation/jquery-validation/releases/download/1.17.0/jquery-validation-1.17.0.zip
帮助文档地址：
https://jqueryvalidation.org/documentation/
（2）查看下载后的目录结构

（3）如何使用该校验插件呢？
导入jQuery文件：jquery-3.1.1.js
该文件要优先导入，因为核心的校验脚本中的语法格式是jQuery
核心的校验脚本js文件：jquery.validate.js
语言包：messages_zh.js
为了能够让校验的结果以中文形式显示，我们需要导入中文的语言包
（4）使用插件中提供的校验规则，完成数据校验
我们首先需要知道有哪些常见的校验规则：

校验的第一种方式，将插件中提供的规则，直接书写在标签的行间属性中！
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单校验插件的使用方式1</title>
	</head>
	<body>
		<form action="#" method="get">
			用户名：<input type="text" name="username" id="username"
				 placeholder="请输入6~15长度的字符串" required="true"
				 rangelength="[6, 15]" /><br />
			密码：<input type="password" name="password" id="password"
				placeholder="请输入密码，最小长度为6位" required="true"
				minlength="6" /><br />
			确认密码：<input type="password" name="cpwd" id="cpwd"
				placeholder="请再次输入密码" required="true"
				equalTo="#password" /><br />
			邮箱：<input type="text" name="email" id="email"
				 placeholder="请输入电子邮箱" required="true"
				 email="email" /><br />
			生日：<input type="text" name="birthday" id="birthday"
				placeholder="请输入生日" required="true"
				dateISO="yyyy-MM-dd" /><br />
			<input type="submit" value="提交" />
		</form>
	</body>
	<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
	<script type="text/javascript" src="js/jquery.validate.js"></script>
	<script type="text/javascript" src="js/messages_zh.js"></script>
	<script type="text/javascript">
		/*
		 	为了让添加在表单form中的校验规则生效，我们需要让表单标签form
		 	执行validate()校验方法！
		 */
		$("form").validate();
	</script>
</html>

校验方式的第二种，不在表单内部的标签中添加校验规则，将规则及校验的显示文本都在js内部填写！我们可以自定义校验提示文本，而且可以去指定提示文本的样式！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单校验插件的使用方式2</title>
		<style type="text/css">
			.e {
				color: red;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<form action="#" method="get">
			用户名：<input type="text" name="username" id="username"
				 placeholder="请输入6~15长度的字符串" /><br />
			密码：<input type="password" name="password" id="password"
				placeholder="请输入密码，最小长度为6位" /><br />
			确认密码：<input type="password" name="cpwd" id="cpwd"
				placeholder="请再次输入密码" /><br />
			邮箱：<input type="text" name="email" id="email"
				 placeholder="请输入电子邮箱" /><br />
			生日：<input type="text" name="birthday" id="birthday"
				placeholder="请输入生日" /><br />
			<input type="submit" value="提交" />
		</form>
	</body>
	<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
	<script type="text/javascript" src="js/jquery.validate.js"></script>
	<script type="text/javascript" src="js/messages_zh.js"></script>
	<script type="text/javascript">
		/*
		 	为了让添加在表单form中的校验规则生效，我们需要让表单标签form
		 	执行validate()校验方法！
		 */
		$("form").validate({
			//表示规则的关键字rules
			rules: {
				"username": {
					required: true,
					rangelength: [6, 15]
				},
				"password": {
					required: true,
					minlength: 6
				},
				"cpwd": {
					required: true,
					equalTo: "#password"
				},
				"email": {
					required: true,
					email: "email"
				},
				"birthday": {
					required: true,
					dateISO: "yyyy-MM-dd"
				}
			},
			//表示文本提示的关键字messages
			messages: {
				"username": {
					required: "用户名不能为空",
					rangelength: "用户名的长度为6~15位"
				},
				"password": {
					required: "密码不能为空",
					minlength: "密码长度最小为6位"
				},
				"cpwd": {
					required: "确认密码不能为空",
					equalTo: "两次密码不一致"
				},
				"email": {
					required: "邮箱不能为空",
					email: "邮箱格式不正确"
				},
				"birthday": {
					required: "生日不能为空",
					dateISO: "生日格式不正确"
				}
			},
			//表示文本提示样式的关键字errorClass
			errorClass: "e"
		});
	</script>
</html>