jQuery系统的学习（四）

最新推荐文章于 2022-10-11 16:19:30 发布
最新推荐文章于 2022-10-11 16:19:30 发布
阅读量218 收藏 1
点赞数
分类专栏： front-end-jqurey
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38465623/article/details/80390606
版权
本文介绍使用jQuery进行元素的删除与过滤操作，并详细讲解如何利用jQuery来获取及设置HTML元素的CSS类，包括addClass、removeClass、toggleClass及css方法的具体应用。
摘要由CSDN通过智能技术生成
昨天学习了增加元素，今天继续加油

jQuery - 删除元素

通过jquery，可以很容易的删除已有的html元素。

删除元素或者内容

方法如下：

  1. remove（）删除被选元素（及其子元素）。
  2. empty（）从被选元素中删除子元素。

remove（）方法

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">

		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
		</script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("#div1").remove();
				});
			});
		</script>
	</head>

	<body>
		<div id="div1">
			你好棒，学完前端学后台，做个全栈，真牛逼。
		</div>
		<button>移除remove</button>
	</body>

</html>

empty（）方法

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">

		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
		</script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
//					$("#div1").remove();
$("#div1").empty();
				});
			});
		</script>
	</head>

	<body>
		<div id="div1" style="height: 200px;width: 200px;border: dotted;background-color: yellow;">
			你好棒，学完前端学后台，做个全栈，真牛逼。
		</div>
		<button>移除remove</button>
	</body>

</html>

过滤被删除的元素

remove（）方法可接受一个参数，允许对被删除元素进行过滤。

该参数可以是任何jquery选择器的语法。

下面是删除class=“cla2”的所有<p>元素。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("p").remove(".cla2")
				});
			});
		</script>
	</head>

	<body>
		<p>我是中国人</p>
		<p class="cla2">我是中国人</p>
		<p class="cla2">我是中国人</p>
		<button>移除所有class="cla2"的p元素</button>
	</body>

</html>


jquery获取并设置css类

拥有若干进行css操作的方法。

  1. addclass（）向被选元素添加一个或多个类。
  2. removeClass（）从被选元素删除一个或多个类。
  3. toggleClass（）对被选元素进行添加/删除类的切换操作。
  4. css（）设置或返回样式属性。
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("h1,h2,p").addClass("blue");
					$("div").addClass("important");
				});
			});
		</script>
		<style>
			.important {
				font-weight: bold;
				font-size: xx-large;
			}
			
			.blue {
				color: blue;
			}
		</style>
	</head>

	<body>
		<button>addClass方法</button>
		<h1>你好棒</h1>
		<h2>你真的好棒</h2>
		<p>继续加油</p>
		<div>对自己要一直有信心</div>
	</body>

</html>






addClass（）方法中规定多个类。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					//					$("h1,h2,p").addClass("blue");
					//					$("div").addClass("important");
					$("body div:first").addClass("important blue");
				});
			});
		</script>
		<style>
			.important {
				font-weight: bold;
				font-size: xx-large;
			}
			
			.blue {
				color: blue;
			}
		</style>
	</head>

	<body>
		<button>addClass方法</button>
		<!--<h1>你好棒</h1>
		<h2>你真的好棒</h2>
		<p>继续加油</p>-->
		<div>对我自己要一直有信心</div>
		<div>对你自己要一直有信心</div>
	</body>

</html>

removeClass() 方法

在不同的元素中删除指定的 class 属性： 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">

		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
		</script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("h1,h2,p").removeClass("blue");
				});
			});
		</script>
		<style type="text/css">
			.important {
				font-weight: bold;
				font-size: xx-large;
			}
			
			.blue {
				color: blue;
			}
		</style>
	</head>

	<body>
		<h1 class="blue">你真棒</h1>
		<h2 class="blue">你好棒</h2>
		<p class="blue">真牛逼</p>
		<p>加油</p>
		<button>从元素中移除class</button>
	</body>

</html>

toggleClass() 方法

该方法对被选元素进行添加/删除类的切换操作 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">

        <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
            $(document).ready(function() {
                $("button").click(function() {
                    $("h1,h2,p").toggleClass("blue");
                });
            });
        </script>
        <style type="text/css">
            .blue {
                color: blue;
            }
        </style>
    </head>

    <body>
        <h1 class="blue">你真棒</h1>
        <h2 class="blue">你好棒</h2>
        <p class="blue">真牛逼</p>
        <p>加油</p>
        <button>从元素中移除class</button>
    </body>

</html>

jQuery css() 方法

css（）方法设置或返回被选元素的一个或多个样式属性。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $("button").click(function() {
                    alert("背景颜色 = " + $("#p1").css("background-color"));
                    alert("背景颜色 = " + $("#p2").css("background-color"));
                    alert("背景颜色 = " + $("#p3").css("background-color"));
                });
            });
        </script>
    </head>

    <body>
        <h2>我是中国人</h2>
        <p id="p1" style="background-color:#ff0000">ni</p>
        <p id="p2" style="background-color:#00ff00">wo</p>
        <p id="p3" style="background-color:#0000ff">ta</p>
        <button>返回背景色属性</button>
    </body>

</html>

设置css属性

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("#p1").css("background-color", "cyan");
					$("#p2").css("background-color", "red");
					$("#p3").css("background-color", "black");
				});
			});
		</script>
	</head>

	<body>
		<h2>我是中国人</h2>
		<p id="p1" style="background-color:#ff0000">ni</p>
		<p id="p2" style="background-color:#00ff00">wo</p>
		<p id="p3" style="background-color:#0000ff">ta</p>
		<button>设置背景色属性</button>
	</body>

</html>

设置多个css属性

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
//					$("#p1").css("background-color", "cyan");
//					$("#p2").css("background-color", "red");
//					$("#p3").css("background-color", "black");
					$("#p1").css({"background-color":"cyan","font-size":"20px","color":"white"});
					$("#p2").css({"background-color":"red","font-size":"20px","color":"white"});
					$("#p3").css({"background-color":"black","font-size":"20px","color":"white"});
				});
			});
		</script>
	</head>

	<body>
		<h2>我是中国人</h2>
		<p id="p1" style="background-color:#ff0000">ni</p>
		<p id="p2" style="background-color:#00ff00">wo</p>
		<p id="p3" style="background-color:#0000ff">ta</p>
		<button>设置背景色属性</button>
	</body>

</html>



