Python学习 Day 049 - jQUery -DOM操作

主要内容:

1.jQuery的文档操作

1.jQuery的文档操作

1.1插入操作

//语法:
父元素.append(子元素)
//解释:追加某元素,在父元素中添加的子元素.子元素可以为:
 stirng | element（js对象） | jquery元素

代码示例

    <title>Title</title>
</head>
<body>
<input type="text">
<button id="append">追加</button>
<ul class="comment">
    <li>倚天屠龙记</li>
</ul>
<script src="./libs/jquery-3.3.1.js"></script>
<script>
    $(function(){
        //追加字符串
        $('.comment').append('<li id="item">张无忌</li>')

        $("#item").click(function(){
            alert($(this).text());
        });
        //追加js对象
        var li = document.createElement("li")
        li.innerText = "谢逊";
        $(".comment").append(li);

        //如果是jquery对象,相当于移动操作
        setTimeout(function(){
            $(".comment").append($("li").eq(0));
        },2000);

        $("<li>周芷若</li>").appendTo(".comment").click(function(){
            alert($(this).html())
        })
    })
</script>

(1) 前置插入

// 语法:
父.prepend(子)
子.prepenTo(父)

<script src="./libs/jquery-3.3.1.js"></script>
<script>
    $(function(){
        //前置追加
        $("#prepend").click(function(){
            //获取content值
            let content = $('input[type=text]').val();
            $('.comment').prepend(`<li>${content}</li>`);
            //两种添加方式
            //$(`<li>${content}</li>`).prependTo('.comment');
        })
    })

</script>

(2)后置追加

<script src="./libs/jquery-3.3.1.js"></script>
<script>
    //后置追加
     $("#append").click(function(){
        let content = $("input[type=Text]").val();
        if(!content){
            return;
        }
         $('.comment').append(`<li>${content}</li>`);
    })
</script>

(3)兄弟追加(后)

目标兄弟.after(要插入的兄弟)
要插入的兄弟.inertAfter(目标兄弟)

<script src="./libs/jquery-3.3.1.js"></script>
<script>
    $("#after").click(function(){
        let content = $('input[type=text]').val();
        //第一种写法
        $("#item").after(`<li>${content}</li>`);
        //第二种写法
        $(`<li>${content}</li>`).insertAfter("#item")
    })
</script>

(4)兄弟追加(前)

//语法

目标兄弟.before(要插入的兄弟)
要插入的兄弟.inertBefore(目标兄弟)

1.2删除和清空

//删除
$(seletor).remove();//删除整个标签 事件也删除
$(seletor).detach()//删除整个标签 事件保留

//清空
$(seletor).empty();
$(seletor).html('');
$(seletor).text('');

删除代码

<script src="./libs/jquery-3.3.1.js"></script>
<script>
    $("#del").click(function(){
        alert(1);
        //remove()删除,表示整个标签都删除(事件也删除)
        // $("ul").remove();
        var jbtn = $(this).remove();
        $(".comment #item").append(jbtn)
    });


    //detach 删除标签,事件不删除
    $("#detach").click(function(){
        alert(1);
      var jbtn =  $(this).detach();
      console.log(jbtn);
      $('.comment #item').append(jbtn)

    })

清空代码

<script src="./libs/jquery-3.3.1.js"></script>
<script>
    $(function(){
        //清空父级元素的子内容
        $('#empty').click(function(){
            // $(".comment").empty();
            // $(".comment").html("");
            $(".comment").text("");
        })
    })
</script>

1.3 替换

<script src="./libs/jquery-3.3.1.js"></script>

<script>
    $(function(){
        $("#replace").click(function(){
            $(".comment li a ").replaceWith('<span>1</span>')
        })
    })
</script>

2.事件

(1)常见事件

onclick : 点击事件
ondblclick
onmouseover
onmouseout
onmouseenter
onmouseleave
onload
onresize
onscroll
onfocus
onblur
oninput

(2)事件监听

DOM的2级事件

事件捕获
处于目标阶段
事件冒泡阶段

oDiv.onclick = function(){};
等价于
//false 表示没有捕获阶段  处于目标 冒泡
oDiv.addEventLister('click',function(){},false);

事件流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件流</title>
    <script>

        window.onload = function () {

            var oBtn = document.getElementById('btn');

            //1
            document.addEventListener('click', function () {
                console.log('document处于事件捕获阶段');
            }, true);

            //2
            document.documentElement.addEventListener('click', function () {
                console.log('html处于事件捕获阶段');
            }, true);

            //3
            document.body.addEventListener('click', function () {
                console.log('body处于事件捕获阶段');
            }, true);

            //4
            oBtn.addEventListener('click', function () {
                console.log('btn处于事件捕获阶段');
            }, true);

            //4

            oBtn.addEventListener('click', function () {
                console.log('btn处于事件冒泡阶段');
            }, false);
            //5  false 表示冒泡
             document.body.addEventListener('click', function () {
                console.log('body处于事件冒泡阶段');
            }, false);
            // //6
            document.documentElement.addEventListener('click', function () {
                console.log('html处于事件冒泡阶段');
            }, false);

            //7
            document.addEventListener('click', function () {
                console.log('document处于事件冒泡阶段');
            }, false);





        };

    </script>
</head>
<body>
<a href="javascript:void(0);" id="btn">按钮</a>
</body>
</html>

事件流

(3)数据驱动视图

(4)事件对象

每个事件都会默认有个event对象

e.target 事件目标对象
e.keycode 键码
e.stopPropogation();//阻止默认事件

jquery的事件

click 单击事件(常用)
dblclick 双击事件
mouseover 鼠标移入事件(鼠标穿过被选元素或被选元素的子元素会触发)
mouseout
mouseenter(常用)进入事件(鼠标只穿过被选元素会触发事件)
mouseleave
mousedown 鼠标按下
mouseup 鼠标弹起

posted @ 2018-11-14 21:55 一路向北_听风阅读(157) 评论(0) 收藏举报

刷新页面返回顶部

一路向北_听风

Python学习 Day 049 - jQUery -DOM操作

公告