Jsp页面
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <metahttp-equiv="Content-Type"content="text/html; charset=GB18030"> <scripttype="text/javascript"src="js/jquery-1.3.2.js"></script> <scripttype="text/javascript"src="js/testJquer1.js"></script> <styletype="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } </style> <title>Insert title here</title> </head> <body> <inputtype="button"value="保存"class="mini"name="ok"class="mini"/> <inputtype="button"value="改变 <body> 内所有 <div> 的背景色为 #0000FF" id="b1"/> <inputtype="button"value=" 改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2"/> <inputtype="button"value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3"/> <inputtype="button"value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF" id="b4"/> <inputtype="button"value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF" id="b5"/> <h2>天气冷了</h2> <h3>天气又冷了</h3> <divid="one">id为one</div> <divid="two"class="mini"> id为two class是 mini <divclass="mini">class是 mini</div> </div> <divclass="one"> class是 one <divclass="mini">class是 mini</div> <divclass="mini">class是 mini</div> </div> <divclass="one"> class是 one <divclass="mini01">class是 mini01</div> <divclass="mini">class是 mini</div> </div><br> <divid="mover">动画</div><br> <spanclass="spanone">span</span> </body> </html>
Js代码
$(document).ready(function(){ //<input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF" id="b1"/> $("#b1").click(function(){ $("body div").css("background", "red"); }); //<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2"/> $("#b2").click(function(){ $("body > div").css("background", "red"); }); //<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3"/> $("#b3").click(function(){ //id为one的下一个紧邻div节点(兄弟节点) $("#one+div").css("background", "red"); //没有选取到节点,因为id为one的元素下一个节点不是span $("#one+span").css("background", "red"); //id为one的下一个元素 $("#one+*").css("background", "red"); }); //<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF" id="b4"/> $("#b4").click(function(){ //$("#two~div").css("background", "red"); //id为two的元素后所有兄弟元素 $("#two~*").css("background", "red"); }); //<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF" id="b5"/> $("#b5").click(function(){ $("#two").siblings("div").css("background", "red"); }); });
本文来自www.wanglogn.com
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
文章名称:JQuery层次选择器-创新互联
标题路径:https://www.cdcxhl.com/article6/dsooig.html
成都网站建设公司_创新互联,为您提供域名注册、自适应网站、用户体验、小程序开发、外贸建站、全网营销推广
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联