jQuery Html控件基本操做（很是實用）

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

//下拉框
$("#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(第一個位置)
});

//複選框
$("#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

//隱藏按鈕 
$("#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();//這一句就能夠實現上面的功能
});