jQuery - DOM 元素方法
Posted 张晋铭
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery - DOM 元素方法相关的知识，希望对你有一定的参考价值。
jQuery DOM 元素方法 - get() 方法
实例
获得第一个 p 元素的名称和值：
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
x=$("p").get(0);
$("div").text(x.nodeName + ": " + x.innerhtml);
});
});
</script>
<body>
<p>This is a paragraph</p>
<button>获得 p DOM 元素</button>
<div></div>
</body>
结果
当点击时：P: This is a paragraph
语法：$(selector).get(index) 其中selector是所选择的元素，index是要取出的元素的下标
jQuery DOM 元素方法 - index() 方法
<script type="text/javascript">
$(document).ready(function(){
$("li").click(function(){
alert($(this).index());
});
});
</script>
<body>
<p>点击列表项可获得其相对于同胞元素的 index 位置：</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
结果如下，点击元素时会相应的弹出元素的index，例如：点击coffee时，会弹出 0
点击列表项可获得其相对于同胞元素的 index 位置：
- Coffee
- Milk
- Soda
定义和用法
index() 方法返回指定元素相对于其他指定元素的 index 位置。
这些元素可通过 jQuery 选择器或 DOM 元素来指定。
注释：如果未找到元素，index() 将返回 -1。
第二：
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
alert($(".hot").index($("#favorite")));
});
});
</script>
<body>
<p>请点击下面的按钮，以获得 id="favorite" 的元素相对于 jQuery 选择器 (class="hot") 的 index：</p>
<button>获得 index</button>
<ul>
<li>Milk</li>
<li class="hot">Tea</li>
<li class="hot" id="favorite">Coffee</li>
</ul>
</body>
这个结果一点击时，弹出的下标 是1，如果不写$("#favorite")，那弹出的是1，写了则就是相对<li class="hot">Tea</li>里面的class="hot"，结果为1。如果
<li class="hot" id="favorite">Coffee</li>里面删除class="hot"那结果肯定是-1，但是删除<li class="hot">Tea</li>里面的class="hot"那结果就是0.。
jQuery DOM 元素方法 - size() 方法
定义和用法
size() 方法返回被 jQuery 选择器匹配的元素的数量。
语法
$(selector).size()
这个就是返回元素数量，很好理解，换一下方法演示一下就行
jQuery DOM 元素方法 - toArray() 方法
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
x=$("li").toArray()
for (i=0;i<x.length;i++){
alert(x[i].innerHTML);
}
});
});
</script>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
定义和用法
toArray() 方法以数组的形式返回 jQuery 选择器匹配的元素。
语法
$(selector).toArray()
这个也不难，就是以数组的形式返回所匹配的元素
以上是关于jQuery - DOM 元素方法的主要内容，如果未能解决你的问题，请参考以下文章