首页 / 脚本样式 / JavaScript / jQuery Html控件基本操作（日常收集整理）

<！--<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>--><！--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js" type="text/javascript"></script>--><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

//文本框$（"#btnTextGet"）.click（function（）{ alert（$（"#txtNum"）.val（））;}）;$（"#btnTextSet"）.click（function（）{ $（"#txtNum"）.attr（"value","123456"）;//赋值//$（"#txtNum"）.val（"123456"）;//赋值}）;

<input type="text" id="txtNum" /><input type="button" value="给文本框赋值" id="btnTextSet" /><input type="button" value="获取文本框值" id="btnTextGet" />

//span$（"#btnSpanSet"）.click（function（）{$（"#spanId"）.html（"大家好"）;}）;$（"#btnSpanGet"）.click（function（）{alert（$（"#spanId"）.html（））;}）

<span id="spanId"></span><input type="button" value="给span标签赋值" id="btnSpanSet" /><input type="button" value="获取span标签内容" id="btnSpanGet" />

//下拉框$（"#btnSelectText"）.click（function（）{alert（$（"#ddlBook option:selected"）.text（））;}）;$（"#btnSelectValue"）.click（function（）{alert（$（"#ddlBook option:selected"）.val（））;}）;$（"#btnClearSelect"）.click（function（）{$（"#ddlBook"）.empty（）;//清空下拉列表}）;$（"#ddlBook"）.change（function（）{//添加change事件var val=$（"#ddlBook"）.val（）; //获取Select选择的Valuevar text=$（"#ddlBook option:selected"）.text（）; //获取Select选择的Textvar checkIndex=$（"#ddlBook "）.get（0）.selectedIndex; //获取Select选择的索引值var maxIndex=$（"#ddlBook option:last"）.attr（"index"）; //获取Select最大的索引值 alert（text）;}）;$（"#btnSelectAppend"）.click（function（）{$（"#ddlBook"）.append（"<option value="5">物理</option>"）; //为Select追加一个Option（下拉项）}）;$（"#btnSelectPreAppend"）.click（function（）{$（"#ddlBook"）.prepend（"<option value="0">请选择</option>"）; //为Select插入一个Option（第一个位置）}）;

<select id="ddlBook"><option value="1">语文</option><option value="2">数学</option><option value="3">英语</option><option value="4">政治</option></select><input type="button" value="获取下拉框选中的值" id="btnSelectText" /><input type="button" value="获取下拉框选中的value" id="btnSelectValue" /><input type="button" value="清空下拉框" id="btnClearSelect" /><input type="button" value="后面追加选项" id="btnSelectAppend" /><input type="button" value="第一个位置插入" id="btnSelectPreAppend" />

//radio 单选框$（"#btnRadioValue"）.click（function（）{//alert（$（"input:radio[type="radio"][checked]"）.val（））;alert（$（"input:radio[type="radio"][name=IsEnable][checked]"）.val（））;//这是jquery 1.3的写法，在1.2版本下运行有问题//alert（$（"input[@type=radio][@checked]"）.val（））;//1.2的版本的写法}）;$（"#btnRadioSet"）.click（function（）{$（"input:radio[type="radio"][name=IsEnable]"）.attr（"checked","0"）;//设置value=0的项目为当前选中项}）;

是<input type="radio" value="1" checked="checked" name="IsEnable" /> 否<input type="radio" value="0" name="IsEnable" /><input type="button" value="获取Radio选中的值" id="btnRadioValue" /><input type="button" value="选中Value为0的选项" id="btnRadioSet" />

//复选框$（"#btn1"）.click（function（）{ $（"[name="checkbox"]"）.attr（"checked","true"）;//全选}）;$（"#btn2"）.click（function（）{$（"[name="checkbox"]"）.removeAttr（"checked"）;//取消全选}）;$（"#btn3"）.click（function（）{$（"[name="checkbox"]:even"）.attr（"checked","true"）;//选中所有奇数}）;$（"#btn4"）.click（function（）{$（"[name="checkbox"]"）.each（function（）{if（$（this）.attr（"checked"））{$（this）.removeAttr（"checked"）;}else{$（this）.attr（"checked","true"）; }}）;}）;$（"#btn5"）.click（function（）{var str="";$（"input[name="checkbox"]:checkbox:checked"）.each（function（）{ str+=（$（this）.val（）+"
"）;}）;alert（str）;}）;

