03.1 JavaWeb-JQuery练习实例总结

1.实现全选与全部选框

$(function(){
    $("#judge").click(function(){
        if($("#judge").is(":checked")){
            $(".hobby").prop('checked','true');
        }
        alert($("#judge").is(":checked"));
    });
});

2.实现表格悬停效果

$(function(){
    //设置表格的奇数行和偶数行的背景颜色
    $("table tr:odd").css("background-color","rgb(199, 198, 198)");
    $("table tr:even").css("background-color","rgb(234, 232, 232)");
    var $color;
    //获取所有tr元素绑定hover事件
    $("table tr").hover(function(){
        //获取背景颜色
        $color = $(this).css("background-color");
        //设置背景颜色
        $(this).css("background","rgb(109, 109, 109)");
    },function(){
        $(this).css("background",$color);
    });
});

其中用到的知识点：
$("table tr:odd")	通过 $() 函数选择元素
$("table tr:odd")、$("table tr:even")	选择表格中的奇数行、偶数行
.css("background-color", "rgb(199, 198, 198)")	通过CSS 操作，设置背景颜色
.hover()   事件绑定	为元素绑定hover事件，其中包括鼠标进入和鼠标离开两个动作
this	返回当前的对象

3.用jQuery优化学生信息管理

$(function(){
    $("#student").on("click",".bt1",function(){
        $(this).closest("tr").remove();
    })

    $("#bt2").click(function(){
        var $name = $("#inputname").val();
        var $phone = $("#inputphone").val();
        var $school = $("#inputschool").val();
        if($.trim($name) == ""){
            alert("姓名不可为空");
            return;
        }
        if($.trim($phone) == ""){
            alert("手机号不可为空");
            return;
        }
        if($.trim($school) == ""){
            alert("学校不可为空");
            return;
        }
        $("#thtr").after(""+$name+""+$phone+""+$school+"删除")
        $("#inputname").val("");
        $("#inputphone").val("");
        $("#inputschool").val("");
    })
});