jquery测试文档

Jquery版本：* jQuery JavaScript Library v1.3.2 * http://jquery.com/

引用：<script src="JS/jquery.js" type="text/javascript"></script>

测试1：给隐藏域赋值：

控件：<input type="hidden" id="hdInfo" />

脚本：function aa()

     {

          jQuery("#hdInfo").val('test');

          alert(jQuery("#hdInfo").val());

          //等价于

           $("#hdInfo").val('test');

          alert($("#hdInfo").val());          

     }

测试2：获得table第一列的所有数据：

 控件：<table cellspacing="0" rules="all" border="1" id="dataGridView1" style="border-collapse:collapse;">

       <tr>

             <th scope="col">编号</th><th scope="col">学号</th><th scope="col">姓名</th><th scope="col">课程编号</th><th scope="col">课程名称</th><th scope="col">分数</th>

       </tr><tr>

            <td>1</td><td>2005001     </td><td>张三    </td><td>10001</td><td>数学                </td><td>69</td>

       </tr><tr>

            <td>2</td><td>2005001     </td><td>张三    </td><td>10001</td><td>数学                </td><td>69</td>

       </tr><tr>

            <td>3</td><td>2005001     </td><td>张三    </td><td>10002</td><td>语文                </td><td>78</td>

       </tr><tr>

            <td>4</td><td>2005001     </td><td>Thomas</td><td>10002</td><td>语文                </td><td>78</td>

       </tr><tr>

            <td>5</td><td>2005002     </td><td>李四    </td><td>10001</td><td>数学                </td><td>89</td>

       </tr>

</table>

脚本：function aa()

     {

         alert(jQuery("#dataGridView1 tr td:first-child").text());  

//alert(jQuery("table tr td:first-child").text()); //通用型        

     }

测试3：获得所选中的radio中lable中的值：

控件：  <input id="rblProject_0" type="radio" name="rblProject" value="A" /><label for="rblProject_0">A  已经使用</label></td><td><input id="rblProject_1" type="radio" name="rblProject" value="B" /><label for="rblProject_1">B  近期上线 </label></td><td><input id="rblProject_2" type="radio" name="rblProject" value="C" /><label for="rblProject_2">C  尚无规划 </label></td><td><input id="rblProject_3" type="radio" name="rblProject" value="D" checked="checked" /><label for="rblProject_3">D  不清楚 </label>

脚本：function aa()

     {

         alert(jQuery("input[name='rblProject']:checked").next("label").html()); //或者用下面的方式也可以得到值

         alert(jQuery("input[name='rblProject']:checked").next("label").text());           

     }

测试4：超连接标签选中时更改样式：

控件：  <asp:TreeView ID="stv1" runat="server" ShowLines="true"   ImageSet="Arrows"  >     

        <HoverNodeStyle Font-Bold="True" Font-Underline="True" ForeColor="#5555DD" />

        <ParentNodeStyle Font-Bold="False" />

        <SelectedNodeStyle Font-Bold="True" Font-Underline="True" ForeColor="#5555DD" HorizontalPadding="0px" VerticalPadding="0px" />

        <NodeStyle Font-Names="Tahoma" Font-Size="10pt" ForeColor="Black" HorizontalPadding="5px"  NodeSpacing="0px" VerticalPadding="0px" />

    </asp:TreeView>

脚本：jQuery( function()

{    

    var treeObj = jQuery("#<%=stv1.ClientID %>");       

    var anchorObjList = treeObj.find("a");      

    anchorObjList.click( function()

    {  

        anchorObjList.filter(".selectStyle").removeClass("selectStyle");

        anchorObjList.filter(".ctl00_ContentPlaceHolder1_stv1_0.ctl00_ContentPlaceHolder1_stv1_1.ctl00_ContentPlaceHolder1_stv1_5").removeClass("ctl00_ContentPlaceHolder1_stv1_0 ctl00_ContentPlaceHolder1_stv1_1 ctl00_ContentPlaceHolder1_stv1_5");

        jQuery(this).addClass("selectStyle");

    });

});

测试4：两种表达的不同：

控件： 无

脚本：jQuery(function($) {});

function aa(){}

区别在于：第一种当DOM加载完成后，执行其中的函数。第二个function aa()需要在页面中调用