<%@ 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>
分享到：
相关推荐
**jQuery颜色选择器ColorPicker详解** 在Web开发中，用户界面的交互性和视觉效果往往对用户体验有着重要影响。其中，颜色选择器是一个常见的组件，它允许用户方便地选取颜色。`jQuery ColorPicker`是一个轻量级且...
本文实例讲述了jQuery内容选择器与表单选择器。分享给大家供大家参考，具体如下： 内容选择器 jQuery内容过滤选择器的过滤规则主要运用在DOM元素所包含的子元素或其文本内容上，主要包括以下四种过滤方法： 内容选择...
本项目“jquery周历选择器”利用jQuery的灵活性和易用性，构建了一个适用于混合应用程序（Hybrid App）的周历选择器组件。 1. **周历选择器设计**： - 周历选择器通常用于日程管理或时间规划应用，显示一周的日期...
在JavaScript的世界里，jQuery是一个非常流行和...记住，熟练掌握jQuery选择器将极大地提升你的前端开发效率，让你编写出更加简洁高效的代码。在学习过程中，不断实践和应用这些知识点，你将会成为一个jQuery的大师。
《jQuery城市选择器详解》 在网页开发中，经常需要实现一种功能，即用户可以选择他们的所在省份和城市，这在注册、填写地址等场景中尤为常见。jQuery城市选择器就是解决这一需求的有效工具，它利用JavaScript和...
3. **初始化插件**：使用jQuery选择器选择该元素，然后调用日期选择器插件的初始化方法，例如`$(selector).dateInput(options);`，其中`options`是可选的配置对象。 4. **配置选项**：根据需求设置日期选择器的配置...
基于jQuery的H5移动端选择器是为适应移动设备特性和用户体验需求而设计的组件。这些组件通常包括日期选择器、级联选择器和自定义HTML选择器，它们能够提高移动应用的交互性和可操作性。 日期选择器是网页应用中常见...
【标题】"一个简单的jQuery时间选择器" 描述了如何使用jQuery库来创建一个用户友好的时间选择界面。在Web开发中，特别是涉及到用户输入时间的场景，如预订、会议安排等，拥有一个直观易用的时间选择器可以极大提升...
《jQuery城市选择器详解》 在网页开发中，常常需要为用户提供便捷的城市选择功能，以满足用户在填写地址或选择服务区域时的需求。jQuery城市选择器便是为此而设计的工具，它结合了jQuery库的强大功能，实现了高效、...
首先，理解jQuery选择器的基本概念是关键。jQuery提供了多种内置的选择器，如ID选择器（#id）、类选择器（.class）、元素选择器（element）等，它们用于定位HTML文档中的特定元素。双向选择器则在此基础上增加了更...
### jQuery选择器全解 #### 一、引言 jQuery是一种快速、简洁的JavaScript库，其核心特性之一便是强大的选择器引擎。通过jQuery选择器，开发者能够轻松地定位和操作DOM（Document Object Model）元素，极大地提高...
这个“JQuery选择器测试 离线版”是一个专门用于检验和学习jQuery选择器功能的应用，由一位国外专家创建，并进行了轻微的修改。** 在jQuery中，选择器分为多种类型，包括基础选择器、类别选择器、ID选择器、属性...
通过以上这些知识点的学习，可以更好地理解如何使用JQuery选择器来操作和处理DOM中的元素，从而提高Web开发效率。掌握这些选择器不仅有助于编写更高效的代码，还能帮助开发者更好地理解JQuery的工作原理。
1. jQuery选择器和DOM操作：如何使用jQuery选择特定的HTML元素，如`.addClass()`, `.removeClass()`, `.val()`等方法来改变元素的样式和内容。 2. 事件处理：掌握`.on()`, `.click()`, `.change()`等事件监听器的...
通过阅读和理解这段源码，开发者不仅可以学习到jQuery选择器的工作原理，还能提升对CSS选择器、DOM操作以及JavaScript性能优化的理解。 总结来说，这个"jquery样式选择器插件"是一个浓缩的精华，它展示了如何用最少...
jQuery，一个流行的JavaScript库，提供了许多插件来简化开发人员的工作，其中包括颜色选择器。本篇文章将深入探讨如何利用jQuery轻松实现颜色选择功能，以提高用户界面的交互性。 一、jQuery颜色选择器简介 jQuery...
**jQuery日期选择器插件**是一种广泛应用于网页开发中的组件，它允许用户通过交互式的日历界面方便地选择日期。这种插件极大地提高了用户在网页上输入日期的体验，尤其适用于需要用户输入生日、预约日期或者截止日期...
jquery 城市选择器代码
"jquery时间选择器"是基于jQuery的一个组件，旨在为用户在网页上提供一个直观且易于使用的日期和时间输入界面。这个组件使得用户能够方便地通过下拉菜单或者滑动条选择日期和时间，而不是手动输入，提高了用户体验。...