废话少说，将JQuery对Html控件的基本操作集成到一个Aspx页面，让初学者有个直观的了解。JQuery老鸟可以直接忽略。直接拷贝下来放到本地页面即可直观查看。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ControlGetAndSet.aspx.cs" Inherits="JQueryExample_ControlGetAndSet" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <mce:script src="../JS/jquery-1.3.2.min.js" mce_src="JS/jquery-1.3.2.min.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- function GetText() { var text = $("input[name=text1]").val(); alert(text); //用id获取 text的value值 var tmp = $("#text1").val(); alert(tmp); } function SetText() { var text = $("input[name='text1']"); text.val("用Name获取赋值"); //var tmp = $("#text1").val("用ID获取赋值"); } //获取Select选中值 function GetSelect() { var sel = $("select[name='select1']").text(); //var sel = $("select[name='select1'] option[selected]").text(); //通过id获取 //var sel = $("#select1").text(); alert(sel); } //设置选中项的值 未实现 只能设置已有项选中 function SetSelect() { //$("#select1").val("北京");//将value为“北京”的项选中 $("#select1 ").get(0).selectedIndex = 1 } //添加Option function AddSelectOptions() { //$("<option>北京</option>").appendTo("#select1"); //for(var i=0;i<5;i++) //{ // $("<option>" + i + "</option>").appendTo("#select1"); //} //prepend为第一个，append(appendTo)为追加 $("#select1").append("<option>北京</option>"); for(var i=0;i<5;i++) { $("#select1").append("<option>" + i + "</option>"); } } //移除选中项 function RemoveSelectOptions() { $("#select1 option[selected]").remove(); } //清空option function ClearSelectOptions() { //$("#select1").empty(); $("#select1").html(""); } function GetCheck() { var check = $("#checkbox1").attr("checked"); alert(check); } function SetCheck() { $("#checkbox1").attr("checked", true); } function AddCheck() { $("<input type='checkbox' />").appendTo("#form1"); } function GetRadio() { var ra = $("input[type='radio'][checked]").attr("value"); //var ra = $("input[type='radio'][checked]").val(); alert(ra); } function SetRadio() { //$("input[type='radio']").get(0).checked = true; $("input[type='radio'][value=2]").attr("checked","checked"); } // --></mce:script> </head> <body> <form id="form1" runat="server"> <div> <input id="checkbox1" type="checkbox" value="是否正确" style="width:100px" /> <input id="btnGetCheck" type="button" value="获取Check是否选中" οnclick="GetCheck()" /> <input id="btnSetCheck" type="button" value="设置Check选中" οnclick="SetCheck()" /> <input id="btnAddCheck" type="button" value="新增Check" οnclick="AddCheck()" /> </div> <div> <input id="radio1" type="radio" value="1" style="width:50px" /> <input id="radio2" type="radio" value="2" style="width:50px" /> <input id="btnGetRadio" type="button" value="获取Radio是否选中" οnclick="GetRadio()" /> <input id="btnSetRadio" type="button" value="设置Radio选中" οnclick="SetRadio()" /> </div> <div> <select id="select1" name="select1"> <option>上海</option> </select> <input id="btnGetSelect" type="button" value="获取选中项值" οnclick="GetSelect()" /> <input id="btnSetSelect" type="button" value="设置选中项值" οnclick="SetSelect()" /> <input id="Button1" type="button" value="添加Option" οnclick="AddSelectOptions()" /> <input id="Button2" type="button" value="移除选中项" οnclick="RemoveSelectOptions()" /> <input id="Button3" type="button" value="清空下拉框" οnclick="ClearSelectOptions()" /> </div> <div> <input id="text1" name="text1" type="text" value="文本框" /> <input id="btnGetText" type="button" value="获取Text值" οnclick="GetText()" /> <input id="btnSetText" type="button" value="设置Text值" οnclick="SetText()" /> </div> </form> </body> </html>
