這篇文章主要介紹了jQuery Html控件基本操作(日常收集整理)的相關(guān)資料,需要的朋友可以參考下

收集總結(jié)一下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標簽內(nèi)容" 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">數(shù)學</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');//選中所有奇數(shù)

});

$("#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="選中所有奇數(shù)"/>

<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();//這一句就可以實現(xiàn)上面的功能

});

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');//選中所有奇數(shù)

});

$("#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();//這一句就可以實現(xiàn)上面的功能

});

});

</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標簽內(nèi)容" id="btnSpanGet" />

<br /><br />

下拉框：

<select id="ddlBook">

<option value="1">語文</option>

<option value="2">數(shù)學</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="選中所有奇數(shù)"/>

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

關(guān)于jquery html控件基本操作相關(guān)知識就給大家介紹這么多，希望對大家有所幫助！