一、封装获取元素的方法
封装思想——函数封装——代码复用
function get_id(id){
// 这个函数是专门来通过id获取元素
return document.getElementById(id)
}
function get_els(parentId, tagName){
// 这个函数是专门来获取某个父标签范围内的某些标签
return get_id(parentId).getElementsByTagName(tagName)
}
二、表单元素属性
常用的表单元素包括 input、select、textarea、button等,下面我们学习这些表单元素中常用的属性。
- value 用于获取和设置表单元素的内容
- type 用于获取和设置input标签的类型
- checked 复选框选中属性(true表示选中, false表示不选中)
- disabled 用于禁用表单输入或选择操作
需求:点击按钮修改input的类型和内容
html和css代码
<input type="button" value="按钮" id="btn">
JavaScript代码
var btnObj = document.getElementById("btn");
btnObj.onclick = function () {
//修改按钮的value属性
//btnObj.value = "我是按钮我被修改了";
this.value = "我是按钮我被修改了";
this.type = "text";
this.id = "btn2";//审查元素看到id也是可以被修改的
}
需求:点击按钮修改单选框的值(性别男改成女)
html和css代码
<input type="button" value="修改性别" id="btn1">
<input type="radio" name="sex" id="rad0" checked="checked">男
<input type="radio" name="sex" id="rad1">女
<input type="radio" name="sex" >保密
JavaScript代码
var btn1 = document.getElementById("btn1");
btn1.onclick = function () {
document.getElementById("rad1").checked = true;
}
需求:点击按钮修改复选框的值(选中 #ck1 和 #ck2 )
html和css代码
<input type="button" value="选择兴趣" id="btn2"/>
<input type="checkbox" name="like" />吃饭
<input type="checkbox" name="like" />睡觉
<input type="checkbox" name="like" id="ck1" />打豆豆
<input type="checkbox" name="like" />打篮球
<input type="checkbox" name="like" />打足球
<input type="checkbox" name="like" id="ck2" />敲代码
JavaScript代码
var btn2 = document.getElementById("btn2");
btn2.onclick = function () {
document.getElementById("ck1").checked = true;
document.getElementById("ck2").checked = true;
}
需求:点击按钮禁止文本框输入
html和css代码
<input type="button" value="禁用文本框" id="btn">
<input type="text" value="文本框" id="txt">
JavaScript代码
// 需求:点击按钮时,禁用文本框
//先根据id获取按钮,为按钮注册点击事件,添加事件处理函数
var btn = document.getElementById("btn");
btn.onclick = function () {
//根据id获取文本框,设置disabled属性
document.getElementById("txt").disabled = true;
}
本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 313694832@qq.com 举报,一经查实,本站将立刻删除。
如若转载,请注明出处:https://www.zhangfen6.com/36852.html
如若转载,请注明出处:https://www.zhangfen6.com/36852.html