码迷,mamicode.com
首页 > Web开发 > 详细

jquery选择器 之 获取父级元素、同级元素、子元素

时间:2016-01-02 14:13:57      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:

一、获取父级元素 1、 parent([expr]): 获取指定元素的所有父级元素 href_fiv $(document).ready(function(){ $("a").parent().addClass(‘a_par‘); }); firebug查看jquery parent效果 二、获取同级元素: 1、next([expr]): 获取指定元素的下一个同级元素(注意是下一个同级元素哦)
  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
$(‘li.third-item‘).next().css(‘background-color‘, ‘red‘); 这个例子的结果是,只有list item 4背景色变为红色 2、nextAll([expr]): 获取指定元素后边的所有同级元素 Hello Hello Again
And Again
var p_nex = $("p").nextAll(); p_nex.addClass(‘p_next_all‘); firebug_jq_nextall 注意看最后一个”Hello

Hello Again

And Again
var p_nex = $("p").nextAll().andSelf(); p_nex.addClass(‘p_next_all‘); 注意看第一个“

”标签啊,这句话的意思是选择p标签后面的所有同级标签,以及自己。。。 firebug_jq_andself 以下这两个不举具体的例子了,实际上就是next()和nextAll()的相反喽 4、prev():获取指定元素的上一个同级元素(是上一个哦)。 5、prevAll():获取指定元素的前边所有的同级元素。 三、获取子元素 1、查找子元素方式1:> 例如:var aNods = $("ul > a");查找ul下的所有a标签 相当于children(),>后无参数相当于查找下一级所有子元素,有参数,进行筛选 2、查找子元素方式2:children() children()参数可选,相当于在子元素中进行筛选,children()只能获得下一级子元素,子元素的下一级子元素获取不到; 3、查找子元素方式3:find() find(selector)参数必须有,会在当前元素的所有子元素及子元素的子元素中查找匹配的元素 这里再简单介绍以下children()和find()的异同: 1> children及find方法都用是用来获得element的子elements的,两者都不会返回 text node,就像大多数的jQuery方法一样。 2> children方法获得的仅仅是元素一下级的子元素,即:immediate children。 3> find方法获得所有下级元素,即:descendants of these elements in the DOM tree 4> children方法的参数selector 是可选的(optionally),用来过滤子元素, 但find方法的参数selector方法是必选的。 5> find方法事实上可以通过使用 jQuery( selector, context )来实现。即$(‘li.item-ii‘).find(‘li‘)等同于$(‘li‘, ‘li.item-ii‘). 例:

  • I
  • II
    • A
    • B
      • 1
      • 2
      • 3
    • C
  • III
使用:$(‘ul.level-2‘).children().css(‘border‘, ‘1px solid green‘); 使用 $(‘ul.level-2‘).find(‘li‘).css(‘border‘, ‘1px solid green‘);

jquery选择器 之 获取父级元素、同级元素、子元素

标签:

原文地址:http://www.cnblogs.com/wmxbolg/p/5094620.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!