jQuery的next()函數的使用詳解-js教程-PHP中文網

jQuery的next()函數的使用詳解

黄舟

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

原創

2094 人瀏覽過

jQuery的next()函數的使用詳解:
此函數在程式碼中有大量的應用，以下就結合實例介紹一下此函數的用法。
它可以取得一個包含匹配元素集合中每一個元素緊鄰的後面同儕元素的元素集合。
在上面的概念中有下面幾點需要特別注意：
1."緊鄰"，也就是說獲取的元素必須是匹配元素所緊鄰的，中間不能夠有其他的元素間隔。
2."同儕"，也就是說獲取的元素必須和匹配是同級元素。
3."後面"，也就是i說獲取的元素必須位於匹配元素的後面。
語法結構:

$(selector).next(exPR)

參數清單:

參數篩選表達式。

實例代碼:

實例一:

<!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）！