1. /************ 查找父元素 *************/
  2. //closest()方法
  3. $("#mytd1").bind("click",function(){
  4. alert($(this).closest("table").attr("id")); //table1
  5. alert($(this).closest("tr").attr("id"));//mytr1
  6. console.info($(this).closest());//本身
  7. console.info($(this).closest("td"));//mytd1 返回元素本身。
  8. console.info($("td").closest("tbody"));//返回三个tbody
  9. /**
  10. *官方解释:从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素。
  11. *closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。
  12. */
  13. });
  14. //parent()方法
  15. $("#mytd2").bind("click",function(){
  16. //alert($(this).html()); //$(this).html()是21 (this).attr("id")是mytd2
  17. alert($(this).parent().parent().parent().attr("id"));
  18. //.parent()是tr 第二个.parent是tbody。即使没有tbody标签,找到的也是tbody 第三个.parent()是table
  19. console.info($("tr").parent());//返回三个dbody:dbody1,dbody2-1,dbody2-2.同理,如果改成td,则返回好多tr
  20. console.info($("table").parent());//返回两个div:div1,div2。
  21. console.info($("table").parent("#divn"));//div1
  22. //document.write("第一个parent的id:" + $(this).parent().attr("id") + "。 第二个parent的id是:"+$(this).parent().parent().attr("id") + "。 第三个parent的id是:"+$(this).parent().parent().parent().attr("id"));
  23. /**parent官方解释:取得一个包含着所有匹配元素的唯一父元素的元素集合。
  24. *
  25. */
  26. });
  27. //parent("选择器") parents("选择器")
  28. $("#mytd3").bind("click",function(){
  29. $("p").parent("#div1").css("background", "yellow");//这里换成了p标签。不知道为什么用this找不到元素
  30. //原因:$(this).parent() 选择的为td3,在td3里面继续找div1自然找不到
  31. //alert($(this).parent("#div").attr("id"));//undefined
  32. alert($(this).parents("div")[0].attributes.id.value);//div1 注意一个parent parents
  33. alert($(this).parents("div")[1].attributes.id.value);//div0
  34. console.info($(this).parents("div"));//div1 div0 topdiv 向上找所有的div.可以一层一层向上找,返回所有符合条件的
  35. /** parents官方解释:
  36. * 取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。
  37. * 语文不好,看着真心弄不懂~~~ 泪奔,见下面解释.
  38. */
  39. });
  40. /************ 查找子元素 *************/
  41. //查找table2的td元素 find()
  42. $("#sectd1").bind("click",function(){
  43. alert($("#table2").find("td").length);//和$("#table2 td")效果一样
  44. /* $("#table2").find("td").each(function(index,element){
  45. alert($(element).text());
  46. }); */
  47. //alert($("tr").find("td").length); //7
  48. console.info($("#table2 td"));
  49. console.info($("tr").find("td"));//返回所有匹配的td
  50. /**官方解释:
  51. * 搜索所有与指定表达式匹配的元素。
  52. */
  53. });
  54. //children()
  55. $("#sectd2").bind("click",function(){
  56. alert($("#table2").children().children().children("td[id='sectd2']").html());
  57. //children() 是 tbody children()是 tr children("td[id='sectd2']")是td
  58. console.info($("div[name='mydiv']").children());//p table1 p table2.返回name为mydiv的所有 子元素
  59. /**官方解释:
  60. *取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
  61. */
  62. });
  63. // js的 children[]
  64. $("#sectd3").bind("click",function(){
  65. var table = document.getElementById("table2");
  66. alert(table.children[0].children[2].children[0].innerHTML);
  67. //children[0] 是 tbody children[2]是 第三行的tr children[0]是td
  68. console.info(table.children);//两个tbody2-1 tbody2-2
  69. console.info(table.children[0].children);//三个tr
  70. });



总结:

closest()
一层一层向上找,返回最先匹配上的元素。
$(this).closest("td")
$("td").closest("tbody")
因为td是多个元素,所有最先匹配上的tbody也是多个

parent()返回唯一父元素(即:向上只找一层)。如果选择器选择多个对象,则返回父元素数组。需要在数组里面继续选择,则使用parent("#id"),parent(".className")
什么是唯一父元素:td的父亲是tr,tr的父亲是tbody,tbody的父元素是table...
eg:
$("tr").parent() 一个或者多个tbody
$("table").parent("#div1");//div1。

parents()
一层一层向上找,返回所有匹配上的元素。

find()
$("#table2").find("td")和$("#table2 td")效果一样,这一句话应该足够了。

children()和parent()反之。
每一个元素的所有子元素的元素集合。
$("div[name='mydiv']").children()
p table1 p table2

