HTML阶段个人总结_html click行内可以console吗-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44203113/article/details/128396192

个人觉得学习html主要分为学习两部分；一部分是静态页面另一部分是动态页面。静态页面：学习各种各样的标签通过标签来进行页面的布局，使页面达到我们想要的效果。动态页面：学习各种的选择器来对不同的标签进行处理，使页面相对于静态网页更加生动；

静态网页

标签	用途
< head >< /head>	所有的头部标签元素都往里面写
< title>文档标题< /title>	网页的标题
< style>< /style>	通过样式来改变网页的布局等
< h1 >标题< /h1>	定义文章标题(可通过数值大小调整标题级数)
< p >文章段落< p>	写文章段落
< a href=“url”>链接文本< /a>	一个超链接
< img src=“图片地址”>	加载图片
< table>< /table>	定义表格
< tr></ tr>	定义表格的行
< td></ td>	定义表格的列
< ul>< /ul>	定义无序列表
< ol>< /ol>	定义有序列表
< li>< /li>	定义列表项
< div> < /div>	定义了文档的区域，块级
< span>< /span>	用来组合文档中的行内元素
< form>< /form>	定义供用户输入的表单
< input>< /input>	定义输入域
< textarea>< /textarea>	定义文本域
< button>< /button>	定义一个点击按钮

还有许多的html标签在这里只列出常用的标签

属性

什么是标签的属性？一个标签他有他的默认属性比如p标签里面的文字的大小字体颜色这些都是他的属性。我们可以通过标签的属性进行更改其样式，使页面更加好看。
属性可以在标签里面更改如< p style=“font-size: 16px;”>< /p>这里更改了怕标签中的字体大小改变成16px。
还可以在< style>标签中通过选择器进行修改
< style>
p{
font-size: 16px;
}
< /style>

选择器

当在html中想改变标签的样式的时候会在< style >中改变其样式，但是我们得先告诉html我们要选择谁要改变谁这时我们就得用到选择器

五个基本选择器

一. *{}

匹配html中的所有元素，一般用来去除内外边距的

二.标签选择器,标签{}

匹配html中的所有这类标签

三.id选择器，#id名{}

匹配被id修饰过的且id名为它的标签，id名有且只有一个；id名不能相同

四.类选择器，.class名{}

匹配被class修饰过的且class名为它的所有标签，可以是多个被class修饰的class名

五.派生选择器：根据上下文来确定标签，A选择器+空格+B选择器

盒子模型

什么是盒子模型？

盒子模型

html中的各个元素都类似一个一个的盒子里面的物品，但是却叫做css盒模型，是因为css盒模型像一个盒子，把各种html元素包起来，将html元素进行封装，以便于网页布局与排版
margin：盒子的外边距，border距离另一个盒子的距离是10px
border：盒子的边，border边的大小是2px
padding：盒子的内边距，border边距距离盒子中的内容10px
只有100*100才是盒子模型中的真正内容

JavaScript

是一门面向对象、轻量级、弱类型的解释型脚本语言。
弱类型：没有数据类型的限制，变量甚至可以不同定义就能使用。
解释型：无需编译，通过解释器解释运行。浏览器就是一个JS解释器。
script脚本：按指令顺序执行。

JS的作用

HTML用于定义页面中的内容
CSS用于控制HTML元素的外观和样式
JS用来操作HTML元素
HTML+CSS+JS组成前端基本三要素。

JS写在哪里

1.写在某个标签的某个事件中

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body >
<!-- 通过提示框输出alert("输出内容") -->
<button onclick="alert('Hello JS!')">点击1</button>
<!-- 通过控制台输出console.log("输出内容") -->
<button onclick="console.log('Hello JS!')">点击2</button>
<!-- 通过新页面输出document.write("输出内容") -->
<button onclick="document.write('Hello JS!')">点击3</button>
</body>
</html>

2.写在< script>标签中

