Experimental principle
Modify the attributes of HTML tags through jQuery, complete the dynamic display effect of web pages, understand JavaScript syntax, the realization principle of dynamic pages, basic design ideas and implementation methods.
Purpose
Understand and master the implementation methods of HTML attribute selectors based on id, class, name, etc.
Understand and master the methods of controlling the attribute values of HTML tag elements such as disabled, checked, hidden, etc. Understand
and master the use of basic grammars such as controlling if, for, etc.
Understand and master HTML Basic event method
Understand and master the css selector in jQuery, the use method of jQuery selection
Understand and master the basic event monitoring method
of jQuery Understand and master the function and meaning of the Callback callback method
Understand and master the implementation method of the anonymous method that defines the callback
Understand and master the basics The realization method of jQuery basic animation effectExperimental content
Create a maven web project and module, experiment-04, and the project packaging type is war
Requirements + Design Tips
Requirement +1
must agree to the agreement before filling out the registration form.
The user name must be greater than or equal to 6 characters, otherwise a warning box will pop up.
Future intentions, support unchecked radio boxes
. Favorite courses can and can only choose 2 items
when the user name is greater than or equal to 6 characters, when the favorite course is less than or equal to 2 items, the form cannot be submitted
Solution
Protocol to implement simultaneous disabled/enabled element status for multiple elements.
Implementation idea: During initialization, all input fields in the form are disabled based on jquery, and the protocol check box selection result is bound to the disabled state of all elements in the form except the submit button. The Form form does not have a disabled attribute.User name, monitor the value change event to judge the length of user input.
Courses, judgment quantity, disabled/enabled some elements. Implementation idea: monitor the click event of the checkbox group, judge the relationship between the number of selected states and the set number, and pay attention to using the appropriate selector.
Submit button, when 2 conditions are met, the button is available. Implementation idea: declare and judge the flag for two conditions, change the flag value in element event monitoring, monitor the specified element value change event, and judge the flag.
Dynamically add addresses and dynamically add elements to the list. Implementation idea: listen to the button click event, create an element object that is not displayed, append it to the bottom of the list, and add a sliding animation effect
Need +1
After entering the address, click the Add Address button to dynamically add the input information to the listNeed +1
intent, cancel the selected state of the radio when clicking the radio again.Implementation ideas
Add a hidden HTML input box to store the value of the radio box. When the radio box is clicked, it is judged whether the value is equal to the hidden field;
if it is not equal, it is the first click, and the value of the radio box is assigned to the hidden box
. , it is the second click, set the clicked radio button to unchecked, and reset the hidden field valueIt cannot be judged based on the radio checked status, because the radio is checked every time the radio is clicked
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>注册</h1>
<label>
<input type="checkbox" id="legal">我已阅读相关说明并遵守相关法律</label>
<form id="register">
<div>
用户名:
<input type="text" name="username">
<br> 未来意向：
<label><input type="radio" name="purp" value="1">Java工程师</label>
<label><input type="radio" name="purp" value="2">测试工程师</label>
<label><input type="radio" name="purp" value="3">前端工程师</label>
<!-- 添加隐藏域 -->
<input type="hidden" name="purpose">
<br>
<br> 请从以下课程中选择2项最喜欢的课程
<ul>
<li>
<label>
<input type="checkbox" name="courses">Web开发技术
</label>
</li>
<li>
<label>
<input type="checkbox" name="courses">软件项目管理
</label>
</li>
<li>
<label>
<input type="checkbox" name="courses">数据库原理
</label>
</li>
<li>
<label>
<input type="checkbox" name="courses">系统分析与设计
</label>
</li>
</ul>
地址：
<ul id="ul_address">
</ul>
<input name="address">
<button type="button" id="button_address">添加地址</button>
<br>
</div>
<button type="submit">提交</button>
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function (){
var usernameValid = false;
var coursesValid = false;
// 初始化时，禁用表单内所有输入域
$("#register :input").not("#legal").prop("disabled",true);
//协议复选框选中结果，与表单内除提交按钮以外的全部元素禁用状态绑定
$("#legal").on("change",function (){
$("#register :input").not("#legal,:submit").prop("disabled",!this.checked);
});
/* 去空格后，判断输入长度 */
$("[name=username]").change(function (){
var len = $(this).val().trim().length;
if(len < 6){
usernameValid = false;
alert("用户名长度必须大于等于6")
}
else{
usernameValid = true;
}
});
// 未来意向，支持取消选中的单选框
$("[name=purp]").on("click",function (){
var val = $(this).val();
var hidden = $("[name=purpose]");
if(val == hidden.val()){
$(this).prop("checked", false);
hidden.val("");
}
else{
hidden.val(val);
}
});
$("[name=courses]").on("change", function(){
var checked = $("[name=courses]:checked");
var len = checked.length;
if(len >= 2){
// 超过2项，禁用未选中的复选框
$("[name=courses]:not(:checked)").prop("disabled", true);
coursesValid = true;
}else{
// 小于等于2项，启用所有复选框
$("[name=courses]").prop("disabled", false);
coursesValid = false;
}
});
// 当用户名大于等于6字符，喜欢的课程小于等于2项时，不可提交表单
$("input[name=username], input[name=courses]").change(() => {
let dis = usernameValid && coursesValid;
// 当2个状态均符合规范时，提交按钮可用
$("button:submit").prop("disabled", !dis);
});
});
// 输入地址后，点击添加地址按钮，将输入信息动态添加至列表
/* 方法一
$("#button_address").on("click", function(){
var address = $("[name=address]").val();
if(address){
var li = $("<li>").text(address).hide();
//使用 $("<li>") 创建一个 li 元素的 jQuery 对象。
// 使用 .text(address) 方法为这个对象设置文本内容为 address 变量的值。
// 使用 .hide() 方法为这个对象设置 display 属性为 none，使其不可见。
// 追加至列表底端，并添加滑动动画效果
$("#ul_address").append(li).find(":last").slideDown();
// 清空地址输入框的值
$("[name=address]").val("");
}
});
*/
/* 方法二 */
$("#button_address").click(() => {
let input = $("input[name=address]");
let item = $(`<li>${input.val()}</li>`);
input.val("");
item.css("display", "none");
$("#ul_address").append(item);
item.fadeIn(1000);
// 使用 .fadeIn(1000) 方法为 item 对象添加一个渐显的动画效果，使其从不可见变为可见。
});
</script>
</body>
</html>