Head First Jquery学习笔记（二）

第四章  操作DOM

elements遍历（traverse）、可以删除（remove或者detach）、替换（replacewith）、插入（insert）

1.traverse

dom本身是树结构，可以遍历，有三种操作：

climb up：$(".fish").parent()、$(".fish").parent().parent()

climb down：$(".menu_list").children()

climb across：$(".fish").prev()、$(".fish").next()

查询过滤Use filter methods to narrow your selections

$(".menu_list").children().first();第一个元素

$(".menu_list").children().last();最后一个元素

$(".menu_list").children().eq(0);指定元素索引值

$(".menu_list").children().slice(1,3);指定元素索引值在1和3之间

$(".menu_list").parents().filter(".organic");在参数中指定selector

$("ul.menu_list.organic").children().not(".local");过滤指定selector元素

2.remove or detach

$f = $(".fish").parent().parent().detach();

Putting a dollar sign in front of the variable indicates that it’s storing elements returned from jQuery. 

When we select and detach the li elements and set a variable ($f) to the result, jQuery takes the elements the DOM returns and stores them neatly for us in a JavaScript array. When we want to put those elements back with the restore button, our job will be way less messy.

3.replace

$("h2").replaceWith("<h1>My Menu</h1>");里面可以放HTML代码。

4.insert

向dom中插入内容(Insert HTML content into the DOM)

before inserts content before the selected element.
$(".meat").before("<li>Tofu</li>");

after inserts content after the selected element. 
$(".meat").after("<li>Tofu</li>");

4.数组

jquery数组存储各种东西，包括元素。

$f = $(".fish").parent().parent().detach();返回elements数组，￥标志数据从是jquery东东。

遍历数组用方法each，参数i为元素索引值，this代表当前操作的元素

$(".tofu").each(function(i){
  $(this).after(    );
});