以下皆以引入jQuery文件
表单元素属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
padding-bottom: 800px;
}
</style>
<script src="./jquery/jquery-3.7.1.js"></script>
</head>
<body>
<!-- 表单元素的内容：
1. 输入型表单的内容是 value 属性操作的值
-->
<input type="text" value="默认值"> <br>
<input type="password" value="1234"> <br>
<!-- 日期选择器需要按照固定格式定义 -->
<input type="date" value="2021-01-23"> <br>
<input type="color" value="#ff0000"> <br>
<!--
textarea 默认值由标签内容提供，但只有默认会存储在该位置
后续的修改都被记录在value属性上，但value属性不能textarea标签上直接使用
-->
<textarea>多行文本域的内容</textarea> <br>
<hr>
<input type="text" placeholder="提示" id="input1" value="默认值"> <br>
<input type="text" id="input2"> <br>
<input type="color" value="#ff0000" id="input3"> <br>
<input type="button" value="取值" onclick="getInputValue1()">
<input type="button" value="赋值" onclick="setInputValue1()">
<script>
function getInputValue1(){
var $input1 = $("#input1");
// log的多值同时输出，可以在浏览器控制台激活数据类型
console.log( 1 , $input1.val() );
// 表单元素如果没有定义value，默认值是 "" 字符串 ！！！
var $input2 = $("#input2");
console.log( 2 , $input2.val() );
}
function setInputValue1(){
var $input1 = $("#input1");
// var user = {
// name:"tom",
// age:23
// } // toString [object,Object]
// $input1.val( user );
// var arr = [1,2,3,4];
// $input1.val( arr ); // 1,2,3,4
$input1.val( '字符串' );
// 输入框需要基于类型接收输入框有效值
// $("#input3").val("字符串");
$("#input3").val("#00ff00");
}
</script>
<hr>
<textarea id="text">多行文本框</textarea> <br>
<input type="button" value="获取值" onclick="getTextarea()">
<input type="button" value="赋值" onclick="setTextarea()">
<script>
function getTextarea(){
var text = $("#text").val();
var html = $("#text").html();
console.log("value:",text);
console.log("html:",html);
}
function setTextarea(){
// 多多行文本框进行赋值，使用html方法可以完成，但不建议
// $("#text").html( Math.random() )
$("#text").val( Math.random() )
}
</script>
<hr>
<!-- onchange 内容改变
1. 单选按钮，复选按钮，下拉列表，文件选择器，…… 内容改变直接触发change事件
2. 输入框文本 内容改变并失去焦点，会触发change事件
-->
<!--
下拉列表的option是由三大属性组成
1. value 用于为下拉列表选中时提供值得
2. label 标签内容,用于视觉上得选项提示
3. selected 用于初始化时默认选中项得定义
-->
<select id="select" onchange="getSelectValue()">
<option value="-1" disabled selected>请选择</option>
<option value="A">选项A</option>
<option value="B">选项B</option>
<option value="C">选项C</option>
<option value="D">选项D</option>
<option>选项E</option>
</select>
<input type="button" value="选中选项B" onclick="setSelectValue()">
<script>
function getSelectValue(){
// JS对下拉列表得选中进行值获取，直接通过 select元素得value属性进行操作即可
// 取出得值由option定义得value决定，如果没有定义value,由label替代
var selectValue = $("#select").val();
console.log(selectValue);
}
function setSelectValue(){
$("#select").val("B")
// $("#select").val("b")
// $("#select").val("选项E")
}
</script>
<hr>
<!--
单选按钮 name 取值相同为一组，可形成互斥
单选按钮得组成：
1. 通过name分组
2. 通过外部标签和位置描述当前单选按钮得页面显示含义
3. checked 描述单选按钮得默认选中
4. value 提供单选按钮选中得对于得数据值
-->
<input type="radio" value="男11" name="sex">男
<input type="radio" value="女11" name="sex">女
<input type="radio" value="保密11" name="sex" checked>保密
<input type="button" value="获取性别" onclick="getSexValue()">
<input type="button" value="选中男" onclick="setSexValue()">
<script>
function getSexValue(){
var $radios = $("input[name=sex]:checked");
console.log($radios);
console.log( $radios.val() );
}
function setSexValue(){
var $radio = $("input[name='sex'][value=男11]")
$radio.prop("checked",true);
}
</script>
<hr>
<input type="checkbox" name="skill" value="html">HTML
<input type="checkbox" name="skill" value="css">CSS
<input type="checkbox" name="skill" value="js">JS
<input type="button" value="获取选中值" onclick="getCheckValue()">
<input type="button" value="选中HTML和CSS" onclick="setCheckValue()">
<script>
function getCheckValue(){
var $checks = $("input[name=skill]:checked");
console.log($checks);
var skills = [];
for (var i = 0; i < $checks.length; i++) {
// $checks[i];
skills.push( $checks[i].value )
}
console.log(skills);
}
function setCheckValue(){
$("input[name=skill][value=html]").prop("checked",true);
$("input[name=skill][value=css]").prop("checked",true)
}
</script>
</body>
</html>表单属性练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.user-info{
width: 300px;
}
.user-info>label{
display: block;
margin-bottom: 4px;
display: flex;
flex-flow: row nowrap;
}
/* .user-info span{
vertical-align: text-top;
} */
.user-info>label>*{
vertical-align: text-top;
}
.user-info .full{
flex-grow: 1;
}
.btn{
text-align: center;
}
td{
border: 1px solid black;
padding: 6px 12px;
}
table{
border-collapse: collapse;
width: 100%;
}
</style>
<script src="./jquery/jquery-3.7.1.js"></script>
<!-- 提供 window.Qs 对象 -->
<script src="./qs/qs.js"></script>
</head>
<body>
<form class="user-info" id="stuForm">
<label>
<span>姓名:</span>
<input class="full" type="text" name="name">
</label>
<label>
<span>年龄:</span>
<input class="full" type="number" name="age">
</label>
<label>
<span>性别:</span>
<!-- 0表示男 1表示女 2表示保密 -->
<input type="radio" name="sex" value="0">男
<input type="radio" name="sex" value="1">女
<input type="radio" name="sex" value="2">保密
</label>
<label>
<span>技能:</span>
<input type="checkbox" name="skill" value="html">HTML
<input type="checkbox" name="skill" value="css">CSS
<input type="checkbox" name="skill" value="js">JS
<input type="checkbox" name="skill" value="vue">JS
</label>
<label>
<span>学历:</span>
<select class="full" name="edu">
<option value="-1" disabled selected>请选择</option>
<option value="研究生">研究生</option>
<option value="本科">本科</option>
<option value="大专">大专</option>
</select>
</label>
<label>
<span>介绍:</span>
<textarea class="full" rows="10" name="info"></textarea>
</label>
<div class="btn">
<input type="button" value="添加新学员" onclick="addNewStu()">
<input type="button" value="添加新学员2" onclick="addNewStu2()">
</div>
</form>
<hr>
<table>
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>技能</td>
<td>学历</td>
<td>介绍</td>
<td>操作</td>
</tr>
</thead>
<tbody id="stuTable">
</tbody>
</table>
<script>
var stuList = [];
var sex = ["男","女","保密"];
function initTable(){
var temp = "";
for (var i = 0; i < stuList.length; i++) {
temp += `<tr>
<td>${i+1}</td>
<td>${ stuList[i].name }</td>
<td>${ stuList[i].age }</td>
<!-- 通过表单获取数值，使用数组作为下标，通过下标加载页面显示内容 -->
<td>${ sex[ stuList[i].sex ] }</td>
<td>${ stuList[i].skill }</td>
<td>${ stuList[i].edu }</td>
<td>${ stuList[i].info }</td>
<td>
<input type="button" value="删除">
</td>
</tr>
`;
}
$("#stuTable").html( temp );
}
initTable();
function addNewStu(){
// 将表单中带有name属性得元素值组合成一个 URL参数格式 key=value&key=value&……
// var stu = $("#stuForm").serialize();
// console.log(stu);
// 将表单中带有name属性得元素值组合成一个 数组，数组中按照元素提供对象，对象包含 name 和 value
// 例如[ { name: a value: 1 }, { name: b value: 2 },...]
var stuArr = $("#stuForm").serializeArray();
console.log(stuArr);
var stu = {};
for (var i = 0; i < stuArr.length; i++) {
var obj = stuArr[i];
// 判断是不是由 name=skill 提供复选框得值
if( obj.name=="skill" ){
// 一个对象中如果不存在对应得属性，返回 undefined
if( stu["skill"] ){
// stu 中有skill属性
stu["skill"].push( obj.value )
}else{
// stu 中没有skill属性
stu["skill"] = [ obj.value ];
}
}else{
stu[ obj.name ] = obj.value;
}
}
console.log(stu);
stuList.push( stu );
initTable(); // 表格重新渲染一次
}
function addNewStu2(){
var stuString = $("#stuForm").serialize();
console.log(stuString);
// Qs.parse 提供将 a=1&b=2&c=3 格式字符串 转换为 { a:1,b:2,c:3 } 对象
// Qs.stringify 提供将 { a:1,b:2,c:3 } 对象 转换为 a=1&b=2&c=3 格式字符串
// console.log( Qs );
var stu = Qs.parse( stuString );
console.log("stu",stu);
stuList.push( stu );
initTable();
}
</script>
</body>
</html>
扫一扫
831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
