jQuery操作样式

最新推荐文章于 2021-09-26 10:36:42 发布
最新推荐文章于 2021-09-26 10:36:42 发布
阅读量147 收藏
点赞数 1
分类专栏： 前端页面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wyqwilliam/article/details/103547041
版权 
<html>
	<head>
		<title>jquery操作样式</title>
		<meta charset="UTF-8"/>
		<!--
			jquery操作样式
				获取元素对象
					操作样式--css范式
						增加样式:
							元素对象名.css("样式属性名","样式值");
							元素对象名.css({"样式名":"样式值","样式名":"样式值",...,"样式名":"样式值"})
						修改样式:
							元素对象名.css("样式属性名","新的样式值");
						删除样式
							元素对象名.css("样式属性名","");
					操作样式--相当于操作类选择器
						增加样式
							元素对象名.addClass("类选择器名");
							注意：
								此种方式追加类选择器，不会覆盖
						删除样式
							元素对象名.removeClass("类选择器名");
		-->
		<!--引入jQuery文件-->
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//增加样式
				function addCss(){
					//获取元素对象
					var div=$("#showdiv");
					//增加样式
						//分开写法
//							div.css("width","200px");
//							div.css("height","200px");
//							div.css("border","solid 1px");
//							div.css("background-color","orange");
						//整合写法
						div.css({"width":"200px","height":"200px","border":"solid 1px","background-color":"red"})
				}
			
			//修改样式
				function updateCss(){
					//获取元素对象
					var div=$("#showdiv");
					//修改样式
					div.css("background-color","gray");
				}
			//删除样式
				function delCss(){
					//获取元素对象
					var div=$("#showdiv");
					//删除样式
					div.css("background-color","");
				}
		//操作样式方式2:
			//增加
			function addClazz(){
				//获取元素对象
				var div=$("#showdiv");
				//增加类样式
				div.addClass("common");
				div.addClass("common2");
			}
			//删除
			function delClazz(){
				//获取元素对象
				var div=$("#showdiv");
				//删除类样式
				div.removeClass("common");
			}
			//用户名校验
				function checkUname(){
					//获取用户名信息
					var uname=$("#uname").val();
					//获取Span对象
					var span=$("#unameSpan");
					//校验
						//声明校验规则
						var reg=/^[\u4e00-\u9fa5]{2,4}$/;
						//开始校验
						if(uname==""){
							span.html("*用户名不能为空");
							span.css("color","red");
						}else if(reg.test(uname)){
							span.html("*√");
							span.css("color","green");
						}else{
							span.html("*×");
							span.css("color","red");
						}
				}
		</script>
		<!--声明css代码域-->
		<style type="text/css">
			.common{
				width: 200px;
				height: 200px;
				background-color: darkorchid;
			}
			.common2{
				border: solid 5px;
			}
		</style>
	</head>
	<body>
		<h3>jquery操作样式</h3>
		<input type="button" id="" value="测试增加样式--css" onclick="addCss()" />
		<input type="button" id="" value="测试修改样式--css" onclick="updateCss()" />
		<input type="button" id="" value="测试删除样式--css" onclick="delCss()" />
		<hr />
		<input type="button" id="" value="测试增加样式--addClass" onclick="addClazz()" />
		<input type="button" id="" value="测试删除样式--delClazz" onclick="delClazz()" />
		<hr />
		<div id="showdiv">
			
		</div>
		用户名:<input type="text" name="uname" id="uname" value="" onblur="checkUname()"/><span id="unameSpan"></span>
	</body>
</html>

 

