jQuery Html控件基本操作(日常收集整理)_Javascript教程-查字典教程网

闲来无聊，收集总结一下jQuery常用操作，希望对新手有用。

基于jquery 1.3.2

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

1.文本框

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

html代码：

文本框：

2.Span

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

html代码

span标签：

3.下拉框：

//下拉框 $("#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选择的Value var text=$("#ddlBook option:selected").text(); //获取Select选择的Text var 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(第一个位置) });

html源码

下拉框：

4.radio 单选框

//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的项目为当前选中项 });

html源码：

radio控件：

是<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" />

5.复选框

//复选框 $("#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()+"r"); }); alert(str); });

html源码：

复选框：

<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

6.按钮

//隐藏按钮 $("#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();//这一句就可以实现上面的功能 });

html源码：

按钮：

<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 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选择的Value var text=$("#ddlBook option:selected").text(); //获取Select选择的Text var 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()+"r"); }); 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 />

下拉框：

radio控件：

复选框：

按钮：

关于jquery html控件基本操作相关知识就给大家介绍这么多，希望对大家有所帮助！