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" ]);
}