jQuery Html控件基本操作(日常收集整理)
闲来无聊，收集总结一下jQuery常用操作，希望对新手有用。
基于jquery1.3.2
<!--<scripttype="text/javascript"src="jquery/jquery-1.3.2.js"></script>--> <!--<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"type="text/javascript"></script>--> <scriptsrc="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代码：
文本框：
<inputtype="text"id="txtNum"/> <inputtype="button"value="给文本框赋值"id="btnTextSet"/><inputtype="button"value="获取文本框值"id="btnTextGet"/>
2.Span
//span
$("#btnSpanSet").click(function(){
$("#spanId").html("大家好");
});
$("#btnSpanGet").click(function(){
alert($("#spanId").html());
})
html代码
span标签：
<spanid="spanId"></span><inputtype="button"value="给span标签赋值"id="btnSpanSet"/><inputtype="button"value="获取span标签内容"id="btnSpanGet"/>
3.下拉框：
//下拉框
$("#btnSelectText").click(function(){
alert($("#ddlBookoption:selected").text());
});
$("#btnSelectValue").click(function(){
alert($("#ddlBookoption:selected").val());
});
$("#btnClearSelect").click(function(){
$("#ddlBook").empty();//清空下拉列表
});
$("#ddlBook").change(function(){//添加change事件
varval=$("#ddlBook").val();//获取Select选择的Value
vartext=$("#ddlBookoption:selected").text();//获取Select选择的Text
varcheckIndex=$("#ddlBook").get(0).selectedIndex;//获取Select选择的索引值
varmaxIndex=$("#ddlBookoption:last").attr("index");//获取Select最大的索引值
alert(text);
});
$("#btnSelectAppend").click(function(){
$("#ddlBook").append("<optionvalue=\"5\">物理</option>");//为Select追加一个Option(下拉项)
});
$("#btnSelectPreAppend").click(function(){
$("#ddlBook").prepend("<optionvalue=\"0\">请选择</option>");//为Select插入一个Option(第一个位置)
});
html源码
下拉框：
<selectid="ddlBook"> <optionvalue="1">语文</option> <optionvalue="2">数学</option> <optionvalue="3">英语</option> <optionvalue="4">政治</option> </select> <inputtype="button"value="获取下拉框选中的值"id="btnSelectText"/><inputtype="button"value="获取下拉框选中的value"id="btnSelectValue"/> <inputtype="button"value="清空下拉框"id="btnClearSelect"/><inputtype="button"value="后面追加选项"id="btnSelectAppend"/> <inputtype="button"value="第一个位置插入"id="btnSelectPreAppend"/>
4.radio单选框
//radio单选框
$("#btnRadioValue").click(function(){
//alert($("input:radio[type='radio'][checked]").val());
alert($("input:radio[type='radio'][name=IsEnable][checked]").val());//这是jquery1.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控件：
是<inputtype="radio"value="1"checked="checked"name="IsEnable"/>否<inputtype="radio"value="0"name="IsEnable"/> <inputtype="button"value="获取Radio选中的值"id="btnRadioValue"/><inputtype="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(){
varstr="";
$("input[name='checkbox']:checkbox:checked").each(function(){
str+=($(this).val()+"\r");
});
alert(str);
});
html源码：
复选框：
<inputtype="button"id="btn1"value="全选"/> <inputtype="button"id="btn2"value="取消全选"/> <inputtype="button"id="btn3"value="选中所有奇数"/> <inputtype="button"id="btn4"value="反选"/> <inputtype="button"id="btn5"value="获得选中的所有值"/> <br> <inputtype="checkbox"name="checkbox"value="checkbox1"/>checkbox1 <inputtype="checkbox"name="checkbox"value="checkbox2"/>checkbox2 <inputtype="checkbox"name="checkbox"value="checkbox3"/>checkbox3 <inputtype="checkbox"name="checkbox"value="checkbox4"/>checkbox4 <inputtype="checkbox"name="checkbox"value="checkbox5"/>checkbox5 <inputtype="checkbox"name="checkbox"value="checkbox6"/>checkbox6 <inputtype="checkbox"name="checkbox"value="checkbox7"/>checkbox7 <inputtype="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源码：
按钮：
<inputtype="button"id="btn"value="我是按钮"/><inputtype="button"id="btnHide"value="隐藏按钮"/>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery操作Html控件</title>
<!--<scripttype="text/javascript"src="jquery/jquery-1.3.2.js"></script>-->
<!--<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"type="text/javascript"></script>-->
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"type="text/javascript"></script>
<scripttype="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($("#ddlBookoption:selected").text());
});
$("#btnSelectValue").click(function(){
alert($("#ddlBookoption:selected").val());
});
$("#btnClearSelect").click(function(){
$("#ddlBook").empty();//清空下拉列表
});
$("#ddlBook").change(function(){//添加change事件
varval=$("#ddlBook").val();//获取Select选择的Value
vartext=$("#ddlBookoption:selected").text();//获取Select选择的Text
varcheckIndex=$("#ddlBook").get(0).selectedIndex;//获取Select选择的索引值
varmaxIndex=$("#ddlBookoption:last").attr("index");//获取Select最大的索引值
alert(text);
});
$("#btnSelectAppend").click(function(){
$("#ddlBook").append("<optionvalue=\"5\">物理</option>");//为Select追加一个Option(下拉项)
});
$("#btnSelectPreAppend").click(function(){
$("#ddlBook").prepend("<optionvalue=\"0\">请选择</option>");//为Select插入一个Option(第一个位置)
});
//radio单选框
$("#btnRadioValue").click(function(){
//alert($("input:radio[type='radio'][checked]").val());
alert($("input:radio[type='radio'][name=IsEnable][checked]").val());//这是jquery1.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(){
varstr="";
$("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>
文本框：<inputtype="text"id="txtNum"/>
<inputtype="button"value="给文本框赋值"id="btnTextSet"/><inputtype="button"value="获取文本框值"id="btnTextGet"/>
<br/><br/>
span标签：<spanid="spanId"></span><inputtype="button"value="给span标签赋值"id="btnSpanSet"/><inputtype="button"value="获取span标签内容"id="btnSpanGet"/>
<br/><br/>
下拉框：
<selectid="ddlBook"> <optionvalue="1">语文</option> <optionvalue="2">数学</option> <optionvalue="3">英语</option> <optionvalue="4">政治</option> </select> <inputtype="button"value="获取下拉框选中的值"id="btnSelectText"/><inputtype="button"value="获取下拉框选中的value"id="btnSelectValue"/> <inputtype="button"value="清空下拉框"id="btnClearSelect"/><inputtype="button"value="后面追加选项"id="btnSelectAppend"/> <inputtype="button"value="第一个位置插入"id="btnSelectPreAppend"/> <br/><br/>
radio控件：
是<inputtype="radio"value="1"checked="checked"name="IsEnable"/>否<inputtype="radio"value="0"name="IsEnable"/> <inputtype="button"value="获取Radio选中的值"id="btnRadioValue"/><inputtype="button"value="选中Value为0的选项"id="btnRadioSet"/> <br/><br/>
复选框：
<inputtype="button"id="btn1"value="全选"/> <inputtype="button"id="btn2"value="取消全选"/> <inputtype="button"id="btn3"value="选中所有奇数"/> <inputtype="button"id="btn4"value="反选"/> <inputtype="button"id="btn5"value="获得选中的所有值"/> <br> <inputtype="checkbox"name="checkbox"value="checkbox1"/>checkbox1 <inputtype="checkbox"name="checkbox"value="checkbox2"/>checkbox2 <inputtype="checkbox"name="checkbox"value="checkbox3"/>checkbox3 <inputtype="checkbox"name="checkbox"value="checkbox4"/>checkbox4 <inputtype="checkbox"name="checkbox"value="checkbox5"/>checkbox5 <inputtype="checkbox"name="checkbox"value="checkbox6"/>checkbox6 <inputtype="checkbox"name="checkbox"value="checkbox7"/>checkbox7 <inputtype="checkbox"name="checkbox"value="checkbox8"/>checkbox8 <br/><br/>
按钮：
<inputtype="button"id="btn"value="我是按钮"/><inputtype="button"id="btnHide"value="隐藏按钮"/> <br/><br/> </body> </html>
关于jqueryhtml控件基本操作相关知识就给大家介绍这么多，希望对大家有所帮助！