- 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
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");