爱站程序员基地JQuery的Dom操作
1. 内部插入内容
-
append()方法：该方法在匹配元素集合的每个元素末尾插入由参数指定的内容并返回jQuery对象。
例:$(selector).append(content)
-
prepend()方法：此方法将参数指定的内容插入匹配元素集合中，每个元素的开头并返回jQuery对象。
例:
$(\"p\").prepend(\"<b>Hello world!</b> \");
- html()方法：获取匹配元素集合中第一个元素的
HTML内容并返回字符串。
例:
$(\"p\").html(\"Hello <b>world!</b>\");
- text()方法：获取匹配元素集合中每个元素的组合文
本内容并返回字符串。
例:`$(“p”).text(“Hello world!”);
htm()和text()方法的区别在于前者能够识别html的标签，而后者不能解析。
-
val()方法：该方法大多用于 input 元素。
-
is()方法：方法用于查看选择的元素是否匹配选择器。
例：
if ($(\"p\").parent().is(\"div\")) { alert(\"p 的父元素是 div\"); }
2. 外部插入内容
- after()方法：该方法在匹配元素集合中的每个元素之后插入，由参数指定的内容并返回jQuery对象。
例：
$(\"p\").after(\"<p>Hello world!</p>\");
- before()方法：此方法将参数指定的内容插入到匹配元素集合中的每个元素之前，并返回jQuery对象。
例：
$(\"p\").before(\"<p>Hello world!</p>\");
3.删除元素
- remove()方法：此方法 移除被选元素，包括所有文本和子节点。
例：
$(\"p\").before(\"<p>Hello world!</p>\");
- detach()方法：此方法 移除被选元素，包括所有文本和子节点，但detach() 会保留所有绑定的事件、附加的数据，与remove()不同
例：
$(\"p\").detach(\"<p>Hello world!</p>\");
- empty()方法：此方法 移除被选元素，包括所有文本和子节点，但detach() 会保留所有绑定的事件、附加的数据，与remove()不同
例：
$(\"div\").empty();
4.替换元素
- replaceWith()方法：此方法用指定的 HTML 内容或元素替换被选元素。
例：
$(\"p\").replaceWith(\"<b>Hello world!</b>\");
5.复制、包装元素
- clone()方法：复制元素
例：
$(\"body\").append($(\"p\").clone());
- warp()方法：添加父元素
例：
$(\"p\").wrap(\"<div></div>\");
- unwarp()方法：删除所选元素的父元素
例：
$(\"p\").unwrap();
- warpAll()方法：删除所选元素的父元素
例：
$(\"p\").wrapAll(\"<div></div>\");
- wrapInner()方法：删除所选元素的父元素
例：
$(\"p\").wrapInner(\"<b></b>\");
Dom属性操作
- attr()方法：设置或获取被选元素的属性值
例：
$(\"img\").attr(\"width\",\"180\"); 设置多个值时，与css()方法用法相似 例：$(\"img\").attr({\"width\":\"180\",\'height\':\'150\'});
- prop()方法：设置或获取被选元素的属性值
prop()和attr()的主要区别：attr()可以获取自定义属性，而prop（）只能获取固有属性。
- removeAttr()方法：移除由 prop() 方法设置的属性。
例：
$(\"p\").removeAttr(\"id\");
CSS操作
$(selector).height() – 设置或返回匹配元素的高度。
$(selector).width() – 设置或返回匹配元素的宽度。
$(selector).addClass() – 向被选元素添加一个或多个类
$(selector).removeClass() – 从被选元素删除一个或多个类
$(selector).toggleClass() – 对被选元素进行添加/删除类的切换操作
$(selector).css() – 设置或返回样式属性
$(selector).hasClass() 检查匹配的元素是否拥有指定的类。
