<%@ 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各类选择器总结,包括类的选择、ID的选择以及标签的选择等
一个简单的jQuery时间选择器
jquery 颜色选择器,使用简单,简单配置使用颜色选择器,实现颜色的选择
ColorPicker基于强大的jQuery,使用方便、配置简单,同时不需要加载额外的CSS文件。可以随心所欲的使用到项目中,兼容各大浏览器。
ClassyColor是一款简单实用的jQuery颜色选择器插件。你可以使用直观的HSL颜色,也可以使用RGB颜色,并且选择颜色时可以设置颜色的透明度。
简单实用的jQuery日期选择器控件 beatpicker,欢迎大家下载!
用jquery实现的时间选择器,简单易用
jquery
一款简单jQuery日历选择器代码
DCalendar是一款简单jQuery日期选择器插件。该插件可以用于制作日历和日期选择器,它兼容IE8浏览器,使用起来非常简单。
简单好用的jquery时间选择器,支持年月日和时分秒,上下滚动选择。可兼容手机端
层次选择器: 通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代、父子、相邻、兄弟关系,通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为...
这是一款带备忘录功能的简单的jQuery日期选择器插件。你可以为该日期选择器的某些日期设定设定一些信息,方便日常查询,就像现实生活中的备忘录一样。
另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器(即选择器插件,参考上篇:jQuery插件原来如此简单——jQuery插件的机制及实战)。正是jQuery强大的选择器功能,让它很容易上手,吸引了...
大气jQuery颜色选择器插件jColor.js,支持多种方式选择颜色,并且支持拖拉滚动选择颜色, 调用方法也非常简单,还是非常实用的jQuery插件。
本文实例讲述了jQuery分组选择器简单用法。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery分组选择器</title&...
实现效果: 大气jQuery颜色选择器插件jColor.js,支持多种方式选择颜色,并且支持拖拉滚动选择颜色,调用方法也非常简单,还是非常实用的jQuery插件。
DCalendar是一款简单jQuery日期选择器插件。该插件可以用于制作日历和日期选择器,它兼容IE8浏览器,使用起来非常简单。
jQuery颜色选择器插件是一款多功能网页拾色器颜色拾取工具代码。
jQuery是一个JavaScript类库,其中的选择器特别强大,可轻易选择需要的元素,这里简单地总结了一下