<%@ page language="java" pageEncoding="GBK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JQuery单元测试</title>
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<script type="text/javascript">
function briefTest()
{
//取ID为tab1中的第一个tr元素中的HTML内容
alert($("#tab1 tr:first").html());
//取ID为tab1中的最后一个tr元素中的HTML内容
alert($("#tab1 tr:last").html());
//取input标记中type是radio的未选中的文本框的值，结果1
alert($("input:radio:not(:checked)").val());
//取ID为tab1中的索引值是2的tr元素中的HTML内容，索引从0开始
alert($("#tab1 tr:eq(2)").html());
//取ID为tab1中的索引值大于1的tr元素中的HTML内容，索引从0开始
$("#tab1 tr:gt(1)").each(function(i){alert($(this).html());});
//取ID为tab1中的索引值小于2的tr元素中的HTML内容，索引从0开始
$("#tab1 tr:lt(2)").each(function(i){alert($(this).html());});
}
function evenTest(val)
{
if(val=="0")
{
//匹配偶数行
//是指行索引是奇数的tr对象，odd是取索引为奇数的行，索引从0开始
$("#tab1 tr:odd").each(function(i){alert($(this).html());});
}
else
{
//匹配奇数行
//是指行索引是偶数的tr对象，even是取索引为偶数的行，索引从0开始
$("#tab1 tr:even").each(function(i){alert($(this).html());});
}
}
function hTest()
{
//给所有的h标记加一个红背景色
$(":header").css("background","red");
}
function animateTest()
{
//没有执行动画效果的div执行动画效果，向右移68px,向下移30px，即是从网页左上角到右下角移动
$("div:not(:animated)").animate({left:"+=68",top:"+=30"},1000);
window.setTimeout("animateTest()",1000);
}
</script>
</head>
<body>
<input type="button" name="btn" value="简单选择器" onclick="briefTest();"><br/><br/>
<input type="button" name="btn" value="匹配偶数行" onclick="evenTest('0');">
<input type="button" name="btn" value="匹配奇数行" onclick="evenTest('1');"><br/><br/>
<input type="button" name="btn" value="h标记匹配" onclick="hTest();"><br/><br/>
<input type="button" name="btn" value="div动画" onclick="animateTest();"><br/><br/>
<table id="tab1" width="50%" border="1" style="border:solid 1px blue;" cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
</tr>
</table>
<input type="radio" value="1" name="text1" />1<br/>
<input type="radio" value="2" name="text2" checked="checked" />2<br/>
<h1>header1</h1><br/>
<p>p1</p>
<h2>header2</h2><br/>
<p>p2</p>
<div style="border:solid 1px blue;width:40px; position:absolute; left:10px; top:10px; background-color: red;">
<p>p3</p>
<p>p4</p>
</div>
</body>
</html>
分享到：
相关推荐
`jQuery ColorPicker`的配置相当简单，只需要在页面加载完成后，找到要绑定颜色选择器的元素，并调用`.colorpicker()`方法。例如： ```javascript $(document).ready(function() { $('#colorSelector')....
【标题】"一个简单的jQuery时间选择器" 描述了如何使用jQuery库来创建一个用户友好的时间选择界面。在Web开发中，特别是涉及到用户输入时间的场景，如预订、会议安排等，拥有一个直观易用的时间选择器可以极大提升...
5. **插件使用**：此外，也有许多预封装的jQuery时间选择器插件，如jQuery UI的Datepicker插件，它可以轻松实现时间选择功能，只需简单的配置即可。 ### 示例代码 以下是一个简单的jQuery时间选择器的实现示例： ...
jQuery，一个流行的JavaScript库，提供了许多插件来简化开发人员的工作，其中包括颜色选择器。本篇文章将深入探讨如何利用jQuery轻松实现颜色选择功能，以提高用户界面的交互性。 一、jQuery颜色选择器简介 jQuery...
4. **易用性**：通过简单的jQuery代码即可实现日期选择器的添加和初始化，降低开发难度。 5. **事件支持**：提供丰富的事件接口，如日期选择后的回调函数，便于开发者进行进一步的业务逻辑处理。 ### 使用方法 1. ...
虽然jQuery本身并不直接支持MVVM，但通过自定义事件和选择器，可以模拟实现简单的双向绑定。 在压缩包文件"jiaoben181437"中，可能包含了实现这些功能的示例代码、教程或项目文件。为了进一步学习和理解，你可以...
jQuery颜色选择器是一种在网页开发中常用的前端工具，它极大地简化了用户在网页上选取颜色的过程。这个插件，称为colpick，是基于jQuery库构建的，为网页设计师和开发者提供了一个直观、易于集成的颜色选择界面。...
综上所述，jQuery日期选择器插件通过简单易用的API和高度定制化的能力，为网页开发提供了一种高效、便捷的日期输入解决方案。通过深入理解其工作原理和使用技巧，开发者可以创建出更加友好的用户体验。在实际项目中...
4. **插件化**：jQuery时间选择器通常以插件的形式存在，开发者可以通过简单的几行代码将其引入到项目中。插件通常封装了所有必要的功能，使得开发者无需关心内部实现细节，只需调用预定义的方法和配置选项即可。 5...
其中，jQuery UI是jQuery的一个扩展库，提供了一系列可交互的用户界面组件，其中包括我们今天要讨论的"日期选择器"——jQuery UI Datepicker。这个插件允许用户方便地选择日期，甚至可以扩展到选择时间，实现年月日...
**jQuery颜色选择器插件——ClassyColor** 在网页开发中，为用户提供便捷的颜色选择功能是常见的需求，jQuery作为一款广泛使用的JavaScript库，提供了丰富的插件来满足这种需求。ClassyColor就是这样一个专为jQuery...
jQuery选择器是jQuery库的核心特性之一，它极大地简化了JavaScript中的DOM元素选择和操作。jQuery完全继承了CSS的风格，并在此基础上提供...无论是简单的元素选取还是复杂的DOM操作，jQuery选择器都能提供强大的支持。
而 `jiaoben5041.js` 很可能就是实际的jQuery时间选择器插件代码，包含了实现选择器功能的核心逻辑。 在使用这个插件时，开发者需要将`jiaoben5041.js`引入到HTML页面中，然后可以通过调用特定的jQuery方法来初始化...
**jQuery 实现颜色选择器** 在网页开发中，颜色选择器是一个常见的交互元素，它允许用户方便地选取颜色。在本教程中，我们将探讨如何利用 jQuery 和相关插件来实现一个功能完备的颜色选择器。 首先，`jQuery` 是一...
总的来说，jQuery颜色选择器为网页开发提供了便利的颜色选取功能，通过简单的API调用和事件处理，可以轻松集成到任何项目中，增强用户体验。无论是用于文字颜色还是背景颜色的设置，都能带来直观、易用的界面。记得...
综上所述，"jQuery颜色选择器"是一个实用的前端工具，它利用jQuery的强大功能，为开发者提供了便捷的颜色选取解决方案，使得颜色管理在Web开发中变得更加简单和直观。无论你是新手还是经验丰富的开发者，都能从中...
总结，jQuery颜色选择器插件提供了一种便捷的方式来让用户在网页上选取颜色，通过简单的jQuery代码就可以实现。理解其工作原理和API接口，可以帮助开发者快速集成和定制颜色选择功能，提升用户体验。在实际项目中，...
在本文中，我们将深入探讨jQuery日期时间选择器插件，这是一种高效、美观的JavaScript解决方案，用于在网页上添加交互式的日期和时间选择功能。这款插件利用jQuery库的强大功能，为用户提供了简单易用的界面，使他们...
总之，jQuery选择器是开发者在JavaScript编程中的得力助手，它们使得DOM操作变得更加简单和高效。在深入学习jQuery选择器的同时，别忘了结合实际项目进行练习，这样才能更好地将理论知识转化为实际技能。现在，你...
"简单好用的jquery时间选择器"是一个优秀的解决方案，它为用户提供了一种直观且便捷的方式来选择日期和时间，尤其适合那些需要频繁进行时间输入的Web应用。这个选择器不仅覆盖了基本的年月日选择，还扩展到了时分秒...