<input type="button" id="btn1" value="全选"/><input type="button" id="btn2" value="取消全选"/><input type="button" id="btn3" value="选中所有奇数"/><input type="button" id="btn4" value="反选"/><input type="button" id="btn5" value="获得选中的所有值"/><br><input type="checkbox" name="checkbox" value="checkbox1" />checkbox1<input type="checkbox" name="checkbox" value="checkbox2" />checkbox2<input type="checkbox" name="checkbox" value="checkbox3" />checkbox3<input type="checkbox" name="checkbox" value="checkbox4" />checkbox4<input type="checkbox" name="checkbox" value="checkbox5" />checkbox5<input type="checkbox" name="checkbox" value="checkbox6" />checkbox6<input type="checkbox" name="checkbox" value="checkbox7" />checkbox7<input type="checkbox" name="checkbox" value="checkbox8" />checkbox8

//隐藏按钮 $（"#btnHide"）.click（function（）{if（$（"#btn"）.is（":hidden"））{$（"#btnHide"）.val（"隐藏按钮"）;//$（"#btn"）.show;//这种写法也可以$（"#btn"）.css（"display",""）; }else{$（"#btnHide"）.val（"显示按钮"）;//$（"#btn"）.hide（）;//这种写法也可以$（"#btn"）.css（"display","none"）;}//$（"#btn"）.toggle（）;//这一句就可以实现上面的功能}）;

<input type="button" id="btn" value="我是按钮"/><input type="button" id="btnHide" value="隐藏按钮"/><！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><title>JQuery操作Html控件</title><！--<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>--><！--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js" type="text/javascript"></script>--><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><script type="text/javascript">$（document）.ready（function（）{//文本框$（"#btnTextGet"）.click（function（）{ alert（$（"#txtNum"）.val（））;}）;$（"#btnTextSet"）.click（function（）{ $（"#txtNum"）.attr（"value","123456"）;//赋值//$（"#txtNum"）.val（"123456"）;//赋值}）;//span$（"#btnSpanSet"）.click（function（）{$（"#spanId"）.html（"大家好"）;}）;$（"#btnSpanGet"）.click（function（）{alert（$（"#spanId"）.html（））;}）//下拉框$（"#btnSelectText"）.click（function（）{alert（$（"#ddlBook option:selected"）.text（））;}）;$（"#btnSelectValue"）.click（function（）{alert（$（"#ddlBook option:selected"）.val（））;}）;$（"#btnClearSelect"）.click（function（）{$（"#ddlBook"）.empty（）;//清空下拉列表}）;$（"#ddlBook"）.change（function（）{//添加change事件var val=$（"#ddlBook"）.val（）; //获取Select选择的Valuevar text=$（"#ddlBook option:selected"）.text（）; //获取Select选择的Textvar checkIndex=$（"#ddlBook "）.get（0）.selectedIndex; //获取Select选择的索引值var maxIndex=$（"#ddlBook option:last"）.attr（"index"）; //获取Select最大的索引值 alert（text）;}）;$（"#btnSelectAppend"）.click（function（）{$（"#ddlBook"）.append（"<option value="5">物理</option>"）; //为Select追加一个Option（下拉项）}）;$（"#btnSelectPreAppend"）.click（function（）{$（"#ddlBook"）.prepend（"<option value="0">请选择</option>"）; //为Select插入一个Option（第一个位置）}）;//radio 单选框$（"#btnRadioValue"）.click（function（）{//alert（$（"input:radio[type="radio"][checked]"）.val（））;alert（$（"input:radio[type="radio"][name=IsEnable][checked]"）.val（））;//这是jquery 1.3的写法，在1.2版本下运行有问题//alert（$（"input[@type=radio][@checked]"）.val（））;//1.2的版本的写法}）;$（"#btnRadioSet"）.click（function（）{$（"input:radio[type="radio"][name=IsEnable]"）.attr（"checked","0"）;//设置value=0的项目为当前选中项}）;//复选框$（"#btn1"）.click（function（）{ $（"[name="checkbox"]"）.attr（"checked","true"）;//全选}）;$（"#btn2"）.click（function（）{$（"[name="checkbox"]"）.removeAttr（"checked"）;//取消全选}）;$（"#btn3"）.click（function（）{$（"[name="checkbox"]:even"）.attr（"checked","true"）;//选中所有奇数}）;$（"#btn4"）.click（function（）{$（"[name="checkbox"]"）.each（function（）{if（$（this）.attr（"checked"））{$（this）.removeAttr（"checked"）;}else{$（this）.attr（"checked","true"）; }}）;}）;$（"#btn5"）.click（function（）{var str="";$（"input[name="checkbox"]:checkbox:checked"）.each（function（）{ str+=（$（this）.val（）+"
"）;}）;alert（str）;}）;//隐藏按钮 $（"#btnHide"）.click（function（）{if（$（"#btn"）.is（":hidden"））{$（"#btnHide"）.val（"隐藏按钮"）;//$（"#btn"）.show;//这种写法也可以$（"#btn"）.css（"display",""）; }else{$（"#btnHide"）.val（"显示按钮"）;//$（"#btn"）.hide（）;//这种写法也可以$（"#btn"）.css（"display","none"）;}//$（"#btn"）.toggle（）;//这一句就可以实现上面的功能}）;}）;</script></head><body>文本框：<input type="text" id="txtNum" /><input type="button" value="给文本框赋值" id="btnTextSet" /><input type="button" value="获取文本框值" id="btnTextGet" /><br /><br />span标签：<span id="spanId"></span><input type="button" value="给span标签赋值" id="btnSpanSet" /><input type="button" value="获取span标签内容" id="btnSpanGet" /><br /><br />

