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. 数学图形(2.19) 利萨茹3D曲线

    在前面的章节数学图形(1.13) 利萨茹曲线中,写的是二维的利萨茹曲线,这一节,将其变为3D图形. #http://www.mathcurve.com/courbes3d/lissajous3d/li ...

  2. Orchard运用 - 特定主题添加独立代码文件

    今天继续跟大家分享捣鼓Orchard的一些心得.其实有时一些问题或者Bugs还是蛮好解决的,主要看你采取哪种方式方法.比如有时我们为了扩展某些特性或功能,你可以搭建一个全新的模块来完成,如果临时的或简 ...

  3. C#装饰者模式实例代码

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 装饰者 ...

  4. 一招搞定多Offer选择

    12月9号在论坛看到一位毕业生问了一个问题: 如今两个offer 一个在南京,搞.net ,公司是国电南自.税前一年加起来几乎相同7.2万.一个是在上海.搞java,公司名叫鑫合汇(不知道各位有没实用 ...

  5. (剑指Offer)面试题41:和为s的连续正数序列

    题目: 输入一个正数s,打印出所有和为s的连续正数序列(至少含有两个数).例如输入15,由于1+2+3+4+5=4+5+6=7+8=15,所以结果打印出3个连续序列1-5,,4-6和7-8. 思路: ...

  6. 使用Bundle进行VIM插件的管理

    http://www.oschina.net/p/vundle git clone https://github.com/gmarik/vundle.git ~/.vim/bundle/vundle ...

  7. tftp的安装、设置以及put、get传输实验

    tftp安装流程如下: (1)首先挂载Linux系统镜像文件到/media/cdrom/的(cdrom为在/media/下自己创建的目录) (2)进入/media/cdrom/Server/可以找到t ...

  8. setup factory 打包VB 工程

    setup factory 使用起来很简单你可以如下:1.你把你刚编译出来的exe和相关的资源文件复制到某一空目录下.把exe文件添加到setup factory里之后,在列表里右键,属性里面可以设置 ...

  9. 转 SqlServer中如何实现自动备份数据!

    第1种方法: 企业管理器  --管理  --右键数据库维护计划  --新建维护计划  --<下一步>  --选择你要备份的数据库  --<下一步>直到"指定数据库备份 ...

  10. 15-spring学习-集合表达式

    spring认为,数组和List集合是等价的. 要想操作list集合,利用“{内容,内容...}”的形式就可以完成了(类似数组). package com.Spring.ELDemo; import ...