jquery dom

浏览数：66 / 时间：2015年06月09日

DOM（Document Object Model，文档对象模型）为文档提供了一种结构化表示方法，通过该方法可以改变文档的内容和展示形式。在实际运用中，DOM更像是桥梁，通过它可以实现跨平台、跨语言的标准访问。

单词Document即文档，当我们创建一个页面并加载到web浏览器时，dom模型则根据该页面的内容创建了一个文档文件；

单词Object即对象，是指具有独立特性的一组数据集合；

单词Model即模型，在页面文档中，通过树状模型展示页面的元素和内容，其展示的方式则是通过节点（node）来实现的。

1、访问元素

在操作中，元素的访问是最频繁、最常用的，主要包括对元素属性、内容、值、CSS的操作。

(1) 元素属性操作

a. 获取元素属性

获取元素属性的语法格式如：attr(name)，其中，参数name表示属性的名称。

b. 设置元素属性

设置元素属性的语法格式如：attr(name，value)，其中，参数name表示属性的名称，value表示属性的值。

如果要设置多个属性，其语法格式如：attr({name0 : value0，name1 : value1})。

attr()方法还可以绑定一个function函数，通过该函数返回的值作为元素的属性值，其语法格式如：attr(key，function(index))，其中，参数index为当前元素的索引号，整个函数返回一个字符串作为元素的属性值。

c. 删除元素属性

使用removeAttr()方法可以将元素的属性删除，其语法格式为：removeAttr(name)，其中，参数name为元素属性的名称。

(2) 元素内容操作

在jquery中，操作元素内容的方法包括html()和text()。前者与javascript中的innerHTML属性类似，即获取或设置元素的HTML内容；后者与javascript中的innerText属性，即获取或设置元素的文本内容；

a. html()，用于获取元素的html内容；

b. html(val)，用于设置元素的html内容；

c. text()，用于获取元素的文本内容；

d. text(val)，用于设置元素的文本内容；

注意：html()方法仅支持xhtml的文档，不能用于xml文档，而text()则既支持html文档，也支持xml文档。

(3) 获取或设置元素值

在jquery中，如果要获取元素的值，是通过val()方法实现的，其语法如：val(val)，其中，如果不带参数val，则是获取某元素的值；反之，则是将参数val的赋给某元素，即设置元素的值。

通过val()方法还可以获取select标记中的多个选项值，其语法如：val().join(",")。

在val(val)方法中，如果有参数，其参数还可以是数组的形式，即val(array)，其作用是设置元素被选中。

(4) 元素样式操作

元素样式的操作包含：直接设置样式、增加CSS类别、类别切换、删除类别。

a. 直接设置元素样式值

通过css()方法为某个指定的元素设置样式值，其语法如：css(name, value)，其中name为样式名称，value为样式的值。

b. 增加css类别

通过addClass()方法增加元素类别的名称，其语法如：addClass(name)，其中，参数name为类别的名称。

也可以增加多个类别的名称，只需要用空格将其隔开即可，其语法如：addClass(name1，name2 ... )。

注意：使用addClass()方法仅是追加样式类别，即它还保存原有的类别。

c. 类别切换

通过toggleClass()方法切换不同的元素类别，其语法如：toggleClass(name)，其中参数name为类别名称，其功能是当元素中含有名称为name的css类别时，删除该类别，否则增加一个该名称的css类别。

d. 删除类别

removeClass()方法用于删除类别，其语法如：removeClass([name])，其中，参数name为类别名称，该名称是可选项，当选该名称时，则删除名称是class的类别，有多个类别时用空格隔开。如果不选名称，则删除元素中的所有类别。

2、创建节点元素

函数$()用于动态创建页面元素，其语法格式如下：

$(html)

3、插入节点

按照插入元素的顺序来分：

(1) 内部插入节点方法

append(content)：向所选择的元素内部插入内容；

append(fucntion(index,html))：向所选择的元素内部插入function函数所返回的内容；

appendTo(content)：把所选择的元素追加到另一个指定的元素集合中；

prepend(content)：向每个所选择的元素内部前置内容；

prepend(function(index,html))：向所选择的元素内部前置function函数所返回的内容；

prependTo(content)：将所选择的元素前置到别一个指定的元素集合中；


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .red { background: red; }
        .green { background: green; }
    </style>
</head>
<body>
    <p>Hello World!</p>
    <p>Hello Tomorrow!</p>
    <input type="button" name="name" value="append" id="append" />
    <input type="button" name="name" value="appendTo" id="appendTo" />
    <input type="button" name="name" value="prepend" id="prepend" />
    <input type="button" name="name" value="prependTo" id="prependTo" />
</body>
<script src="scripts/jquery.min.js"></script>
<script>
    $(function () {
        $("#append").click(function () {
            $("p").append("<span class=‘red‘>123</span>");
        })
        $("#appendTo").click(function () {
            $("<span class=‘red‘>123</span>").appendTo("p");
        })
        $("#prepend").click(function () {
            $("p").prepend("<span class=‘red‘>456</span>");
        })
        $("#prependTo").click(function () {
            $("<span class=‘red‘>456</span>").prependTo("p");
        })
    })
</script>
</html>

(2) 外部插入节点方法

after(content)：向所选择的元素外部后面插入内容；

