[jQuery] DOM操作

1. DOM操作分类

1.1 DOM Core

DOM Core不专属于JavaScript，任何支持DOM的程序设计语言都可以使用。JavaScript中的getElementById()、getElemetsByTagName()、getAttribute()和setAttribute()等方法，都是DOM Core的组成部分。

1.2 HTML DOM

在使用JavaScript和DOM为HTML文件编写脚本时，有许多专属于HTML-DOM的属性。它提供了一些更简明的记号来描述各种HTML元素的属性，例如document.forms或element.src。有些方法即可以用DOM Core来实现，也可以使用HTML-DOM实现。

1.3 CSS DOM

CSS DOM 是针对CSS的操作。在JavaScript中，CSS DOM技术的主要作用是获取和设置style对象的各种属性，通过改变style对象的各种属性，可以使网页呈现出各种不同的效果。

2. DOM操作

2.1 查找节点

使用jQuery在文档树上查找节点，可通过jQuery选择器来完成，例如：

var $li = $("ul li:eq(1)");
var li_txt = $li.text();
alert(li_txt);

利用jQuery选择器查找到所需元素后，就可以使用attr()方法来获取它的各种属性值，例如：

var $para = $("p");
var p_txt = $para.attr("title");
alert(p_txt);

2.2 创建节点

如果要创建两个

元素节点，并且要把它们作为

元素节点的子节点添加到DOM节点树上，可使用工厂函数$()来完成，格式如下：

$(html);

$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回，例如：

