第3讲、Jquery层次选择器.pptx

B/S前端高级技术Jquery JQUERY层次选择器 本 讲 目 标 如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子 元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器. 层次选择器如下： 1 、ancestor descendant 用法: $(”form input”) ; 返回值 集合元素 说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent child”区分开. 2、parent child用法: $(”form input”) ; 返回值 集合元素 说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素 3、prev + next 用法: $(”label + input”) ; 返回值 集合元素 说明: 匹配所有紧接在 prev 元素后的 next 元素 4、prev ~ siblings 用法: $(”form ~ input”) ; 返回值 集合元素 说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配. 注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取 ance desc选择器 parent child选择器 prev + next选择器 prev ~ siblings选择器 获取所有div元素下第一代子元素span元素的语法是 改变 body 内所有 div 的背景色为 #0000FF 改变 body 内子 div 的背景色为 #FF0033 改变 id 为 one 的下一个 div 的背景色为 #0000FF 改变 id 为 two 的元素后面的所有兄弟div的元素的背景色为 # #0000FF 改变 id 为 two 的元素所有 div 兄弟元素的背景色为 #0000FF