jQuery html text val方法使用
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" ]); }
