jQuery表单域中常用的应用
1、文本框
<input type="text" value="文本框" id="text" />
var text = $("#text"); text.focus(function() { if(text.val() == this.defaultValue) { $(this).val(‘‘).css({ ‘background‘: ‘#f9f9f9‘ }) } }).blur(function() { if(text.val() == ‘‘) { $(this).val(this.defaultValue); } $(this).css({ ‘background‘: ‘#fff‘ }) }) // text文本框获取和失去焦点改变样式 // html DOM defaultValue属性设置或返回文本框的初始内容,使用jQueryDOM元素无法获取defaultValue值,所以这里用的javascript调用的方法this.defaultValue
2、单选按钮
单选按钮是一组互斥选项按钮中的一个。当一个按钮被选中,之前选中的按钮变为非选中。
checked属性可以设置或返回某个单选按钮是否被选中。
语法:radioObject.checked = true | false;
input标签单选按钮必须带有value属性
var boolCheck = $("input:radio[name=‘onepiece‘]").is(":checked"); //jQuery判断单选按钮是否选中状态 var val = $("input:radio[name=‘onepiece‘]:checked").val(); if(boolCheck) { alert(val); }else { alert("NULL"); }
3、复选框
语法使用、判断是否选中和单选按钮类似。
复选框常用的有全选功能,取消全选。
input标签复选框也必须带有value属性。
<input type="checkbox" name="op" value="1" />1 <input type="checkbox" name="op" value="2" />2 <input type="checkbox" name="op" value="3" />3 <input type="checkbox" name="op" value="4" />4 <input type="checkbox" name="op" value="5" />5 <input type="checkbox" name="op" value="6" />6 <span id="checkAll">全选</span> <span id="uncheckAll">取消全选</span> <span id="checkRev">反选</span> <script> $("#checkAll").click(function() { $("input[type=checkbox][name=op]").each(function() { $(this).prop("checked", true); }) }) $("#uncheckAll").click(function() { $("input[type=checkbox][name=op]").each(function() { $(this).prop("checked", false); }) }) $("#checkRev").click(function() { $("input[type=checkbox][name=op]").each(function() { $(this).prop("checked", !$(this).prop("checked")); }) }) </script>
4、select下拉框
select对象表示一个表单中的一个下拉列表。
获取option中的value和文本内容分别用到$("option").val(); $("opiont").text()。
设置选中的方法$("option:last").prop("selected", true);或$("option:last").prop("selected", "selected");
删除option中的某一项用remove()方法。
在select中添加一个option选项append() prepend()可用。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。