juery获取元素的方法

1 从集合中通过指定的序号获取元素
html：

复制代码 代码如下:

<div>
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
</div>

JS

复制代码 代码如下:

<script type="text/javascript">
jQuery(function(){
$("p").eq(2).css("color","red");
$("p").eq(3).css("color","red");
})
</script>

2 获取指定条件一致和指定范围的元素
html:

复制代码 代码如下:

<div>
<p>0</p>
<p>1</p>
<p class="center">2</p>
<p class="center">3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
</div>

JS

复制代码 代码如下:

<script type="text/javascript">
jQuery(function(){
$("p").filter('.center').css("color","red");
})
$(function(){
$("p").slice(5,7).css("color","yellow");
})
</script>

3 获取与条件表达式一致的元素
html:

复制代码 代码如下:

<div>
<p>0</p>
<p>1</p>
<p class="center">2</p>
<p class="center">3</p>
<p>4</p>
<p class="aa">5</p>
<p>6</p>
<p>7</p>
</div>

js

复制代码 代码如下:

<script type="text/javascript">
jQuery(function(){
$("p").each(function(){
switch(true){
case $(this).is(".center"):
$(this).css("color","red");
break;
case $(this).is(".aa"):
$(this).css("color","yellow");
break;
}
})
})
</script>

4 获取元素的上一个元素和下一个元素
Html:

复制代码 代码如下:

<div id="aa">
<p>1号</p>
<p class="yes">2号</p>
<p>3号</p>
<p>4号</p>
<p>5号</p>
<p class="yes">6号</p>
<p class="yes">7号</p>
</div>

js

复制代码 代码如下:

//获取元素的下一个元素
jQuery(function(){
$("p").next(".yes").css("color","red");
})
//获取元素的上一个元素
jQuery(function(){
$("p").prev(".yes").css("color","red");
})

5 获取元素的父元素和子元素
html:

复制代码 代码如下:

<div id="aa">
<p>1号</p>
<p class="yes">2号</p>
<p>3号</p>
<p>4号</p>
<p>5号</p>
<p class="yes">6号</p>
<p class="yes">7号</p>
</div>

js

复制代码 代码如下:

//获取元素的父元素
jQuery(function(){
$("p").parent().css("color","red");
})
//获取元素的子元素
jQuery(function(){
$("#aa").children(".yes").css("color","red");
})

 

//复制第一个元素

<div id="divName">
  <input type="text" name="stuName1" value="zhaodong1">
  <input type="text" name="stuName2" value="zhaodong2">
  <input type="text" name="stuName3" value="zhaodong3">
  <input type="text" name="stuName4" value="zhaodong4">
  <input type="text" name="stuName5" value="zhaodong5">
  </div>

 

  //alert($("#divName input:first").val());
  //alert($("#divName>input:first").val());
  //alert($("#divName").children("input:first-child").val());
  //alert($("#divName").children("input:first").val());
  //alert($("#divName").children(":first").val());
  //alert($("#divName :first").val());
  //alert($($("#divName").children()).get(0).value);
  //alert($("#divName").children().first().val());