<%@ 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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
