博客列表 >jQuery选择器实现对页面元素的控制

jQuery选择器实现对页面元素的控制

箭里飘香
箭里飘香原创
2018年04月04日 18:34:23713浏览

此案例展示了jQuery利用多种选择器对页面元素的控制,通过点击按钮实现图片的转换

代码如下:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery选择器实现对图片的控制</title>
	<style type="text/css">

		table {
			border-collapse: collapse;
			border:1px solid skyblue;
			margin:50px auto;
			text-align: center;
		}
		table caption {
			margin-bottom:30px;
		}
		td {
			padding:10px;
			border:1px solid skyblue;
		}
		button {
			border:none;
			width:140px;
			height:50px;
			background-color: orange;
			color:#fff;
			font-size:1.2em;
		}
		button:hover {
			font-size:1.3em;
			background-color: coral;
		}
	</style>
</head>
<body>
	<div class="box">
		
		<table>
			<caption><h2>jQuery选择器实现对图片的控制</h2></caption>
			<tr>
				<td><img src="http://www.w3school.com.cn/i/eg_bulboff.gif" alt="1"></td>
				<td><img src="http://www.w3school.com.cn/i/eg_bulboff.gif" alt="2"></td>
				<td><img src="http://www.w3school.com.cn/i/eg_bulboff.gif" alt="3"></td>
				<td><img src="http://www.w3school.com.cn/i/eg_bulboff.gif" alt="4"></td>
				<td><img src="http://www.w3school.com.cn/i/eg_bulboff.gif" alt="5"></td>
				<td><img src="http://www.w3school.com.cn/i/eg_bulboff.gif" alt="6"></td>
				<td><img src="http://www.w3school.com.cn/i/eg_bulboff.gif" alt="7"></td>
				<td><img src="http://www.w3school.com.cn/i/eg_bulboff.gif" alt="8"></td>
			</tr>
			<tr>
				<td><button>1</button></td>
				<td><button>2</button></td>
				<td><button>3</button></td>
				<td><button>4</button></td>
				<td><button>5</button></td>
				<td><button>6</button></td>
				<td><button>7</button></td>
				<td><button>8</button></td>
			</tr>
			<tr>
				<td colspan="3"><button>点亮前三盏</button></td>
				<td colspan="2"><button>点亮中间两盏</button></td>
				<td colspan="3"><button>点亮后三盏</button></td>
			</tr>
			<tr>
				<td colspan="8">
					<button>全部点亮</button>
					<button>点亮单数</button>
					<button>点亮偶数</button>
				</td>
			</tr>
		</table>
	</div>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
	<script type="text/javascript">

		for (var i = 0; i <= 7; i++) {
			$('button')[i].onclick = function(){
					if ($('img')[this.innerHTML-1].src.match("bulbon"))  
					  {  
					  $('img')[this.innerHTML-1].src="http://www.w3school.com.cn/i/eg_bulboff.gif";  
					  }  
					else  
					  {  
					  $('img')[this.innerHTML-1].src="http://www.w3school.com.cn/i/eg_bulbon.gif";  
					  }  
					}  
					
				}
		var changesrc
		var changeinnerHTML
		for (var i = 8; i <= 13; i++){

			$('button')[i].onclick = function(){
				if (this.innerHTML == "点亮前三盏") {
					changesrc = "img:lt(3)"
				} else if (this.innerHTML == "点亮中间两盏") {
					changesrc = "img:gt(2):lt(2)"
				} else if (this.innerHTML == "点亮后三盏") {
					changesrc = "img:gt(4)"
				} else if (this.innerHTML == "全部点亮") {
					changesrc = "img"
				} else if (this.innerHTML == "点亮单数") {
					changesrc = "img:even"
				} else if (this.innerHTML == "点亮偶数") {
					changesrc = "img:odd"
				} 
				$(changesrc).attr('src','http://www.w3school.com.cn/i/eg_bulbon.gif')
			}
		}


	</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议