<select id="ddlBook"><option value="1">语文</option><option value="2">数学</option><option value="3">英语</option><option value="4">政治</option></select><input type="button" value="获取下拉框选中的值" id="btnSelectText" /><input type="button" value="获取下拉框选中的value" id="btnSelectValue" /><input type="button" value="清空下拉框" id="btnClearSelect" /><input type="button" value="后面追加选项" id="btnSelectAppend" /><input type="button" value="第一个位置插入" id="btnSelectPreAppend" /><br /><br />

是<input type="radio" value="1" checked="checked" name="IsEnable" /> 否<input type="radio" value="0" name="IsEnable" /><input type="button" value="获取Radio选中的值" id="btnRadioValue" /><input type="button" value="选中Value为0的选项" id="btnRadioSet" /><br /><br />

<input type="button" id="btn1" value="全选"/><input type="button" id="btn2" value="取消全选"/><input type="button" id="btn3" value="选中所有奇数"/><input type="button" id="btn4" value="反选"/><input type="button" id="btn5" value="获得选中的所有值"/><br><input type="checkbox" name="checkbox" value="checkbox1" />checkbox1<input type="checkbox" name="checkbox" value="checkbox2" />checkbox2<input type="checkbox" name="checkbox" value="checkbox3" />checkbox3<input type="checkbox" name="checkbox" value="checkbox4" />checkbox4<input type="checkbox" name="checkbox" value="checkbox5" />checkbox5<input type="checkbox" name="checkbox" value="checkbox6" />checkbox6<input type="checkbox" name="checkbox" value="checkbox7" />checkbox7<input type="checkbox" name="checkbox" value="checkbox8" />checkbox8<br /><br />

<input type="button" id="btn" value="我是按钮"/><input type="button" id="btnHide" value="隐藏按钮"/><br /><br /></body></html>