jquery 移除border_[WEB篇]-JQuery-04-Jquery操作CSS样式

于 2021-01-06 17:26:55 发布
阅读量65 收藏
点赞数
文章标签： jquery 移除border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39996762/article/details/112413971
版权

JQuery

Jquery操作CSS样式

获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成.

追加样式: addClass()

移除样式: removeClass()：从匹配的元素中删除全部或指定的 class

切换样式: toggleClass()：控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.

判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false

案例分析：Jquery操作css样式

代码分析：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
	<head>
		<title>6.JQuery操作CSS样式</title>
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
		<style type="text/css">
			.one {
				width: 200px;
				height: 140px;
				margin: 40px;
				background: red;
				border: #000 1px solid;
				float: left;
				font-size: 17px;
				font-family: Roman;
			}		
			div,
			span {
				width: 200px;
				height: 140px;
				margin: 40px;
				background: #9999cc;
				border: #000 1px solid;
				font-size: 12px;
				font-family: Roman;
			}		
			div.mini {
				width: 30px;
				height: 30px;
				background: #CC66FF;
				border: #000 1px solid;
				font-size: 12px;
				font-family: Roman;
			}
		</style>
	</head>
	<body>
		<input type="button" value="采用属性增加样式" id="b1" />
		<input type="button" value="addclass" id="b2" />
		<input type="button" value="remove class" id="b3" />
		<input type="button" value="切换样式" id="b4" />
		<input type="button" value="has class" id="b5" />
		<h1> 天气冷了</h1>
		<h2>天气 又冷了</h2>
		<div id="one"> id 为one ***** </div>
	</body>
	<script type="text/javascript">
		/**
		 * 添加样式有两种方式实现，可以是以属性的形式添加，亦可直接addClass调用
		 * .attr("class","className");// 以属性方式添加指定样式
		 * .addClass("className");// 直接添加指定样式
		 * .removeClass("className");// 移除指定样式
		 * .toggleClass("className");// 切换样式
		 * .hasClass("className");// 判断是否包含该样式
		 */
		// <input type="button" value="采用属性增加样式" id="b1" />
		$("#b1").click(function() {
			$("#one").attr("class", "mini");
		});
		// <input type="button" value="addclass" id="b2" />
		$("#b2").click(function() {
			$("#one").addClass("mini");
		});
		// <input type="button" value="remove class" id="b3" />
		$("#b3").click(function() {
			$("#one").removeClass("mini");
		});
		// <input type="button" value="切换样式" id="b4" />
		$("#b4").click(function() {
			$("#one").toggleClass("mini");
		});
		// <input type="button" value="has class" id="b5" />
		$("#b5").click(function() {
			alert($("#one").hasClass("mini"));
		});
	</script>
</html>

结果显示：点击不同的按钮测试相应的效果