该标签是一个双标签，可以放在页面的任何位置，通常放在head标签中或body标签结束之前

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 可以将js代码写在这里 -->
<script>
//js代码
</script>
</head>
<body >
<!-- 建议将js代码写在这里 -->
<script >
//js代码
</script>
</body>
</html>

3.写到一个独立的.js文件中，再通过script标签导入

JS中的输出语句

1.弹警告框

alert(字符串或变量);

2.控制台输出

console.log(字符串或变量);

3.打印在新页面中

document.write(字符串或变量);

JS的组成

1.ECMAScript

简称为ES，是JS的标准，也是JS的核心语法。
包含了数据类型、定义变量、流程控制语句等语法内容。

2.BOM

浏览器对象模型

3.DOM

文档对象模型

ECMAScript核心语法

数据类型

原始类型

js中的原始类型	说明
数值型number	整数，小数都是数值型
字符型string	用单引号或双引号引起来的都是字符串
布尔型boolean	true/false
未定义undefined	当某个变量没有声明或没有值时
空null	某个引用类型变量通过null设置为空

引用类型

如对象、数组、函数等都是引用类型

定义变量

var/let 变量名;
var name;
var age;
let sex;

和Java不一样这是html自动识别其类别给它的值是什么类型变量就是什么类型

运算符

算数

+ - * / %
两端如果有一端是字符串，作为拼接使用。
两端如果都是数值，作为相加使用。
除+外，其余符号都可以计算字符串。

关系

> < >= <=
用法同java，结果为boolean
==
比较值是否相同，不比较数据类型，如"123"==123结果为true
===
比较值和数据类型是否相同，如"123"===123结果为false
!=
比较值是否不同，如"123"!=123结果为false
!==
比较值和数据类型是否不同，如"123"!==123结果为true

逻辑

&& || !
用法同java

赋值和复合赋值

= += -= *= /= %=
a*=b+c相当于a=a*(b+c)
符号两端当做整体运算后赋值给符号左侧变量

自增自减

++ --
符号在前，先+1或-1后使用
符号在后，先使用后+1或-1
如果独立成行，都为+1或-1
var i=10;
var res=i-- - --i;
//res为10-8=2,i最终为8

条件

表达式1?表达式2:表达式3
判断表达式1，结果为true执行表达式2，结果为false执行表达式3

条件语句

if语句

js中的if语句条件可以是boolean值也可以是一个数字(0false,非0true)
同java一样

switch语句

//可以是任意类型
var op;
switch(op){
case "a":
break;
case 123:
break;
case true:
break;
default:
}

与java中不同的是，小括号中没有数据类型的限制，不同的case后也可以写不同类型的数据。
没有break，会继续执行后续case后的内容，直到break或没有代码，如果没有任何case满足，执行
default。

循环

while

do-while

for

continue和break

都同java一样

JS中的本地对象

数组Array

JS中的数组类似于Java中的ArrayList，
可以保存不同类型的数据，数组大小可变。

定义数组

var 数组名 = new Array();
var 数组名 = [];

数组遍历

// length属性可以获取数组长度
// 循环所有下标，没有赋值元素的输出undefined
for (var i = 0; i < list1.length; i++) {
console.log(list1[i]);
}
// 增强for循环，获取保存了数据的下标
for(var index in list1){
// 通过下标获取元素
console.log(list1[index]);
}

数组初始化

var 数组名 = new Array(元素1,元素2...);
var 数组名 = [元素1,元素2...];

常用方法

方法名	作用	返回值
sort（）	将数组中的元素进行升序排序	排序后的数组
reverse（）	将数组中的元素倒序保存	倒序后的数组
pop（）	移除数组中的最后一个元素	被移除的元素
push（元素）	添加元素到数组末尾	最新的数组长度
shift()	移除数组中的第一个元素	被移除的元素
unshift(元素)	添加元素到数组开头	最新的数组长度
fill(元素)	使用指定元素填充数组	填充后的数组
splice(index)	从指定索引开始分割数组，方法调用后，数组为剩余元素的数组	截取到的元素集合
splice(index,length)	从指定索引开始截取指定长度的数组，方法调用后，数组为剩余元素的数组	截取到的元素集合

