jquery查找父元素、子元素(个人经验总结)
来源:互联网 发布:maya2015 mac破解版 编辑:程序博客网 时间:2024/05/16 09:40
这里jquery向上查找父元素 用到的方法:closest() parents() parent()
向下查找子元素 用到的方法:find() children()
js用的是 children[] 属性
<!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")是mytd2
alert($(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"));//undefined
alert($(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>
- jquery查找父元素、子元素(个人经验总结)
- jquery查找父元素、子元素(个人经验总结)--zsl代修改
- jquery查找父元素 子元素(个人总结)
- JQUEry查找父元素和子元素
- jquery查找子元素
- JQuery和js查找子、父、兄弟元素的方法
- JS或Jquery查找父元素、子元素(网上资料保存)
- jquery获取父元素子元素同级元素
- jquery选择器获取父级元素、同级元素、子元素
- jquery查找元素
- jquery 元素查找
- jquery查找元素
- jQuery元素查找方法
- Jquery获取子元素
- jQuery子元素过滤器
- jQuery子元素过滤器
- jquery子元素过滤器
- jQuery去除子元素
- Exception-异常处理(c++)的总结
- 为什么变量前要加下划线才有用?
- Java电话号码和手机号码正则验证
- 使用ArcGIS GP服务之四GP服务发布
- ZOJ.2358 Sum of Factorials【略坑】 2015/10/12
- jquery查找父元素、子元素(个人经验总结)
- 一段自用javascript代码
- ShaderLab Tutorials-Alpha Blending-1
- 使用Photoshop辅助线制作ps切片教程
- 在Cocos2D中改变动态物体为静态物体
- cocos2d-x 内存管理
- maven仓库更新JAR包速度慢的问题
- 苹果公司开发者账号注册流程详解
- 结构指针和数组