码迷,mamicode.com
首页 > Web开发 > 详细

jQuery - DOM 元素方法

时间:2017-07-10 00:37:22      阅读:281      评论:0      收藏:0      [点我收藏+]

标签:.text   str   理解   i++   oda   tor   click   body   his   

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 元素方法

标签:.text   str   理解   i++   oda   tor   click   body   his   

原文地址:http://www.cnblogs.com/zhang11424/p/7143715.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!