children属性和jquery的children()类似,返回紧挨的下一级并列的子元素

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

对象都是this的话,可能更容易理解:

closest(“”) 一层一层向上,找到一个匹配就返回

parent()  紧挨自己的上一个元素

parents() 一层一层向上,找到所有的

find()

$("#table2").find("td")   eg:$("#table2 td")

children() 紧挨自己的下一个元素


jquery 查找元素的更多相关文章

  1. jQuery 查找元素1

    jQuery 查找元素1 1. id // 通过id查找 $('#id') 2. class <div class='c1'></div> // 通过class查找 $('.c ...

  2. jQuery 查找元素2

    jQuery 查找元素2 :first <ul> <li>list item 1</li> <li>list item 2</li> < ...

  3. jquery查找元素

    一:查找元素 * 所有元素 element 该名称的所有元素(p,input) #id 拥有指定id属性的元素 .class 拥有所有指定class属性的元素 selector1,selector2 ...

  4. jquery 查找元素,id,class

    查找元素下的class 带有.pageactive的a标签 $('a.pageactive') 标签a和..pageactive不要有空格,有空格找不到 ======================= ...

  5. <<< Jquery查找元素、选择器使用方法总结

    $("#myDiv"); //根据给定的ID匹配一个元素,用于搜索id 属性中给定的值,id属性必须是唯一的 $("div"); //根据给定的元素名匹配所有元 ...

  6. jquery 查找元素,并判断隐藏或显示

    html <div class="panel-heading"> <h4 class="panel-title"> <a data ...

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

    使用js或者jquery查找父元素.子元素经常遇到.可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多 这里jquery向上查找父元素 用到的方法:closest() parents( ...

  8. Jquery下控制backgroundPosition位置的问题/jquery查找data id相等的元素

    1:想通过控制backgroundPosition 来实现动态效果: $(this).animate({"background-positionY":-13},1); //但是火狐 ...

  9. jquery查找frameset框架内iframe的元素

    老系统还幸存有过时的frameset框架,维护升级工作需要对其内部的iframe中的元素进行相关操作.使用jquery查找子iframe页面内的元素时,总找不到目标元素.后来发现少了contents ...

随机推荐

  1. mongodb聚合管道用法

    基本用法 db.collection.aggregate( [ { <stage> }, ... ] ) stage如下 名称 描述 $addFields 将新的字段添加到文档中,输出的文 ...

  2. HTML中的attribute和property

    一.概述 attribute和property是常常被弄混的两个概念. 简单来说,property则是JS代码里访问的: document.getElementByTagName('my-elemen ...

  3. sql server 批量导出存储过程

    sys.syscomments:包含数据库中每个视图.规则.默认值.触发器.CHECK 约束.DEFAULT 约束和存储过程的项.text 列包含原始的 SQL 定义语句.(简单点说,这个系统表存储了 ...

  4. C#中Split用法~字符串分隔

    1.用字符串分隔: using System.Text.RegularExpressions;string str="aaajsbbbjsccc";string[] sArray= ...

  5. Linux内核通知链模块

    通知链描写叙述 大多数内核子系统都是相互独立的,因此某个子系统可能对其他子系统产生的事件感兴趣. 为了满足这个需求,也即是让某个子系统在发生某个事件时通知其他的子系统.Linux内核提供了通知链的机制 ...

  6. Edit Control响应全选(Ctrl+A)

    MFC中的Edit控件用于输入数据,当输入的数据为大段数字的时候,全选功能就显得非常重要了,可偏偏在MFC中Edit控件就不 支持全选.Ctrl+A不行,双击也不行. Ctrl+C和Ctrl+V都是默 ...

  7. ubuntu server激活即时通讯IM服务 Instant Messaging is not activated on this server

    转自:http://shine-it.net/index.php/topic,16469.msg28364.html ubuntu server 下 odoo激活及时通讯功能im OpenERP IM ...

  8. 微信小程序列表加载更多

    概述 基于小程序开发的列表加载更多例子. 详细 代码下载:http://www.demodashi.com/demo/13632.html 一.前言 基于小程序开发的列表加载更多例子. 二.运行效果 ...

  9. CI:关于计算智能

    该书认为,当前的计算智能起源于人工智能和生物智能.人工智能的起源大约可以追溯到50年以前,而计算智能这个术语则仅仅出现于10年以前.计算智能由几个部分组成,即人工智能.模糊集和模糊逻辑.神经网络(有时 ...

  10. 【LeetCode】100. Same Tree (2 solutions)

    Same Tree Given two binary trees, write a function to check if they are equal or not. Two binary tre ...