4、jQuery修改DOM（Head First笔记）

jQuery remove 与 jQuery detach

jQuery parent

jQuery children

jQuery prev

jQuery next

jQuery replaceWith

jQuery first过滤器

jQuery eq过滤器

jQuery last过滤器

jQuery slice过滤器

jQuery filter过滤器

jQuery not过滤器

jQuery remove() 与 jQuery detach()

$("img#thumbnail").remove();
$("img#thumbnail").detach();

remove()跟detach()都是从DOM中删除元素，但是他们是有区别的。

remove()方法删除选择的元素，但是它不会保持删除元素的数据和事件。

remove()参考资料

detach()方法删除选择的元素，这个元素可以存在一个变量中，用于重新插入。它会保持删除元素的数据和事件。

detach()参考资料

当然如果仅仅只是想删除元素的内容的话，可以使用empty()这个方法。

empty()参考资料

jQuery parent()

利用jQuery parent()获取选择元素的父元素

$(".fish").parent();

回忆一下DOM获取父元素的方法：

document.getElementById("myLi").parentNode;

HTML DOM parentNode Property 参考资料

jQuery children()

利用jQuery children()可以获取选择的元素的子元素

$(".menu_list").children();

DOM获取元素的子元素

document.body.childNodes;

HTML DOM childNodes Property 参考资料

jQuery prev()

利用prev()可以获取选择的元素前一个相邻的元素

$(".fish").prev();

DOM获取前一个兄弟元素：

document.getElementById("item2").previousSibing;

HTML DOM previousSibling Property

jQuery next()

获取选择元素的后一个相邻元素

$(".fish").next();

DOM获取后一个兄弟元素

document.getElementById("item1").nextSibling

HTML DOM nextSibling Property

jQuery replaceWith()

replaceWith()用于替换元素，下面这个例子

<h1>My Menu</h1>

将完全替换h2元素

$("h2").replaceWith("<h1>My Menu</h1>");

jQuery before()与jQuery after()

before()将新内容插入到选择的元素前面，而after()则是将新内容插入到选择元素的后面。

$(".meat").before("<li>Tofu</li>");
$(".meat").after("<li>Tofu</li>");

回顾一下DOM中如何实现类似的功能：

DOM中提供了一个insertBefore()的方法，可以将一个新的元素插入到一个现有元素的前面。

parentElement.insertBefore(newElement, targetElement);

DOM中并没有insertAfter()这个方法，因此可以利用《JavaScript DOM编程艺术》中提到的方法解决。

function insertAfter(newElement, targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement, targetElement.nextSibling);
}
}

jQuery first()过滤器

first()方法，除了所选元素中第一个元素以外，first()方法会过滤掉所有其他元素。

$(".menu_list").children().first();

对应DOM中firstChild()

node.firstChild

jQuery eq()过滤器

除了所选元素中索引号等于括号中内容的元素之外，eq()将会过滤掉所有其它元素。

$(".menu_list").children().eq(0);

对应DOM中的childNodes[X]

document.getElementsByTagName("body")[0].childNodes[0];

jQuery last()过滤器

除了所选元素中最后一个元素以外，last()方法会过滤掉所有其他元素。

$(".menu_list").children().last();

对应DOM中lastChild

node.lastChild

jQuery slice()过滤器

除了索引介于括号中指定索引号之间的元素之外，slice方法会过滤掉所有其他元素。例如例子中的，就只会保留index为2的元素

$(".menu_list").children().slice(1,3);

jQuery filter()过滤器

除了与括号中指定选择器匹配的元素外，filter方法会过滤掉所有其他元素。

$(".menu_list").parents().filter(".organic");

jQuery not()过滤器

not方法会过滤掉与括号中指定选择器匹配的所有元素。

$(".left_col").children().not("h4");