jQuery中的DOM操作

DOM是Document  Object  Model的缩写，意思是文档对象模型 

DOM操作的分类

1、DOM  Core

它并不专属于javaScript，任何一种支持DOM的程序设计语言都可以使用它。

javaScript中的getElmantById()、getElemetsByTayName()、getAttribute等方法，这些都是DOM Core的组成部分

2、 HTML-DOM

提供了更简明的记号来描述各种HTML元素的属性

3、CSS-DOM

是针对css的操作

主要作用是获取和设置style对象的各种属性

jQuery中的DOM操作

查找元素节点

var $li = $("ul  li:eq(1)");    //获取<ul>里第2个<li>节点
var li_txt = $li.text();      //获取第2个<li>元素节点的文本内容
alert(li_txt);                //打印文本内容

查找属性节点

var $para = $("p");     //获取<p>节点
var p_txt = $para.attr("title");    //获取<p>元素节点属性title
alert(p_txt);           //打印title属性值

删除节点

三种删除节点的方法：remove()、detach()、empty()

替换节点

replaceWith、replaceALL()

包裹节点

wrap()

注意：如果被包裹的多个元素间有其它元素，其它元素会被放到包裹元素之后

属性操作

1、获取属性和设置属性

var $para = $("p");     //获取<p>节点
var p_txt = $para.attr("title");     //获取<p>元素节点属性title



$("p").attr("title","your  title");     //设置单个的属性值

2、删除属性

$("p").removeAttr("title");    //删除<p>元素的属性title

样式操作

1、获取样式和设置样式

var p_class = $("p").attr("class");    //获取<p>元素的class

2、追加样式

 <style>
        /*获取样式和设置样式   所需的*/
        .high{
            font-weight: bold;/*粗体字*/
            color: red;  /*字体颜色设置为红色*/
        }
        /*追加样式   所需的*/
        .anorher{
            font-style: italic;  /*斜体*/
            color: blue;   /*字体颜色设置蓝色*/
        }
    </style>

设置和获取HTML 、文本和值

<p title="选择你喜欢的水果"><strong>你喜欢的水果是？</strong></p>

1、html（）方法

此方法类似于JavaScript中的innerHTML属性，可以用来读取或者设置某个元素中的HTML内容

var p_html = $("p");    //获取<p>的HTML的代码
alert(p_html);          //打印<p>元素HTML代码

注意：html（）方法可以用于XHTML文档，但不能用于XML文档

2、text方法

此方法类似于JavaScript中的innerText属性，可以用来读取或者某个元素中的文本内容

  var p_text = $("p").text();    //获取<p>元素的文本内容
  alert(p_text);                 //打印<p>元素的文本内容

注意：（1）JavaScript中的innerText属性并不能在Firefox浏览器下运行，而jQuery的text（）方法支持所有的浏览器。

            （2）text（）方法对  HTML 文档和   XML  文档都有效。

3、val()方法

此方法类似于JavaScript中的value属性，可以用来设置和获取元素的值。

遍历节点

1、children（）方法

该方法用于取的匹配元素的子元素集合

注意：children（）方法只考虑子元素而不考虑其他后代元素

2、next（）方法

该方法用于取的匹配元素后面紧邻的同辈元素

3、prev（）方法

该方法用于取的匹配元素前面紧邻的同辈元素

4、siblings（）方法

该方法用于取的匹配元素前后所有的同辈元素

5、closest（）

该方法用于取的最近的匹配元素。首先检查当前元素是否匹配，如果匹配则直接返回元素本身。

如果不匹配则向上查找父元素逐级向上直到找到匹配选择器的元素。如果什么都找不到则返回一个空的jQuery对象

CSS-DOM操作

CSS-DOM技术简单来说就是读取和设置style对象的各种属性。style属性很有用，但最大不足是无法通过它来提取到通过外部CSS设置的样式信息。

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

1、offset（）方法

它的作用是获取元素在当前视窗的相对便宜，其中返回的对象包括两个属性，即top和left，它只对可见元素有效。

 var offset = $("p").offset();    //获取<p>元素的offset()
  var left = offset .left;       //获取左偏移
  var top = offset . top;        //获取右偏移

2、position()方法

它的作用是获取元素相对于最近的一个position样式属性设置为relative或absolute的祖父节点的相对偏移。

3、scrollTop()方法和sceollLeft()方法

这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。