|
<%@ 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 blue;float:left;padding:10px; }span{margin:3px;border:1px solid red;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(){//选取div中所有的span元素样式$("div span").css("background","yellow");//选取div下元素是span元素样式$("div>span").css("background","blue");//选取id为sp1的下一个span元素//$("#sp1 + span").css("border","3px solid black");//等价于$("#sp1").next("span").css("border","3px solid black");//选取id为div1的所有兄弟span元素$("#div1 ~ span").css("background","#eeeeee");//等价于//$("#div1").nextAll("span").css("background","#eeeeee");//不同于 siblings 与前后位置无关$("#div1").siblings("span").css("background","#113344");}); </script> </head> <body> <span>SPAN2</span><div id="div1"><h1>div h1</h1></div><div><h2 >div h2</h2></div><div><span>div span</span></div><div><span><span id="sp1">div.div.span1</span><span>div.div.span2</span></span></div><span>SPAN1</span> </body></html> |
|