jQuery Html控件基本操作(日常收集整理)_

1、jQuery Html控件基本操作(日常收集整理)_ 这篇文章主要介绍了jQuery Html控件基本操作(日常收集整理)的相关资料,需要的伴侣可以参考下 收集总结一下jQuery常用操作，盼望对新手有用。 基于jquery 1.3.2 !-script type=text/javascript src=jquery/jquery-1.3.2.js/script- !-script src= type=text/javascript/script- script src= type=text/javascript/script 1.文本框 /文本框 $(#btnTextGet).click(f

2、unction() 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).clic

3、k(function() $(#spanId).html(大家好); ); $(#btnSpanGet).click(function() alert($(#spanId).html(); ) html代码 span标签： span id=spanId/spaninput type=button value=给span标签赋值 id=btnSpanSet /input type=button value=猎取span标签内容 id=btnSpanGet / 3.下拉框： /下拉框 $(#btnSelectText).click(function() alert($(#ddlBook optio

4、n: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();

5、 /猎取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).cl

6、ick(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

7、=猎取下拉框选中的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:radiotype=radiochecked).val(); aler

8、t($(input:radiotype=radioname=IsEnablechecked).val();/这是jquery 1.3的写法，在1.2版本下运行有问题 /alert($(inputtype=radiochecked).val();/1.2的版本的写法 ); $(#btnRadioSet).click(function() $(input:radiotype=radioname=IsEnable).attr(checked,0);/设置value=0的项目为当前选中项 ); html源码： radio控件： 是input type=radio value=1 checked=che

9、cked 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).remove

10、Attr(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=; $(inputname

11、=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

12、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 i

13、nput 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).c

14、ss(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 l1/DTD/xhtml1-transition

15、al.dtd html xmlns=l head titleJQuery操作Html控件/title !-script type=text/javascript src=jquery/jquery-1.3.2.js/script- !-script src= type=text/javascript/script- script src= type=text/javascript/script script type=text/javascript $(document).ready(function() /文本框 $(#btnTextGet).click(function() alert($

16、(#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 opti

17、on: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()

18、; /猎取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).c

19、lick(function() $(#ddlBook).prepend(option value=0请选择/option); /为Select插入一个Option(第一个位置) ); /radio 单选框 $(#btnRadioValue).click(function() /alert($(input:radiotype=radiochecked).val(); alert($(input:radiotype=radioname=IsEnablechecked).val();/这是jquery 1.3的写法，在1.2版本下运行有问题 /alert($(inputtype=radiocheck

20、ed).val();/1.2的版本的写法 ); $(#btnRadioSet).click(function() $(input:radiotype=radioname=IsEnable).attr(checked,0);/设置value=0的项目为当前选中项 ); /复选框 $(#btn1).click(function() $(name=checkbox).attr(checked,true);/全选 ); $(#btn2).click(function() $(name=checkbox).removeAttr(checked);/取消全选 ); $(#btn3).click(funct

21、ion() $(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=; $(inputname=checkbox:checkbox:checked).each(function()

22、 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 /he

23、ad body 文本框：input type=text id=txtNum / input type=button value=给文本框赋值 id=btnTextSet /input type=button value=猎取文本框值 id=btnTextGet / br /br / span标签：span id=spanId/spaninput type=button value=给span标签赋值 id=btnSpanSet /input type=button value=猎取span标签内容 id=btnSpanGet / br /br / 下拉框： select id=ddlBook

24、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=btn

25、SelectAppend / 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