【jQuery基础学习】02 jQuery的DOM操作

DOM操作分为3个方面：

1. DOM Core    任何一种支持DOM Core的语言都可以使用它，比如getElementById就是DOM Core操作
2. HTML-DOM  只能用来处理web文档
3. CSS-DOM    针对CSS的操作

关于jQuery中的DOM操作

查找节点可以很轻易通过就jQuery选择器来找到，这里略过。

创建节点

var $myli= $('<li title="troy">troy123</li>');//创建jQuery对象
$("ul").append($myli);//将创建的DOM元素添加到ul中

插入节点

• append()          向每个匹配的元素内部追加内容（上面已有示例）
• appendTo()       将所匹配的元素追加到指定的元素中

  $myli.appendTo("ul");//改编自创建节点中的代码，效果一样

• prepend()         向每个匹配的元素内部前置内容（与append相反，append是加在元素里子元素的后面）

• prependTo()      将所匹配的元素追加到指定的元素中
• after()              在每个匹配的元素之后插入内容，其实就是$("#liId").after($myli)的意思
• insertAfter()      将所匹配的元素追加到指定的元素后面，同理，只不过不知道为什么没有写成afterTo,这样同一起来其实好理解一点
• before()            在每个匹配的元素之前插入内容，其实就是$("#liId").before($myli)的意思
• insertBefore()    将所匹配的元素追加到指定的元素前面，同理

  var $one_li=$("ul li:eq(1)");
  var $two_li=$("ul li:eq(2)");
  $two_li.insertBefore($one_li);//这样就实现了两个节点互换

删除节点

• remove()   当某个节点调用remove方法后，该节点及其后代节点都会被删除。该方法的返回值是一个只想该被删除节点的引用。

  var $li= $("ul li:eq(0)").remove();
  $li.prependTo("ul");//结果没变化
  
  $("ul li").remove("li[title=troy]");//选择性删除

• detach()   和remove效果一样。但是用这个删除再像上面的例子那样插入的话，你会发现绑定在元素节点上的事件和附加的数据都还在，而remove的就不行。detach翻译为英文为拆分，似乎可以说明这就是为了先拿出来再插入的。
• empty()   清空节点的所有后代节点

复制节点

　　clone()方法进行复制节点，如果传参clone(true)就表示连节点的事件都会复制。

替换节点

我们当然可以先删后增来达到替换的效果，当然也有更简单的方法，那就是用replaceWith()和repalceAll();

包裹节点

$("strong").wrap("<b></b>");//每一个被匹配的<strong>元素都将被<b>包裹起来
$("strong").wrapAll("<b></b>");//所有被匹配到的<strong>元素被同一个<b>包裹起来
$("strong").wrapInner("<b></b>");//每一个被匹配到的<strong>元素的所有子元素都被一个<b>包裹起来

关于jQuery中的属性操作

var $myDiv=$("div");
var text=$myDiv.attr("title");//获取属性
$myDiv.attr("title","Troy123");//设置单个属性
$myDiv.attr({title:"Troy123",name:"Troy"});//设置单个属性
$myDiv.removeAttr("title");//删除属性

关于jQuery中的样式操作

• attr("class")                       样式的获取和设置，$myDiv.attr("class")和$myDiv.attr("class","myClass")即可。
• addClass("myClass")          追加样式。如果在不同的class中设置同一样式，那么后者覆盖前者。也就是说，此函数追加的样式中某一样式属性，如果在前面已经被某样式决定了，那么新的这个会覆盖旧的。
• removeClass("myClass")     仅仅只删除myClass样式。而如果不要参数，直接$myDiv.removeClass()，那么将删除所有样式。
• toggleClass("myClass")       当点击div时增加样式myclass，当再点击一次则移除，反复如此。
• hasClass("myClass")           如果含有则返回true，如果没有则返回false。实际上在内部是用了$myDiv.is(".myClass")操作来实现。

设置和获取HTML、文本和值

• html()        设置和获取某节点的html，玩法和attr()一样
• text()         设置和获取某节点的文本内容，玩法同上
• val()           设置和获取某节点的value属性，而val方法还能使select，checkbox和radio相应的选项被选中。

  $("#mySelect").val("选项2");//选中选项2
  $("#mulSelect").val(["选项2","选项3"]);//选中选项2，选项3
  $(":checkBox").val(["check2","check3"]);//选中value为check2和check3的多选框
  $(":radio").val(["radio1"]);//选中value为radio1的单选框
  //下面用attr方法实现
  $("#mySelect option:eq(1)").attr("selected",true);
  $("[value=radio2]:radio").attr("checked",true);

遍历节点

• children()       该方法取得匹配元素的子元素集合，只取得子元素，不考虑后代元素
• next()            取得匹配元素后面紧邻的同辈元素
• prev()            取得匹配元素前面紧邻的同辈元素
• siblings()       取得匹配元素前后所有的同辈元素
• closest()        取得最近的匹配元素。先检查该元素是否匹配，不匹配就向上查父元素，有就返回匹配元素，无就返回空的jQuery对象
• parent()        获取集合中每个匹配元素的父元素
• parents()       获取集合中每个匹配元素的祖先元素，还可以加匹配参数

  $("#mydiv").parent();
  $("#mydiv").parents("div");
  $("#mydiv").closest("div");

CSS-DOM操作

css()方法无论是color属性，还是外部CSS导入，还是拼接在HTML的元素里，css方法都可以获取到属性style里的其他属性的值。

$("#mydiv").css("height");//获取样式高度值，可能为auto之类的
$("#mydiv").height();//获取真实高度值，必定为数值px

关于元素定位

• offset()                             获取元素在当前视窗的相对偏移，其中返回的对象有两个属性：top和left。它只对可见元素有效。

  var myOffset=$("#mydiv").offset();
  var left=myOffset.left;
  var top=myOffset.top;

• position()                          获取元素相对于最近的一个Position样式属性设置为relative或者absolute的祖先节点的相对偏移，也返回top和left。用法同上。
• scrollTop()和scrollLeft()       获取和设置滚动条滑块距顶端和左侧的距离。

  $("#myTextArea").scrollTop();//获取距离
  $("#myTextArea").scrollTop(300);//设置距离