jQuery五:操作元素CSS属性;设置定义的类;

本篇博客的主要内容是:操作页面元素的CSS属性;以及将定义好的类应用到页面元素上去;

目录

一:概述:

二:准备工作:

三:css()方法;addClass()方法;removeClass()方法;

1:css("color","red");:设置某元素的CSS属性

2:css("color");:获取某元素的属性

3:css({"color":"red","font-weight":"bold","font-style":"italic"});:设置多个CSS属性

4:addClass("highlight");:给元素添加定义的类

5:addClass("highlight myclass");:给元素添加多个定义的类

6: removeClass("myclass");:移除元素的类


一:概述:

jQuery五:操作元素CSS属性;设置定义的类;


二:准备工作:

jQuery五:操作元素CSS属性;设置定义的类;

基础代码:sample2.html:

<!DOCTYPE html >

<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>操作CSS属性</title>

<style>
.myclass {
	font-style: italic;
	color: darkblue;
}
/* 高亮css类 */
.highlight {
	color: red;
	font-size: 30px;
	background: lightblue;
}
</style>

</head>

<body>
	<div class="section">
		<h2>jQuery选择器实验室</h2>
		<input style="height: 24px" id="txtSelector" />
		<button id="btnSelect" style="height: 30px">选择</button>
		<hr />
		<div>
			<p id="welcome">欢迎来到选择器实验室</p>
			<ul>
				<li>搜索引擎:<a href="http://www.baidu.com">百度</a> <span> <a
						style="color: darkgreen" href="http://www.so.com">360</a>
				</span>
				</li>
				<li>电子邮箱:<a href="http://mail.163.com">网易邮箱</a> <span> <a
						style="color: darkgreen" href="http://mail.qq.com">QQ邮箱</a>
				</span>
				</li>
				<li>中国名校:<a href="http://www.tsinghua.edu.cn">清华大学</a> <span>
						<a style="color: darkgreen" href="https://www.pku.edu.cn/">北京大学</a>
				</span>
				</li>
			</ul>
			
			<span>新加测试span标签</span>
			<p>你好</p>		
            <span class="myclass ">我是拥有myclass类的span标签</span>
			<p class="myclass">我是拥有myclass的p标签</p>
			<form id="info" action="#" method="get">
				<div>
					用户名:<input type="text" name="uname" value="admin" /> 密码:<input
						type="password" name="upsd" value="123456" />
				</div>
				<div>
					婚姻状况: <select id="marital_status">
						<option value="1">未婚</option>
						<option value="2">已婚</option>
						<option value="3">离异</option>
						<option value="4">丧偶</option>
					</select>
				</div>
				<div class="left clear-left">
					<input type="submit" value="提交" /> <input type="reset" value="重置" />
				</div>
			</form>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery-3.5.1.js" ></script>
	<script type="text/javascript">
	
	
	
	</script>
</body>
</html>



三:css()方法;addClass()方法;removeClass()方法;

1:css("color","red");:设置某元素的CSS属性

css()方法作用:访问或设置前面选择器所选中元素的CSS属性

示例1:需求,将页面所有的超链接的文本变成红色。

利用css()方法,设置超链接元素的文本颜色

	<script type="text/javascript">	
		$("a").css("color","red");	
	</script>

jQuery五:操作元素CSS属性;设置定义的类;

…………………………

2:css("color");:获取某元素的属性

示例2:获取某元素的CSS属性

选择器选择多个元素时,其默认获取第一个元素的属性:

	<script type="text/javascript">	
		var color_attr = $("a").css("color");
		alert(color_attr);	
	</script>

jQuery五:操作元素CSS属性;设置定义的类;

jQuery五:操作元素CSS属性;设置定义的类;

…………………………

3:css({"color":"red","font-weight":"bold","font-style":"italic"});:设置多个CSS属性

设置多个CSS属性的时候,

示例3:需求:将超链接文字设为红色,字体加粗、斜体;按照上述内容,恐怕要写三个css()方法;

简便处理方法:在css()方法中,传递一个JSON对象:

	<script type="text/javascript">	
		$("a").css({"color":"red","font-weight":"bold","font-style":"italic"});
	</script>

jQuery五:操作元素CSS属性;设置定义的类;

…………………………

4:addClass("highlight");:给元素添加定义的类

示例4:需求:

jQuery五:操作元素CSS属性;设置定义的类;

	<script type="text/javascript">	
		$("li").addClass("highlight");
	</script>

jQuery五:操作元素CSS属性;设置定义的类;

…………………………

5:addClass("highlight myclass");:给元素添加多个定义的类

添加多个类?

addClass():多个类之间用空格分隔即可

	<script type="text/javascript">	
		$("li").addClass("highlight myclass");
	</script>

jQuery五:操作元素CSS属性;设置定义的类;

经过实测,当myclass类和highlight类都设置了某个属性,并且产生冲突时:

$("li").addClass("myclass highlight");和$("li").addClass("highlight myclass");没有什么不同;真正哪个其作用,和<style>中类的定义顺序有关:

jQuery五:操作元素CSS属性;设置定义的类;

jQuery五:操作元素CSS属性;设置定义的类; 

………………………………

移除类:

jQuery五:操作元素CSS属性;设置定义的类;………………………… 

6: removeClass("myclass");:移除元素的类

	<script type="text/javascript">	
		$("p").removeClass("myclass");
	</script>

 移除p元素上面的myclass类:

jQuery五:操作元素CSS属性;设置定义的类;

经过实测:移除多了类:removeClass("myclass highlight");

	<script type="text/javascript">	
		$("li").addClass("myclass highlight");
		$("li").removeClass("myclass highlight");
	</script>

疑问:<style>中定义的类,需要遵从那些规范,谁来规定具体定义那些类,这个还有点不清楚???

上一篇:Ubuntu下Mysql常用命令详解


下一篇:MySQL命令行操作大全