JQ03-设置内容 - text()、html() 、val()以及attr()设置属性

jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

一、获取内容

text(); 设置或返回所选元素的文本内容
demo

<body>
    <div id="txt">
        这里是文本的内容
    </div>
    <script src="jquery-1.12.2.js"></script>
    <script>
        // 使用text()获取所选元素文本内容
        console.log($("#txt").text()); //这里是文本的内容
        // 使用text()设置文本内容
        $("#txt").text("这是修改的文本内容");
        console.log($("#txt").text()); //这是修改的文本内容
    </script>
</body>

html(); 设置或返回所选元素的内容（包括HTML标记）

$("selector").html();//获取某个元素的内容
$("selector").html("")//设置

demo 获取 html();

<body>
    <div id="txt">
        这里是文本的内容
    </div>
    <!--<input type="text" id="in" value="">-->
    <script src="jquery-1.12.2.js"></script>
    <script>
        // 使用text()获取所选元素文本内容
        console.log($("#txt").html()); //这里是文本的内容 包含空格等
    </script>
</body>

demo 设置 html("<button>按钮二</button>"):

  $("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
  });

val(); 设置或返回输入字段的值

$("selector").val();//获取某个元素的value值
$("selector").val(”string“);//给某个元素设置value值

demo 设置或返回输入字段value值

<input type="text" id="in" value="请输入您的密码">
    <script src="jquery-1.12.2.js"></script>
    <script>
        // 获取value值 val()
        console.log($('#in').val()); //请输入您的密码
        // 设置value值 val("string");
        $("#in").val("123");
        console.log($('#in').val()); //123 同时input框内的文字也变了
    </script>