测试是否支持 jquery jquery在线测试

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

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

测试1：给隐藏域赋值：

控件：<inputtype="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><inputid="rblProject_1" type="radio" name="rblProject" value="B" /><label for="rblProject_1">B  近期上线 </label></td><td><inputid="rblProject_2" type="radio" name="rblProject" value="C" /><label for="rblProject_2">C  尚无规划 </label></td><td><inputid="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：两种表达的不同：

控件：无

脚本：

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

jQuery(function($) {});
function aa(){}