jquery第3天(节点查找,节点遍历,表单,提高用户舒适度)
节点查找
siblings():找到所有同级节点,注意:不包括自己
parent():找到父亲节点
parents():找到祖先元素,注意:会找到body,html标签等
next():下一个同级节点
prev():上一个同级节点
children():找到子节点
节点遍历
each():节点遍历
$(function(){
// 给图片添加点击事件
$("img").click(function(){
//遍历所有的li标签
$("li").each(function(){
//将遍历的li标签添加
$("ul").after($(this).text()+"<br>");
})
})
});
end()
作用:结束当前链条中的最近筛选,会回到最初的节点位置
例:修改第一个和最后一个li标签的背景颜色
$(function(){
$(".gameList li").first().css("background","skyblue").end().last().css("background","yellowgreen")
})
表单
表单:提交数据的,form表单是需要和input type="submit"连用,如下:
<form method="post" name="myform" id="myform" action="success.html">
<input name="btn" type="submit" value="注册" class="rb1" />
jquery中:提交表单可以使用submit(function(){}),如果该方法直接返回true,则会提交表单,如果返回false,则不会提交表单
action="要跳转的页面"
实例:
$(document).ready(function(){
$("#myform").submit(function(){
//1,表单提交验证密码非空
if($("#pwd").val()==""){
alert("密码不能为空!");
//false表示不提交表单
return false;
}
//通过id取到密码框的值
var passW1=$("#pwd").val();
//通过id取到确认密码中的值
var passW2=$("#repwd").val();
//验证密码是否大于等于6位
if(passW1.length<6){
alert("密码必须大于6位!");
return false;
}
//验证两次密码是否一致
if(passW1!=passW2){
alert("两次密码不一致");
return false;
}
return true;
});
})
提高用户舒适度
focus():如果有哪个input标签的输入不合法,将会定位到该标签
select():如果有哪个input标签的输入不合法,将会定位到该标签并选中不合法的内容
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?