JQuery html操作

2022-04-04 18:35:25 阅读：164 来源： 互联网

标签：JQuery function console log p3 text html 操作 click

<!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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JQuery html操作