以上方法在调用后，都会影响原数组

正则表达式

正则表达式对字符串匹配（规定字符串的格式，比如长度，允许出现的字符。。。）的工具，一般用于表单输入数据的校验

正则表达式的定义和使用

两种定义方式：var reg1 = new RegExp(“hqyj”);
var reg2 = /hqyj/;
校验字符串使用test方法，字符串跟正则表达式匹配，返回true, 否则返回false
reg2.test(“hqyj”);

正则表达式的规则：

方括号

[1-9], [a-z] 范围
[abc], [135] 列举
（130|151|189）组合，多选

元字符

\d 数字
\w 字符
. 数字、字符、符号
\s 空格
\n 换行
\r 回车
\t 制表符
\ 转义符， . 匹配点比如url中点 www.com.cn
^ 以什么开头
$ 以什么结尾

量词

一个或多个

0个或多个
? 0个或1个
{n} n个
{m, n} m到n个
{m, } m到任意个

修饰符

i 忽略大小写
g 全局匹配（匹配字符串的每一个符合规则的字符）

<script>
//正则表达式定义
var reg1 = new RegExp("hqyj");
var reg2 = /hqyj/;
//正则表达式用于校验（匹配）字符串,返回结果为true说明字符串符合正则表达式的格式要
求，否则返回false
var result = reg1.test("hqyj")
result = reg2.test("hqyj");
console.log(result);
result = reg2.test("javascript");
console.log(result);
//匹配数字
var reg3 = /[0-9]/;
console.log(reg3.test("0123"));
//只要有数字，就算匹配成功
console.log(reg3.test("01a23")); //true
//^以什么开头，$以什么结束。 整个字符串都要是数字
reg3 = /^[0-9]$/;
console.log(reg3.test("01a23")); //false
//\d等效于[0-9], 都是匹配数字
reg3 = /\d/;
console.log(reg3.test("0123"));
//匹配字母
var reg4 = /[a-z]/; //匹配小写字母
console.log(reg4.test("dflkakf"));
reg4 = /[A-Z]/; // 匹配大写字母
console.log(reg4.test("FDSAFSA"));
reg4 = /[A-z]/; // 匹配所有字母
console.log(reg4.test("FDSfsaAFSA"));
//\w等效于[A-z]
reg4 = /\w/; // 匹配所有字母
console.log(reg4.test("FDSfsaAFSA"));
//匹配部分数字或字符
var reg5 = /[135]/;
console.log(reg5.test("1"));
reg5 = /[xyz]/;
console.log(reg5.test("a"));
//匹配次数（量词）
var reg6 = /[8]*/; //*代表前面的字符可以出现0次或多次
console.log(reg6.test("8"));//true
console.log(reg6.test("888888888"));//true
console.log(reg6.test(""));//true
reg6 = /[8]+/;//+代表前面的字符至少出现1次或多次
console.log(reg6.test("8"));//true
console.log(reg6.test("88888"));//true
console.log(reg6.test(""));//false
reg6 = /[8]?/;
console.log(reg6.test("8"));//true
console.log(reg6.test(""));//true
console.log(reg6.test("88"));//true
reg6 = /[8]{6}/;//大括号里面一个数字指定固定次数
console.log(reg6.test("888888"));//true
console.log(reg6.test("88888")); //false
console.log(reg6.test("8888888"));
reg6 = /[8]{3,5}/; //大括号两个数字，用逗号分割，表示出现字数范围
console.log(reg6.test("888"));//true
console.log(reg6.test("8888")); //true
console.log(reg6.test("88888")); //true
console.log(reg6.test("88")); //false
console.log(reg6.test("888888")); //true
reg6 = /[8]{2,}/; //大括号后面一个数字省略， 2到无限次
console.log(reg6.test("88")); //true
console.log(reg6.test("8888888888888888")); //true
console.log(reg6.test("8")); //false
//例子：QQ号码的正则表达式
/*
全是数字
最少5位，最多10位
第一位不能为0（只能是1到9）
*/
var regqq = /^[1-9]{1}\d{4,9}$/;
console.log(regqq.test("1818148"));
console.log(regqq.test("18181"));
console.log(regqq.test("1818")); //false
console.log(regqq.test("181814845665"));//false
console.log(regqq.test("1818148x")); //false
console.log(regqq.test("a1818148")); //false
console.log(regqq.test("01818148")); //false
//小括号括起来，中间有|分割，这种表示或者（多选一）
var reg7 = /^(130|151|189)/;
console.log(reg7.test("130"));
console.log(reg7.test("151"));
console.log(reg7.test("189"));
console.log(reg7.test("1130")); //false
console.log(reg7.test("189000000"));
//例子：手机号码的正则表达式
/*
11位的数字
只能以（130, 151, 189...）打头
*/
Math
floor() 向下取整
ceil() 向上取整
round() 四舍五入
abs() 取绝对值
random() 产生[0, 1)的随机数
产生随机数的公式
[m, n]的随机数： Math.floor(Math.random() * (n - m + 1)) + m
[m, n) 的随机数：Math.floor(Math.random() * (n - m)) + m
var phoneReg=/^(130|151|189){1}\d{8}$/;
//var phoneReg=/^1(3|4|5|6|7|8|9){1}\d{9}$/;
console.log(phoneReg.test("15145876325")); //true
console.log(phoneReg.test("15045876325"));//false
//其他元字符
// . 除了换行和结束符之外的其他字符（数字，字母，符号）
// \s 空格
// \n 换行符
// \r 回车
// \t 制表符
// \ 转义符
//修饰符
var reg8 = /hqyj/i; //正则表达式后面的i, 表示忽略大小写
console.log(reg8.test("hqyj")); //true
console.log(reg8.test("HQYJ")); //true
reg8 = /ba/g; //正则表达式后面的g，表示全局匹配（每一次匹配都从上一次正确匹配的
位置开始向后搜索）
console.log(reg8.test("baxy")); //true
console.log(reg8.test("baxy")); //false
//字符串的replace方法使用正则表达式
// 去掉字符串中连续的两位数字
var str = "abcd45jkfdjfkldsj89jfkdsljalfks90fdjsk";
var reg9 = /\d{2}/g; //替换字符串中所有的两位数字
console.log(str.replace(reg9, ""));
</script>

