jQuery html text val方法使用

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>b index</title>
<link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>
<style type="text/css">
    .s1{
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    .s2{
        width: 50px;
        height: 50px;
        background-color: green;
    }
</style>
</head>
<body style="margin:150px;">
    <div id="div001">div001</div>
    <div id="div002">
        <select id='slt001'>
            <option value="optval1">opt1</option>
            <option>opt2</option>
        </select>
        <select id='slt002' multiple="multiple">
            <option>opt1</option>
            <option>opt2</option>
            <option>opt3</option>
        </select>
        <select id="slt003" multiple="multiple">
            <option value="optval1">opt1</option>
            <option value="optval2">opt2</option>
            <option value="optval3">opt3</option>
        </select>
    </div>
    <div id="div003">
        <input type="checkbox" id="chk001" ><label for="chk001">chk001</label>
        <input type="checkbox" id="chk002" value="chk002" ><label for="chk002">chk002</label>
    </div>
    <div id="div004">
        <input type="checkbox" value="check1"/> check1
        <input type="checkbox" value="check2"/> check2
        <input type="radio" value="radio1"/> radio1
        <input type="radio" value="radio2"/> radio2
        <input type="text">
    </div>
    <div>
        <button id="btn001">click me to get div001 html/text/val </button>
        <button id="btn002">click me to get slt001 html/text/val </button>
        <button id="btn003">click me to get slt002 html/text/val </button>
        <button id="btn004">click me to get slt003 text/val </button>
        <button id="btn005">click me to get slt003 option text/val </button>
        <button id="btn006">click me to get chk001 html/text/val </button>
        <button id="btn007">click me to get chk002 html/text/val </button>
        <button id="btn008">click me to set chk002 selected </button>
        <button id="btn009">click me to run demo </button>
    </div>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="b/js/bootstrap.js"></script>
    <script type="text/javascript" src="js/index035.js"></script>
</body>
</html>

$(function() {
    $('#btn001').click(btn001Click);
    $('#btn002').click(btn002Click);
    $('#btn003').click(btn003Click);
    $('#btn004').click(btn004Click);
    $('#btn005').click(btn005Click);
    $('#btn006').click(btn006Click);
    $('#btn007').click(btn007Click);
    $('#btn008').click(btn008Click);
    $('#btn009').click(btn009Click);
});
function btn001Click() {
    var string = $('#div001').html();
    console.log(string);
    var str2 = $('#div001').text();
    console.log(str2);
    // 返回的是空字符串；
    var str3 = $('#div001').val();
    console.log(str3);
}
function btn002Click() {
    var str1 = $('#slt001').html();
    console.log(str1);
    var str2 = $('#slt001').text();
    console.log(str2);
    // 如果options没有 value，就选其文本值；
    var str3 = $('#slt001').val();
    console.log(str3);
}
function btn003Click() {
    var str1 = $('#slt002').html();
    console.log(str1);
    // 得到的是opt1/opt2/opt3，不是选中的option的text；
    var str2 = $('#slt002').text();
    console.log(str2);
    // 如果options没有 value，就选其文本值；
    // 多选select返回的都是一个数组，选中一个元素数组长度就是1；
    var str3 = $('#slt002').val();
    console.log(str3);
}
function btn004Click() {
    // 得到的是opt1/opt2/opt3，不是选中的option的text；
    var str2 = $('#slt003').text();
    console.log(str2);
    var str3 = $('#slt003').val();
    console.log(str3);
}
function btn005Click() {
    // 这样得到的值是没有分隔的字符串；
    var str2 = $('#slt003 option:selected').text();// 与这个一样$('#slt003').find('option:selected').text();
    console.log(str2);
    var str3 = $('#slt003').val();
    console.log(str3);
    // 返回的是[domopt1,domopt2]；
    var opts = $('#slt003 option:selected');
    // 遍历获取select中选中的option的text、value；
    for (var i = 0, len = opts.length; i < len; i++) {
        // dom对象转换为jQuery对象；
        var $o = $(opts[i]);
        console.log($o.text() + '---' + $o.val());
    }
}
function btn006Click() {
    // 得到空字符串
    var str1 = $('#chk001').html();
    console.log(str1);
    // 得到空字符串
    var str2 = $('#chk001').text();
    console.log(str2);
    // 如果没有value，得到的是字符串on
    var str3 = $('#chk001').val();
    console.log(str3);
}
function btn007Click() {
    // 得到空字符串
    var str1 = $('#chk002').html();
    console.log(str1);
    // 得到空字符串
    var str2 = $('#chk002').text();
    console.log(str2);
    // 不管是否选中，都会返回chk002；
    var str3 = $('#chk002').val();
    console.log(str3);
}
function btn008Click() {
    // 这样修改了chk002的值，但是没有选中的效果；
    // $('#chk002').val('chk2');
    // 如果写成这样，就不能正常修改值了；
    // $('#chk002').val(['chk2']);
    // 这样会把所有的input的值都修改为chk002；
    // $('input').val('chk002');
    // 这样写就可以进行chk002的选中了；
    $('input').val([ 'chk002' ]);
}
function btn009Click() {
    // 这样可以进行check2,radio1的选中；同时也会使input.text的值变成'check2,radio1'
    // $("input").val([ "check2", "radio1" ]);
    // 这样可以防止把input.text的内容进行修改；
    $('input[type=checkbox]').val([ "check2", "radio1" ]);
}