<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!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=UTF-8">
<title>JQuery演示示例</title>
<style type="text/css">
div{
300px;
height:50px;
background: yellow;
margin:5px;
}
</style>
<script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js'/>"></script>
<script type="text/javascript">
//※jQuery中的选择器，和CSS中的一样。如:
//1. "#"为id选择器
//2. "E"为元素选择器
//3. "E E2"为包含选择器
//4. "."为类选择
//5. "input[name='age']"属性选择器
//6. ":" 冒号选择器
$( function(){
//1. "#"为id选择器
$("#btn1").click(function(){
//2. "E"为元素选择器 --演示段3时必须把该段注掉,有冲突
/* $("div").html("今天天气真好!");
$("div:first").html("下雪了...");
$("div:eq(2)").html("下ooo了..."); */
//3. "E E2"为包含选择器
//$("div p").html("Hello World...");
$("#aa ~ div").html("112233aaa");//这里表示的从id为aa的到后面的div的内容都设置成112233aa的内容;
//4. "."为类选择 ---行云流水
$(".xy").css("background","red").html("下课了...").css("border","1px solid green");
//5. "input[name='age']"属性选择器
var txt = $("input[name='name']").val();//选择具有"name"的<input>元素，并获取其中的值
//alert(txt);
$("input[name='name']").val("4556");//设置值
//6. ":" 冒号选择器
var len= $(":input").length;
alert(len);
});
}
);
</script>
</head>
<body>
<input type="button" id="btn1" value="演示jQuery选择器" /> <br/>
<div id="aa">0000
<p>p1111</p>
</div>
<div id="bb">bbb</div>
<h3 class="xy">abc</h3>
<p>p22222</p>
<div id="cc">cccc</div>
<h3>abc</h3>
<div id="dd">ddd
<b>bold
<p>p333</p>
</b>
</div>
<form action="">
name:<input type="text" name="name"/> <br/>
age:<input type="text" name="age"/> <br/>
<div class="xy">xyz</div>
</form>
</body>
</html>