`

Jquery 选择器

 
阅读更多 
<%@ page language="java" contentType="text/html; charset=GBK"
	pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Insert title here</title>
<script src="jquery/jquery-1.11.1.js"></script>
<script src="jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		
		<%--1 后代选择器 所有的from 后代 div控件  子子节点等都选--%>
		$("#houdai").click(function (){
			$("form input").css('border','1px solid red');
		});
		$("#houdai2").click(function (){
			$("form div").css('border','1px solid red');
		});
		
		<%--2 子选择器 只选择到子节点()，子子节点不选择--%>
		$("#child").click(function (){
			$("form>div").css('border','1px solid red');
		});
		
		$("#child2").click(function (){
			$("fieldset>div").css('border','1px solid red');
		});
		
		<%--3 相邻元素选择器 ,,fieldset和div是两个同级别的元素. 选中在fieldset元素后面的div元素--%>
		$("#xianglin").click(function (){
			$("fieldset+div").css('border','1px solid red');
		});
		
		<%--4 兄弟选择器 选同级的DIV元素，第一个除外--%>
		$("#xiongdi").click(function (){
			$("div~div").css('border','1px solid red');
		});
		
	});
</script>
</head>
<body>
	<form class="form" action="#" method="post">
		<div class="form-item">
			<label for="name">Name:</label> <input name="name" type="text"
				class="form-text" id="name" />
		</div>
		<div class="form-item">
			<label for="lastname">LastName:</label> <input name="lastname"
				type="text" class="form-text" id="lastname" />
		</div>
		<div class="form-item">
			<label for="password">Password:</label> <input name="password"
				type="text" class="form-text" id="password" />
		</div>
		<fieldset>
			<div class="form-item">
				<label>fieldset+Newsletter:</label> <input name="newsletter" type="text"
					class="text-form" id="newsletter" />
			</div>
		</fieldset>
		<fieldset>
			<div class="form-item">
				<label>fieldset+Newsletter2:</label> <input name="newsletter" type="text"
					class="text-form" id="newsletter" />
			</div>
		</fieldset>
		<div class="form-item">
			<input type="submit" value="submit" class="form-submit" id="submit" />
			<input type="reset" value="reset" calss="form-submit" id="reset" />
		</div>
		<div class="form-item">
			<label for="password">Password2:</label> <input name="password"
				type="text" class="form-text" id="password" />
		</div>
	</form>
	
	<button id='houdai'>层级选择器-后代元素</button>
	<button id='houdai2'>层级选择器-后代元素2</button>
	<button id='child'>层级选择器-子选择器</button>
	<button id='child2'>层级选择器-子选择器2</button>
	<button id='xianglin'>层级选择器-相邻元素选择器</button>
	<button id='xiongdi'>层级选择器-兄弟选择器</button>
</body>
</html>

 

分享到：
| Oracle case,if
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics