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")
		})

image

表单

表单:提交数据的,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标签的输入不合法,将会定位到该标签并选中不合法的内容

posted @   不再犹豫27  阅读(19)  评论(0编辑  收藏  举报
编辑推荐:
· .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 中如何实现缓存的预热?
点击右上角即可分享
微信分享提示