jQuery操控DOM元素

建立节点元素

$(html)用于动态的建立节点元素，只须要找到元素的上级节点

点击按钮建立p元素节点，并设置内容为：建立的节点，颜色为红色，字体大小为20像素

<script type="text/javascript">
    $(function(){
        var p=$('<p style="color: red;font-size: 20px">建立的节点</p>');
        $("input").click(function(){
            $("#wrapper").append(p);
        });
    });
</script>
<div id="wrapper">
    <input type="button" value="点击建立图片节点" />
</div>

插入节点

插入内部节点

append(function(index,html))

这个方法是将一个function函数做为append方法的参数，该函数的功能必须返回一个字符串，做为append方法插入的内容，index参数为对象在这个集合中的索引值，html参数为该对象原有的html值

经过append(function(index,html))方法插入节点

<script type="text/javascript">
    $(function(){
        var p=$('<p style="color: red;font-size: 20px">建立的节点</p>');
        $("input").click(function(){
            $("#wrapper").append(fun);
        });
        function fun(){
            var p=$('<p style="color: red;font-size: 20px">建立的节点</p>');
            return p;
        }
    });
</script>
<div id="wrapper">
    <input type="button" value="点击建立图片节点" />
</div>

appendTo(content);

该方法用于将一个指定的元素插入到另外一个元素的内容中

将img元素插入到div元素中去

<script type="text/javascript">
    $(function() {
        $("input").click(function() {
            $("img.img").appendTo($("div.con"));
            });
    });
</script>
<div id="wrapper">
    <input type="button" value="点击建立图片节点" />
    <div class="con" style="border: 2px solid red">
        <img src="http://xinxinjs.github.io/img_test/st1.jpg" />
    </div>
    <img class="img" src="http://xinxinjs.github.io/img_test/st2.jpg" />
</div>

其余方法：

append(context);
context表示追加到目标中的内容

prepend(content);
content表示插入目标元素内部前面的内容

prepend(function(imdex,html));
经过function函数返回插入目标元素内部前面的内容

prependTo(content);
content用于表示选择元素的jQuery表达式

插入外部节点

after(content);
content表示插入目标元素外部后面的内容

after(function);
经过function函数返回插入目标元素外部后面的内容

before(content);
content表示插入目标元素外部前面的内容

before(function);
经过function函数返回插入目标元素外部前面的内容

insertAfter(content);
content表示插入目标元素外部后面的内容，（经测试，该方法会删除目标元素，而后在目标元素的外部后面插入新的内容）

insetBefore(function);
content表示插入目标元素外部前面的内容，（经测试，该方法会删除目标元素，而后在目标元素的外部前面插入新的内容）

在目标元素的外部后面插入图片

<script type="text/javascript">
    $(function() {
        $("input").click(function() {
            $(".con").after('<img src="http://xinxinjs.github.io/img_test/st1.jpg" />');
        });
    });
</script>
<div id="wrapper">
    <input type="button" value="点击建立图片节点" />
    <div class="con" style="border: 2px solid red">
        <img src="http://xinxinjs.github.io/img_test/st1.jpg" />
    </div>
        <img class="img" src="http://xinxinjs.github.io/img_test/st2.jpg" />
</div>

复制节点

将某个元素节点复制到另外一个节点后，在jQuery中经过clone方法实现，其功能是复制匹配的DOM元素，而且选中复制成功的元素，该方法仅是复制元素自己，被复制后的新元素不具备任何元素行为。若是在复制时将该元素的所有行为也进行复制，能够经过方法clone(true);实现

点击图片，对图片进行复制，并添加到原来图片的后面

<script type="text/javascript">
    $(function() {
        $("img").click(function() {
            $(this).clone().appendTo("div.con");
        });
    });
</script>
<div id="wrapper">
    <div class="con" style="border: 2px solid red">
        <img src="http://xinxinjs.github.io/img_test/st1.jpg" />
    </div>
</div>

替换节点

在jQuery中替换节点有replaceWith和replaceAll两种方法，其语法以下

replaceWith(content);
该方法的功能是将全部选择的元素替换成指定的HTML或DOM元素，其中参数content为被所选元素替换的内容

replaceAll(selector);
该方法是将全部选择的元素替换成指定selector的元素，其中参数selector为须要被替换的元素

分别用两种方法实现图片的替换

<script type="text/javascript">
    $(function(){
        $("#s1").click(function(){
            $(this).replaceWith('<img src="http://xinxinjs.github.io/img_test/st3.jpg" />');
        });
        $("#s2").click(function(){
            
            $('<img src="http://xinxinjs.github.io/img_test/st3.jpg" />').replaceAll("#s2");
        });
    });
</script>
<img id="s1" src="http://xinxinjs.github.io/img_test/st2.jpg" />
<img id="s2" src="http://xinxinjs.github.io/img_test/st1.jpg" />

包裹节点

在jQuery中能够根据需求包裹某各指定节点，对节点的包裹也是DOM对象操做中很重要的一项

如下列表展现包裹节点的所有方法

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函数返回的代码包裹起来

点击文本，用a标签包裹文本

<script type="text/javascript">
    $(function(){
        $("p").click(function(){
            $(this).wrap("<a href='#'></a>");
        });
    });
            
</script>
<p>元素，点击以后用a标签包裹</p>

遍历元素

在DOM文档中，有时候须要对同一标记的元素进行同一操做。在传统的JavaScript中，老是先获取元素的总长度，而后以for循环语句，递减总长度，访问其中的某各元素，代码相对复杂
而在jQuery中可使用each方法实现元素的遍历，其语法如是：each(callback);

其中callback是一个function函数，该函数还能够接受一个形参，此形参为遍历元素的序号，从0开始。若是须要访问元素中的属性，能够借助形参index，配合this关键字来实现元素属性的设置或获取

删除元素

带DOM操做页面时，jQuery提供了两个删除元素的方法remove和empty方法，严格来讲empty并不是真正意义上的删除，使用该方法仅仅能够清空全部的节点或节点所包括的全部后代元素，并不是删除节点和元素

remove方法的语法以下：remove([expr]);

其中expr为可选项，若是接受参数，则该参数为筛选元素的jQuery表达式，经过该表达式获取指定的元素，并进行删除。

empty语法的格式以下：empty();

点击文字，删除文字

<script type="text/javascript">
    $(function(){
        $("p").click(function(){
            $(this).remove();
        });
    });     
</script>
<p>元素，点击以后用a标签包裹</p>