b332387db5e00415e382dfbcae91f17c.png
weixin_39996762
关注
利用 jQuery 清空 input 框
HeatDeath的博客
11-09 2302
<span style="font-size:18px;"><span style="white-space:pre"> </span><div class="screen-window"> <form action="/Index/index" method="post" class="form-horizontal group-border hover-stripped
jQuery-CSS和事件处理
ImmortalSYM的博客
11-14 1367
jQuery-CSS和事件处理 CSS样式操作 —读取CSS样式语法：css('样式名字符串') —设置CSS样式语法：css('样式名字符串','设置的样式字符串') —另外css()里面传递的参数可以为一个封装所有设置样式的对象；例如： <script> $('p:eq(1)').css({ color:'red', background:'blue', width:300, height:100 }) </script>
jquery 判断是否有类名_[WEB篇]-JQuery-04-Jquery操作CSS样式
weixin_39551366的博客
11-21 183
JQueryJquery操作CSS样式获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成.追加样式: addClass() 移除样式: removeClass()：从匹配的元素中删除全部或指定的 class切换样式: toggleClass()：控制样式上的重复切换.如果类名存在则删除它, 如果类...
前端工程师面试题汇总+部分答案
weixin_30840573的博客
07-06 399
想当时刚面试的时候，出的一些前端题目，都是靠着经验回答，没有比较官方形式的答案， 现整理一份，即使用不到100%，也多少会有作用。 html & css 1. html&CSS1. 常用那几种浏览器测试？有哪些内核(Layout Engine)? (Q1) 浏览器：IE，Chrome，FireFox，Safari，Opera。(Q2) 内核：Trident，Gecko，Pre...
jquery 移除border_如何从jQuery对象中删除元素？
weixin_39758494的博客
12-22 100
Code:d1d2$(function(){var j=$();j=j.add("#d1");j=j.add("#d2");j.remove("#d1");//not this...//alert(j.length);j.css("border","1px solid red");});I've used j.add() to add elements to j, but how do I rem...
jquery 移除border_jquery 操作css 类 (新增和删除)
weixin_39692847的博客
12-22 229
表格奇偶行数 显示不同的class 并设置mouseover 的add class发光属性$(document).ready(function(){$(".table tr").mouseover(function(){$(this).addClass("odd");}).mouseout(function(){$(this).removeClass("odd");//移除该行的class})...
jquery拖拽上传_拖拽上传图片_jquery_
10-01
2. **CSS样式** 为提供更好的视觉反馈，我们可以为拖放区域添加一些基本样式，如边框和提示文字。 3. **jQuery事件处理** 接下来，我们需要使用jQuery监听`dragenter`、`dragleave`、`dragover`和`drop`事件。这些...
CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)
09-25
CSS中的`border-radius`属性是CSS3引入的一个强大的特性，用于创建圆角边框效果，使得元素的四个角可以平滑地过渡到边框边缘，而不是直角显示。这一属性在现代浏览器中得到了广泛支持，但早期版本的浏览器，如...
jquery-css3-弹出框
07-07
下面是一些基本的CSS样式： ```css #modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 ...
jQuery 中关于CSS操作部分使用说明
10-30
jQuery中的CSS操作功能是其核心特性之一，为开发者提供了便捷的方式来操纵网页元素的样式。 #### 二、CSS类操作 在jQuery中，类（class）操作主要包括添加、删除和检查是否存在某个类。这些操作通常用于动态改变...
jq判断是否存在某个类
Vicki_的博客
06-15 3872
jq判断是否存在某个类作用：1、点击按钮增加了一个类（改变样式），触发事件；再次点击按钮删除该类，取消事件。左按钮是点击后的样式（增加类cur）再点一次恢复原来样式（删除类cur）两个按钮类名同为btn&lt;a class="btn"&gt;中文CV 沈达威&lt;/a&gt; &lt;a class="btn"&gt;日文CV 河西健吾&lt;/a&gt;方法一：$(this).is('.cu...
jquery 移除border_jQuery - 删除元素
weixin_39990819的博客
12-22 274
通过 jQuery，可以很容易地删除已有的 HTML 元素。删除元素/内容remove() - 删除被选元素(及其子元素)empty() - 从被选元素中删除子元素jQuery remove() 方法删除被选元素及其子元素。ps：所选元素加上子元素都会被删除code:$(document).ready(function(){$("button").click(function(){$("#div1...
jquery 移除border,如何从jQuery对象中删除元素？
weixin_39742568的博客
12-22 83
Code:d1d2$(function(){var j=$();j=j.add("#d1");j=j.add("#d2");j.remove("#d1");//not this...//alert(j.length);j.css("border","1px solid red");});I've used j.add() to add elements to j, but how do I rem...
jquery 移除border_jQuery 删除或是清空某个HTML元素示例
weixin_30047651的博客
12-31 144
删除HTML元素可以使用remove及empty，下面有关这两个方法的使用将以示例的方式为大家介绍下jQuery使用下面两个方法来删除或是清空某个HTML元素。remove() – 删除指定的元素(包括其子元素)empty() – 清空指定元素的子元素例如：JQuery Demo$(document).ready(function () {$("button").click(function ()...
jquery 移除border_jQuery UI 实例
weixin_39816024的博客
12-22 74
jQuery UI 实例 - 移除 Class(Remove Class)当动画样式改变时，为匹配的元素集合内的每个元素移除指定的 Class。如需了解更多有关 .removeClass() 方法的细节，请查看 API 文档 .removeClass()。.removeClass() 演示点击按钮预览特效。jQuery UI 特效 - .removeClass() 演示.toggler { wid...
jquery 移除border_jQuery 删除元素
weixin_30039395的博客
12-31 242
通过 jQuery，可以很容易地删除已有的 HTML 元素。删除元素/内容如需删除元素和内容，一般可使用以下两个 jQuery 方法：remove() - 删除被选元素(及其子元素)empty() - 从被选元素中删除子元素jQuery remove() 方法jQuery remove() 方法删除被选元素及其子元素。$(document).ready(function(){$("button")...
UITableViewCell复用（cell头像出现重叠现象）_篱下悠然_新浪博客
ochenmengo的博客
01-06 124
先移除，再加载 [_avatar.subviews enumerateObjectsUsingBlock:^(__kindof UIView * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) { [obj removeFromSuperview]; }]; [_avat...
jquery 移除border_Jquery手风琴删除border-top(Jquery Accordion remove border-top)
weixin_39945816的博客
12-22 157
border-top: 0 !important;You need to add !important, which tells the styling to take priority over previous styling.Might be worth reading up on how css targets elements and what takes priority: this ...
jquery 移除border_jquery同时删除元素标签的多个属性
weixin_31684041的博客
12-31 576
引自jquery官网：.removeAttr( attributeName )attributeNameAn attribute to remove; as of version 1.7, it can be a space-separated list of attributes.jquery同时删除元素标签的多个属性，必须使用1.7或以上的版本才能实现，两个要删除的属性中间必须用空格隔开(同r...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值