参考:  http://zhidao.baidu.com/link?url=IfeQQBn1xMLqWvwdkKbQYJ8mC6ciGi_8M1NYkm6iQ-kXBMX2f2ylN-ckzFLiynnE0nz4hBC6e5CrwaOfwLfata

参考:  http://blog.sina.com.cn/s/blog_7718755501019kg5.html

实现方法:使用遍历函数children(),关键代码为 $(this).children("li"),表示获取当前元素下所有标签为<li>的子元素。

下面实例演示:点击div标签后,何用$(this)选择它下面的<li>子元素,为了显示效果,将其设置为红色。

1、新建HTML文件,输入如下的HTML结构,为了说明问题,在div标签下除了li元素外,还设置了其他类型的子元素。

 <div id="test">
<span>我是span标签</span><br>
<li>我是li标签</li>
<a href="#">我是超链接a标签</a>
</div>

2、在上面新建文件的开头输入如下jquery代码,表示在单击div标签区域后,执行一个函数,具体动作为获取当前div下的li标签元素,然后使用css()函数设置它的字体颜色为红色。

 <script>
$(function(){
$("#test").click(function() { // 单击div元素
$(this).children('li').css('color','red'); // 使用children('li')获取div下的li元素,然后设置颜色为red即红色
});
});
</script>

3、保存文件,使用浏览器打开,演示效果如下图所示,从结果可知,只有div下的li子元素被选中。

------------------------------------------------------------------------------------------------------------------

 <div class=\"father\"><div class=\"son\"></div><div class=\"otherson\"></div></div>
<div class=\"father\"><div class=\"son\"></div><div class=\"otherson\"></div></div>
 $(function(){
  $("father").mouseover(function(){
    $(this).find('.son').removeClass("disn");
  });
});

[jquery]高级篇--获取div子元素的更多相关文章

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

    jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...

  2. jquery选择器 之 获取父级元素、同级元素、子元素 - yes的日志 - 网易博客

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  3. jquery选择器 之 获取父级元素,子元素,同级元素

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href ...

  4. 给div设置background-color: rgba(0, 0, 0, 0.2)属性,并加了css3动画--opacity动画淡出动画,之后div子元素的字体会抖一下

    问题:给div设置background-color: rgba(0, 0, 0, 0.2)属性,并加了css3动画--opacity动画淡出动画,之后div子元素的字体会抖一下: 解决:animati ...

  5. jquery选择器 之 获取父级元素、同级元素、子元素(转)

    一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div"><a id="href_fir& ...

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

    一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 二.获取同级元素: 1.next([expr]): 获取指定元素的下一个同级元素 2.nextAll([expr]) ...

  7. jquery选择器如何获取父级元素、同级元素、子元素

    一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...

  8. JQuery this和$(this)的区别及获取$(this)子元素对象的方法

    1.JQuery this和$(this)的区别 相信很多刚接触JQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢? 首先来看看JQuery中的  $()  这 ...

  9. div设置overflow-scroll滚动之后,jq获取其子元素的offset.top出现问题。

    先上个图: 布局很简单,左右超过屏幕的部分自行滚动. 1. html <div class="ce-container"> <div class="ce ...

随机推荐

  1. 【Stage3D学习笔记续】山寨Starling(三):Starling核心渲染流程

    这篇文章我们剔除Starling的Touch事件体系和动画体系,专门来看看Starling中的渲染流程实现,以及其搭建的显示列表结构. 由于Starling是模仿Flash的原生显示列表,所以我们可以 ...

  2. PowerDesigner 面向对象模型(OOM)

    PowerDesigner 面向对象模型(OOM)说明 nulljavasystemstringpowerbuilderclass   目录(?)[+]   一.     OOM 简介 Object- ...

  3. iOS动画详解(二)

    UIImage常用的绘图操作   一个UIImage对象提供了向当前上下文绘制自身的方法.我们现在已经知道如何获取一个图片类型的上下文并将它转变成当前上下文.   平移操作:下面的代码展示了如何将UI ...

  4. Mac窗口管理管理软件SizeUp

    一.SizeUp 是一款 Mac窗口管理管理软件.借助SizeUp,可以快速变化窗口大小(最大化.最小化),可以快速切换窗口的不同位置. 尤其在双显示器,更是扮演者方便.高效.好用的角色,提供了快速切 ...

  5. SpringMVC 参考文档

    原文地址:http://blog.csdn.net/lufeng20/article/details/7598801

  6. 找回丢失的SQL Server性能计数器

    There was one time when I was delivering a Service using a tool that gathers performance data throug ...

  7. jQuery遍历json

    使用 each var anObject = {one:1,two:2,three:3}; $.each(anObject,function(name,value) { alert(name); al ...

  8. Codeforces Codeforces Round #319 (Div. 2) C. Vasya and Petya's Game 数学

    C. Vasya and Petya's Game Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/ ...

  9. [React Fundamentals] Component Lifecycle - Mounting Usage

    The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson ...

  10. 设计模式 - 命令模式(command pattern) 多命令 具体解释

    命令模式(command pattern) 多命令 具体解释 本文地址: http://blog.csdn.net/caroline_wendy 參考命令模式: http://blog.csdn.ne ...