[jquery]高级篇--获取div子元素
参考: 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子元素的更多相关文章
- jquery选择器 之 获取父级元素、同级元素、子元素
jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...
- jquery选择器 之 获取父级元素、同级元素、子元素 - yes的日志 - 网易博客
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- jquery选择器 之 获取父级元素,子元素,同级元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href ...
- 给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 ...
- jquery选择器 之 获取父级元素、同级元素、子元素(转)
一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div"><a id="href_fir& ...
- jquery选择器之获取父级元素、同级元素、子元素
一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 二.获取同级元素: 1.next([expr]): 获取指定元素的下一个同级元素 2.nextAll([expr]) ...
- jquery选择器如何获取父级元素、同级元素、子元素
一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...
- JQuery this和$(this)的区别及获取$(this)子元素对象的方法
1.JQuery this和$(this)的区别 相信很多刚接触JQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢? 首先来看看JQuery中的 $() 这 ...
- div设置overflow-scroll滚动之后,jq获取其子元素的offset.top出现问题。
先上个图: 布局很简单,左右超过屏幕的部分自行滚动. 1. html <div class="ce-container"> <div class="ce ...
随机推荐
- Keil : Contents missmatch at:08000E84H Verify Failed!
Keil 下载时出以下错误: Device: STM32F103VB VTarget = 3.300V State of Pins: TCK: 0, TDI: 0, TDO: 1, TMS: 0, T ...
- java实现生产者消费者问题
引言 生产者和消费者问题是线程模型中的经典问题:生产者和消费者在同一时间段内共用同一个存储空间,如下图所示,生产者向空间里存放数据,而消费者取用数据,如果不加以协调可能会出现以下情况: 生产者消费者图 ...
- iOS 根据文件名获取到文件路径
根据文件名来获取文件路径(Document目录下) //根据文件名来获取文件路径 - (NSString *)dataFilePath:(NSString *)sender { NSArray *pa ...
- Codeforces Round #325 (Div. 2) B. Laurenty and Shop 前缀和
B. Laurenty and Shop Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/586/p ...
- Sublime Text 3 史上最性感的编辑器
下载 / 安装 windows / MAC OS 官网下载,双击安装,这个都会吧- linux linux下安装,一种办法是从官网下载 tar.bz ,手动安装. 这里介绍用 apt-get 自己主动 ...
- yii 数据库迁移
在我们开发程序的过程中,数据库的结构也是不断调整的.我们的开发中要保证代码和数据库库的同步.因为我们的应用离不开数据库.例如: 在开发过程中,我们经常需要增加一个新的表,或者我们后期投入运营的产品,可 ...
- perl指针引用
http://bbs.chinaunix.net/forum-viewthread-tid-570031.html
- Array.prototype.slice.call(arguments) 类数组转成真正的数组
Array.prototype.slice.call(arguments) 我们知道,Array.prototype.slice.call(arguments)能将具有length属性的对象转成数 ...
- highcharts js报表工具(报表插件)
highcharts报表工具(报表插件.图表工具) highcharts效果在线演示(可查看源代码): http://www.hcharts.cn/demo/index.php?p=56 Highc ...
- Lipo Error!! can't open input file
参考文章:http://stackoverflow.com/questions/17348912/lipo-error-cant-open-input-file I got it to Work, i ...