JQuery 之 DOM 文档操作

最新推荐文章于 2022-11-03 13:39:11 发布

Nick Peng

最新推荐文章于 2022-11-03 13:39:11 发布

阅读量369

点赞数

分类专栏：前端文章标签： JQuery DOM文档操作

本文链接：https://blog.csdn.net/PY0312/article/details/101056165

版权

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

DOM 文档对象模型 (document object model):

js内置的一个结构化表现手法，通过这个结构化表现手法把所有的标签实现了一个倒置的树状结构图

节点 (node)：

标签(html)==元素(javascript)==节点(dom)

节点与节点的关系：

同级关系

子级关系

节点操作简单案例：

<script>
    $(function(){
        // 节点与节点关系：子级 和 同级
        // 追加节点：1. 声明变量保存节点数据；2. 使用追加函数将节点追加到相应的位置
        var $li = $('<li>2222222</li>')
        // append 子级结尾追加
        $('ul').append($li)
    })
</script>

<!--html部分-->
<body>
    <!-- 3 -->
    <ul>
        <!-- 1 -->
        <li>注意注意</li>
        <!-- 2 -->
    </ul>
    <!-- 4 -->
</body>

节点常用操作：

追加节点
- 首先要创建节点，再把新创建的节点追加到指定位置
在子级位置追加
- append() ：在子级的尾部追加
- $(选择器).append(新建节点)
- appendto() : 在子级的尾部追加
- $(新建节点).appendto(目的地)
- prepend() ：在子级的首部追加
- $(选择器).prepend(新建节点)
- prependto() : 在子级的首部追加
- $(新建节点).prependto(目的地)
在同级位置追加
- after() ：在同级的下面追加
- $(选择器).after(新建节点)
- insertAfter() : 在指定节点的下面追加
- $(新建节点).insertAfter(目的地)
- before() ：在同级的上面追加
- $(选择器).before(新建节点)
- insertBefore() : 在指定节点的上面追加
- $(新建节点).insertBefore(目的地)
指定位置移动节点
- 首先找到要移动的节点，在把节点插入到指定位置
- insertAfter() ：移动到指定位置的下面
- $(选择器).insertAfter(目的地)
- insertBefore() ：移动到指定位置的上面
- $(选择器).insertBefore(目的地)
删除节点 remove()
- $(选择器).remove()
清空节点 empty()
- $(选择器).empty()

节点操作 example：

<script type="text/javascript">
    $(function () {
        // 增加按钮单击 -- 获取用户输入的数据放到li节点里面，追加到页面
        var $btn1 = $('#btn1')
        // var str = ''
        $btn1.click(function () {
            var vals = $('#txt1').val()
            // alert(vals)
            // str = ''
            if (vals == '') {
                alert('请输入内容')
                return
            }
            var $li = $('<li><span>' + vals + '</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>')
            // 子级前面追加
            $li.prependTo($('#list'))
        })
        // 删除  上下  单击
        // $('a').click(function(){  // 原始绑定命令的方法无法做给未来元素绑定命令
        //  alert(1)
        // })
        $('#list').delegate('a', 'click', function () {
            // alert(2)
            // 不同的a有不的功能，看class属性的值 -- if  得到class属性的值
            var myClass = $(this).prop('class')
            if (myClass == 'del') {
                // 删除的是自己的父li
                $(this).parent().remove()
            }
            else if (myClass == 'up') {
                // 如果是第一个 提示  索引值==0
                if ($(this).parent().index() == 0) {
                    alert('已经是第一个了')
                    return
                }
                $(this).parent().insertBefore($(this).parent().prev())
            }
            else if (myClass == 'down') {
                // 如果是最后一个提示一下 ：index == 长度-1
                // 后面没有其他标签最后一个了：后面人地 长度是0
                if ($(this).parent().nextAll().length == 0) {
                    alert('已经是最后一个了')
                    return
                }
                $(this).parent().insertAfter($(this).parent().next())
            }
        })
    })
</script>

Nick Peng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 之 DOM 文档操作

DOM文档对象模型 (document object model):js内置的一个结构化表现手法，通过这个结构化表现手法把所有的标签实现了一个倒置的树状结构图节点(node)：标签(html)==元素(javascript)==节点(dom)节点与节点的关系：同级关系子级关系节点操作简单案例：<script> $(function(){ ...
复制链接

扫一扫

专栏目录