一、DOM的分类：
1.DOM core
2.HTML-DOM
3.CSS-DOM
二、css操作
语法：
$("#div1").css(“color”,“red”);
$("#div1").css({“color”:“red”,“margin”:“5px”});
//添加样式
$("#div1").addClass(“div1_style”);
//移除样式
$("#div1").removClass(“div1_style”);
三、jQuery操作文本：
1.html():
语法：
获取值：var val_html = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div1").html(); …("#div1").html(“值”);
2.text():
语法：
获取值：var val_text = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div1").text(); …("#div1").text(“值”);
3.text和html的区别：
（1）都是操作文本的方法
（2）html可以解析html的标签，text不可以解析。
四、获取表单的值：
语法：KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲inp").val(); 赋…("#inp").val(“值”);
五、节点与属性操作：
1.创建节点：
var $new_Node = ( " < l i > 第 n 个 l i < / l i > " ) ; 2. 插 入 节 点 ： 内 部 插 入 ： （ 1 ） a p p e n d ( ) ： 向 所 选 元 素 的 后 面 插 入 节 点 （ 2 ） a p p e n d T o ( ) : 与 a p p e n d 的 用 法 不 一 样 ， 但 是 效 果 一 样 。 e g : ("<li>第n个li</li>"); 2.插入节点： 内部插入： （1）append()：向所选元素的后面插入节点 （2）appendTo():与append的用法不一样，但是效果一样。 eg:("<li>第n个li</li>");2.插入节点：内部插入：（1）append()：向所选元素的后面插入节点（2）appendTo():与append的用法不一样，但是效果一样。eg:(“ul”).append(n e w N o d e ) ; ( new_Node); (newNode);(new_Node).appendTo(“ul”);
（3）perpend()：向所选择元素的前面插入节点。
（4）perpendTo():与perpend的效果一样，但是用法不一样。
eg:( " u l " ) . p e r p e n d ( ("ul").perpend(("ul").perpend(new_Node);
(n e w N o d e ) . p e r p e n d T o ( " u l " ) ; 外 部 插 入 ： （ 1 ） a f t e r ( ) : 向 所 选 元 素 的 后 面 插 入 （ 2 ） i n s e r t A f t e r ( ) : 与 a f t e r 的 用 法 不 一 样 但 是 效 果 是 一 样 的 。 e g : new_Node).perpendTo("ul"); 外部插入： （1）after():向所选元素的后面插入 （2）insertAfter():与after的用法不一样但是效果是一样的。 eg:newNode).perpendTo("ul");外部插入：（1）after():向所选元素的后面插入（2）insertAfter():与after的用法不一样但是效果是一样的。eg:(“ul”).after(n e w N o d e ) ; ( new_Node); (newNode);(new_Node).insertAfter(“ul”);
（3）before():向所选元素的前面插入节点
（4）insertBefore():与before的语法不一样，但是效果一样。
eg:( " u l " ) . b e f o r e ( ("ul").before(("ul").before(new_Node);
(n e w N o d e ) . i n s e r t B e f o r e ( " u l " ) ; 3. 删 除 节 点 ： 1. 使 用 r e m o v e 删 除 ， 可 以 直 接 删 除 节 点 。 2. 使 用 e m p t y ( ) 删 除 ， 但 是 只 能 清 空 内 容 e g : new_Node).insertBefore("ul"); 3.删除节点： 1.使用remove删除，可以直接删除节点。 2.使用empty()删除，但是只能清空内容 eg:newNode).insertBefore("ul");3.删除节点：1.使用remove删除，可以直接删除节点。2.使用empty()删除，但是只能清空内容eg:(“li:eq(0)”).remove();
$(“li:eq(0)”).empty();
4.替换节点：
1.replaceWith():将所选的元素替换成新的元素
2.replaceAll():与replaceWith的效果一样，用法不一样。
eg:
( " l i : e q ( 0 ) " ) . r e p l a c e W i t h ( ("li:eq(0)").replaceWith(("li:eq(0)").replaceWith(new_Node);
($new_Node).replaceAll(“li:eq(0)”);
六、设置元素的属性和给元素赋值：
1.attr()
语法：
获取值：var im_val = ( " i m g " ) . a t t r ( " w i d t h " ) ; 赋 值 ： ("img").attr("width"); 赋值：("img").attr("width");赋值：(“img”).attr({width:“500”,height:“500”});
七、遍历子元素：
1.获取紧邻其后的一个同辈元素：next()
eg:( " l i : e q ( 0 ) " ) . n e x t ( ) . c s s ( " c o l o r " , " r e d " ) ; 2. 获 取 紧 邻 其 前 的 一 个 同 辈 元 素 : p r e v ( ) ; e g : ("li:eq(0)").next().css("color","red"); 2.获取紧邻其前的一个同辈元素:prev(); eg:("li:eq(0)").next().css("color","red");2.获取紧邻其前的一个同辈元素:prev();eg:(“li:eq(2)”).prev().css(“color”,“red”);
3.获取紧邻其后的所有同辈元素：nextAll();
eg:( " l i : e q ( 0 ) " ) . n e x t A l l ( ) . c s s ( " c o l o r " , " r e d " ) ; 4. 获 取 紧 邻 其 前 的 所 有 同 辈 元 素 ： p r e v A l l ( ) e g : ("li:eq(0)").nextAll().css("color","red"); 4.获取紧邻其前的所有同辈元素：prevAll() eg:("li:eq(0)").nextAll().css("color","red");4.获取紧邻其前的所有同辈元素：prevAll()eg:(“li:eq(4)”).prevAll().css(“color”,“red”);
5.获取所有的同辈元素:silbings()
eg:( " l i " ) . s i b l i n g ( ) . c s s ( " c o l o r " , " r e d " ) ; 八 、 获 取 前 辈 元 素 ： 1. p a r e n t ( ) : 获 取 其 父 亲 元 素 。 e g : ("li").sibling().css("color","red"); 八、获取前辈元素： 1.parent():获取其父亲元素。 eg:("li").sibling().css("color","red");八、获取前辈元素：1.parent():获取其父亲元素。eg:(“li”).parent().css(“background”,“red”);
2.parent().parent():获取其爷爷的元素
eg:( " l i " ) . p a r e n t ( ) . p a r e n t ( ) . c s s ( " b a c k g r o u n d " , " r e d " ) ; 3. p a r e n t s ( ) : 获 取 根 元 素 ， h t m l e g : ("li").parent().parent().css("background","red"); 3.parents():获取根元素，html eg:("li").parent().parent().css("background","red");3.parents():获取根元素，htmleg:(“li”).parents().css(“background”,“red”);
