jQuery的next()函数的使用详解-js教程-PHP中文网

jQuery的next()函数的使用详解

黄舟

发布： 2016-12-15 14:51:26

原创

2296人浏览过

jquery的next()函数的使用详解:
此函数在代码中有大量的应用，下面就结合实例介绍一下此函数的用法。
它可以取得一个包含匹配元素集合中每一个元素紧邻的后面同辈元素的元素集合。
在上面的概念中有下面几点需要特别注意：
1."紧邻"，也就是说获取的元素必须是匹配元素所紧邻的，中间不能够有其他的元素间隔。
2."同辈"，也就是说获取的元素必须和匹配是同级元素。
3."后面"，也就是i说获取的元素必须位于匹配元素的后面。
语法结构:

$(selector).next(exPR)

参数列表:

参数描述

expr 可选。筛选表达式。

实例代码:
实例一:

SpeakingPass-打造你的专属雅思口语语料

使用chatGPT帮你快速备考雅思口语，提升分数

查看详情

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/CSS">.father{
  height:200px;
  width:200px;
  border:1px solid blue;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/Javascript">$(document).ready(function(){
  $("p").next().css("color","blue")
})</script> </head><body><div class="father"><p>我是p元素</p><span>我是span元素</span><p>我是p元素</p><div>我是div元素</div></div></body></html>

登录后复制

以上代码可以将所有p元素后面紧邻的同辈元素的字体颜色设置为蓝色。
实例二:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.father{
  height:200px;
  width:200px;
  border:1px solid blue;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript">$(document).ready(function(){
  $("p").next("span").css("color","blue")
})</script> </head><body><div class="father">
  <p>我是p元素</p>
  <span>我是span元素</span>
  <p>我是p元素</p>
  <div>我是div元素</div></div></body></html>

登录后复制

以上代码可以将p元素后面紧邻的同辈元素中的span元素的字体衍射设置为蓝色。
实例三:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">*{
  margin:0px;
  padding:0px;
  font-size:14px;}ul{list-style:none;}.main .nav{
  width:100px;
  margin:0px auto;
  margin-top:3px;}.main .nav a{
  width:100px;
  height:25px;
  line-height:25px;
  text-align:center;
  text-decoration:none;
  background-color:green;
  display:block;}.main .nav .navcontent{display:none;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript">$(document).ready(function()
{  var navs=$(".nav");  var navcontents=$(".navcontent");  var navlen=navs.length;
 
  $(".nav a").click(function(){    if($(this).next().css("display")=="none")
    {
      $(this).next().css("display","block")
    }    else
    {
      $(this).next().css("display","none") 
    }   
 }) 
})</script></head><body><div>
  <ul class="main">
   <li class="nav">
    <a href="#">蚂蚁部落</a>
    <ul class="navcontent">
     <li>搜索优化</li>
     <li>CSS专区</li>
     <li>asp专区</li>
    </ul>
   </li>
   <li class="nav">
    <a href="#">前台专区</a>
    <ul class="navcontent">
     <li>搜索优化</li>
     <li>CSS专区</li>
     <li>ASP专区</li>
    </ul>
   </li>
   <li class="nav">
    <a href="#">后台专区</a>
    <ul class="navcontent">
     <li>搜索优化</li>
     <li>CSS专区</li>
     <li>ASP专区</li>
    </ul>
   </li>
  </ul></div></body></html>

登录后复制

以上代码实现了一个二级菜单，里面有next()函数逇应用，更多相关文章请关注PHP中文网（www.php.cn）！