[jquery]高级篇--获取div子元素

时间：2024-03-03 14:41:12

参考:　　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元素外，还设置了其他类型的子元素。

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

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

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

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

 

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

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

 

相关文章