函数 function

一段代码的，能够完成特定的功能，可以被重复的使用

自定义函数

函数的定义

function 函数名(参数1，参数2…){
//代码
return 返回值； //函数不需要返回值，省略return语句
}

函数调用

对象.函数名(参数);

js默认的全局函数

parseInt（）
parseFloat()
isNaN()
eval()

//js自带的全局函数
//字符串转整数
console.log(parseInt("85"));
console.log(parseInt("abc")); //返回结果为NaN （not a number）
console.log(parseInt("99abc"));//99, 数字开头的字符串能把前面的数字转为整数，后面部分的字
符自动丢弃
// 字符串转小数
console.log(parseFloat("3.14"));
console.log(parseFloat("a.14"));// NaN
console.log(isNaN(parseFloat("a.14")));// true, 说明字符不是数字，转换失败
console.log(parseFloat("3.1515927").toFixed(2));//toFixed()对小数保留小数的位数
console.log(parseFloat("3.14xyz"));//3.14
// eval, 把字符串中能执行的内容当语句执行
console.log(eval("3 + 2")); //5

window对象

表示浏览器窗口对象，可以获取浏览器相关信息，调用浏览器的某些行为

常用属性和行为	作用
window.innerWidth	获取当前浏览器窗口可视区域宽度
window.innerHeight	获取当前浏览器窗口可视区域高度
window.screen	获取当前页面screen对象，保存了屏幕相关信息
window.location	获取当前页面location对象，保存了浏览器地址栏相关信息
window.history	获取当前页面history对象，保存了浏览器历史记录相关信息
window.alert()	警告框
window.prompt()	输入框
window.confirm()	确认框
var wid=window.open()	弹出新窗口，返回值为弹出的窗口对象
wid.close()/window.close()	关闭窗口。如果通过open()方法的返回值调用，关闭打开的新窗口；如果通过window调用，关闭当窗口
var myTimeout=window.setTimeout(函数,毫秒)	设置延时生效，在指定毫秒后执行一次指定函数。通常是一个匿名函数
window.clearTimeout(myTmeout)	取消指定的延时生效
var myInterval=window.setInterval(函数,毫秒)	设置重复生效，在指定的毫秒后重复执行指定函数，常是一个匿名函数
window.clearInterval(myInterval)	取消指定的重复生效

