jquery简单选择器

最新推荐文章于 2025-06-24 10:51:06 发布

原创最新推荐文章于 2025-06-24 10:51:06 发布 · 113 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #HTML #JavaScript #CSS #单元测试 #ViewUI

JQuery文章专栏收录该内容

12 篇文章

订阅专栏

<%@ 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>