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()可用。

 

转载于:https://www.cnblogs.com/wanbi/p/4285188.html