时间戳

首页 > 技术文章 > jQuery操控DOM元素-访问页面的元素

jQuery操控DOM元素-访问页面的元素

xinxinjs 2015-06-10 15:20 原文

访问页面的元素

访问页面时需要与页面中的元素进行交互式的操作，在操作中元素的访问时最频繁，最常见的。主要包括对元素属性、内容、值、css的操作

元素属性操作

在jQuery中可以对元素的属性执行获取、设置和删除的操作。通过attr方法可以对元素属性执行获取和设置操作，而removeAttr方法则可以轻松删除某一指定的属性

获取元素的属性

语法--- attr(name);

获取img标签的src属性,并弹出alert

<script type="text/javascript">
	$(function(){
		var im=$("img").attr("src");
		alert(im);  //img/bt1.jpg
	});
</script>

<div id="wrapper">
	<img src="img/bt1.jpg" />
</div>

设置元素的属性

attr方法不仅可以获取元素的属性，也可以设置元素的属性

语法--- attr(key,value);

其中key表示属性的名称，value标书属性的值，设置多个属性的值，也可以通过attr实现

语法--- attr({key0:value0,key1:value1});

鼠标经过改变图片，在鼠标经过的时候，通过attr方法设置图片的src值实现

<script type="text/javascript">
	$(function(){
		var im=$("img");
		im.mouseover(function(){
			im.attr("src","img/bt2.jpg");
		});
	});
</script>

<div id="wrapper">
	<img src="img/bt1.jpg" />
</div>

删除元素的属性

jQuery中，使用removeAttr方法可以删除元素的属性

语法--- removeAttr(name);

鼠标经过删除img标签的src属性，鼠标经过之后图片消失

<script type="text/javascript">
	$(function(){
		var im=$("img");
		im.mouseover(function(){
			im.removeAttr("src");
		});
	});
</script>

<div id="wrapper">
	<img src="img/bt1.jpg" />
</div>

元素内容操作

在jQuery中操作元素内容的方法包括html方法和text方法

获取或设置元素的html内容

html();

无参数，用于获取元素的html内容

*获取id="wrapper"标签的html内容

<script type="text/javascript">
	$(function() {
		var htm = $("#wrapper");
		var htmn = htm.html();
		alert(htmn);
		//<img src="img/bt1.jpg" />
	});
</script>

<div id="wrapper">
	<img src="img/bt1.jpg" />
</div>

html(val);

有参数，用于设置元素html内容

鼠标经过改变id="wrapper"标签的html内容

<script type="text/javascript">
	$(function() {
		var htm = $("#wrapper");
		htm.mouseover(function(){
				htm.html("<img src='img/bt2.jpg' />");
		});
	});
</script>
		
<div id="wrapper">
	<img src="img/bt1.jpg" />
</div>

获取或设置元素的文本内容

text();

不带参数，用于获取元素的文本内容

获取p元素的文本内容

<script type="text/javascript">
	$(function() {
		var p=$("#wrapper p");
		alert(p.text());
		//元素的文本内容
	});
</script>
		
<div id="wrapper">
	<img src="img/bt1.jpg" />
	<p>元素的文本内容</p>
</div>

text(val);

带参数，用于设置元素的文本内容

鼠标经过，设置p元素的文本内容

<script type="text/javascript">
	$(function() {
		var p=$("#wrapper p");
		p.mouseover(function(){
			p.text("重新设置的文本内容");
		});
		//元素的文本内容
	});
</script>
		
<div id="wrapper">
	<img src="img/bt1.jpg" />
	<p>元素的文本内容</p>
</div>

获取或设置元素值

在jQuery中，要获取或设置元素的值是通过val方法实现的,改方法通常用于设置获取表单的值

语法--- val(val);

如果val方法不带参数，则是获取元素的值，如果val方法带参数，则是设置元素的值

另外val方法可以获取select标记中的多个选项值，其语法格式如下：

val.join(",");

获取元素的值

<script type="text/javascript">
	$(function() {
		var s = $("select").val();
		alert(s);
		//m1
	});
</script>
<div id="wrapper">
	xuanxiang:
	<select>
		<option value="m1">1</option>
		<option value="m2">2</option>
		<option value="m3">3</option>
		<option value="m4">4</option>
		<option value="m5">5</option>
	</select>
</div>

点击按钮重新设置元素的值

<script type="text/javascript">
	$(function() {
		$("input").click(function(){
			$("select").val("m2");
		});
	});
</script>
<div id="wrapper">
	xuanxiang:
	<select>
		<option value="m1">1</option>
		<option value="m2">2</option>
		<option value="m3">3</option>
		<option value="m4">4</option>
		<option value="m5">5</option>
	</select>
	<input type="button" value="点击切换" />
</div>

元素样式操作

元素样式的操作包含：直接设置样式、增加css样式表、切换样式表和删除样式表

直接设置元素样式

在jQuery中，通过css方法为某各指定的元素设置样式，语法如下：

css(name,value);

如果要同时改变多个样式，语法：css({name1:value1,name2:value2,...})

鼠标经过文字，改变文字的颜色为红色

<script type="text/javascript">
	$(function() {
		$("p").mouseover(function(){
			$(this).css("color","red");
		});
	});
</script>
<div id="wrapper">
	<p class="p">颜色改变</p>
</div>

增加css样式表

语法：addClass(class);

如果需要增加多个样式表，用空格隔开

样式切换

通过toggleClass方法切换样式，语法：toggleClass(class);

这个函数的功能是：当元素中含有名称为class的样式表时，删除该样式，否则增加该类

toggleClass方法实现音乐图标的点击切换打开和关闭

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>test</title>
		<meta name="viewport" content="width=device-width; initial-scale=1.0">
		<style type="text/css">
			.img{
				width:100px;
				height:100px;
			}
			.playon{
				background:url(img/playon.png) center center no-repeat;
				background-size:contain;
			}
			.playoff{
				background:url(img/playoff.png) center center no-repeat;
				background-size:contain;
			}
		</style>
	</head>
<body>
	<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$(".img").click(function(){
				$(this).toggleClass("playoff");
			});
		});
	</script>
<div id="wrapper">
	<div class="img playon">
				
	</div>
</div>
</body>
</html>

删除样式表

语法：removeClass(class);

如果需要删除多个样式表，用空格隔开

推荐阅读