jquery简单选择器

mimang2007110 · 发表于 2013-2-8 00:16:32

<%@ 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="简单选择器" ><br/><br/> <input type="button" name="btn" value="匹配偶数行" > <input type="button" name="btn" value="匹配奇数行" ><br/><br/> <input type="button" name="btn" value="h标记匹配" ><br/><br/> <input type="button" name="btn" value="div动画" ><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>

		自动登录	找回密码
密码			立即注册