jquery查找父元素、子元素(个人经验总结)


Posted in Javascript onApril 09, 2014

使用js或者jquery查找父元素、子元素经常遇到。可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多

这里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")是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>
Javascript 相关文章推荐
学习面向对象之面向对象的术语
Nov 30 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
web前端开发upload上传头像js示例代码
Oct 22 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
vue底部加载更多的实例代码
Jun 29 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 Javascript
vue+AI智能机器人回复功能实现
Jul 16 Javascript
JavaScript中遍历的十种方法总结
Dec 15 Javascript
javascript实现点击产生随机图形
Jan 25 Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 #Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 #Javascript
jQuery遍历Table应用示例
Apr 09 #Javascript
通过url查找a元素并点击
Apr 09 #Javascript
js数组方法扩展实现数组统计函数
Apr 09 #Javascript
jquery实现pager控件示例
Apr 09 #Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 #Javascript
You might like
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
论坛头像随机变换代码
2006/10/09 PHP
PHP 字符串操作入门教程
2006/12/06 PHP
PHP源码之explode使用说明
2011/08/05 PHP
PHP数据流应用的一个简单实例
2012/09/14 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
php文件操作小结(删除指定文件/获取文件夹下的文件名/读取文件夹下图片名)
2016/05/09 PHP
PHP crc32()函数讲解
2019/02/14 PHP
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
VsCode与Node.js知识点详解
2019/09/05 Javascript
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
详解如何减少python内存的消耗
2019/08/09 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
Python中os模块功能与用法详解
2020/02/26 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
创建青年文明号材料
2014/05/09 职场文书
技术负责人任命书
2014/06/05 职场文书
员工团队活动方案
2014/08/28 职场文书
公司离职证明标准格式
2014/11/18 职场文书
黄埔军校观后感
2015/06/10 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
《詹天佑》教学反思
2016/02/20 职场文书
励志语录:时光飞逝,请学会珍惜所有的人和事
2020/01/16 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
JavaScript前端面试组合函数
2022/06/21 Javascript