一、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")
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”);