Topic 1 : 检测用户的输入 ：
题目要求：
编写一个用户注册页面
检测用户名是否是6位以下，密码是否是8位以上，如果不满足要求高亮显示文本框 ；
代码如下 ：
用户注册页面.bg {background-color: red; }
//编写一个用户注册页面
//检测用户名是否是6位以下，密码是否是8位以上，如果不满足要求高亮显示文本框 ；
var nameText = document.getElementById('name');
var pwdText = document.getElementById('pwd');
var submit = document.getElementById('submit');
//给submit按钮注册事件
submit.onclick = function () {
if(nameText.value.length < 6 && nameText.value.length > 0) {
nameText.className = '';
} else {
nameText.className = 'bg';
}
if(pwdText.value.length > 8 && pwdText.value.length < 16) {
pwdText.className = '';
} else {
pwdText.className = 'bg';
}
//取消submit的默认行为的执行 if里面不需要这句了 如果加了肯能会影响后续代码的执行
return false;
}
Topic 2 : 文本框默认样式的设置 ：
这一句可以设置文本框的默认值；
效果为 ：
.bg {color: gray; }
//注册事件
//如果文本框获得焦点 当内容是请输入关键字 清空内容 文字颜色恢复默认的黑色
var textSearch = document.getElementById('textSearch');
textSearch.onfocus = function () {
if(textSearch.value === '请输入关键字') {
this.value = '';
//把this的属性恢复为默认值 这里作用是把文字颜色变为黑色
this.className = '';
}
}
// 当失去焦点的时候onblur。如果文本框中的内容为空 设置文本框中内容为 请输入关键字 设置字体颜色为gray
textSearch.onblur = function () {
// if (textSearch.value === '') {}
// 这一句不太好的 这个要是用户第一个输入的是空格的话那么就会误判 我们可以用它的长度来判断
if (textSearch.value.length === 0) {
this.className = 'bg';
this.value = '请输入关键字';
}
}
Topic 3 : ：设计一个表格的样式实现全选反选的功能
要实现的功能：
1 点击全选按钮(父的checkbox)的时候，让子的checkbox的选中状态跟父的checkbox保持一致
2 给所有的子的checkbox注册点击事件，点击子的checkbox 如果有一个子的checkbox没有选中，父的checkbox也不选中
3 反选
代码示例：
全选反选* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
商品价钱
iPhone88000iPad Pro5000iPad Air2000Apple Watch2000// 1 点击全选按钮(父的checkbox)的时候，让子的checkbox的选中状态跟父的checkbox保持一致
//1.1 给父级的check注册事件
//获取父级checkbox
var father = document.getElementById('father');
//获取所有的子级checkbox
//注意这一句用选择器的获得元素的写法
var sons = document.querySelectorAll('#son input[type=checkbox]');
var len = sons.length;
father.onclick = function () {
//1.2遍历这个容器中的所有元素 让所有的子级checkbox的状态都等于父级的状态
for(var i = 0;i < len; i++) {
//注意这一句话是核心 让子级的checkbox的状态等于父级
sons[i].checked = this.checked;
}
}
// 2 给所有的子的checkbox注册点击事件，点击子的checkbox 如果有一个子的checkbox没有选中，父的checkbox也不选中
// 2.1 给所有的子的checkbox注册点击事件
// 核心代码封装成方法 便于使用
function step2 () {
//2.2 只要子级有一个是false那么父级也就是false
//2.2 定义一个变量用于父级的状态 这个fatherIsTrue必须在点击事件这里面 father的赋值也是 因为每个点击事件需要判断所有的子级的状态 在外面的话是实现不了的
var fatherIsTrue = true;
for (var j = 0; j < len; j++) {
if (!sons[j].checked) {
fatherIsTrue = false;
break;
}
}
father.checked = fatherIsTrue;
}
for(var i = 0;i < len; i++) {
sons[i].onclick = function () {
step2();
}
}
//3 反选
// 给反选按钮注册一个事件
var btn = document.getElementById('btn');
btn.onclick = function () {
for(var i = 0; i < len; i++) {
sons[i].checked = !sons[i].checked;
}
//写到这里我门会有一个问题就是反选不能控制父级 但是呢我们的第二步已经完成这个问题了 所以我们把第二步
//的核心代码分装成一个方法 直接调用即可 直接粘贴复制过来不太好
step2();
}
网页示例：
注意 ：这一句话是核心 让子级的checkbox的状态等于父级
sons[i].checked = this.checked;
相关推荐：
