jquery 查找元素
/************ 查找父元素 *************/
//closest()方法
$("#mytd1").bind("click",function(){
alert($(this).closest("table").attr("id")); //table1
alert($(this).closest("tr").attr("id"));//mytr1
console.info($(this).closest());//本身
console.info($(this).closest("td"));//mytd1 返回元素本身。
console.info($("td").closest("tbody"));//返回三个tbody
/**
*官方解释:从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素。
*closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。
*/
});
//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
console.info($("tr").parent());//返回三个dbody:dbody1,dbody2-1,dbody2-2.同理,如果改成td,则返回好多tr
console.info($("table").parent());//返回两个div:div1,div2。
console.info($("table").parent("#divn"));//div1
//document.write("第一个parent的id:" + $(this).parent().attr("id") + "。 第二个parent的id是:"+$(this).parent().parent().attr("id") + "。 第三个parent的id是:"+$(this).parent().parent().parent().attr("id"));
/**parent官方解释:取得一个包含着所有匹配元素的唯一父元素的元素集合。
*
*/
});
//parent("选择器") parents("选择器")
$("#mytd3").bind("click",function(){
$("p").parent("#div1").css("background", "yellow");//这里换成了p标签。不知道为什么用this找不到元素
//原因:$(this).parent() 选择的为td3,在td3里面继续找div1自然找不到
//alert($(this).parent("#div").attr("id"));//undefined
alert($(this).parents("div")[0].attributes.id.value);//div1 注意一个parent parents
alert($(this).parents("div")[1].attributes.id.value);//div0
console.info($(this).parents("div"));//div1 div0 topdiv 向上找所有的div.可以一层一层向上找,返回所有符合条件的
/** parents官方解释:
* 取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。
* 语文不好,看着真心弄不懂~~~ 泪奔,见下面解释.
*/
});
/************ 查找子元素 *************/
//查找table2的td元素 find()
$("#sectd1").bind("click",function(){
alert($("#table2").find("td").length);//和$("#table2 td")效果一样
/* $("#table2").find("td").each(function(index,element){
alert($(element).text());
}); */
//alert($("tr").find("td").length); //7
console.info($("#table2 td"));
console.info($("tr").find("td"));//返回所有匹配的td
/**官方解释:
* 搜索所有与指定表达式匹配的元素。
*/
});
//children()
$("#sectd2").bind("click",function(){
alert($("#table2").children().children().children("td[id='sectd2']").html());
//children() 是 tbody children()是 tr children("td[id='sectd2']")是td
console.info($("div[name='mydiv']").children());//p table1 p table2.返回name为mydiv的所有 子元素
/**官方解释:
*取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
*/
});
// 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
console.info(table.children);//两个tbody2-1 tbody2-2
console.info(table.children[0].children);//三个tr
});
总结:
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() 紧挨自己的下一个元素
posted on 2017-03-22 14:42 signheart 阅读(6500) 评论(0) 编辑 收藏 举报
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