JS或Jquery查找父元素、子元素(网上资料保存)
来源:互联网 发布:江苏省软件测试中心 编辑:程序博客网 时间:2024/04/29 21:14
jquery向上查找父元素 用到的方法:closest() parents() parent()
向下查找子元素 用到的方法:find() children()
js用的是 children[] 属性
html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jquery查找父元素子元素</title></head><body><div class="div1" id="div1" name="mydiv"><p>段落1 查找父元素</p><table id="table1"><tbody id="tbody1"><tr><td id="mytd1">11closest()向上查找最近的元素(返回零个或一个元素的 jQuery 对象)</td></tr><tr id="mytr2"><td id="mytd2">21parent()方法</td></tr><tr><td id="mytd3">31parent("选择器")方法</td></tr></tbody></table></div><hr><div id="div2" style="border-bottom :5px;" name="mydiv"><p>段落2 查找子元素</p><table id="table2"><tbody><tr><td id="sectd1">查找table2的td find()方法</td></tr><tr id="sectr2"><td id="sectd2">查找table2的td children()方法</td></tr><tr><td id="sectd3">js的children[]属性来查找</td></tr></tbody><tbody><tr><td>tbody2222</td></tr></tbody></table></div></body></html>
js代码
<script type="text/javascript" src="./js/jquery-1.7.2.js"></script><script>$(function(){/************ 查找父元素 *************///closest()方法$("#mytd1").bind("click",function(){//alert($(this).html());alert($(this).closest("table").attr("id")); //table1而不是table0//alert($(this).closest("table").html());});//parent()方法$("#mytd2").bind("click",function(){//alert($(this).html()); //$(this).html()是21 (this).attr("id")是mytd2alert($(this).parent().parent().parent().attr("id"));//.parent()是tr 第二个.parent是tbody。即使没有tbody标签,找到的也是tbody 第三个.parent()是table//document.write("第一个parent的id:" + $(this).parent().attr("id") + "。 第二个parent的id是:"+$(this).parent().parent().attr("id") + "。 第三个parent的id是:"+$(this).parent().parent().parent().attr("id"));});//parent("选择器") parents("选择器")$("#mytd3").bind("click",function(){$("p").parent("#div1").css("background", "yellow");//这里换成了p标签。不知道为什么用this找不到元素//alert($(this).parent("#div").attr("id"));//undefinedalert($(this).parents("div").attr("id"));//div1 注意一个parent parents});/************ 查找子元素 *************///查找table2的td元素 find()$("#sectd1").bind("click",function(){alert($("#table2").find("td").length);/* $("#table2").find("td").each(function(index,element){alert($(element).text());}); */});//children()$("#sectd2").bind("click",function(){var table = $("#table2");alert($("#table2").children().children().children("td[id='sectd2']").html());//children() 是 tbody children()是 tr children("td[id='sectd2']")是td});// js的 children[]$("#sectd3").bind("click",function(){var table = document.getElementById("table2");alert(table.children[0].children[2].children[0].innerHTML);//children[0] 是 tbody children[2]是 第三行的tr children[0]是td});});</script>
0 0
- JS或Jquery查找父元素、子元素(网上资料保存)
- JQUEry查找父元素和子元素
- jquery查找父元素 子元素(个人总结)
- jquery查找子元素
- JQuery和js查找子、父、兄弟元素的方法
- jquery查找父元素、子元素(个人经验总结)
- 通过js或jQuery,<iframe>子父窗口之间元素、方法、window的相互获取
- js或jquery如何获取父级、子级、兄弟元素
- js或jquery如何获取父级、子级、兄弟元素
- jQuery判断一个元素是否是另一个元素的子元素(或其自身)
- 使用jQuery查找父元素或父节点的方法
- 【元素的查找】js和jquery方法查找dom元素
- js和jquery获取父级元素、子级元素、兄弟元素的方法
- js和jquery获取父级元素、子级元素、兄弟元素的方法
- js和jquery获取父级元素、子级元素、兄弟元素的方法
- js和jquery获取父级元素、子级元素、兄弟元素的方法
- js和jquery获取父级元素、子级元素、兄弟元素的方法
- js和jquery获取父级元素、子级元素、兄弟元素的方法
- 7 Important Model Evaluation Error Metrics Everyone should know
- JavaScript之基本语法
- MVP模式的Android 调用系统拍照,相册,剪裁,适配到7.0,修复拍照图片旋转问题
- android 最全缓存目录获取方式和函数解析
- Linux下压缩与解压
- JS或Jquery查找父元素、子元素(网上资料保存)
- 人工智能-java
- 关于Hibernate查询返回值转换为实体或Map形式处理问题
- 声明贴:菜鸟一枚,纯属记录,仅供阅读,以免误人子弟!!!
- 倒排索引 mr实现
- 解决使用MySQL C-API开发应用时的连接超时问题
- ajax同步异步总结
- ROS学习笔记(一)
- Oracle用户、权限、角色管理