jQuery-DOM增删查改

1.绑定事件

$().事件名(function(){功能})
事件名：鼠标事件键盘事件表单事件
事件委托：$().on('事件名',#####'target',function(){功能})
额外：one():绑定的事件只会执行一次

2.DOM的增删查改

增

创建元素：$('标签')
    如:$("<li><div><p class='title'>"+new.title+"<img src="+new.url+"></div></li>)
添加到页面：
    尾部添加：父级.append(子级)
            子级.appendTo(父级)
    指定位置添加：父级.prepend(子级)
                子级：prependTo(父级)

删除

empty():元素.empty()删除指定元素中所有子级元素
remove():元素.remove()指定的元素被删除

改

replaceWith() 
replaceAll()

查

父级关系：parent()
祖先级关系：parents(val)
子级关系：children()
后代关系：find(val)这个里面必须有参数
兄弟关系：
    上一个兄弟：prev()
    上面所有的兄弟：prevall()
    下一个兄弟：next()
    下面所有的兄弟：nextall()
    所有兄弟：siblings()
筛选：
    eq()
    first() 第一个
    last() 最后一个
    is() 验证作用

3.代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>增删查改</title>
</head>

<body>
    <div id="box">
        <ul>
            <li><span>1</span></li>
            <li><span>2</span></li>
            <li><span>3</span></li>
            <li><span>4</span></li>
        </ul>
    </div>
    <script src=" https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
    <script>
        //创建li标签，添加到ul
        $("<li><span>5</span></li>").appendTo('ul')
            //删除
            // $('ul').empty()
            // $('ul').remove()
            //查询
        var list = $('#list')
        console.log(list.parent().parent().parent())
        console.log(list.parents())

        console.log(list.children('div'))
        console.log(list.find('span')) //必须加参数

        console1.log(list.siblings())
    </script>
</body>

</html>

1.绑定事件

2.DOM的增删查改

增

删除

改

查

3.代码如下

猜你喜欢