第四章使用jQuery操作DOM元素

版权声明：文章可以随便转载，但是转载时带上原文地址来源，侵权必究 https://blog.csdn.net/qq_34137397/article/details/85268637

一、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 = $("<li>第n个li</li>"); 2.插入节点： 内部插入： （1）append()：向所选元素的后面插入节点 （2）appendTo():与append的用法不一样，但是效果一样。 eg:$(“ul”).append( $new_Node); ($new_Node).appendTo(“ul”);
（3）perpend()：向所选择元素的前面插入节点。
（4）perpendTo():与perpend的效果一样，但是用法不一样。
eg: $("ul").perpend($new_Node);
( $new_Node).perpendTo("ul"); 外部插入： （1）after():向所选元素的后面插入 （2）insertAfter():与after的用法不一样但是效果是一样的。 eg:$(“ul”).after( $new_Node); ($new_Node).insertAfter(“ul”);
（3）before():向所选元素的前面插入节点
（4）insertBefore():与before的语法不一样，但是效果一样。
eg: $("ul").before($new_Node);
( $new_Node).insertBefore("ul"); 3.删除节点： 1.使用remove删除，可以直接删除节点。 2.使用empty()删除，但是只能清空内容 eg:$(“li:eq(0)”).remove();
$(“li:eq(0)”).empty();
4.替换节点：
1.replaceWith():将所选的元素替换成新的元素
2.replaceAll():与replaceWith的效果一样，用法不一样。
eg:
$("li:eq(0)").replaceWith($new_Node);
($new_Node).replaceAll(“li:eq(0)”);
六、设置元素的属性和给元素赋值：
1.attr()
语法：
获取值：var im_val = $("img").attr("width"); 赋值：$(“img”).attr({width:“500”,height:“500”});
七、遍历子元素：
1.获取紧邻其后的一个同辈元素：next()
eg: $("li:eq(0)").next().css("color","red"); 2.获取紧邻其前的一个同辈元素:prev(); eg:$(“li:eq(2)”).prev().css(“color”,“red”);
3.获取紧邻其后的所有同辈元素：nextAll();
eg: $("li:eq(0)").nextAll().css("color","red"); 4.获取紧邻其前的所有同辈元素：prevAll() eg:$(“li:eq(4)”).prevAll().css(“color”,“red”);
5.获取所有的同辈元素:silbings()
eg: $("li").sibling().css("color","red"); 八、获取前辈元素： 1.parent():获取其父亲元素。 eg:$(“li”).parent().css(“background”,“red”);
2.parent().parent():获取其爷爷的元素
eg: $("li").parent().parent().css("background","red"); 3.parents():获取根元素，html eg:$(“li”).parents().css(“background”,“red”);