前端（jQuery）（3）-- jQuery HTML之捕获、设置、元素添加、元素删除

1、捕获

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                alert("text:" + $("#text").text());
                alert("text:" + $("#text").html());/*这个连标签也会显示*/
            });
            $("#btn2").click(function(){
                alert("text:" + $("#it").val());
                alert("text:" + $("#aid").attr("href"));/*获取某一元素的属性值*/
            });
        });
    </script>
</head>
<body>
<p id="text">这是p元素的内容 <a id="aid" href="http://www.baidu.com" >这里是标签里的内容</a></p>
<button id="btn1">按钮1</button>
<p><input type="text" id="it" value="jikexueyuan"></p>
<button id="btn2">按钮2</button>
</body>
</html>

 

2、设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("#p1").text("百度一下");
            });
            $("#btn2").click(function(){
                $("#p2").html("<a href='http://www.baidu.com'>极客学院</a>");
            });
            $("#btn3").click(function(){
                $("#text1").val("修改后的text");
            });
            $("#btn4").click(function(){
                // $("#aid").attr("href","http://www.baidu.com");/*这是修改一个属性值*/
                $("#aid").attr({
                    "href":"http://www.jikexueyuan.com",
                    "title":"hello"
                });/*这是修改多个属性*/
            });
            $("#btn5").click(function(){
                $("#p5").text(function(i,ot){/*function是回调方法*/
                    return "old:" + ot + " new:这是新的内容" + (i+1);
                });
            });
            // $( "ul li" ).text(function( index ) {
            //     return "item number " + ( index + 1 );
            // });/*因为不是按钮触发的事件，所以会自己完成*/
            $("#btn6").click(function(){
                $( "ul li" ).text(function(index,ot) {
                    return "原来的内容："+ot+", item number " + ( index + 1 );
                });/*回调函数自己完成所有选中的标签，并完成要设置的任务。ot是原来标签内的字符串。
                    只需要知道这么用就可以了，具体原理如果不是研究算法的就不需要知道。
                    只有一个参数的时候就是当前标签的序号。从0开始算的。
                    其他的val()、html()等也是可以用这个的。*/
            });

        });
    </script>
</head>
<body>
    <p id="p1">Hello world!</p>
    <p id="p2">这是p2位置</p>
    <input type="text" id="text1" value="hello world">
    <button id="btn1">按钮1</button>
    <button id="btn2">按钮2</button>
    <button id="btn3">按钮3</button>
    <a href="http://www.jikexueyuan.com" id="aid">最初是极客学院,点击按钮4后链接更改</a>
    <button id="btn4">按钮4</button>
    <p id="p5">hello world555</p>
    <button id="btn5">按钮5</button>
    <button id="btn6">按钮6</button>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
    </ul>
</body>
</html>

 

3、添加元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("#p1").append("this is append");/*不换行在选中元素的内容后面添加*/
                $("#p1").prepend("this is prepend");/*不换行在选中元素的内容前面添加*/
            });
            $("#btn2").click(function(){
                $("#p2").before("this is before");/*换行在选中元素前面添加*/
                $("#p2").after("this is after");/*换行在选中元素后面添加*/
            });
        });
        function appendText(){
            /*
            * 追加html元素的三种方式
            * html、jQuery、DOM
            * */
            var text1 = "<p>p1111111</p>"
            var text2 = $("<p></p>").text("p2222222");
            var text3 = document.createElement("p");
            text3.innerHTML = "p333333";
            $("body").append(text1,text2,text3);
        }
    </script>
</head>
<body>
<p id="p1">这是p1</p>
<p id="p2">这是p2</p>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button onclick="appendText()">按钮3</button>
</body>
</html>

 

4、删除元素

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                // $("p").remove();/*将该类元素都删除，包括标签及其属性*/
                $("p").empty();/*将元素内部内容清空，标签还在*/
            });
        });
    </script>
</head>
<body>
    <p>p元素</p>
    <button id="btn1">删除</button>
</body>
</html>

 

posted @ 2018-12-13 21:06  林丶  阅读(286)  评论(0)    收藏  举报