使用jQuery获得内容以及内容的属性

前端技术 2023/09/08 JavaScript

复制代码 代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=\"utf-8\">
        <title></title>
        <script src=\"js/jquery.js\"></script>
    </head>
<style>
body{font-family: \"微软雅黑\";width: 980px; margin: 0 auto; text-align: center;}
    .box{
        width: 300px;
        height: 300px;
        background: green;
        border: 1px solid #e6e6e6;
        line-height: 200px;
        position: absolute;
    }
button{
    border: none;
    background: green;   
    width: 125px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 16px;
    margin-top: 50px;
    font-family: \"微软雅黑\";
    }
</style>
    <body>
        <button id=\"btn1\">显示text</button>
        <button id=\"btn2\">显示html</button>
        <button id=\"btn3\">显示输入内容</button>
        <p id=\"text\">这是要显示<b>粗体</b>的节奏</p>
        <br />
        <input id=\"input\" value=\"买房子\">
        <script>
            $(document).ready(function(){
                $(\"#btn1\").click(function(){
                    alert(\"Text: \" + $(\"#text\").text());
                });
                $(\"#btn2\").click(function(){
                    alert(\"HTML: \" + $(\"#text\").html());
                });
                $(\"#btn3\").click(function(){
                    alert(\"Value: \" +$(\"#input\").val());
                });
            });
        </script>
    </body>
</html>

Tips:

1、点击事件节点的选择 #botton

2、alert 的代码规则  （\"Value: \" + $(\"#id\").html）

今天的分享就先到这里了，后续我们还将持续更新一些新的jQuery实例。

本文地址：https://www.stayed.cn/item/22985

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案