jQuery之基本Html控件操作

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

基于jquery 1.3.2

<!--<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>

 

1.文本框

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

 html代码：

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

 

2.Span

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

html代码

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

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源码

下拉框：
<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" />

 

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 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选择的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 />

下拉框：
<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 />
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" />

<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>