screen对象

用于获取屏幕相关信息

属性	作用
[window.]screen.width	获取当前屏幕设置的宽度
[window.]screen.height	获取当前屏幕设置的高度
[window.]screen.availWidth	获取当前屏幕除任务栏之外的宽度
[window.]screen.availHeight	获取当前屏幕除任务栏之外的高度

history对象

方法	作用
[window.]history.back()/go(-1)	回退
[window.]history.forward()/go(1)	前进

DOM

Document Object Model
文档对象模型

每个页面都是一个文档树document tree
页面中的每个标签都是这个树的节点node
根节点是html
document对象是DOM中的核心对象，表示当前页对象
DOM用于操作(获取设置内容、更改样式等)页面中节点
标签= =元素 == 节点= =DOM对象

获取节点

获取节点的方式	作用
document.getElementById(“某个标签的id名”)	根据id名获取页面中唯一的节点。返回获取的节点对象。
document.getElementsByClassName(“某些标签的class名”)	根据class名获取页面中对应的所有节点。返回获取的节点数组。
document.getElementsByTagName(“标签名”);	根据标签名获取页面中对应的所有节点。返回获取的节点数组。
document.getElementsByName(“标签的name属性值”)	根据标签的name属性值获取对应的所有节点。返回获取的节点数组。

获取设置节点文本

innerText

读取或设置某个节点的内容(双标签中的内容)，无论设置什么内容都会原样显示

innerHTML

读取或设置某个节点的内容(双标签中的内容)，设置的内容中如果有HTML元素会识别HTML元素

事件

某个节点的某个行为

给节点添加事件

<script>
节点.事件 = function(){
//触发事件时执行的内容
}
</script>
<button onclick="函数(实参)">
按钮
</button>
<script>
functon test(){
//xxxx
}
</script>

常用事件

常用事件	作用
onclick	鼠标单击
ondblclick	鼠标双击
onfocus	文本框聚焦
onblur	文本框失去焦点
onmouseenter/onmouseover	鼠标移入
onmouseout/onmouseleave	鼠标移出
onmousemove	鼠标移动
onmousewheel	鼠标滚轮滚动
onmousedown/onmouseup	鼠标按下/松开
onsubmit	表单提交
onchange	改变

event对象

在某个函数中传入一个参数，通常为e或event，就可以监听对应的事件。
如在onmouse相关的事件中，加入参数event，就能监听鼠标状态。
在onkey相关的事件中加入参数event，就能监听键盘状态等。

节点.事件=function(event){
}

event对象常用属性和方法	作用
event.clientX;	获取当前鼠标水平位置
event.clientY;	获取当前鼠标垂直位置
event.preventDefault();	阻止默认事件
event.stopPropagation();	阻止事件冒泡

事件冒泡

文档中节点如果有重叠的情况，并且这些重叠的节点都有相同的事件。
默认在子节点触发事件时，父节点也会触发事件，这种情况称为事件冒泡。
通过event.stopPropagation();阻止事件冒泡发生。

jQuery

jQuery是一个轻量级的javascript函数库，封装了很多javascript中的内容。jQuery的本质依然是javacript(一个.js文件)。
要想使用jquery要先下载它的js文件，然后导入文档当中

