jQuery学习笔记——DOM操作

DOM文档对象模型，是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松访问页面中所有标准组件。

DOM操作的分类

1、DOM Core（核心）
不专属于JavaScript ，任何DOM的编程都可使用它。
2、HTML-DOM
代码通常比较短，只能用来处理web文档。
3、CSS-DOM
针对CSS的操作。在JavaScript中，它的作用是获取和设置style对象的各种属性。

jQuery中的DOM操作

查找节点
1、查找元素节点
2、查找属性节点：
在jQuery选择器查找到需要的元素后，使用attr()方法获取获取属性值。

创建节点
1、创建元素节点
（1）创建新元素
（2）将新元素插入到文档中

var li_1 = $("<li>hello</li>");
$("ul").append($li_1);

2、创建文本节点
在上一步的基础上添加内容

3、创建属性节点
在创建元素节点时一起创建属性节点

插入节点

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

删除节点

• remove()方法
  作用：从DOM中删除所有匹配的元素，传入的参数根据jQuery表达式来筛选元素
  当某个节点用remove()方法后，该节点包含的所有后代节点将被同时删除
• detach()方法
  这个方法不会把匹配的元素从jQuery对象中删除，是从DOM中去掉所有匹配的元素。与remove不同的是，所有绑定的事件、附加的数据等都会保留下来。

区别：当删除使用的是detach()时，点击被删除项的alert时，是有alert效果的，如果删除换成remove()，则不会有alert效果

//html代码
<ul>
    <li title="苹果">苹果</li>
    <li title="橘子">橘子</li>
    <li title="菠萝">菠萝</li>
</ul>
//jQuery代码
$("ul li").click(function(){
        alert( $(this).html() );
    })
    var $li = $("ul li:eq(1)").detach();
    $li.appendTo("ul");

• empty()方法
  此方法严格来讲不是删除节点，是清空节点，它可以清空元素中的所有后代节点。

复制节点
通过鼠标拖动一个对象，拖动功能就是复制节点。使用clone()方法。
复制节点后，被复制的新元素不具有任何行为，如果需要新元素也具有复制功能，可以在clone()方法中传递参数true。

有无参数区别：
有参数：点击<li>标签下的字，在下方也会出发click效果。
无参数：只能点击<li>标签内的字，在下方才会出发click效果。

//html代码
<ul>
    <li title="苹果">苹果</li>
    <li title="橘子">橘子</li>
    <li title="菠萝">菠萝</li>
</ul>
//jQuery代码
$("ul li").click(function(){
    $(this).clone(true).appendTo("body");
})

有参数.png

替换节点
replaceWith()和replaceAll()方法

• replaceWith()是将所有匹配的元素都替换成指定的HTML或者DOM元素。
  $("p").replaceWith("<strong>你最不喜欢的水果是？</strong>");
• replaceAll()方法与replaceWith()方法的作用相同，只是颠倒了操作。
  $(("<strong>你最不喜欢的水果是？</strong>").replaceAll("p");
  如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。

包裹节点
如果要将某个节点用其他标记包裹起来，就用wrap()方法。该方法对于需要在文档中插入额外的结构化标记非常有用，且不会破坏原始文档的语义。

$("strong").wrap("<b></b>");
的意思为
<b><strong title="选择你最喜欢的水果">你最喜欢的水果是？</strong></b>

包裹节点还有其他两个方法：

• wrapAll()方法
  该方法将所有匹配的元素用一个元素来包裹。
  wrap()是将所有元素进行单独的包裹。
• wrapInner()方法
  该方法将每一个匹配的元素的子内容（包含文本节点）用其他结构化的标记包裹起来。

属性操作

• 获取设置属性

//获取p元素的节点属性title
var $para = $("p");
var p_txt = $para.attr("title");
//设置属性
$p("p").attr("title","your title");
//设置多个属性
$("p").attr({"title":"your title","name":"test"});

• 删除属性
  删除文档中某个特定属性，可以使用removeAttr()方法

样式操作

• 获取设置样式

//获取样式和设置样式
var p_class = $("p").attr("class");
$("p").attr("class","high");

• 追加样式
  用addClass()方法
  注意：如果给一个元素设置了多个class属性，就相当于合并了它们的样式；
  如果有不同的class设置了同一个属性，则后者覆盖前者。

• 移除样式
  removeClass()方法:从匹配的元素中删除全部或者指定的class。

//移除指定属性样式
$("p").removeClass("high another");
//移除所有class
$("p").removeClass();

• 切换样式
  toggle()方法：交替执行代码
  toggleClass()方法：控制样式上的重复切换，如果类名存在则删除它，如果类名不存在则添加它。

• 判断是否含有某个样式
  hasClass()方法：用来判断是否含有某个class，如果有则返回true，没有则返回false。该方法也可以用is来表达。
  $("p").is("another"); //判断p里是否含有another类

设置和获取html、文本和值

• html()方法
  类似于JavaScript的innerHTML属性，用来读取或设置某个元素中的HTML内容
  $("p").html("<strong>你最喜欢的水果是？</strong>"); //设置p元素的html代码
  注意：html()方法可以用于XHTML文档，但不能用于XML文档。

• text()方法
  类似于JavaScript的innerText属性，用来读取或设置某个元素中的文本内容。
  注意：innerText属性不能在火狐浏览器运行，但text()支持所有浏览器；text()对HTML和XML文档都有用。

• val()方法
  类似于JavaScript中的value属性，用来设置和获取元素的值。还有一个用处，就是它能使select（下拉列表框）、CheckBox（多选框）和radio（单选框）响应的选项被选中。

遍历节点

• children()方法
  用于取得匹配元素的子元素集合（不考虑其他后代元素）
• next()方法
  用于匹配元素后面紧邻的同辈元素。
• prev()方法
  用于匹配元素前面紧邻的同辈元素。
• siblings()方法
  用于匹配元素前后所有的同辈元素。
• closest()方法
  用于取得最近的匹配元素。首先检查当前元素是否匹配，如果匹配则直接返回元素本身，如果不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素。如果什么都没找到则返回空的jQuery对象。
• parent()、parents()、closest()区别

方法	描述
parent()	获得集合中每个匹配元素的父级元素
parents()	获得集合中每个匹配元素的祖先元素（它找到第一个父节点后没有停止，而是继续寻找，最后返回多个父节点）
closest()	从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素

• 其他遍历节点的方法在此先不写了，遇到时候再查~

CSS-DOM操作
css()方法可以获取和设置元素的样式属性
注意：1、如果值是数字，将会被自动转为像素值
2、如果属性带有“-”符号，如果在设置属性的值时不带引号，就要用驼峰写法，如果带上引号，则可以写成font-size或者fontSize。 建议最好带引号~

• offset()方法
  用来获取元素在当前视窗的相对位移，其中返回的对象包含两个属性，top右偏移和left左偏移

• position()方法
  用来获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对位移，返回对象和offset一样。

• scrollTop()、scrollLeft()方法
  获取元素滚动条距顶端距离、距左侧距离