第二篇 dom内容操作之value
2024-09-24 16:24:31
一、内容操作的三种方式
、 详情看第一篇
innerText
innerHtml
、
value ==》表单类的标签
input >text
passwd
textarea
、
checkbox
value
checked
radio
value
checked
select
value 当前选中的项
selectedIndex
第二种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="i1" type="text" value=""/>
<input id="i2" type="password" value=""/> <textarea id="i3"></textarea> <script>
var l1=document.getElementById("i1");
//获取值
document.write(l1.value);
//设置值
l1.value=; var c1=document.getElementById("i2");
document.write(c1.value);
c1.value=; var d1=document.getElementById("i3");
document.write(d1.value)
d1.value=;
</script>
</body>
</html>
第三种方式 之一 checkbox 的value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>爱好</h1>
<div id="l1">
<ul>
<li><input type="checkbox" value=""/>篮球</li>
<li><input type="checkbox" value=""/>足球</li>
<li><input type="checkbox" value=""/>去秋</li>
</ul>
</div>
<div id="l2">
<ul>
<li><input type="checkbox" value=""/>篮球</li>
<li><input type="checkbox" value=""/>足球</li>
<li><input type="checkbox" value=""/>去秋</li>
</ul>
</div>
<script>
var l3=document.getElementById("l1");
var checks=l3.getElementsByTagName("input");
document.write(checks[],checks[],checks[]);
document.write(checks[].value,checks[].value);
//在代码中直接选中
checks[].checked =true; </script>
</body>
</html>
第三种方式之一 checkbox的checked
实例:多选和取消以及反选
<input type=”checkbox”/>
<input type=”button” value=””/>
多选:一个按键全部选中
取消:把选中的全部取消
反选:选中的取消,没选中的选中
写表的时候在表的开头和结尾最好要加上表头和身体
<thead></thead>
<tbody></tbody>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<input type="button" value="全选" ondblclick="CheckAll();"/>
<input type="button" value="取消" ondblclick="CancleAll();"/>
<input type="button" value="反选" ondblclick="Reverse();"/>
</div>
<table>
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="tb">
<tr >
<td><input class="c1" type="checkbox"/></td>
<td>pyrene</td>
<td></td>
</tr>
<tr >
<td><input class="c1" type="checkbox"/></td>
<td>pyrene</td>
<td></td>
</tr>
<tr >
<td><input class="c1" type="checkbox"/></td>
<td>pyrene</td>
<td></td>
</tr>
</tbody>
</table>
<script>
function CheckAll(){
var tb=document.getElementById("tb");
var checks=tb.getElementsByClassName("c1");
for(var i=;i<checks.length;i++){
var current_check=checks[i];
current_check.checked=true;
}
}
function CancleAll(){
var tb=document.getElementById("tb");
var checks=tb.getElementsByClassName("c1");
for(var i=;i<checks.length;i++){
var current_check=checks[i];
current_check.checked=false;
}
}
function Reverse(){
var tb=document.getElementById("tb");
var checks=tb.getElementsByClassName("c1");
for(var i=;i<checks.length;i++){
var current_check=checks[i];
if(current_check.checked){
current_check.checked=false;
}else{
current_check.checked=true;
}
}
}
</script>
</body>
</html>
第三种方式之二 radio
例子单选框
<input type=”radio”/>
radios[0].checked=true 如果等于false就是不选中 选中值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li><input type="radio" name="g" value=""/>男</li>
<li><input type="radio" name="g" value=""/>女</li>
</ul>
<script>
var radios=document.getElementsByTagName("input")
//获取值
var val=radios[].value;
console.log(val);
//选中
radios[].checked=true;
</script>
</body>
</html>
第三种方式之三、select
实例、下拉框
两个问题
1、这里的value怎么用
默认选中谁在当前页面就在里面加入selected=”selected”
value 当前选中的项
2、checked怎么用
如果不知道value,那么怎么才能指定值呢?
用索引的方式 selectedIndex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select id="sel">
<option value="">北京</option>
<option value="" selected="selected">上海</option>
</select>
<script>
var sell=document.getElementById("sel");
document.write(sell.value);
//通过设置value来指定一个项,这里本来显示的是上海,但是设置为11之后就显示为北京
sell.value=;
//如果不知道value的值。可以用索引selectIndex的方法来指定一个项
//首先先获取现在的索引
document.write(sell.selectedIndex);
//之后指定要选中的项的索引
sell.selectedIndex=;
</script>
</body>
最新文章
- SDL 1.2.15 issue
- .NET工程师技术进阶
- Java线程:Timer和TimerTask
- Android开发把项目打包成apk
- Android 程式开发:(十三)特殊碎片 —— 13.2 DialogFragment
- &ldquo;猜你喜欢&rdquo;是怎么猜中你心思的?
- HDU 5521 Meeting
- 记一下webstorm快键键
- electron应用以管理员权限启动
- Array的 filter() 和 sort()
- 通过 JS 脚本去除csdn广告
- 【搬运】C指针 一
- 016 在大数据中,SSH无密钥登录
- jmeter 在linux服务器的安装和运行;
- Django models 的常用字段类型和字段参数
- Django内置模版过滤器
- Java学习--内置对象(其他的)
- NGUI: UIPanel控件
- POJ 1679 The Unique MST(最小生成树)
- elemetUi 组件--el-upload