<script src="jQuery.js文件路径"></script>

jQuery对象和js对象(dom对象)

在js中，使用document.getElementXXX获取到的是dom对象。

dom对象只能使用如.style、.innerText等属性修改样式或内容，不能使用jQuery对象中的属性或函数。

在jQuery中，使用jQuery选择器获取到的是jQuery对象。

jQuery对象只能使用jQuery中的属性或函数，不能使用dom对象中的属性或函数。

通常在jQuery对象命名时，使用$符号作为前缀，方便区分jQuery对象和dom对象。

两者之间转换

jQuery对象转换为dom对象

jQuery对象[0]
jQuery对象.get(0)

dom对象转换为jQuery

$(dom对象)

jQuery中的选择器

基本选择器

基本选择器
$(“#id名”)	id选择器，根据id名获取某个节点
$(“.class名”)	class选择器，根据class名获取某些节点
$(“标签名”)	元素选择器，根据标签名获取某些节点
$(“#id名，.class名，标签名”)	群组选择器，根据指定的选择器获取所有满足的节点
$(“a.test”)	获取class名为test的a标签
$(“a#test”)	获取id名为test的a标签
$(“*”)	获取所有节点

层次选择器

层次选择器
$(“#test空格*”)	得到id为test节点中的所有子节点。
$(“#test空格div”)	得到id为test节点中的所有div子节点。
$(“#test>*”)	得到id为test节点中的第一层所有子节点。
$(“#test>.test”)	得到id为test节点中的第一层class为test的子节点
$(“#test+p”)	得到id为test节点后紧邻的第一个p节点
$(“#test~p”)	得到id为test节点后同级的p节点

过滤选择器

普通过滤

$(“选择器:特定单词”)

普通过滤
$(“tr:odd”)	奇数索引。得到索引为1,3,5…的tr标签，按自然顺序为偶数
$(“tr:even”)	偶数索引。得到索引为0,2,4…的tr标签，按自然顺序为奇数
$(“tr:first”)	得到所有tr标签中的第一个
$(“tr:last”)	得到所有tr标签中的最后一个
$(“tr:eq(索引)”)	得到指定索引的tr
$(“tr:gt(索引)”)	得到大于指定索引的tr
$(“tr:lt(索引)”)	得到小于指定索引的tr
$(“li:nth-child(3n+1)”)
$(“#test p:first-child”)
$(“#test p:last-child”)
$(“div:not(.test)”)	得到class不为test的div
$(“div:not(:eq(3))”)	得到索引不为3的div

表单元素过滤

表单元素过滤
$(“:input”)	得到所有表单元素，包含input、select、textarea
$(“:text”)	得到文本框
$(“:password”)	得到密码框
$(“:radio”)	得到单选按钮
$(“:checkbox”)	得到复选框
$(“:checked”)	得到被选中的表单元素，包含radio、checkbox、select
$(“:checkbox:checked”)	得到被选中的复选框
$(“:selected”)	得到被选中的下拉菜单选项
$(" : rese t ") /$ (“:submit”)	得到重置/提交按钮

属性过滤选择器

属性过滤
$(“a[href]”)	得到所有包含href属性的a标签
$(“a:not([href])”)	得到所有不包含href属性的a标签
$(“div[属性=值]”)	得到指定属性和值的div
$(“div[属性!=值]”)	得到指定属性不等于指定值的div
$(“div[属性^=值]”)	得到以指定值开头的指定属性的div
$(" d i v [属性$ =值]")	得到以指定值结尾的指定属性的div
$(“div[属性*=值]”)	得到包含指定值的指定属性的div
`$("div[属性1=值][属性2=值]")`	得到既包含指定值的属性1且包含指定值的属性2的div

内容(文本)过滤选择器

内容过滤选择器
$(“p:contains(文字)”)	得到带有指定文字的p标签
$(“p:not(:contains(文字))”)	得到不带有指定文字的p标签
$(“p:empty”)	得到没有任何文本的p标签

操作节点

获取、设置节点内容

函数
节点.text()	获取节点中的文本。相当于js中的var text=x.innerText；
节点.text(“内容”)	设置节点中的文本。相当于js中的x.innerText=“内容”；
节点.html()	获取节点中的内容。相当于js中的var text=x.innerHTML；
节点.html(“内容”)	设置节点中的内容。相当于js中的x.innerHTML=“内容”；
节点.val()	获取某节点中的value属性值。相当于js中的var val=x.value;
节点.val(“内容”)	设置某节点中的value属性值。相当于js中的x.value=“内容”;

获取、设置节点样式

函数名
节点.css(“样式名”)	获取某个节点的某个样式值
节点.css(“样式名”,“值”)	设置某个节点的某个样式
节点.css({样式名:“值”,样式名:“值”…})	同时设置多个样式
节点.css(“样式名”,“值”).css(“样式名”,“值”)	同时设置多个样式

获取、设置节点属性

函数名
节点.attr(“属性名”)	获取某个属性的值
节点.attr(“属性名”,“值”)	设置某个属性的值
节点.removeAttr(“属性名”)	移除指定属性
节点.addClass(“class名”)	给某个节点追加class值
节点.removeClass(“class名”)	移除某个节点的某个class值
节点.toggleClass(“class名”)	添加或移除某个class值。如果没有则添加，有则移除。
节点.hasClass(“class名”)	判断是否存在某个class值

添加节点

添加子节点
父节点.append(子节点)	将子节点添加到父节点中的最后
子节点.appendTo(父节点)	将子节点添加到父节点中的最后
父节点.prepend(子节点)	将子节点添加到父节点中的最前
子节点.prependTo(父节点)	将子节点添加到父节点中的最前

添加兄弟节点
原始节点.before(新节点)	添加新节点到原始节点之前
新节点.insertBefore(原始节点)	添加新节点到原始节点之前
原始节点.after(新节点)	添加新节点到原始节点之后
新节点.insertAfter(原始节点)	添加新节点到原始节点之后

移除节点

移除节点
某节点.remove()	移除某节点
某节点.empty()	移除某节点中的子节点

复制节点

复制节点
某节点.clone()	复制某节点，不复制节点的事件
某节点.clone(true)	复制某节点，复制节点的事件

通过节点获取节点

函数名
某节点.next()	得到某节点的下一个节点
某节点.prev()	得到某节点的上一个节点
某节点.nextAll(参数)	得到某节点之后的所有或指定节点。参数为标签名的字符串，如nextAll(“a”)表示得到后续所有a标签
某节点.prevAll(参数)	得到某节点之前的所有或指定节点
某节点.siblings(参数)	得到某节点同级所有或指定节点
父节点.children(参数)	得到某父节点的所有或指定子节点
节点集合.first()	得到节点集合中的第一个子节点
节点集合.last()	得到节点集合中的最后一个子节点
子节点.parent()	得到某节点的父节点
某节点.index()	得到节点所在集合的索引

预设动画

函数名
show()	同时将宽度和高度从0变为原始值，最终display:block
hide()	同时将宽度和高度从原始值变为0，最终display:none
toggle()	切换show/hide
fadeIn()	将不透明度从0变为1，淡入，最终display:block
fadeOut()	将不透明度从1变为0，淡出，最终display:none
fadeToggle()	切换fadeIn/fadeOut
slideUp()	将高度从原始值变为0，最终display:none
slideDown()	将高度从0变为原始值，最终display:block
slideToggle()	切换slideUp/slideDown
	以上所有函数都可以给两个参数。第一个参数为动画执行所需毫秒，第二个参数为动画执行结束后的回调函数，表示在动画执行后执行。

$("#md").click(function(){
    //如果希望在动画执行后执行，不能这样写
    /*
    $(this).fadeOut(500);
    alert("消失后弹出");
    */
    //正确写法
    $(this).fadeOut(500,function(){
        alert("消失后弹出");
    })
});