var $li_1 = $("
");
var $li_2 = $("
");
$("ul").append($li_1);
$("ul").append($li_2);

创建属性节点与创建文本节点类似，也是直接在创建元素节点时一起创建，例如：


var $li_1 = $("t1");
var $li_2 = $("t2");
$("ul").append($li_1);
$("ul").append($li_2);




2.3 插入节点

将新创建的节点插入某个文档的方法有多种，如下表：

方法	描述	示例
append()	向每个匹配的元素内部追加内容。	$("p").append("me");
appendTo()	将所有匹配的元素追加到指定的元素中。	$("me").appendTo("p");
prepend()	向每个匹配的元素内部前置内容。	$("p").prepend("me");
prependTo()	将所有匹配的元素前置到指定的元素中。	$("me").prependTo("p");
after()	在每个匹配的元素之后插入内容。	$("p").after("me");
insertAfter()	将所有匹配的元素插入到指定元素的后面。	$("me").insertAfter("p");
before()	在每个匹配的元素之前插入内容。	$("p").before("me");
insertBefore()	将所有匹配的元素插入到指定的元素的前面。	$("me").insertBefore("p");




2.4 删除节点


如果文档中某一个元素多余，那么应将其删除。jQuery提供了两种删除节点的方法，即remove()和empty()。

remove()方法的作用是从DOM中删除所有匹配的元素，例如：

$("ul li:eq(1)").remove();

当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除，这个方法的返回值是一个指向已被删除的节点的引用。


empty()方法的作用是清空节点，例如：

$("ul li:eq(1)").empty();

当运行代码后，第2个

• 元素的内容被清空了，只剩下
• 标签默认的圆点符号。

  
  

  2.5 复制节点

  如果需要复制一个元素，可以使用clone()来完成，例如：
  

  $("ul li").click(function(){
    $(this).clone().appendTo("ul");
  })

  复制节点后，被复制的新元素并不具有任何行为，如果需要新元素也具有复制功能，可以在clone()方法中传递一个参数true，例如：

  $("ul li").click(function(){
    $(this).clone(true).appendTo("ul");
  })

  
  

  2.6 替换节点

  如果要替换节点，jQuery提供了相应的方法，即replaceWith()和replaceAll()。replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素，例如：

  $("p").replaceWith("Name");

  也可以使用另一个方法replaceAll()来实现，该方法与replaceWith()方法的作用相同，只是颠倒了replaceWith()操作，例如：

  $("Name").replaceAll("p");

  
  

  2.7 包裹节点

  如果要将某个节点用其他标记包裹起来，jQuery提供了相应的方法，即wrap()，例如：

  $("strong").wrap("");

  wrapAll()方法会将所有匹配的元素用一个元素来包裹，它不同于wrap()方法，wrap()方法是将所有的元素进行单独的包裹，例如：

  $("strong").wrapAll("");

  wrapInner()方法将每一个匹配的元素的子内容用其他结构化的标记包裹起来，例如：

  $("strong").wrapInner("");

  
  

  2.8 属性操作

  在jQuery中，用attr()方法来获取和设置元素属性值，例如：

  var p_txt = $("p").attr("title");

  如果要设置元素属性值，也可以使用同一个方法，不同的是，需要传递两个参数，例如：

  $("p").attr("title", "my title");

  在某些情况下，要删除文档中某个元素的特定属性，可以使用removeAttr()方法来完成，例如：

  $("p").removeAttr("title");

  
  

  2.9 样式操作

  使用attr()方法可以获取元素的class，例如：

  var p_class = $("p").attr("class");

  也可以使用attr()方法来设置class，例如：

  $("p").attr("class", "high");

  在大多数情况下，它是将原来的class替换为新的class，而不是在原来的基础上追加新的class。jQuery提供了专门的addClass()方法来追加样式，例如：

  $("p").addClass("another");

  如果用户要删除class的某个值，可以使用与addClass()方法相反的removeClass()方法来完成，例如：
  

  $("p").removeClass("high");

  当它不带参数时，就会将class的值全部删除，例如：

  $("p").removeClass();

  jQuery还提供了一个toggleClass()方法控制样式上的重复切换，如果类名存在则删除它，如果类名不存在则添加它，例如：

  $("p").toggleClass("high");

  hasClass()可以用来判断元素中是否含有某个class，如果有，则返回true，否则返回false，例如：
  

  $("p").hasClass("high");

  
  

  2.10 设置和获取HTML、文本和值

  html()方法类似于javascript中的innerHTML属性，可以用来读取或者设置某个元素中的HTML内容，例如：

  var p_html = $("p").html();

  如果需要设置某元素的HTML，也可以使用该方法，例如：
  

  $("p").html("Name");

  text()方法类似于javascript中的innerText属性，可以用来读取或设置某个元素中的文本内容，例如：

  var p_text = $("p").text();

  val()方法类似于javascript中的value属性，可以用来设置和获取元素的值，例如：

  $("#username").focus(function(){
    var text_value = $(this).val();
    alert(text_value);
  });

  
  

  2.11 遍历节点

  children()方法用于取得匹配元素的子元素集合，例如：

  $("p").children();

  next()方法用于取得匹配元素后面紧邻的同辈元素，例如：
  

  $("p").next();

  prev()方法用于取得匹配元素前面紧邻的同辈元素，例如：

  $("p").prev();

  siblings()方法用于取得匹配元素前后所有的同辈元素，例如：sli

  $("p").siblings();

  closet()方法用来取得最近的匹配元素，首先检查当前元素是否匹配，如果匹配则直接返回，如果不匹配则向上查找父元素，直到找到匹配选择器的元素，如果没有找到，则返回一个空的jQuery对象，例如：

  $(e.target).closet("li").css("color", "red");

  
  

  2.12 CSS-DOM操作

  CSS-DOM技术简单来说就是读取和设置style对象的各种属性，可以直接利用css()方法获取元素的样式属性，例如：

  $("p").css("color");

  也可以直接利用css()方法设置某个元素的单个样式，例如：

  $("p").css("color", "red");

  在jQuery中还有一个height()方法，可以取得匹配元素当前计算的高度值，例如：

  $("p").height();

  与height()方法对应的还有一个width()方法，可以取得匹配元素的宽度值，例如：

  $("p").width();

  CSS-DOM中，还有以下几个经常使用的方法。offset()方法的作用是获取元素在当前视窗的相对偏侈，其中返回的对象包含两个属性，即top和left，它只对可见元素有效，例如：
  

  var offset = $("p").offset();
  var left = offset.left;
  var top = offset.top;

  position()方法的作用是获取元素相对于最近的一个position样式属性设置relative或absolute的祖父节点的相对偏移，它返回的对象也包括两个属性，即top和left，例如：

  var position = $("p").position();
  var left = position.left;
  var top = position.top;

  scrollTop()方法和scrollLeft()方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离，例如：

  var $p = $("p");
  var scrollTop = $p.scrollTop();
  var scrollLeft = $p.scrollLeft();

  另外，可以为这两个方法指定一个参数，控制元素的滚动条滚动到指定位置，例如：
  

  $("textarea").scrollTop(300);
  $("textarea").scrollLeft(300);