jquery怎样获得index_框架

jquery提供了获得第一个匹配元素相对于其同胞元素的位置的方法——index()，注意：

index从0开始计数

如果未找到元素，index() 将返回 -1。

实例演示如下

创建Html元素

<span>点击li元素即可获取其index：</span><br>

<ul>

<li >Ralph</li>

</ul>

</div>

设置css样式

divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

divbox>span{color:#999;font-style:italic;}

divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

li{margin:5px;list-style: none;}

red{color:red !important;}

编写jquery代码

$(function(){

$("ul li")click(function() {

$(this)addClass('red'); // 应用样式以突出

n = $(this)index();

alert("被点击的li标签的index顺序为："+n+"，实际顺序为："+(n+1)+"。");

});

观察效果

jQuery 选择器简介

jQuery 选择器允许对 HTML 元素组或单个元素进行 *** 作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

1 基本选择器

$("#test") 选择id值为test的元素，id值是唯一的所以返回单个元素。

$("div") 选择所有的div标签元素，返回div元素数组

$("myclass") 选择使用myclass类的css的所有元素

$("") 选取所有元素。

$("#test,div,myclass") 选取多个元素。

2层次选择器

$("div span") 选取<div>里的所有<span>元素

$("div >span") 选取<div>元素下元素名是<span>的子元素

$("#one +div") 选取id为one的元素的下一个<div>同辈元素等同于$("#one")next("div")

$("#one~div") 选取id为one的元素的元素后面的所有<div>同辈元素等同于$("#one")nextAll("div")

$("#one")siblings("div") 获取id为one的元素的所有<div>同辈元素（不管前后）

$("#one")prev("div") 获取id为one的元素的前面紧邻的同辈<div>元素

所以获取元素范围大小顺序依次为：

$("#one")siblings("div")>$("#one~div")>$("#one +div")

或是

$("#one")siblings("div")>$("#one")nextAll("div")>$("#one")next("div")

3基本过滤选择器

$("div:first") 选取所有<div>元素中第1个<div>元素

$("div:last") 选取所有<div>元素中最后一个<div>元素

$("input:not(myClass)") 选取class不是myClass的<input>元素

$("input:even") 选取索引是偶数的<input>元素(索引从0开始)

$("input:odd") 选取索引是基数的<input>元素(索引从0开始)

$("input:eq(2)") 选取索引等于2的<input>元素

$("input:gt(4)") 选取索引大于4的<input>元素

$("input:lt(4)") 选取索引小于4的<input>元素

$(":header") 过滤掉所有标题元素，例如：h1、h2、h3等

$("div:animated") 选取正在执行动画的<div>元素

$(":focus") 选取当前获取焦点的元素

4内容过滤选择器

$("div:contains('Name')") 选取所有<div>中含有'Name'文本的元素

$("div:empty") 选取不包含子元素（包括文本元素）的<div>空元素

$("div:has(p)") 选取所有含有<p>元素的<div>元素

$("div:parent") 选取拥有子元素的（包括文本元素）<div>元素

5可见性过滤选择器

$("div:hidden") 选取所有不可见的<div>元素

$("div:visible") 选取所有可见的<div>元素

6属性过滤选择器

$("div[id]") 选取所有拥有属性id的元素

$("input[name='test']") 选取所有的name属性等于'test'的<input>元素

$("input[name!='test']") 选取所有的name属性不等于'test'的<input>元素

$("input[name^='news']") 选取所有的name属性以'news'开头的<input>元素

$("input[name$='news']") 选取所有的name属性以'news'结尾的<input>元素

$("input[name='news']") 选取所有的name属性包含'news'的<input>元素

$("div[title|='en']") 选取属性title等于'en'或以'en'为前缀(该字符串后跟一个连字符'-')的<div>元素

$("div[title~='en']") 选取属性title用空格分隔的值中包含字符en的<div>元素

$("div[id][title$='test']") 选取拥有属性id,并且属性title以'test'结束的<div>元素

7子元素过滤选择器

$("div one:nth-child(2)") 选取class为'one'的<div>父元素下的第2个子元素

$("div span:first-child") 选取每个<div>中的第1个<span>元素

$("div span:last-child") 选取每个<div>中的最后一个<span>元素

$("div button:only-child") 在<div>中选取是唯一子元素的<button>元素

8表单对象属性过滤选择器

$("#form1 :enabled") 选取id为'form1'的表单内所有可用元素

$("#form2 :disabled") 选取id为'form2'的表单内所有不可用元素

$("input :checked") 选取所有被选中的<input>元素

$("select option:selected") 选取所有的select 的子元素中被选中的元素

9表单选择器

$(":input") 选取所有<input>,<textarea>,<select> 和 <button>元素

$(":text") 选取所有的单行文本框

$(":password") 选取所有的密码框

$(":radio") 选取所有单的选框

$(":checkbox") 选取所有的多选框

$(":submit") 选取所有的提交按钮

$(":image") 选取所有的图像按钮

$(":reset") 选取所有的重置按钮

$(":button") 选取所有的按钮

$(":file") 选取所有的上传域

$(":hidden") 选取所有不可见元素

$("div")//选取div

$("div>p")//选取div的子元素p

jQuery 选择器大全

$("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素

$("div") 选择所有的div标签元素，返回div元素数组

$("myClass") 选择使用myClass类的css的所有元素

$("") 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,myclass")

层叠选择器：

$("form input") 选择所有的form元素中的input元素

$("#main > ") 选择id值为main的所有的子元素

$("label + input") 选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素

$("#prev ~ div") 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

基本过滤选择器：

$("tr:first") 选择所有tr元素的第一个

$("tr:last") 选择所有tr元素的最后一个

$("input:not(:checked) + span")

过滤掉：checked的选择器的所有的input元素

$("tr:even") 选择所有的tr元素的第0，2，4 个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）

$("tr:odd") 选择所有的tr元素的第1，3，5 个元素

$("td:eq(2)") 选择所有的td元素中序号为2的那个td元素

$("td:gt(4)") 选择td元素中序号大于4的所有td元素

$("td:ll(4)") 选择td元素中序号小于4的所有的td元素

$(":header")

$("div:animated")

内容过滤选择器：

$("div:contains('John')") 选择所有div中含有John文本的元素

$("td:empty") 选择所有的为空（也不包括文本节点）的td元素的数组

$("div:has(p)") 选择所有含有p标签的div元素

$("td:parent") 选择所有的以td为父节点的元素数组

可视化过滤选择器：

$("div:hidden") 选择所有的被hidden的div元素

$("div:visible") 选择所有的可视化的div元素

属性过滤选择器：

$("div[id]") 选择所有含有id属性的div元素

$("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素

$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素

$("input[name^='news']") 选择所有的name属性以'news'开头的input元素

$("input[name$='news']") 选择所有的name属性以'news'结尾的input元素

$("input[name='man']") 选择所有的name属性包含'news'的input元素

$("input[id][name$='man']") 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

子元素过滤选择器：

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")

$("div span:first-child") 返回所有的div元素的第一个子节点的数组

$("div span:last-child") 返回所有的div元素的最后一个节点的数组

$("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组

表单元素选择器：

$(":input") 选择所有的表单输入元素，包括input, textarea, select 和 button

$(":text") 选择所有的text input元素

$(":password") 选择所有的password input元素

$(":radio") 选择所有的radio input元素

$(":checkbox") 选择所有的checkbox input元素

$(":submit") 选择所有的submit input元素

$(":image") 选择所有的image input元素

$(":reset") 选择所有的reset input元素

$(":button") 选择所有的button input元素

$(":file") 选择所有的file input元素

$(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域

表单元素过滤选择器：

$(":enabled") 选择所有的可 *** 作的表单元素

$(":disabled") 选择所有的不可 *** 作的表单元素

$(":checked") 选择所有的被checked的表单元素

$("select option:selected") 选择所有的select 的子元素中被selected的元素

选取一个 name 为”S_03_22″的input text框的上一个td的text值

$(”input[@ name =S_03_22]“)parent()prev()text()

名字以”S_”开始，并且不是以”_R”结尾的

$(”input[@ name ^='S_']“)not(”[@ name $='_R']“)

一个名为 radio_01的radio所选的值

$(”input[@ name =radio_01][@checked]“)val();

$("A B") 查找A元素下面的所有子节点，包括非直接子节点

$("A>B") 查找A元素下面的直接子节点

$("A+B") 查找A元素后面的兄弟节点，包括非直接子节点

$("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点

1 $("A B") 查找A元素下面的所有子节点，包括非直接子节点

例子：找到表单中所有的 input 元素

HTML 代码:

<form>

<label>Newsletter:</label>

</fieldset>

</form>

jQuery 代码:

$("form input")

结果:

[ <input name="name" />, <input name="newsletter" /> ]

2 $("A>B") 查找A元素下面的直接子节点

例子：匹配表单中所有的子级input元素。

HTML 代码:

<form>

<label>Newsletter:</label>

</fieldset>

</form>

jQuery 代码:

$("form > input")

结果:

[ <input name="name" /> ]

3 $("A+B") 查找A元素后面的兄弟节点，包括非直接子节点

例子：匹配所有跟在 label 后面的 input 元素

HTML 代码:

<form>

<label>Newsletter:</label>

</fieldset>

</form>

jQuery 代码:

$("label + input")

结果:

[ <input name="name" />, <input name="newsletter" /> ]

4 $("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点

例子：找到所有与表单同辈的 input 元素

HTML 代码:

<form>

<label>Newsletter:</label>

</fieldset>

</form>

jQuery 代码:

$("form ~ input")

结果:

[ <input name="none" /> ]

本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍需要的朋友参考下

$("#myELement") 选择id值等于myElement的元素 id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素返回div元素数组 $(" myClass") 选择使用myClass类的css的所有元素 $("") 选择文档中的所有的元素可以运用多种的选择方式进行联合选择例如$("#myELement div myclass")

层叠选择器 $("form input") 选择所有的form元素中的input元素 $("#main > ") 选择id值为main的所有的子元素 $("label + input") 选择所有的label元素的下一个input元素节点经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 $("#prev ~ div") 同胞选择器该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

基本过滤选择器 $("tr:first") 选择所有tr元素的第一个 $("tr:last") 选择所有tr元素的最后一个 $("input:not(:checked) + span")

过滤掉 checked的选择器的所有的input元素 $("tr:even") 选择所有的tr元素的第个元素（注意因为所选择的多个元素时为数组所以序号是从开始） $("tr:odd") 选择所有的tr元素的第个元素 $("td:eq( )") 选择所有的td元素中序号为的那个td元素 $("td:gt( )") 选择td元素中序号大于的所有td元素 $("td:ll( )") 选择td元素中序号小于的所有的td元素 $(":header") $("div:animated")

内容过滤选择器 $("div:contains( John )") 选择所有div中含有John文本的元素 $("td:empty") 选择所有的为空（也不包括文本节点）的td元素的数组 $("div:has(p)") 选择所有含有p标签的div元素 $("td:parent") 选择所有的以td为父节点的元素数组

可视化过滤选择器 $("div:hidden") 选择所有的被hidden的div元素 $("div:visible") 选择所有的可视化的div元素

属性过滤选择器 $("div[id]") 选择所有含有id属性的div元素 $("input[name= newsletter ]") 选择所有的name属性等于 newsletter 的input元素 $("input[name!= newsletter ]") 选择所有的name属性不等于 newsletter 的input元素 $("input[name^= news ]") 选择所有的name属性以 news 开头的input元素 $("input[name$= news ]") 选择所有的name属性以 news 结尾的input元素 $("input[name= man ]") 选择所有的name属性包含 news 的input元素 $("input[id][name$= man ]") 可以使用多个属性进行联合选择该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

子元素过滤选择器 $("ul li:nth child( )") $("ul li:nth child(odd)") $("ul li:nth child( n + )") $("div span:first child") 返回所有的div元素的第一个子节点的数组 $("div span:last child") 返回所有的div元素的最后一个节点的数组 $("div button:only child") 返回所有的div中只有唯一一个子节点的所有子节点的数组

表单元素选择器 $(":input") 选择所有的表单输入元素包括input textarea select 和 button $(":text") 选择所有的text input元素 $(":password") 选择所有的password input元素 $(":radio") 选择所有的radio input元素 $(":checkbox") 选择所有的checkbox input元素 $(":submit") 选择所有的submit input元素 $(":image") 选择所有的image input元素 $(":reset") 选择所有的reset input元素 $(":button") 选择所有的button input元素 $(":file") 选择所有的file input元素 $(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域

表单元素过滤选择器 $(":enabled") 选择所有的可 *** 作的表单元素 $(":disabled") 选择所有的不可 *** 作的表单元素 $(":checked") 选择所有的被checked的表单元素 $("select option:selected") 选择所有的select 的子元素中被selected的元素选取一个name 为”S_ _ ″的input text框的上一个td的text值 $(”input[@name =S_ _ ]“) parent() prev() text() 名字以”S_”开始并且不是以”_R”结尾的 $(”input[@name ^= S_ ]“) not(”[@name $= _R ]“) 一个名为radio_ 的radio所选的值 $(”input[@name =radio_ ][@checked]“) val(); $("A B") 查找A元素下面的所有子节点包括非直接子节点 $("A>B") 查找A元素下面的直接子节点 $("A+B") 查找A元素后面的兄弟节点包括非直接子节点 $("A~B") 查找A元素后面的兄弟节点不包括非直接子节点

$("A B") 查找A元素下面的所有子节点包括非直接子节点 例子找到表单中所有的 input 元素 HTML 代码: <form> <label>Name:</label> <input name=name /> <fieldset> <label>Newsletter:</label> <input name=newsletter /> </fieldset> </form> <input name=none /> jQuery 代码: $("form input") 结果: [ <input name=name /> <input name=newsletter /> ]

$("A>B") 查找A元素下面的直接子节点 例子匹配表单中所有的子级input元素 HTML 代码: <form> <label>Name:</label> <input name=name /> <fieldset> <label>Newsletter:</label> <input name=newsletter /> </fieldset> </form> <input name=none /> jQuery 代码: $("form > input") 结果: [ <input name=name /> ]

$("A+B") 查找A元素后面的兄弟节点包括非直接子节点 例子匹配所有跟在 label 后面的 input 元素 HTML 代码: <form> <label>Name:</label> <input name=name /> <fieldset> <label>Newsletter:</label> <input name=newsletter /> </fieldset> </form> <input name=none /> jQuery 代码: $("label + input") 结果: [ <input name=name /> <input name=newsletter /> ]

lishixinzhi/Article/program/Java/JSP/201311/20132

就是在一个元素里有3个div你要获取第一个div的类名？？！！

这样用var name=$('div')eq(0)attr('class')

name就是第一个div的class名

<tr>

<th width="100">合作驾校名称</th>

</tr>

<tr>

<td><a class="change button border-blue button-little update" href="#">修改申请状态</a></td>

</tr>

<tr>

<td><a class="change button border-blue button-little update" href="#">修改申请状态</a></td>

</tr>

</table>

扩展资料：

遍历同胞：

siblings（）：被选中时找到自己的兄弟姐妹，写法有siblings（所有的兄弟姐妹）和siblings（“同级的兄弟姐妹”）。

next（）：被选中时找到自己的下级，写法有 nextAll（找到所有的下级）和next（“找到下一个元素”）和nextuntil（"被选中的元素的范围内的元素"）。

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

first（）：返回被选中的第一元素，写法 $("div p")first()css("样式") 。

last（）：被选中的最后一个元素，写法 $("div p")last()css(”样式“) 。

eq（）：返回被选中元素中有索引的元素，索引号，是从0开始不是从1开始比如treq(0)id ==dataeq[i-1]id 或者 tr[0]id = data[i-1]id。

filter（）：删除真正意义上的过滤，写法 $("div ")filter("span")hide() 。

not（）：就是跟filter（）相反的用法。

jQuery 提供了index()方法用于获取第一个匹配元素相对于其同胞元素的 index 位置（从0开始计数），基本语法为：$(selector)index()。因此当前 tr 的 index 可以得到行数，当前 td 的 index 可以得到列数。实例演示如下:

1、HTML结构

</table>

2、jquery代码

$(function(){

$("table td")click(function() {

var row = $(this)parent()index() + 1; // 行位置

var col = $(this)index() + 1; // 列位置

alert("当前位置：第"+row+"行，第"+col+"列")

});

以上就是关于jquery怎样获得index全部的内容，包括:jquery怎样获得index、jquery选择器有哪些、Jquery如何选取元素及其所有子元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/9501032.html

jquery怎样获得index

发表评论

评论列表（0条）