jQuery Html控制項基本操作(日常收集整理)，jquery基本操作

jQuery Html控制項基本操作(日常收集整理)，jquery基本操作

閑來無聊，收集總結一下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選擇的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(第一個位置)});

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選擇的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()+"\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> 

關於jquery html控制項基本操作相關知識就給大家介紹這麼多，希望對大家有所協助！

您可能感興趣的文章:

• jquery下操作HTML控制項的實現代碼
• jquery擷取ASP.NET伺服器端控制項dropdownlist和radiobuttonlist產生用戶端HTML標籤後的value和text值
• jQuery阻止冒泡和HTML預設操作
• jquery操作HTML5 的data-*的用法執行個體分享