<%@ 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>
分享到：
相关推荐
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
<script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"> $( "#...
jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)
jquery插件jquery-ui-timepicker-addon.j
**jQuery摄像头插件jquery-webcam-plugin** 在网页开发中，集成摄像头功能可以帮助用户实时捕捉图像，广泛应用于在线证件照上传、视频聊天、虚拟试衣间等场景。`jQuery webcam plugin`是一个优秀的JavaScript库，它...
《jQuery UI与jQuery插件深度解析——以jquery-ui-1.8.2.custom.min.js为例》 在Web开发领域，jQuery库以其简洁易用的API和强大的功能深受开发者喜爱。而jQuery UI作为jQuery的一个扩展，提供了丰富的用户界面组件...
#### 二、Jquery层级选择器 层级选择器用于根据元素之间的关系来选取元素，这对于处理复杂的DOM结构非常有用。 - **`$("parent > child")`**：选择所有作为指定父元素直接子元素的元素。 - **`$("ancestor ...
在本篇文章中，我们将深入探讨其自定义版本 `jquery-ui-1.8.18.custom.min.js` 和相关的 CSS 文件，以理解它们如何协同工作，为网页带来强大的功能和美观的界面。 首先，`jquery-ui-1.8.18.custom.min.js` 是 ...
《jQuery-Timepicker-Addon：构建高效日历时间选择器》 在Web开发中，用户界面的易用性和交互性是至关重要的。jQuery-Timepicker-Addon是jQuery库的一个扩展，为网页提供了一种优雅的方式来处理日期和时间的选择。...
在给定的"jquery-ui-1.10.3.custom.rar"压缩包中，我们特别关注的是其内置的日期时间选择插件，这个功能强大且易于使用的工具极大地提升了用户在网页上的交互体验。 首先，jQuery UI 1.10.3 版本是该库的一个稳定...
jquery 精简版 jquery 精简版 jquery 精简版jquery 精简版 jquery 精简版 jquery 精简版 jquery 精简版
这个文件包含了各种UI组件的实现，如对话框（Dialog）、滑块（Slider）、日期选择器（Datepicker）、拖放功能（Draggable）、可排序元素（Sortable）以及许多其他交互元素。 `jquery-ui-1.8.16.custom.css` 文件则...
jQuery打印插件----jQuery.print.js实现网页的打印功能，亲测有效
基于jQuery的H5移动端选择器是为适应移动设备特性和用户体验需求而设计的组件。这些组件通常包括日期选择器、级联选择器和自定义HTML选择器，它们能够提高移动应用的交互性和可操作性。 日期选择器是网页应用中常见...
这个压缩包包含了一系列与EasyUI相关的文件，如 `jquery1.7.2中文API修正版.chm` 和 `JQuery-esqyUI中文-1.2.5API.CHM`，这些都是开发者理解和使用EasyUI的重要参考资料。 **jQuery基础** jQuery 是一个快速、简洁...
对于开发者而言，`jquery-1.7.2-vsdoc.js`是一个重要的资源。它包含了Visual Studio的文档注释，使得在VS环境下可以获取到中文的jQuery方法提示，极大提升了开发效率。 总的来说，jQuery 1.7.2汉化版的API为开发者...
jquery-ui-1.10.3.min.js
JQuery第一课-tab标签页、JQuery第二课-多张图的无缝滚动、JQuery第三课-图片轮播、JQuery第四课-下拉菜单(无限级)、JQuery第五课-弹出窗口、JQuery第六课-拖拽、JQuery第七课-模拟滚动条、JQuery第八课-放大镜、...
jquery-1.3.2-vsdoc.js jquery-1.8.3.min.js jquery-1.3.2.min.js jquery-1.4.1-vsdoc.js jquery-1.4.1.min.js jquery-1.4.2-vsdoc.js jquery-1.4.2.min.js jquery-1.4.3-vsdoc.js jquery-1.4.3.min.js ...
jquery-ui-日期框扩展成时间框 jquery-ui时间框 基于别人的代码进行修改 jquery-ui-1.8.16.custom.css文件末尾加入以下代码 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } .ui-timepicker-div dl{ ...