html 按钮获取文本框,jQuery Html控件基本操作(日常收集整理)

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

基于jquery 1.3.2

1.文本框

//文本框

$("#btnTextGet").click(function(){

alert($("#txtNum").val());

});

$("#btnTextSet").click(function(){

$("#txtNum").attr("value",'123456');//赋值

//$("#txtNum").val("123456");//赋值

});

html代码：

文本框：

2.Span

//span

$("#btnSpanSet").click(function(){

$("#spanId").html("大家好");

});

$("#btnSpanGet").click(function(){

alert($("#spanId").html());

})

html代码

span标签：

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("物理"); //为Select追加一个Option(下拉项)

});

$("#btnSelectPreAppend").click(function(){

$("#ddlBook").prepend("请选择"); //为Select插入一个Option(第一个位置)

});

html源码

下拉框：

语文

数学

英语

政治

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控件：

是 否

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

复选框：

checkbox1

checkbox2

checkbox3

checkbox4

checkbox5

checkbox6

checkbox7

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

按钮：

JQuery操作Html控件

$(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("物理"); //为Select追加一个Option(下拉项)

});

$("#btnSelectPreAppend").click(function(){

$("#ddlBook").prepend("请选择"); //为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();//这一句就可以实现上面的功能

});

});

文本框：

span标签：

下拉框：

语文

数学

英语

政治

radio控件：

是 否

复选框：

checkbox1

checkbox2

checkbox3

checkbox4

checkbox5

checkbox6

checkbox7

checkbox8

按钮：

关于jquery html控件基本操作相关知识就给大家介绍这么多，希望对大家有所帮助！