jQuery - DOM 元素方法

本文介绍了jQuery中四个重要的DOM操作方法:get(), index(), size() 和 toArray() 的使用方法及示例。get()方法用于获取指定索引处的DOM元素;index()方法用于获取元素在其兄弟元素中的索引位置;size()方法返回由选择器匹配到的元素数量;toArray()方法则将匹配的元素转化为数组。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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()
这个也不难,就是以数组的形式返回所匹配的元素

转载于:https://www.cnblogs.com/zhang11424/p/7143715.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值