<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"><title>JQuery DEMO</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <style type="text/css"> div { width: 250px; height: 100px; border: 1px solid black; float: left; padding: 10px; } span { margin: 3px; border: 1px solid black; padding: 5px; } h1, h2 { display: inline; } </style> <!--引入 jquery.js 文件--> <script type="text/javascript" src="js/jquery/jquery-1.3.2.js"> </script> <script type="text/javascript"> $(function(){ //选取所有 内容有1的 div $("div:contains('1')").css("border","1px solid red"); //选取不包含子元素(包括文本元素)的div空元素 $("div:empty").css("background","red"); //改变含有class为mini元素的div元素的背景色 $("div:has(.mini)").css("background","#bbffaa"); //含有 子元素的div $("div:parent").css("background","#eeeeee"); //选取所有不可见的img元素 显示5000毫秒 $("img:hidden").show(5000); //选取所有可见的p元素 :visible $("p:visible").css("border","1px dashed blue"); }); </script> </head> <body> <span>SPAN2</span> <div id="div1"> <h1>div h1</h1> <h2>div h2</h2> <h1>div h3</h1> </div> <div> <h2>div h2</h2> <span>div span</span> </div> <div> </div> <div class="mini"> <span><span id="sp1">div.div.span1</span><span>div.div.span2</span></span> </div> <span>SPAN1</span> <p><input type="text" class="normalText" value="1232"></p> <p><input type="password" value="1232"></p> <p><input type="text" value="1232"></p> <p><input type="text" value="1232"></p> <p> <textarea>132</textarea> <textarea>333</textarea> <textarea>444</textarea> <textarea>5555</textarea> </p> <!--此图片缓慢显示--> <img style="display:none" src="image/gun01.jpg" width="400px" height="250px"> </img> </body> </html>