美文网首页jQuery
jQuery —— DOM属性,值及内容操作

jQuery —— DOM属性,值及内容操作

作者: sky丶星如雨 | 来源:发表于2017-07-08 18:46 被阅读0次
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../jquery-1.11.3.min.js"></script>
        <script>
            $(function () {
                // 设置属性
                $("input").eq(0).click(function () {
                    $(this).attr("title", "动态设置属性");
                });
                // 获取属性
                $("input").eq(1).click(function () {
                    var attr = $("input").eq(0).attr("title");
                    console.log(attr);
                });
                // 移除属性
                $("input").eq(2).click(function () {
                    $("input").eq(0).removeAttr("title", "动态设置属性");
                });
                // 设置值
                $("input").eq(3).click(function () {
                    $("#txt").val("动态设置的值");
                });
                // 获取值
                $("input").eq(4).click(function () {
                    console.log($("#txt").val());
                });
                // 设置html内容
                $("input").eq(5).click(function () {
                    $("div").html("<P>我是html内容</P>");
                });
                // 获取html内容
                $("input").eq(6).click(function () {
                    console.log($("div").html());
                });
                // 设置文本内容
                $("input").eq(7).click(function () {
                    $("div").text("动态创建文本内容");
                });
                // 获取文本内容
                $("input").eq(8).click(function () {
                    console.log($("div").text());
                });
    
            })
        </script>
    </head>
    <body>
    <input type="button" value="设置属性">
    <input type="button" value="获取属性">
    <input type="button" value="移除属性">
    <input type="button" value="设置值">
    <input type="button" value="获取值">
    <input type="button" value="设置html内容">
    <input type="button" value="获取html内容">
    <input type="button" value="设置text内容">
    <input type="button" value="获取text内容">
    <div>
        <input type="text" id="txt">
    </div>
    </body>
    </html>
    

    相关文章

      网友评论

        本文标题:jQuery —— DOM属性,值及内容操作

        本文链接:https://www.haomeiwen.com/subject/wodjhxtx.html