python web py入门（51）- jQuery - $("").next()获取同级的下一个元素
程序员文章站
2022-07-07 11:51:36
...
在前面学习输入内容进行检查，主要采用正则表达式来判断。如果发现出错了，就采用弹出窗口的方式来提示，这样比较暴力点，有没有温柔一点的方式呢？比如在页面里面提示，不需要用户去点击关闭，这样减少用户操作的次数，提高效率。如果真有出错，弹出100个窗口，那会害死人的。既然想到在页面提示，那么怎么样确定在哪里显示呢？也就是找到输出位置，一般是在输入编辑框的后面进行提示，但是怎么样获取后面的位置呢？其实可以在输入的编辑框后添加一个元素，这样能过jQuery的$("").next()方法，就可以找到同级元素的下一个元素，这样就可以定位输出位置了。
定义和用法
next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素。
语法
.next(selector)
参数 描述
selector 字符串值，包含用于匹配元素的选择器表达式。
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象，.next() 方法允许我们搜索 DOM 树中的元素紧跟的同胞元素，并用匹配元素构造新的 jQuery 对象。
该方法接受可选的选择器表达式，类型与我传递到 $() 函数中的相同。如果紧跟的同胞元素匹配该选择器，则会留在新构造的 jQuery 对象中；否则会将之排除。
先来看一下，怎么样使用next方法：
<html>
<head>
<meta charset="utf-8">
<title>
id选择的例子
</title>
<script type="text/JavaScript" src="jquery/jquery-3.3.1.js"></script>
</head>
<body>
<ul>
<li><a href="https://edu.csdn.net/course/detail/6998">比特币源码入门教程</a></li>
<li><a href="https://edu.csdn.net/course/detail/6859">深入浅出Matplotlib</a></li>
<li id="caimouse"><a href="https://edu.csdn.net/course/detail/6149">深入浅出Numpy</a></li>
<li><a href="http://edu.csdn.net/course/detail/5690">Python游戏开发入门</a></li>
<li><a href="http://edu.csdn.net/course/detail/5582">你也能动手修改C编译器</a></li>
</ul>
<script type="text/JavaScript">
//$('li#caimouse')找到第三项“深入浅出Numpy”，next()之后就是选择第四项 “Python游戏开发入门”
$('li#caimouse').next().css('background-color', 'red');
</script>
</body>
</html>
运行结果如下：
本来根据id选择器是选定第三项的，通过next函数访问了第四项。