JQuery,如何清除,除了点击的元素以外,其他所有元素

JQuery,如何清除,除了点击的元素以外,其他所有元素,第1张

可以使用Jquery中的siblings()和remove()方法实现。实现原理主要是使用siblings获取被点击元素之外的同级元素,然后使用remove()删除。完整的代码如下:

运行的效果如下:

例如当点击DIV内容为2的框时,其他的DIV被清除,内容为2的框移到最顶,点击后的效果图如下:

扩展资料:

如果想对移到最顶的框进行一定的突出显示处理,比如给个背景颜色,字体加大,可以利用css()方法,代码如下:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>JQuery例子</title>

<link href="__CSS__/basecss" rel="stylesheet">

<script src="__JS__/jqueryminjs"></script>

</head>

<body>

<script>

$(function(){

$("class1")click(function() {

$(this)siblings()remove();

$(this)css({"background-color":"yellow","font-size":"50px"});

});

});

</script>

<div class="main">

<div class="class1">1</div>

<div class="class1">2</div>

<div class="class1">3</div>

<div class="class1">4</div>

</div>

<style type="text/css">

main{width:640px;height:500px;margin:0 auto;border:1px solid red;}

class1{width:90%;height:100px;margin:0 auto;border:1px solid red;margin-top:10px;font-size:40px;}

</style>

</body>

</html>

运行的效果如下:

jquery中css() 方法可以设置或返回被选元素的一个或多个样式属性,下面的例子将返回首个匹配元素的 background-color 值:

$("p")css("background-color");

父级的同级元素的子标签的css样式如下:

//eq(0)表示选择匹配到多个元素中的第一个

$("target")parent()siblings()eq(0)children()eq(0)

可根据以下步骤 *** 作:

1、在html里嵌套几个div盒子,然后给盒子一些不同颜色的样式。

2、给第一个盒子加上hover,然后在第一个hover的基础上用~拼接下一个同级元素,这样当鼠标移入第一个盒子时我们就能实现。

以上就是关于JQuery,如何清除,除了点击的元素以外,其他所有元素全部的内容,包括:JQuery,如何清除,除了点击的元素以外,其他所有元素、jquery 获取 父级的同级下面的子标签的css样式、jquery两个元素同时变化等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9439548.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-28
下一篇 2023-04-28

发表评论

登录后才能评论

评论列表(0条)

保存