JQuery学习--DOM节点的操作

来源：互联网发布：一元购完整源码编辑：程序博客网时间：2024/04/29 04:19

Jquery中DOM节点的创建：直接将所需节点代码写入$(“html节点代码”)中即可，返回一个变量，然后将该变量添加到现有DOM元素中即可。

已有对象.append(要添加的对象)

作为最后一个子元素添加

要添加的对象.appendTo(已有对象)

prepend（）/prependTo()

作为第一个子元素添加

已有元素.before(要添加的元素)/after()

在对象前面/后面添加新的元素，可用逗号分割添加多个元素

要添加的元素.insertBefore(已有元素)/insertAfter()

.empty()

删除元素所有子节点

.remove(“selector”)

删除自身整个元素，可以添加筛选参数

.detach()

删除节点，并将其保存在返回对象中，之后可以再次调用添加

.clone()

克隆节点结构，选填参数true后会同时克隆节点的事件

old.replaceWith(new)

new.replaceAll(old)

用旧元素替换新的元素

.wrap(parent)

将每个元素包裹一个父元素

.unwrap()

去除外层包裹

.wrapAll()

将所有元素包裹一个父元素

.wrapInner()

将每个元素内部包裹一个子元素

JQuery元素遍历

.children()

选中直接子节点，括号内可填选择器

.parent()

选中直接父节点，括号内可填选择器

.parents（）

选中所有的祖先节点

.closest(selector)

向上查找最近的满足条件的祖辈元素

.find(selector)

选中所有满足条件的后代元素

.next()

选中紧邻下一个同辈节点，可选填选择器

.prev()

选中紧邻前一个同辈节点，括号内可选填

.siblings()

选中所有同辈元素，括号内参数可选

.add()

添加新的选择

.each(function(index,element){this})

对每个进行函数操作，提供三个参数

注：选择器返回多个结果的可以通过括号内的选择器进行筛选，例如$('.item-2').next(':first')，选中多个类名为item-2的下一个节点，但:first只筛选了第一个。若括号内不填选择器，则默认选中所有的结果。

贴一个
使用each的例子：

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <style>    .left {        width: auto;        height: 150px;    }        .left div {        width: 150px;        height: 120px;        padding: 5px;        margin: 5px;        float: left;        background: #bbffaa;        border: 1px solid #ccc;    }    </style>    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body>    <h2>each方法</h2>    <div class="left first-div">        <div class="div">            <ul>                <li>list item 1</li>                <li>list item 2</li>                <li>list item 3</li>            </ul>        </div>        <div class="div">            <ul>                <li>list item 4</li>                <li>list item 5</li>                <li>list item 6</li>            </ul>        </div>    </div>    <br/>    <button>点击：each方法遍历元素</button>    <button>点击：each方法回调判断</button>    <script type="text/javascript">    $("button:first").click(function() {        //遍历所有的li        //修改每个li内的字体颜色        $("li").each(function(index, element) {            $(this).css('color','red')        })    })    </script>    <script type="text/javascript">    $("button:last").click(function() {        //遍历所有的li        //修改偶数li内的字体颜色        $("li").each(function(index, element) {            if (index % 2) {//使用index参数                $(this).css('color','blue')//this形参指的是正在遍历的节点            }        })    })    </script></body></html>

0 0