princípio experimental
Modifique os atributos de tags HTML por meio de jQuery, conclua o efeito de exibição dinâmica de páginas da Web, entenda a sintaxe do JavaScript, o princípio de realização de páginas dinâmicas, ideias básicas de design e métodos de implementação.
Propósito
Compreender e dominar os métodos de implementação de seletores de atributos HTML baseados em id, classe, nome,
etc. uso de gramáticas básicas como controlar if, for, etc.
Entender e dominar HTML Método de evento básico
Entender e dominar o seletor css em jQuery, o método de uso de seleção jQuery
Entender e dominar o método básico de monitoramento de evento
de jQuery Entender e dominar a função e significado do método Callback callback
Entender e dominar o método de implementação do método anônimo que define o callback
Entender e dominar o básico O método de realização do efeito de animação básica jQueryconteúdo experimental
Crie um projeto e módulo web maven, experiment-04, e o tipo de empacotamento do projeto é war
Requisitos + Dicas de Design
Requisito +1
deve concordar com o acordo antes de preencher o formulário de registro.
O nome do usuário deve ser maior ou igual a 6 caracteres, caso contrário, uma caixa de aviso aparecerá.
Intenções futuras, suporte a caixas de opção desmarcadas
. Cursos favoritos podem e só podem escolha 2 itens
quando o nome do usuário for maior ou igual a 6 caracteres, quando o curso favorito for menor ou igual a 2 itens, o formulário não pode ser enviado
Protocolo de solução
para implementar status de elemento desativado/ativado simultaneamente para vários elementos.
Ideia de implementação: durante a inicialização, todos os campos de entrada no formulário são desabilitados com base em jquery, e o resultado da seleção da caixa de seleção do protocolo é vinculado ao estado desabilitado de todos os elementos do formulário, exceto o botão enviar. O formulário Formulário não possui um atributo desabilitado.Nome de usuário, monitore o evento de alteração de valor para julgar o comprimento da entrada do usuário.
Cursos, quantidade de julgamento, desativado/ativado alguns elementos. Ideia de implementação: monitore o evento de clique do grupo de caixas de seleção, julgue a relação entre o número de estados selecionados e o número definido e preste atenção ao usar o seletor apropriado.
Botão Enviar, quando 2 condições forem atendidas, o botão estará disponível. Ideia de implementação: declarar e julgar o sinalizador para duas condições, alterar o valor do sinalizador no monitoramento de evento do elemento, monitorar o evento de alteração do valor do elemento especificado e julgar o sinalizador.
Adicione endereços e elementos à lista dinamicamente. Ideia de implementação: ouvir o evento de clique do botão, criar um objeto de elemento que não seja exibido, anexá-lo ao final da lista e adicionar um efeito de animação deslizante
Precisa de +1
Depois de inserir o endereço, clique no botão Adicionar endereço para adicionar dinamicamente as informações de entrada à listaPrecisa de +1
intenção, cancele o estado selecionado do rádio ao clicar no rádio novamente.Ideias de implementação
Adicionar uma caixa de entrada HTML oculta para armazenar o valor da caixa de rádio. Quando a caixa de rádio é clicada, é julgado se o valor é igual ao campo oculto; se não for igual, é o primeiro clique
e o valor da caixa de opção é atribuído à caixa oculta
. , é o segundo clique, desmarque o botão de opção clicado e redefina o valor do campo ocultoNão pode ser julgado com base no status verificado do rádio, porque o rádio é verificado toda vez que o rádio é clicado
<!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>