DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery中index()方法用法實例教程
jQuery中index()方法用法實例教程
編輯:JQuery特效代碼     

本文實例講述了jQuery中index()方法用法。分享給大家供大家參考。具體分析如下:

此方法可以搜索匹配元素,並返回元素的索引值。
索引值是從0開始的。

語法結構一:

當此方法沒有參數的時候,返回值是指定元素在其同輩元素集合中的索引位置。
代碼如下:$(selector).index()

實例代碼:

實例一:

代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.cnblogs.com/" />
<title>index()函數-博客園</title>
<style type="text/css">
span{
  color:red;
}
</style>
<title>博客園</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#btn").click(function(){
    $("span").text($(".qian").index());
  })
});
</script>
</head>
<body>
<div>
  <ul>
    <li>後台專區</li>
    <li class="qian">前台專區</li>
    <li>數據庫專區</li>
    <li>站長交流</li>
  </ul>
</div>
<div>當前li元素的位置:<span>0</span></div>
<button id="btn">點擊查看結果</button>
</body>
</html>

上面代碼能夠返回類名為qian的li元素在其同輩元素集合中的索引值,看到這裡大家可能有這樣的疑問,所謂同輩元素是否是同類元素,也就是說li元素在li元素集合中的索引值。

實例二:

代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.cnblogs.com/" />
<title>index()函數-博客園</title>
<style type="text/css">
span{
  color:red;
}
</style>
<title>博客園</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#btn").click(function(){
    $(".index").text($("#sou").index());
  })
});
</script>
</head>
<body>
<div>
  <ul>
    <li>後台專區</li>
    <li id="qian">前台專區</li>
    <li>數據庫專區</li>
    <li>站長交流</li>
    <span id="sou">搜索優化</span>
  </ul>
</div>
<div>當前li元素的位置:<span class="index">0</span></div>
<button id="btn">點擊查看結果</button>
</body>
</html>

由以上的代碼可以看出,並非只是同類元素,而是所有的同輩元素。

語法結構二:

當方法的參數為DOM對象或者jQuery對象時,返回值是此DOM對象或者jQuery對象在指定的元素集合中索引。
如果在指定的元素集合中找不到指定的DOM對象或者jQuery對象,那麼返回值為-1。
代碼如下:$(selector).index(element)

參數列表:
參數 描述 element 獲得index位置的DOM對象或者jQuery對象。

實例代碼:

實例一:

代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.cnblogs.com/" />
<title>index()函數-博客園</title>
<style type="text/css">
span{
  color:red;
}
</style>
<title>博客園</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#btn").click(function(){
    $("span").text($("li").index(document.getElementById("qian")));
  })
})
</script>
</head>
<body>
<div>
  <ul>
    <li>後台專區</li>
    <li id="qian">前台專區</li>
    <li>數據庫專區</li>
    <li>站長交流</li>
  </ul>
</div>
<div>當前li元素的位置:<span>0</span></div>
<button id="btn">點擊查看結果</button>
</body>
</html>

實例二:

因為找不到匹配的元素,所以返回值是-1.

代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.cnblogs.com/" />
<title>index()函數-博客園</title>
<style type="text/css">
span{
  color:red;
}
</style>
<title>博客園</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#btn").click(function(){
    $(".index").text($("li").index(document.getElementById("sou")));
  })
});
</script>
</head>
<body>
<div>
  <ul>
    <li>後台專區</li>
    <li id="qian">前台專區</li>
    <li>數據庫專區</li>
    <li>站長交流</li>
    <span id="sou">搜索優化</span>
  </ul>
</div>
<div>當前li元素的位置:<span class="index">0</span></div>
<button id="btn">點擊查看實例</button>
</body>
</html>

語法結構三:

當方法的參數為選擇器時,將會從通過此選擇器獲得的對象集合中查找元素。
代碼如下:$(selector).index(Jqselector)

參數列表:
參數 描述 Jqselector 選擇器,將會從通過此選擇器獲得的對象中查找元素。

實例代碼:

代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.cnblogs.com/" />
<title>index()函數-博客園</title>
<style type="text/css">
span{
  color:red;
}
</style>
<title>博客園</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#btn").click(function(){
    $(".index").text($("#qian").index("li"));
  })
});
</script>
</head>
<body>
<div>
  <ul>
    <li>後台專區</li>
    <li id="qian">前台專區</li>
    <li>數據庫專區</li>
    <li>站長交流</li>
    <span id="sou">搜索優化</span>
  </ul>
</div>
<div>當前li元素的位置:<span class="index">0</span></div>
<button id="btn">點擊查看實例</button>
</body>
</html>

上述代碼會取得id值為qian的li元素在通過li選擇器獲得li對象集合中的索引位置。

希望本文所述對大家的jQuery程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved