jQuery系统的学习（四）

最新推荐文章于 2022-06-27 15:30:46 发布
最新推荐文章于 2022-06-27 15:30:46 发布
阅读量196 收藏 1
点赞数
分类专栏： front-end-jqurey
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38465623/article/details/80390606
版权
昨天学习了增加元素，今天继续加油

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>



飞鸿酱
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery系统学习
08-30
这个是系统学习jquery的文档,只了解一项技术的一部分是永远不够的，来系统的学习一下吧
【JAVA】【IDEA】不小心把模块（module）移除（remove）了怎么恢复
weixin_60897770的博客
10-11 1万+
有一天觉得项目里的模块太多，想project栏里只显示一个模块，结果点了remove后，模块就打不开了。
jquery框架学习(keep update)
AinUser的博客
05-30 1423
[html] view plain copy jquery在日常的开发中，是较为常用的一种技术，所以今天也不算较为系统详细的学习吧。 主要是对jquery当中，许多常用的方法进行学习和总结吧 jquery当中主要的特点就是：选择器，js当中呢，主要就是dom树结构。 下面就不多说了，开始我们jquery当中方法的学
jQuery系统的学习（八）
飞鸿的博客
05-24 177
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系统的学习（二）
飞鸿的博客
05-19 212
jQuery系统的学习（一）的时候，我学习到了jquery滑动的效果。今天我接着往下学习。jQuery 效果- 动画jQuery 动画 - animate() 方法jQuery animate() 方法用于创建自定义动画。语法：$(selector).animate({params},speed,callback);必须的params参数定义形成动画的CSS属性。可选的speed参数规定效果的时长...
jQuery系统的学习（五）
飞鸿的博客
05-23 241
昨天太忙啦，都没怎么学习。今天我要多补点。JQuery尺寸jQuery提供多个处理尺寸的重要方法：width()、height()、innerWidth()、innerHeight()、outerWidth()、outerHeight（）jQuery width()和height()方法width()方法设置或返回元素的宽度。height()方法设置或返回元素的高度。&lt;!DOCTYPE ht...
jquery:学习jquery源代码-jquery source code
03-24
本着开源软件开发的精神，jQuery始终鼓励社区代码的贡献。 为了帮助您入门，并在开始编写代码之前，请务必仔细阅读以下重要的贡献准则： 使用jQuery的环境 jQuery还支持Node，浏览器扩展和其他非浏览器环境。 您需要...
Jquery全栈学习视频
07-12
为了帮助学员掌握移动3G开发技术，传智播客.Net班加入了Windows Phone开发课程，采用传智播客独创的WP7Simulator教学平台，学员可以做出一个基于云计算架构的LBS系统。点击查看传智播客独创WP7Simulator教学平台。 ...
jquery 捐赠系统
06-10
基于jquery开发的一个捐赠系统集成了jquery的基本语法 由深到浅的逐步去开发的一个小型系统，是不错的学习jquery的demo 有非常详细的注释
jQuery:原始学习
03-23
jQuery:原始学习
《JQuery之系统化学习》
杨晓风 迷迭香的记忆
02-12 797
以强大的CSS选择器为基础，查找DOM对象   屏蔽浏览器差异，对DOM的操作提供了方便的枯寂站。易用的事件处理API和动画API   强大的插件机制
炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS实现】
weixin_52212950的博客
06-27 3万+
炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS】
系统学习 jQuery （一） 核心
zaqwsx20的专栏
06-23 385
做前端页面时 jQuery 用的也比较多了，但从来没有系统地看过它的文档。趁着最近工作不忙来对着文档来缕一缕 jQuery 的用法，做一个系列的总结，对于用过 jQuery 想系统了解它的 API 的同学应该有帮助。 $(function() { // $(selector, [contex
系统学习 jQuery （四） DOM 操作
zaqwsx20的专栏
07-17 348
通过 jQuery 选择器和筛选方法得到包含特定 DOM 元素的 jQuery 对象之后，就可以通过 jQuery 对象方法来获取和修改这些 DOM 元素的属性和样式了，也可以用来插入或删除 DOM 元素。 常用的 jQuery DOM 操作方法： attr(key, val) 获得或修改节点属性 removeAttr(key) 移除节点属性 addClass(cls) 为节点添加 cla
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系统的学习（六）
飞鸿的博客
05-23 305
因为要学习ajax了，这个很重要，所以我要换章了。什么是ajax？ajax=异步javascript和xml（asynchronous javascript and xml）；简单地说就是在不重载整个网页的情况下，ajax通过后台加载数据，并在网页上进行显示。使用ajax的应用程序案例有谷歌地图，腾讯微博，优酷视频，人人网等等。关于jquery和ajaxjquery提供很多个与ajax有关的方法。...
jquery 简单的登录验证
Suoz的博客
11-25 7001
CSS部分：<style type="text/css"> #waimian{ width: 375px; height: 500px; background-color: yellow; position: relative; z-index: 0; } #info{ width
jQuery系统的学习（一）
飞鸿的博客
05-13 1187
之前，有零碎的学习过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选择下拉框触发事件的实现
热门推荐
飞鸿的博客
06-06 3万+
因为jquery选择下拉框触发事件的实现而焦头烂额，先前我用了对下拉框option中的id用了click事件，在火狐中竟然能运行而在其他浏览器却不行，这让我一度以为是浏览器兼容问题。错错错，option中没有id也没有click事件。我的天，超级发现问题超级开心。下面是我的实现。所需知识bind（）方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。其语法为：$(selector...
jQuery图书管理系统
最新发布
12-08
如果你想学习如何制作这样的图书管理系统，你需要掌握jQuery和Ajax的基础知识。同时，你需要了解如何使用HTML、CSS和JavaScript来构建网页。如果你已经掌握了这些知识，你可以按照以下步骤来制作一个类似的图书管理...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值