道法—自然
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery操作属性和样式详解
10-22
本文将深入探讨jQuery如何操作属性和样式，帮助开发者更好地理解和应用这一强大的工具。 首先，我们需要理解DOM（Document Object Model）属性与元素属性的区别。在HTML中，像`id`、`src`和`alt`这样的属性被称为...
jQuery操作css样式
01-21
css操作的分类： css操作 位置操作 尺寸操作 css操作之css css代码： html代码： jQuery代码： 效果如下： css操作之位置操作 css代码： html代码 jQuery代码 效果如下： css操作之尺寸操作 css代码 html...
onclick写法
NIHAOHAOHOA的博客
12-25 445
##onclick写法 <DOCTYPE html> <head> <meta charset="utf-8"> <title>onclick写法<title> <style> #box{ width：200px； height：200px； background：red； color：green； text-align：center；
菜单样式-实现onclick改变背景色效果
车月
10-09 2180
今天搞了一个菜单样式，要实现菜单被单击之后改变背景色 同时在其它菜单被单击时改变已单击菜单背景色   html代码：   ${smu.menu_name} js代码： var i = null; funct
JavaScript使用事件onclick导致css样式失效问题
夜一
09-08 3968
问题：JavaScript使用事件onclick导致css样式失效 首先,我们用以下代码得到的是一个样式没有失效的红色”超链接”,如下图1 代码1： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title
解决：a标签点击跳转页面后，为被点击的a标签添加样式的问题
JaneChelle
08-24 1882
  大家肯定遇到了过这个问题，当你点击a标签的时候，想要给a标签，加上高亮选中的样式，可是页面刷新无法保存样式，那怎么办呢？我提供一种方法：循环a的链接，然后与location.href去比对，如果相同，或包含有同样字符串序列，则添加。 代码如下： var url = window.location.href; $("a").each(function () { i...
JQueryDOM之样式操作
10-17
主要介绍了JQueryDOM之样式操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
JQuery操作元素的css样式
10-24
主要介绍了JQuery操作元素的css样式的相关资料,需要的朋友可以参考下
jQuery操作元素的内容和样式完整实例分析
10-15
主要介绍了jQuery操作元素的内容和样式,结合完整实例形式分析了jquery针对页面元素内容与样式相关操作技巧,需要的朋友可以参考下
js点击当前元素增加样式
luckyJieXu的博客
06-05 1万+
在按钮点击中，只想对当前点击的元素增加样式，其他元素样式取消。js写法为： $(".rebpacket-wrapper ul li").click(function(){ var index = $(this).index(); $(this).addClass("active").siblings().removeClass("active"); $(".redpa
JS-事件/鼠标单击事件( onclick ）/鼠标经过事件（onmouseover）/鼠标移开事件（onmouseout）/光标聚焦事件（onfocus）/失焦事件（onblur）/内容选中事......
Jennyni1122的博客
06-17 9385
JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。 比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。 主要事件表: image.png 鼠标单击事件( ...
jq点击当前添加样式
社会人
07-05 2895
这样一个列表，当前这里是写死的，如果我们是从后台拿到的一个数据列表，在前端循环出来，我们点击当前需要选中，并且拿到id,添加上一个小圆点的样式 至于上面怎么循环这个列表 根据自己用的框架， <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></ti...
onclick事件的基本操作
『愚』的博客
11-18 3万+
onclick 事件会在元素被点击时发生。 就是帮我们实现点击某个元素想要执行某个操作的需求。 html代码： <p onclick="funp()" >点这里</p> js代码： function funp(){ console.log("点击了文字"); } 这样的，我们就会在点击文字时在控制台输出一句话。 完整样例代码： <!DOCTYPE html> <html> <head> <meta charset=
click与onclick的区别
白~狼的博客
06-02 6482
click与onclick的区别 首先给出示例代码： 区别： 1.onclick是绑定事件，告诉浏览器在鼠标点击时候要做什么。 click本身是方法作用是触发onclick事件，只要执行了元素的click()方法，就会触发onclick事件。如上诉代码所示，当点击’ee’按钮时,会触发’dd’的onclick事件(正常来说得按’dd’按钮才触发’dd’的onclick事件)，原因就是因为 $("#btn4").click(function(){ $("#btn3").click(); }); 点击’ee’
js中click 和onclick之间的区别
m0_52358470的博客
09-26 6057
onclick和click
jquery onclick
放飞梦想
07-30 3298
$( "#members li a" ).on( "click", function( e ) {} ); $( "#members li a" ).bind( "click", function( e ) {} ); // Live $( document ).on( "click", "#members li a", function( e ) {} ); $( "#members ...
JQuery onclick()事件
热门推荐
Lisen的博客
08-28 3万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;script src="./jquery.js" type="text/javascript" charset="utf-8"&gt;&l
jQuery样式函数详解：操作CSS与实现页面特效
本文是针对初级到中级前端开发者的一门jQuery教程，重点讲解了如何利用jQuery的样式函数和选择器功能提升网页开发效率，同时涵盖了基础的框架导入、代码结构和常见应用场景，有助于提升开发者的实际操作能力。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值