飞鸿酱
关注
专栏目录
系统学习 jQuery （四） DOM 操作
zaqwsx20的专栏
07-17 367
通过 jQuery 选择器和筛选方法得到包含特定 DOM 元素的 jQuery 对象之后，就可以通过 jQuery 对象方法来获取和修改这些 DOM 元素的属性和样式了，也可以用来插入或删除 DOM 元素。 常用的 jQuery DOM 操作方法： attr(key, val) 获得或修改节点属性 removeAttr(key) 移除节点属性 addClass(cls) 为节点添加 cla
系统学习 jQuery （一） 核心
zaqwsx20的专栏
06-23 408
做前端页面时 jQuery 用的也比较多了，但从来没有系统地看过它的文档。趁着最近工作不忙来对着文档来缕一缕 jQuery 的用法，做一个系列的总结，对于用过 jQuery 想系统了解它的 API 的同学应该有帮助。 $(function() { // $(selector, [contex
jQuery系统的学习（二）
飞鸿的博客
05-19 234
jQuery系统的学习（一）的时候，我学习到了jquery滑动的效果。今天我接着往下学习。jQuery 效果- 动画jQuery 动画 - animate() 方法jQuery animate() 方法用于创建自定义动画。语法：$(selector).animate({params},speed,callback);必须的params参数定义形成动画的CSS属性。可选的speed参数规定效果的时长...
jQuery系统的学习（六）
飞鸿的博客
05-23 334
因为要学习ajax了，这个很重要，所以我要换章了。什么是ajax？ajax=异步javascript和xml（asynchronous javascript and xml）；简单地说就是在不重载整个网页的情况下，ajax通过后台加载数据，并在网页上进行显示。使用ajax的应用程序案例有谷歌地图，腾讯微博，优酷视频，人人网等等。关于jquery和ajaxjquery提供很多个与ajax有关的方法。...
jQuery系统的学习（五）
飞鸿的博客
05-23 269
昨天太忙啦，都没怎么学习。今天我要多补点。JQuery尺寸jQuery提供多个处理尺寸的重要方法：width()、height()、innerWidth()、innerHeight()、outerWidth()、outerHeight（）jQuery width()和height()方法width()方法设置或返回元素的宽度。height()方法设置或返回元素的高度。&lt;!DOCTYPE ht...
JQuery学习网站
03-16
jQuery拥有丰富的插件生态系统，如Bootstrap、jQuery UI等，可以扩展其功能，如日期选择器、轮播图、模态框等。 压缩包中的`jQueryAPI_CHM_900205.CHM`文件是一个帮助文件，通常包含了jQuery的官方API文档。通过这...
jquery:学习jquery源代码-jquery source code
03-24
本着开源软件开发的精神，jQuery始终鼓励社区代码的贡献。 为了帮助您入门，并在开始编写代码之前，请务必仔细阅读以下重要的贡献准则： 使用jQuery的环境 jQuery还支持Node，浏览器扩展和其他非浏览器环境。 您需要...
jQuery在线答题考试系统代码.zip
最新发布
09-21
总之，“jQuery在线答题考试系统代码”是一个很好的学习案例，它展示了jQuery如何与HTML和CSS配合，构建出具有交互性和动态性的网页应用。通过研究这个项目，开发者不仅可以加深对jQuery的理解，还能掌握如何利用...
jQuery学习笔记
06-23
**jQuery学习笔记** jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript代码的编写，使得网页交互变得更加简单。这个资源包含了作者在自学jQuery过程中积累的笔记，以HTML页面的形式呈现，方便阅读和...
jquery系统学习
08-30
### jQuery系统学习知识点详解 #### 一、引言：JavaScript与Web 2.0时代的崛起 随着Web 2.0的兴起，JavaScript逐渐成为构建现代Web应用的核心技术之一。JavaScript的发展经历了从简单脚本语言到强大开发框架的转变...
jQuery系统的学习（八）
飞鸿的博客
05-24 197
jquery选择器http://www.runoob.com/jquery/jquery-ref-selectors.htmljquer事件方法http://www.runoob.com/jquery/jquery-ref-events.htmljquery效果方法http://www.runoob.com/jquery/jquery-ref-effects.htmljquery css/html...
《JQuery之系统化学习》
杨晓风 迷迭香的记忆
02-12 811
以强大的CSS选择器为基础，查找DOM对象   屏蔽浏览器差异，对DOM的操作提供了方便的枯寂站。易用的事件处理API和动画API   强大的插件机制
jquery框架学习(keep update)
AinUser的博客
05-30 1502
[html] view plain copy jquery在日常的开发中，是较为常用的一种技术，所以今天也不算较为系统详细的学习吧。 主要是对jquery当中，许多常用的方法进行学习和总结吧 jquery当中主要的特点就是：选择器，js当中呢，主要就是dom树结构。 下面就不多说了，开始我们jquery当中方法的学
【JAVA】【IDEA】不小心把模块（module）移除（remove）了怎么恢复
weixin_60897770的博客
10-11 1万+
有一天觉得项目里的模块太多，想project栏里只显示一个模块，结果点了remove后，模块就打不开了。
jquery 简单的登录验证
Suoz的博客
11-25 7060
CSS部分：<style type="text/css"> #waimian{ width: 375px; height: 500px; background-color: yellow; position: relative; z-index: 0; } #info{ width
jQuery系统的学习（一）
飞鸿的博客
05-13 1219
之前，有零碎的学习过jqurey，但是我觉得不够，必须系统的学习jqurey。https://www.runoob.com/try/try.php?filename=tryjquery_hide下面所有代码都可以在某鸟在线编辑里尝试运行。我的代码与某鸟教程里不一样。但是我也是跟着他学习。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;m...
jQuery之从零开始的学习（完整）
msyqmsyq的博客
08-24 1万+
jQuery入门 一、简介 jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an...
炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS实现】
weixin_52212950的博客
06-27 3万+
炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS】
jquery选择下拉框触发事件的实现
热门推荐
飞鸿的博客
06-06 3万+
因为jquery选择下拉框触发事件的实现而焦头烂额，先前我用了对下拉框option中的id用了click事件，在火狐中竟然能运行而在其他浏览器却不行，这让我一度以为是浏览器兼容问题。错错错，option中没有id也没有click事件。我的天，超级发现问题超级开心。下面是我的实现。所需知识bind（）方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。其语法为：$(selector...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值