Jquery父子选择器基础用法
2016-12-04 22:54
417 查看
Jquery父子选择器基础用法
Javascript操作代码:
效果:
<input type="button" value="div父元素下的第2个子元素红色" id="b1"/><br> <input type="button" value="div父元素下的第一个子元素紫色" id="b2"/><br> <input type="button" value="div父元素下的最后一个子元素黄色" id="b3"/><br> <input type="button" value="div父元素下的仅仅只有一个子元素,那么选中这个子元素橙色" id="b4"/><br> <input type="button" value="div父元素下奇数红色偶数黄色" id="b5"/><br> <input type="button" value="div父元素下2n+1绿色" id="b4"/><br> <br><br> <div> <div id="one" class="mini" >XXXXXXXXX one</div> <div id="two" class="mini" >XXXXXXXXX two </div> <div id="three" class="mini" >XXXXXXXXX three</div> <div id="four" class="mini" >XXXXXXXXX four</div> </div> <div> <div id="one" class="mini" >XXXXXXXXX one</div> </div>
Javascript操作代码:
$("#b1").click(function(){ $("div:nth-child(2)").css("background","red"); }); $("#b2").click(function(){ $("div:first-child").css("background","purple"); }); $("#b3").click(function(){ $("div:last-child").css("background","yellow"); }); $("#b4").click(function(){ $("div:only-child").css("background","orange"); }); $("#b5").click(function(){ $("div:nth-child(even)").css("background","yellow"); $("div:nth-child(odd)").css("background","red"); }); $("#b6").click(function(){ $("div:nth-child(2n+1)").css("background","green"); });
效果:
相关文章推荐
- JQuery中基础过滤选择器用法实例分析
- JQuery基础之选择器的基本用法
- JQuery中基础过滤选择器用法实例分析
- JQuery基础选择器及过滤选择器的用法,今天刚学,写一下加深印象
- jQuery基础教程之+层次选择器
- jQuery基础教程之 基本选择器
- JQuery的基础知识和选择器
- JQuery学习笔记02-选择器把需要的东西揪出来(基础)
- (转)jquery基础教程七 选择器(selectors 的xpath语法应用)
- jQuery基础教程之强大的选择器(过滤选择器-属性过滤选择器)
- JQuery 用法 函数 选择器
- [jQuery教程]jquery基础教程七选择器(selectors的xpath语法应用)
- JQuery 基础:3.选择器
- jQuery选择器的灵活用法
- jQuery基础教程之强大的选择器(层次选择器)
- jquery 遍历数组each的用法,还有一个jquery的基础用法
- JQuery基础 -- 选择器
- [导入]Jquery从入门到精通:二、选择器 1、准备篇 1)基础的基础:DOM模型
- jquery选择器用法
- 关于jquery中的选择器的概念和各个选择器的用法及功能