jquert|jQuery子元素过滤选择器
Untitled Document - 锐客网
="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}div.hide {
display: none;
}
="text/javascript" src="https://www.it610.com/article/jquery-1.7.2.js">
="text/javascript">
$(document).ready(function(){
$("#btn1").click(function() {
//选取子元素, 需要在选择器前添加一个空格.
//选取每个class为one的div父元素下的第2个子元素
$(".one :nth-child(2)").css("background","#ffbbaa");
});
$("#btn2").click(function() {
//选取每个class为one的div父元素下的第一个子元素
$(".one :first-child").css("background","#ffbbaa");
});
$("#btn3").click(function() {
//选取每个class为one的div父元素下的最后一个子元素
$(".one :last-child").css("background","#ffbbaa");
});
$("#btn4").click(function() {
//如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素
$(".one :only-child").css("background","#ffbbaa");
});
});
id 为 one,class 为 one 的div
class为mini
id为two,class为one,title为test的div
class为mini,title为other
class为mini,title为test
class为mini
class为mini
class为mini
class为mini
class为mini
class为mini
class为mini,title为tesst
class为"hide"的div
包含input的type为"hidden"的div
正在执行动画的div元素.
推荐阅读
- 2018年11月19日|2018年11月19日 星期一 亲子日记第144篇
- 遇到一哭二闹三打滚的孩子,怎么办┃山伯教育
- 这辈子我们都不要再联系了
- 2019年12月24日
- Ⅴ爱阅读,亲子互动——打卡第178天
- 眼观耳听美食的日子
- 子龙老师语录
- 成交的种子咖啡冥想
- 2018年9月5日,星期三,天气晴
- 生活随笔|好天气下的意外之喜