html中怎样获取子元素的索引位置

jQuery 的 index() 方法返回指定元素相对于其他指定元素的索引值，

注意：索引值是从0开始计数的。

获得当前元素的索引值可用click事件触发

1 $(selector).click(function() {
2 num = $(this).index();
3 }

selector

确定查询的选择器

1 $("ul")
2   .append("<li>" + $("ul").selector + "</li>")
3   .append("<li>" + $("ul li").selector + "</li>")
4   .append("<li>" + $("div#foo ul:not([class])").selector + "</li>");

结果

1 ul
2 ul li
3 div#foo ul:not([class])

---

jquery获取元素索引值index()方法：

jquery的index()方法 搜索匹配的元素，

并返回相应元素的索引值，从0开始计数。
1、如果不给 .index() 方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
2、如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。
3、如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。

4、如果找不到匹配的元素，则返回-1。

 1
 2 <ul>
 3 <li id="foo">foo</li>
 4 <li id="bar">bar</li>
 5 <li id="baz">baz</li>
 6 </ul>
 7
 8 $('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
 9 $('li').index($('#bar')); //1，传递一个jQuery对象
10 $('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
11 $('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的做引位置
12 $('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。 

jQuery :gt() 选择器

实例

选择前 4 个之后的所有 <tr> 元素：

$("tr:gt(3)")

:gt() 选择器选取 index 值大于指定数字的元素。

index 值从 0 开始。

最常见的用法：与其他选择器一起使用，选取指定组合中特定序号之后的元素（如上面的实例）。

提示：请使用 :lt selector 来选取 index 值小于指定数字的元素。

语法：

$(":gt(index)")

jQuery :lt() 选择器

实例

选取前 4 个 <tr> 元素：

$("tr:lt(4)")

定义和用法

:lt() 选择器选取 index 值小于指定数字的元素。

index 值从 0 开始。

最常见的用法：与其他选择器一起使用，选取指定组合中特定序号之前的元素（如上面的实例）。

提示：请使用 :gt selector 来选取 index 值大于指定数字的元素。

语法

$(":lt(index)")

---

jquery获取元素索引值index()示例

 1
 2 //用于二级或者三级联动
 3
 4 <div id="nav">
 5 <a href="http://www.51xuediannao.com/">建站素材</a>
 6 <a href="http://www.51xuediannao.com/">jquery特效</a>
 7 <a href="http://www.51xuediannao.com/">懒人主机</a>
 8 <a href="http://www.51xuediannao.com/qd63/">前端路上</a>
 9 </div>
10
11 $("#nav a").click(function(){
12
13 //四个经典的用法
14 var index1 = $("#nav a").index(this);
15 var index2 = $("#nav a").index($(this));
16 var index3 = $(this).index()
17 var index3 = $(this).index("a")
18 alert(index3);
19 return false;
20 }); 

---

jQuery中this与$(this)的区别

1    $("#textbox").hover(
2       function() {
3            this.title = "Test";
4       },
5       fucntion() {
6           this.title = "OK”;
7       }
8 ); 

这里的this其实是一个html 元素(textbox)，textbox有text属性，所以这样写是完全没有什么问题的。 
但是如果将this换成(this)就不是那回事了，报Error了。this与(this)的区别在此。

1 \\Error Code：
2 $("#textbox").hover(
3        function() {
4           $(this).title ＝ "Test";
5        },
6        function() {
7           $(this).title = "OK";
8        }
9 ); 

$()这是jQuery的一个函数，也是最核心最基本的函数

功能一：传入一个选择器字符串，获得这个选择器对应的dom内容，

保存在[ ]中，也就是俗称的jQuery对象。例如

('#id')(‘.class’) $(‘tag’) 
功能二：传入一个匿名函数，例如

$(function(){})//这个匿名函数在网页载入完成后开始执行 
功能三：将JavaScript对象包装成为jQuery对象。例如

$(this)

$({a:1,b:2,c:3})

$(document.getElementById('idstr'))

1 var node = $('#id');
2 node.click(function(){
3 　　this.css('display','block');　　//报错  this是一个html元素，不是jquery对象，因此this不能调用jquery                             的css()方法
4 　　$(this).css();　　　　　　//正确　　　$(this)是一个jquery对象，不是html元素，可以用css()方法
5 　　this.style.display = 'block';　　//正确  this是一个html元素，不是jquery对象，因此this不能调用jquery的css()方法,
6　　　　　　　　　　　　　　　　　　　　　　//但是可以用javascript来更改style属性
7
8});

如果你只是通过jQ对象获取简单的dom元素的属性比如id，那么你完全可以使用js原生的方法：

1 $(‘#someAnchor’).click(function() {
2
3     alert( this.id );
4
5 });

Tomorrow the birds will sing.