《JavaScript与jQuery网页前端开发与设计-第2版》课件 CH10 jQuery HTML DOM； CH11 jQuery遍历.ppt

11.3.3jQueryprev()、prevAll()和prevUtil()1. jQueryprev()jQueryprev()方法可以查找指定元素的前一个同胞元素，其语法结构如下：其中selector参数为可选内容，可以是任意jQuery选择器，用于进一步筛选需要匹配的同胞元素。.prev([selector])11.1HTML家族树简介同一个HTML页面上的所有元素按照层次关系可以形成树状结构，这种结构称为家族树（FamilyTree）。最常见的遍历方式统称为树状遍历（TreeTraversal）。11.1HTML家族树简介根据移动的层次方向可以分为向下移动（后代遍历）、水平移动（同胞遍历）和向上移动（祖先遍历）。其中后代遍历指的是元素的子、孙、曾孙元素等；同胞遍历指的是具有同一个父元素的其他元素；祖先遍历指的是元素的父、祖父、曾祖父元素等。11.1HTML家族树简介例如以下这段HTML代码：divul liitem01/li liitem02/li /ul p这是一个span段落元素/span /p/div11.1HTML家族树简介元素关系解释如下：div元素：是无序列表元素ul和段落元素p的父元素，同时也是其他所有元素的祖先元素。ul元素：是两个列表选项元素li的父元素，也是div的子元素。与段落元素p互为同胞元素。p元素：是span元素的父元素，也是div的子元素。与无序列表元素ul互为同胞元素。li元素：是ul元素的子元素，同时也是div元素的后代。两个li元素互为同胞元素。span元素：是p元素的子元素，同时也是div元素的后代。该元素没有同胞元素。11.2jQuery后代遍历jQuery后代遍历指的是以指定元素为出发点，遍历该元素内部包含的子、孙、曾孙等后代元素，直到全部查找完毕。常用的方法有：children()：查找元素的直接子元素。find()：查找元素的全部后代，直到查找到最后一层元素。11.2jQuery后代遍历11.2.1jQuerychildren() 11.2.2jQueryfind()11.2.1jQuerychildren()jQuerychildren()方法只能查找指定元素的第一层子元素，其语法结构如下：其中selector参数为可选内容，可以是任意jQuery选择器，用于进一步筛选需要匹配的子元素。.children([selector])11.2.1jQuerychildren()如果不填写任何参数，则表示查找所有的子元素。例如：上述代码表示查找HTML页面上所有段落元素p的子元素。$(p).children()11.2.1jQuerychildren()如果加上参数，可以进一步匹配子元素。例如：上述代码表示在HTML页面上所有段落元素p中查找class=style01的子元素。$(p).children(.style01)11.2.1jQuerychildren()【例11-1】jQuery后代遍历children()方法的应用11.2.2jQueryfind()jQueryfind()方法可用于查找指定元素的所有后代元素，其语法结构如下：其中selector参数可以是任意jQuery选择器，用于进一步筛选需要匹配的子元素。.find(selector)11.2.2jQueryfind()例如：上述代码表示在段落元素p中找到所有的span元素，并为其设置1像素宽的红色实线边框。$(p).find(span).css(border,1pxsolidred);11.2.2jQueryfind()selector参数位置也可以填入元素对象。例如上述代码可以改写为以下内容：修改后的代码运行效果完全相同。varspans=$(span);$(p).find(spans).css(border,1pxsolidred);11.2.2jQueryfind()【例11-2】jQuery后代遍历find()方法的应用11.3jQuery同胞遍历jQuery同胞遍历指的是以指定元素为出发点，遍历与该元素具有相同父元素的同胞元素，直到全部查找完毕。11.3jQuery同胞遍历常用的方法有：siblings()：查找指定元素的所有同胞元素。next()：查找指定元素的下一个同胞元素。nextAll()：查找指定元素后面的所有同胞元素。nextUntil()：查找指定元素后面指定范围内的所有同胞元素。prev()