jquery学习之1.20-获取同辈元素和子元素

获取同辈元素和子元素，所用方法如下：

代码如下：

<%@ page language="java" import="java.util.*"pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>11</title>    <style type="text/css">body {height:100%;width:50%;margin:50px auto;padding:20px;border:1px solid black;}div{background:grey;width:20%;float:left;height:30%;border:1px solid black}div div{background:pink;width:50%;height:30%;}</style><script type="text/javascript" src="../js/jquery-1.11.0.js"></script><script language="javascript">$(document).ready(function(){      //**********************左右移动*******
     $("#bt1").click(function(){        //获取所有子元素
         $("#div2").children().each(function(){alert($(this).text());});         }); $("#bt2").click(function(){        //获取指定子元素,备注eq()从0开始var t1=$("#div2").children().eq(0).text();alert(t1);}); $("#bt3").click(function(){        //获取后面的所有同辈元素var t1=$("#div2").nextAll().each(function(){alert($(this).text());});     }); $("#bt4").click(function(){        //获取后面的第二个同辈元素
        $("#div2").prevAll().each(function(){alert($(this).text());});  });  $("#bt5").click(function(){        //获取后面的第二个同辈元素
       alert($("#div2").nextAll().eq(2).text());});  $("#bt6").click(function(){        //获取后面的第二个同辈元素
       $("#div2").siblings().each(function(){alert($(this).text());});});  });</script></head> <body><input type="button" id="bt1" value="获取id为div2的div的所有子元素"></input><input type="button" id="bt2" value="获取id为div2的div的第一个子元素"></input><input type="button" id="bt3" value="获取后面的所有同辈元素"></input><input type="button" id="bt4" value="获取前面的所有同辈元素"></input><input type="button" id="bt5" value="获取后面的第二个同辈元素"></input>    <input type="button" id="bt6" value="获取所有同辈元素"></input>    <br><div id="div1">div1</div><div id="div2">div2<div id="div2_1">div2_1</div><div id="div2_2">div2_2</div></div><div id="div3">div3</div><div id="div4">div4</div><div id="div5">div5</div></body>
</html>

转载于:https://www.cnblogs.com/luckyflower/p/3630785.html

jquery学习之1.20-获取同辈元素和子元素相关推荐

jquery 同级元素下的子元素_jq 获取所有父级元素及同级元素及子元素的方法(推荐)...
1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() 获取其所有的祖先元素 $("#id&quo ...
jQuery获取所有父级元素及同级元素及子元素的方法
jQuery获取所有父级元素及同级元素及子元素的方法 1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() ...
jQuery中兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
jquery获取元素（父级的兄弟元素的子元素）
一.获取父级元素使用jquery获取父级元素: parent() 例如:$(this).parent('ul'); 二.获取同级元素使用jquery获取同级元素:siblings() 例如:$(t ...
jquery 删除html属性值,使用jQuery的remove()和empty()方法删除Html元素及子元素和内容...
01第1节. jQuery删除元素和内容 #JavaScript#在jQuery中,不仅可以在已有Html页面中添加新的Html元素,还可以删除已有的Html元素. 在jQuery中有2个方法可以完成 ...
js获取被点击的元素以及子元素
js获取被点击元素: 可参见原demo:https://github.com/liyuanhong/learn-js-css-html5/tree/master/html <!DOCTYPE h ...
html点击子元素,js获取被点击的元素以及子元素
js获取被点击元素: 获取被点击的元素 body {margin: 0px;} #container {width: 700px;height: 300px;padding:5px;backgroun ...
Vue中获取当前点击元素的父元素、子元素、兄弟元素
Vue如何获取当前点击元素? 获取父元素.子元素.兄弟元素呢? 通过帮定点击事件: 例如: <button class="shanchu" @click="shan ...
原生js获取元素的子元素
//使用firstChild //但是下面这种因为有空格,也算其子元素<lable><span id="onlinePerson" name="pers ...

jquery学习之1.20-获取同辈元素和子元素

jquery学习之1.20-获取同辈元素和子元素相关推荐

最新文章

热门文章