参考资料：菜鸟教程
JQuery HTML
===
JQuery除了可以对HTML内容进行修改之外，还能进行添加删除。

添加元素

  $("p").append("aa") - 在被选元素的结尾插入内容
  $("p").prepend() - 在被选元素的开头插入内容
  注意上下这俩个的区别
  $("p").after() - 在被选元素之后插入内容
  $("p").before() - 在被选元素之前插入内容

这四个方法都可以接收无限数量的新元素

  $("p").append("aa",''bb","cc");

append与after方法的不同
append方法在被选元素的结尾添加文本text1，text1还是属于该元素内。
after方法在被选元素之后添加文本text1，text1不属于该元素了。
比如：

  <ol>
  <li>List item 1</li>
  <li>List item 2</li>
  </ol>
  $("ol").append("<li>追加列表项</li>");
  $("ol").after("<li>追加列表项</li>");

结果就是（感受一下两者的不同）
1.List item 1
2.List item 2
3.追加列表项

• 追加列表项

使用append时要注意：由于添加的元素属于被选元素，所以添加的内容要与被选相符。比如在 $("img").append("< p>无法添加</ p>") ;是无法加入的，因为text与img不一致。

删除元素

  $("#div1").remove();删除被选元素（及其子元素）
  $("#div1").empty();删除被选元素的子元素
  $("p").remove(".italic");删除class="italic" 的所有 <p> 元素，
  remove的参数可以是任何 jQuery 选择器的语法。

添加删除CSS类

  $("h1,h2,p").addClass("class1 class2") - 向被选元素添加一个或多个类
  removeClass() - 从被选元素删除一个或多个类
  toggleClass() - 对被选元素进行添加/删除类的切换操作

获取并设置CSS样式

  $("p").css("background-color");返回首个匹配元素的 background-color 值
  $("p").css("background-color","yellow");为所有匹配元素设置background-color 值
  $("p").css({"background-color":"yellow","font-size":"200%"});同时设置多个样式

处理窗口尺寸

<img src="http://www.runoob.com/images/img_jquerydim.gif">
在上面这张图中的八个尺寸都可以获取和设置
就拿width来说（其他都一样，就是名称换了）

  txt=$("#div1").width();获取该尺寸
  $("#div1").width("300px");设置该元素的尺寸

JQuery 遍历

在使用它的方法之前首先知道什么叫遍历以及它的使用方法。以及掌握DOM文档树。

遍历用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素
就是通过某一项开始，选择向上移动（祖先），向下移动（子孙），水平移动（同胞）的方式来找到想要的元素。

祖先（向上移动）

  $("span").parent();返回每个 <span> 元素的的直接父元素（只在上一级遍历）
  $("span").parents();返回所有 <span> 元素的所有祖先（谁叫它是复数呢）
  $("span").parents("ul");返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素
  $("span").parentsUntil("div");返回介于 <span> 与 <div> 元素之间的所有祖先元素

后代（向下移动）

  $("div").children();返回每个 <div> 元素的所有直接子元素,可以使用可
   选参数来过滤对子元素的搜索
  $("div").children("p.1");返回类名为 "1" 的所有 <p> 元素
  $("div").children("p#a");返回id为 "1" 的所有 <p> 元素

  $("div").find("*");返回被选元素的所有后代元素，一路向下直到最后一个后代
  $("div").find("span");返回属于 <div> 后代的所有 <span> 元素

同胞（左右移动）

  $("h2").siblings("p");返回 <h2> 的所有<p> 元素，如果不加参数则是所有元素
  $("h2").next();返回 <h2> 的下一个同胞元素
  $("h2").nextAll();返回 <h2> 的所有跟随的同胞元素
  $("h2").nextUntil("h6");返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
  prev(), prevAll() & prevUntil()方法与上面相同只是方向相反。