1. Get the focus question
1. Requirements:
1. The background turns red when the text box gets focus, and removes this effect when it loses focus
2. Clear the content area of the text box when the focus is obtained
3. If the content filled in by the user is empty, restore the previous default value
2. Involving knowledge points
1. $(":input") selects all text boxes
2.this.value current value this.defaultValue previous value
3.this.value $(this).val() gets the value of the text box
4.this.value=""Clear the value of the text box
5. The text field has no value attribute but the middle content area can be regarded as value
6..on("focus", function(){}) fires when the focus is obtained
.on("blur", function(){}) fires when the focus is obtained
Hover(function(){}, function(){}) triggers when the focus is acquired/triggered when the focus is drawn
7. toggleClass("app") counteracts the app class
.addClass("app") add class
.removeClass("app") removes the class
3. Code implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
ul,li{
list-style: none;
}
#username,#userword,#usertext{
display: block;
}
.red{
background: red;
}
</style>
<div id="app">
名称：<input type="text" id="username" class="app" value="名称">
密码: <input type="password" name="" id="userword" class="app" value="密码">
详细信息：<br><textarea name="" id="" cols="30" rows="10" id="usertext" class="app">详细信息</textarea>
<!-- //文本域没有value属性 但中间内容区可以看成是value -->
</div>
<script src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// $(".app").hover(function(){//多加一个类
$(":input").hover(function(){
// $(this).toggleClass("red");//可以实现
$(this).addClass("red");
if(this.value==this.defaultValue){
this.value =""
}//defaultValue 之前值
},function(){
$(this).removeClass("red");
if(this.value==""){
this.value=this.defaultValue;
}
// if($(this).html()==this.value){
// }else{
// $(this).clear();
// }
})
</script>
</head>
<body>
</body>
</html>
2.单选框复选框问题
1.要求：
实现 反选 全选 全不选 功能
2.涉及知识点：
1.attr（）添加属性//dom
2.prop()添加属性//缓存
3.checked实现必须用prop
3.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
ul,li{
list-style: none;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
</head>
<body>
<h1>你最喜欢的运动是？</h1>
<input type="checkbox" name="" value="足球">足球<br>
<input type="checkbox" name="" value="篮球">篮球<br>
<input type="checkbox" name="" value="排球">排球<br>
<input type="checkbox" name="" value="乒乓球">乒乓球<br>
<button id="btn1">全选</button>
<button id="btn2">全不选</button>
<button id="btn3">反选</button>
<button id="btn4">提交</button>
<script type="text/javascript">
$("#btn1").on("click",function(){
$(":input").prop("checked","true");
})
$("#btn2").on("click",function(){
$(":input").removeProp("checked")
})
$("#btn3").on("click",function(){
$(":input").each(function(){
if(this.checked){
$(this).removeProp("checked")
}else{
$(this).prop("checked","true");
}
})
})
</script>
</body>
</html>
3.检测字符问题
1.要求 ：检测字符不能小于六个字符
2.涉及知识点：
1.addClass()
2.next()
3.nextAll()
4.this.value.length
5..text()
6..css("")
7.append() after() before()
8.基本实现原理：在元素后面插入另一个元素，并通过改变文本样式和内容的方式进行检测，最好实现 html css js 三方分开开发
3.代码实现
css+html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
ul,li{
list-style: none;
}
.required{
color: red;
font-weight: 400;
}
.required-false{
background:red;
display:inline-block;
width:150px;
color:#fff;
text-align: center;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
<script src="yanzheng.js"></script>
</head>
<body>
<div id="app">
<label for="">用户名：</label>
<input type="text" id="username" required="" number="1"><br>
<label for="">邮箱：</label>
<input type="" name="" id="email" required="" number="2"><br>
<button id='btn1'>提交</button>
<button id='btn2'>重置</button>
</div>
</body>
</html>
js:
$(function(){
$("input[required]").after("<strong class='required'>*</strong>")
//加星号
var $info ="<span class='info'></span>" ;
var $info1 = $(".info");
$("input[required]").on("focus",function(){
$('.info').remove();
if(this.value<6){
$(this).next().after($info);
$('.info').text("不能少于六个字符").addClass("required-false")
}
else{
$(this).next().after($info);
$('.info').text("输入正确").addClass("required-false").css("background","green")
};
}).on("blur",function(){
if(this.value==""){
$(this).nextAll('.info').css("display","none");
}
}).on("keyup",function(){
if(this.value.length>=6){
$(".info").text("输入正确").css("background","green");
}else{
$('.info').text("不能少于六个字 符").css("background","red");
}
})
})