Javaweb---JQuery基础知识2-优快云博客

1.jQuery的属性
1.1html: 相当于dom的inner HTML 它可以设置和获取起始标签和结束标签中的内容
1.2text() innertext一样它可以设置和获取起始标签和结束标签中的文本
1.3val() 和dom中的value一样它可以设置和获取表单项的 value 属性值

HTML代码/文本/值
html([val|fn]) a.html()取出a的html值 a.html(val) 让a的html值变为val
text([val|fn]) a.text()取出a的text值 a.text(val) 让a的文本值变为val
val([val|fn|arr]) a.val() 取出a的val值（input） a.val(v) 设置a的value值为v

// 批量操作单选
$(":radio").val(["radio2"]);
// 批量操作筛选框的选中状态
$(":checkbox").val(["checkbox3","checkbox2"]);
// 批量操作多选的下拉框选中状态
$("#multiple").val(["mul2","mul3","mul4"]);
// 操作单选的下拉框选中状态
$("#single").val(["sin2"]);
$("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]
);

attr() 可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled 等等
attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbj
prop() 可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等等

属性
attr(name|pro|key,val|fn)  
 1、a.attr('name')取出a的name值   2、a.attr("name","username")把a的name值设置为username
 
removeAttr(name) 
a.removeAttr('class')    移除a的class属性
prop(name|pro|key,val|fn)1.6+ 
1、a.prop('id')  取出a的id值   2、a.prop('id',"bj")  设置a的id值为bj
removeProp(name)1.6+
a.removeProp('class') 移除a的class属性

全选全不选练习:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            var $items = $(":checkbox[name=items]");
            var items = $("[name='items']");
            //1.全选按钮
            $("#checkedAllBtn").click(function () {
                var getallbt = $("input:checkbox").prop("checked",true);
            })
            //2.全不选按钮
            $("#checkedNoBtn").click(function () {
                var getallbt = $("input:checkbox").prop("checked",false);
            })
            //反选
            $("#checkedRevBtn").click(function () {
                var getallbt = $("input:checkbox[name = 'items']");
                getallbt.each(function () {
                    this.checked = !this.checked;
                })

                var sumnum = $("input:checkbox[name = 'items']").length;  //得到总共的小球数
                var num = $("input:checkbox[name = 'items']:checked").length;  //得到选中的小球数
                $("#checkedAllBox").prop("checked", sumnum == num);

            })

            //提交按钮
            $("#sendBtn").click(function(){
                $(":checkbox[name='items']:checked").each(function(){
                    alert(this.value);
                });
            });

            //全选/全不选复选框
            $("#checkedAllBox").click(function(){
                items.attr("checked",this.checked);
            });

            //全选/全不选复选框与items状态同步
            $("[name='items']").click(function(){
                var flag = $("[name='items']:checked").length==4;
                $("#checkedAllBox").attr("checked",flag);
            });

        })
    </script>
</head>
<body>
<form method="post" action="">

    你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选

    <br />
    <input type="checkbox" name="items" value="足球" />足球
    <input type="checkbox" name="items" value="篮球" />篮球
    <input type="checkbox" name="items" value="羽毛球" />羽毛球
    <input type="checkbox" name="items" value="乒乓球" />乒乓球
    <br />
    <input type="button" id="checkedAllBtn" value="全　选" />
    <input type="button" id="checkedNoBtn" value="全不选" />
    <input type="button" id="checkedRevBtn" value="反　选" />
    <input type="button" id="sendBtn" value="提　交" />
</form>
</body>
</html>