当我们用jQuery选择器的时候,有时需要选择自身元素,这时一个很有用的函数会帮大忙,解决关键问题。
这个方法就是 jQuery 中的 andSelf() 方法。
下面举个简单的小例子~
这个例子网页打开一秒钟后改变自身和子元素的背景色~
<html>
<head>
<title>jQuery选择器选中自身元素-易云互联</title>
</head>
<div id="_self" style="
width: 200px;
height: 300px;
background-color: red;
margin: 0 auto;
/* display: block; */
position: relative;
/* float: left; */
overflow: hidden;
">
<div id="_son" style="
width: 100px;
height: 200px;
background-color: gray;
/* margin: 0 auto; */
/* display: block; */
/* vertical-align: middle; */
/* padding-top: 50px; */
position: relative;
/* float: left; */
margin: 0 auto;
margin-top: 50px;
line-height:200px;
font-family:微软雅黑;
">
这个是子元素
</div>
</div>
<script type="text/javascript" src="http://www.eyun.me/templets/eyun/js/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function(){
setTimeout(function(){
jQuery("#_self").find("#_son").css("background-color","yellow").end().andSelf().css("background-color","cyan");
},1000);
});
</script>
</body>
</html>
点击在线预览
在写这个小例子时,又注意到一个问题:当子元素在用margin-top css 属性时,父元素同时也会下落, margin-top造成父元素下沉
解决这个问题的方法就是在父元素中加入 overflow:hidden; 这个css 属性就可以解决