<%@ 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>
分享到：
相关推荐
第二天：DOM操作 - 理解DOM（Document Object Model）结构 - 使用jQuery选择和操作元素，包括获取和设置元素属性 - 学习元素的添加、删除与替换 第三天：事件处理 - 掌握jQuery的事件绑定方式，如.on()方法 - 学习...
1. **第1-3天**：理解jQuery基本概念，学习选择器和DOM操作，实现简单的元素选取和操作。 2. **第4-6天**：深入学习事件处理，包括事件绑定、解绑和自定义事件，同时了解AJAX的基本用法。 3. **第7-9天**：掌握...
第二天：DOM操作 1. 使用jQuery进行元素的获取、遍历和过滤 2. 学习如何添加、删除和复制DOM元素 3. 理解并运用jQuery中的属性操作，如attr()和prop() 4. 掌握HTML内容的读取和修改，如html()、text()和val() 第三...
第二天，将深入探讨jQuery中的事件处理。jQuery提供了丰富的事件函数，如click()、hover()、change()等，使得处理用户交互变得更加简单。同时，会介绍事件委托，这是一种优化性能的方法，尤其在处理大量动态生成的...
第二天：jQuery事件处理 1. 事件绑定：理解`.on()`方法的使用，包括事件委托，以及如何处理点击、鼠标移动等常见事件。 2. 自定义事件：了解如何触发和监听自定义事件，增强代码的可扩展性。 3. 阻止默认行为与事件...
4. **过滤选择器**：如 `$("div:first")` 选择第一个 `div`，`$("input:checked")` 选择已选中的输入元素。 5. **`.each()` 方法**：遍历匹配的选择器集合，对每个元素执行函数。 **第三天：DOM 操作** 1. **元素...
**第二天：DOM操作** 1. **元素操作**：掌握`$(selector).html()`, `text()`, `val()`等方法，用于获取和设置元素的内容。 2. **属性操作**：学习如何添加、删除或修改元素的属性，如`attr()`, `removeAttr()`, `...
2. **选择器**：学习jQuery的选择器语法，如ID选择器、类选择器、元素选择器等，以及更高级的选择器如后代选择器、兄弟选择器和属性选择器，用于精确选取DOM元素。 3. **DOM操作**：掌握如何使用jQuery来添加、删除...
第二天 1.锁机制 2.时间插件、XSS过滤、在线编辑器使用 3.商品的删除 4.商品的修改完成-一张表的操作全部完成 5.tp中使用AJAX提交表单 6.把模板套到项目中 7. 管理员的登录 第三天 1.模板布局 2.图片上传函数、代码...
2. 第三方库：开发者也可以使用各种第三方库来实现日历控件，如JavaScript的FullCalendar、jQuery UI的Datepicker、Swift的FSCalendar等。这些库提供了丰富的定制选项和扩展功能。 3. 自定义实现：对于需要高度定制...