如果要使用一个js生成前台页面,那么最大的问题莫过于DOM的解析处理繁琐,二jQuery最大的好处,就在于可以尽一切的可能性减少此部分操作

属性操作

在DOM解析的处理过程之中,如果要尽心熟悉操作可以使用如下的操作
- 设置属性:元素对象.setAttribute(属性名称,内容)
- 取得属性:元素对象getAttribute(属性名称)
- 删除属性:元素对象,removeAttribute(属性名称)
到那时在JQuery中对于属性操作时间上函数简化了
- 设置属性:jQuery元素对象.attr(属性名称,属性内容)
- 取得属性:jQuery元素对象.attr(属性名称),
- 删除属性:jQuery元素对象.removeAttr(属性名称)
观察属性操作
为一个img元素添加一个图片的路径,并设置图片宽度

<html>
<head>
	<title>jquery 属性操作</title>
	<meta charset="UTF-8"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			//设置img标签的src路径
			$("div>img").attr("src","images/gd.jpg");
			//设置图片的宽度
			$("div>img").attr("width","500px");
		})
	</script>
</head>
<body>
	<div><img></div>
</body>
</html>

[img]

jQuery中的DOM操作简化

删除属性操作

	$(function(){
			//删除img元素的src属性
			$("div [src]").removeAttr("src")
			
		})

除了进行属性的设置和删除之外也可以取得对应的属性内容

取得属性内容操作

<html>
<head>
	<title>jquery 属性操作</title>
	<meta charset="UTF-8"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			//取得img元素中的src属性
			console.log($("img").attr("src"));
			
		})
	</script>
</head>
<body>
	<div><img src="images/gd.jpg" width="500px"></div>
</body>
</html>

在这里插入图片描述

但是既然说到了属性需要一个简单的提示,如果是表单中的value属性可以通过val()函数完成

使用val()函数

<html>
<head>
	<title>jquery 属性操作</title>
	<meta charset="UTF-8"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			console.log($("input[type='text']").val());
			
		})
	</script>
</head>
<body>
	<div><input type="text" value="www.maoshu.com"/></div>
</body>
</html>

既然牵扯到元素问题,那么就必须解决另外一个问题,元素中的属性固然重要,但是样式对开发同样很重要,而对于样式的设置,有如下的几类操作
- jQuery对象.attr(“class”,"样式名称)
- jQuery对象,addClass(“样式名字”);
- jQuery.对象.css(“样式名字”,“样式内容”);

观察样式的添加

<html>
<head>
	<title>jquery 属性操作</title>
	<meta charset="UTF-8"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
		//为元素添加样式
			$("div>span").addClass("init");
			$("div>span").addClass("info");
			
		})
	</script>
</head>
<body>
	<div><span>www.maoshu.com</span></div>
</body>
</html>

执行结果

在这里插入图片描述

如果现在没有样式表文件,但是有具体的样式效果,则可以使用css()函数设置样式

设置样式

<html>
<head>
	<title>jquery 属性操作</title>
	<meta charset="UTF-8"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
		//设置元素样式
			$("div>span").css("background","red");
			$("div>span").css("color","white");
		
			
		})
	</script>
</head>
<body>
	<div><span>www.maoshu.com</span></div>
</body>
</html>

在这里插入图片描述

除了样式的设置样式之外,使用"jQuery对象.removeClass(样式对象)"删除已有的样式

实现样式删除

<html>
<head>
	<title>jquery 属性操作</title>
	<meta charset="UTF-8"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
		//删除样式
			$("div>span").removeClass("init");		
		})
	</script>
</head>
<body>
	<div><span class="init">www.maoshu.com</span></div>
</body>
</html>

属性的样式被删除之后,会保留class属性

jQuery操作DOM的属性操作

属性操作

删除属性操作

取得属性内容操作

使用val()函数

观察样式的添加

设置样式

实现样式删除

猜你喜欢