JQuery html操作

2022-04-04 18:35:25 作者：互联网

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p id="p1">this is <b>p</b></p>
        <button type="button" id="btn1">click</button><br>
        
        输入:<input type="text" id="input1"/ name="uname">
        <button type="button" id="btn2">click</button><br>
        
        <p id="p2">here</p>
        <button type="button" id="btn3">click</button><br>
        
        <a id="a1" href="">this is a A</a>
        <button type="button" id="btn4">click</button><br>
        
        <p id="p3"> is a </p>
        <button type="button" id="btn5">click</button><br>
        
        <p id="p4">this is a </p>
        <div id="div1" style="border: aqua solid; width: 200px ; height: 200px ;" >
            this is div
        </div>
        <button type="button" id="btn6">click</button><br>
        
        
        
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="JQ_html.js"></script>
            
        
    </body>
</html>

$(document).ready(function(){
    /**
     * 获得内容
     */
    $("#btn1").click(function(){
        console.log($("#p1").text());
        console.log($("#p1").html());
    })
    $("#btn2").click(function(){
        //获得字段值
        console.log($("#input1").val());
    })
    /**
     * 获得属性
     */
    $("#btn2").click(function(){
        //获得属性值
        console.log($("#input1").attr("name"));
    })
    
    /**
     * 设置内容
     */
    $("#btn3").click(function(){
        //val() html() text()
        $("#p2").text("Hello");
        //回调函数 两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值
        $("#p2").text(function(i,old){
            return old+" New Text "+i;
        })
    })
    /**
     * 设置属性
     */
    $("#btn4").click(function(){
        //可以同时设置多个值
        $("#a1").attr({
            "href":"http://www.baidu.com",
            "title":"Title"
        });
        //回调函数 两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值
    })
    /**
     * 添加新内容
     */
    $("#btn5").click(function(){
        //添加文本
            //结尾插入内容
            $("#p3").append("P");
            //开头插入内容
            $("#p3").prepend("This");
            //after() before()
            $("#p3").before("Before");
        //添加元素
            var txt=$("<p></p>").text("New Text");
            $("#p3").append(txt);
            
            var txt1=$("<a></a>").text("href");
            $("#p3").after(txt1);
    })
    
    /**
     * 删除内容
     */
    $("#btn6").click(function(){
        //删除元素
        $("#p4").remove();
        //选择
        $("p").remove("#p4");
        //清空内容
        $("#div1").empty();
    })
    
})

标签：JQuery,function,console,log,p3,text,html,操作,click
来源： https://www.cnblogs.com/lwx11111/p/16099956.html