jQuery怎么选择自身元素andSelf()方法使用

最新推荐文章于 2022-11-15 09:31:07 发布

李古拉雷

最新推荐文章于 2022-11-15 09:31:07 发布

阅读量3k

点赞数

分类专栏： jQuery css/html

本文链接：https://blog.csdn.net/honglei_zh/article/details/52144453

版权

jQuery 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

css/html

5 篇文章 0 订阅

订阅专栏

当我们用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 属性就可以解决