after(function)：向所选择的元素外部后面插入function函数所返回的内容；

before(content)：向所选择的元素外部前面插入内容；

before(function)：向所选择的元素外部前面插入function函数所返回的内容；

insertAfter(content)：将所选择的元素插入另一个指定的元素外部后面；

insertBefore(content)：将所选择的元素插入另一个指定的元素外部前面；


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        p{ border: 1px solid gray; padding: 5px; }
        span { margin: 0px 5px; }
        .red { background: red; }
        .green { background: green; }
    </style>
</head>
<body>
    <p>Hello World!</p>
    <p>Hello Tomorrow!</p>
    <div>
        <input type="button" name="name" value="after" id="after" />
        <input type="button" name="name" value="before" id="before" />
        <input type="button" name="name" value="insertAfter" id="insertAfter" />
        <input type="button" name="name" value="insertBefore" id="insertBefore" />
    </div>
</body>
<script src="scripts/jquery.min.js"></script>
<script>
    $(function () {
        $("#after").click(function () {
            $("p").after("456");
        })
        $("#before").click(function () {
            $("p").before("123");
        })
        //not execute
        $("#insertAfter").click(function () {
            $("p").insertAfter("456");
        })
        //not execute
        $("#insertBefore").click(function () {
            $("p").insertBefore("123");
        })
    })
</script>
</html>

4、复制节点

在jquery中，通过方法clone()实现复制节点，其语法格式为：

clone()

其功能为复制匹配的dom元素并且选中复制成功的元素，该方法仅是复制元素本身，被复制后的新元素不具有任何元素行为。

如果需要在复制时将该元素的全部行为也进行复制，可以通过方法clone(true)实现，其语法格式为：

clone(true)

5、替换节点

(1) replaceWith(content)

将所有选择的元素替换成指定的html和dom元素，其中参数content为被所选择替换的内容。

(2) replaceAll(selector)

将所有选择的元素替换成指定selector的元素，其中参数selector为需要被替换的元素。

(3) replaceWith()与replaceAll()方法都可以实现元素节点的替换，二者最大的区别在于替换字符的顺序，前者是用括号中的字符替换所选择的元素，后者是用字符串替换括号中所选择的元素。同时，一旦完成替换，被替换元素中的全部事件都将消失。


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .red { background: red; }
        .green { background: green; }
    </style>
</head>
<body>
    <p>Hello World!</p>
    <p>Hello Tomorrow!</p>
    <input type="button" name="name" value="replaceWith" id="replaceWith" />
    <input type="button" name="name" value="replaceAll" id="replaceAll" />
</body>
<script src="scripts/jquery.min.js"></script>
<script>
    $(function () {
        $("#replaceWith").click(function () {
            $("p").replaceWith("<div class=‘red‘>123</div>");
        })
        $("#replaceAll").click(function () {
            $("<div class=‘green‘>456</div>").replaceAll("p");
        })
    })
</script>
</html>

6、包裹节点

wrap(html)：

html参数为字符串代码，用于生成元素并包裹所选元素；

把所有选择的元素用其他字符串代码包裹起来；

wrap(elem)：

elem参数用包装所选元素的dom元素；

把所有选择的元素用其他dom元素包裹起来；

wrap(fn)：

fn参数为包裹结构的一个函数；

把所有选择的元素用function函数返回的代码包裹起来；

unwrap()：

无参数；

移除所选元素的父元素或包裹标记；

wrapAll(html)：

html参数为字符串代码，用于生成元素并包裹所选元素；

把所有选择的元素用单个元素包裹起来；

wrapAll(elem)：

elem参数用于包装所选元素的dom元素；

把所有选择的元素用单个dom元素包裹起来；

wrapInner(html)：

html参数为字符串代码，用于生成元素并包裹所选元素；

把所有选择的元素的子内容（包括文本节点）用字符串代码包裹起来；

wrapInner(elem)：

elem参数用于包裹所选元素的dom元素；

把所有选择的元素的子内容（包括文本节点）用dom元素包裹起来；

wrapInner(fn)：

fn参数为包裹结构的一个函数；

把所有选择的元素的子内容（包括文本节点）用function函数返回的代码包裹起来；

wrap(html)与wrapInner(html)方法较为常用，前者包裹外部元素，后者包裹元素内部的文本字符。


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .red { background: red; }
        .green { background: green; }
    </style>
</head>
<body>
    <p>Hello World!</p>
    <p>Hello Tomorrow!</p>
    <input type="button" name="name" value="wrap" id="wrap" />
    <input type="button" name="name" value="unwrap" id="unwrap" />
    <input type="button" name="name" value="wrapAll" id="wrapAll" />
    <input type="button" name="name" value="wrapInner" id="wrapInner" />
</body>
<script src="scripts/jquery.min.js"></script>
<script>
    $(function () {
        $("#wrap").click(function () {
            $("p").wrap("<div class=‘red‘></div>");
        })
        $("#unwrap").click(function () {
            $("p").unwrap("<div></div>");
        })
        $("#wrapAll").click(function () {
            $("p").wrapAll("<div class=‘green‘></div>");
        })
        $("#wrapInner").click(function () {
            $("p").wrapInner("<em></em>");
        })
    })
</script>
</html>