jQuery学习笔记(3)-CSDN博客

本文链接：https://blog.csdn.net/watasihakami/article/details/21986561

jQuery可以用text（）html（）val（）获取文本内容 attr（）获取属性

例子：

    <script src="/jquery/jquery-2.1.0.js"></script>
    <script>
        $(document).ready(function () {
            $("#value").click(function () {
                alert("Value: " + $("#test1").val());
            });
            $("#btn1").click(function () {
                alert("Text: " + $("#test2").text());
            });
            $("#btn2").click(function () {
                alert("HTML: " + $("#test2").html());
            });
            $("#btnwww").click(function () {
                alert($("#www").attr("href"));
            });
        });
    </script>
</head>

<body>
    <button id="value">显示值</button>
    <button id="btn1">显示文本</button>
    <button id="btn2">显示 HTML</button>
    <button id="btnwww">显示 href 值</button>
    <p>姓名：<input type="text" id="test1" value="初始值"></p>
    <p id="test2">这是段落中的<b>粗体</b>文本。</p>
    <p><a href="http://www.baidu.com" id="www">baidu</a></p>
</body>

</html>

jQuery的 text（）html（）val（） attr（）这4个方法除了可以获得还可以更改

例子：

  <script src="/jquery/jquery-2.1.0.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").text("Hello world!");
            });
        });
       </script>
            </head>


            <body>
            <p>马上更改值</p>
            <button>更改值</button>
            </body>
            </html>

jQuery的append（）方法是追加

例子：

    <script src="/jquery/jquery-2.1.0.js">
    </script>
    <script>
        $(document).ready(function () {
            $("#btn1").click(function () {
                $("p").append(" <b>这个是一追加的p</b>.");
            });

            $("#btn2").click(function () {
                $("ol").append("<li>这是追加的一行</li>");
            });
        });
    </script>
</head>

<body>
    <p>这个一p</p>
    <p>这个一p</p>
    <ol>
        <li>这是一行</li>
        <li>这是一行</li>
        <li>这是一行</li>
    </ol>
    <button id="btn1">追加文本</button>
    <button id="btn2">追加列表项</button>
</body>
</html>

jQuery的empty（）和remove（）方法是删除
例子：

    <script src="/jquery/jquery-2.1.0.js"></script>
        <script>
            $(document).ready(function () {
                $("#btns").click(function () {
                    $("#div1").remove();
                });
                $("#btnq").click(function () {
                    $("#div2").empty();
                });
            });
    </script>
</head>
<body>
    <button id="btns">删除 div 元素</button>
    <button id="btnq">清空 div 元素</button>
    <br />
    <div id="div1" style="height: 100px; width: 300px; border: 1px solid black;background-color:#4cff00;">
        这是要执行remove()方法的div
    </div>
    <div id="div2" style="height:100px;width:300px;border:1px solid black;background-color:#4cff00;">
         这是要执行empty()方法的div
    </div>
</body>
</html>

jQuery操作多个CSS样式addClass（），removeClass（），toggleClass（）方法

例子：

    <script src="/jquery/jquery-2.1.0.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("h1,h2,p").toggleClass("blue");
                $("div").toggleClass("important");
            });
        });
    </script>
    <style type="text/css">
        .important {
            font-weight: bold;
            font-size: xx-large;
        }

        .blue {
            color: blue;
        }
    </style>
</head>
<body>

    <button>向元素添加类</button><br />
    <h1>变色</h1>
    <h2>什么色</h2>
    <p>蓝色</p>
    <p>是吗</p>
    <div>听说会变大</div>
    

</body>
</html>

jQuery的css()方法也可以和上面3个差不多设置和返回元素的样式

例子:

    <script src="/jquery/jquery-2.1.0.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").css({ "background-color": "Green", "font-size": "200%" });
            });
        });
    </script>
</head>

<body>
    <p style="background-color:#ff0000">变绿是吗</p>
    <p style="background-color:#444400">是的</p>
    <p style="background-color:#0000ff">不是</p>
    <button>为 p 元素设置多个样式</button>
</body>
</html>