js-day06-jQuery事件和DOM操作-练习题

jQuery事件绑定

js中绑定事件,三种方式:

方式1: 直接在元素上,增加onXxx事件属性.
　　<button onclick="alert(1);">点我</button>
方式2:获取元素对象,再设置onXxx事件属性.
　　<button id="btn">点我</button>
　　document.getElementById("btn").onclick=function(e){
　　　　//TODO
　　}
方式3:使用addEventListener/attachEvent
　　IE9之前: 只支持attachEvent("eventType",fn);
　　　　document.getElementById("btn").attachEvent("onclick",function(){ TODO });
　　W3C/IE9之上: 支持addEventListener
　　　　document.getElementById("btn").addEventListener("click",function(){ TODO });

在jQuery中如何绑定事件:
通过bind函数:
　　$("#btn1").bind("click",function(){
　　　alert('点击按钮1');
　　});
取消绑定事件:通过unbind函数.
$(":button").unbind();//把所有按钮上所有事件都取消绑定.
$(":button").unbind("click");//取消所有按钮上的click事件.
--------------------------------------------------------------------------------------------------------
在jQuery中,为绑定事件提供了更简单的方式,其底层和上述相同.
jQuery对象.xxx(fn);
$("#btn1").clkick(function(){
//TODO
});

并且可以为同一个元素绑定多次相同的事件.

//文档加载完毕执行:
window.onload=function(){
　　//文档加载完毕之后,就执行这里
};
只能使用一次.
-------------------------------------------------------------
传统写法:
　　$(document).ready(function(){
　　　// TODO
　　});
简写版本:
　　$(function(){
　　　// TODO
　　});
可以使用多次.

jQuery的DOM操作

$(function() {

    $("#test_append").click(function() {
        // append(content) 向每个匹配的元素内部追加内容。
        //父.append(子),插入在父元素的最后的位置
        //1.插入字符串
        //$("#div1").append("<span>秀</span>");
        //2.插入DOM对象
        //$("#div1").append(document.getElementById("b1"));
        //3.插入jQuery对象
        $("#div1").append($("#b1"));
    });

    $("#test_appendTo").click(function() {
        // appendTo 把所有匹配的元素追加到另一个指定的元素元素集合中。
        //子.appendTo(父)
        $("#b1").appendTo($("#div1"));
    });

    $("#test_prepend").click(function() {
        // prepend 向每个匹配的元素内部前置内容。
        $("#div1").prepend($("#b1"));
    });

    $("#test_prependTo").click(function() {
        // 把所有匹配的元素前置到另一个、指定的元素元素集合中。
        $("#b1").prependTo($("#div2"));
    });

});

$(function() {
    $("#test_after").click(function() {
        // 在每个匹配的元素之后插入内容。
        //大哥.after(小弟)
        $("div").after($("#b1"));
    });

    $("#test_before").click(function() {
        // 在每个匹配的元素之前插入内容。
        //小弟.before(大哥)
        $("div").before($("#b1"));
    });
    $("#test_insertAfter").click(function() {
        // 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
        //小弟.insertAfter(大哥)
        $("#b1").insertAfter($("div"));
    });
    $("#test_insertBefore").click(function() {
        // 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
        //大哥.insertBefore(小弟)
        $("#b1").insertBefore($("div"));
    });
});

$(function() {

    $("#btn").click(function(){
        alert("恩,删除我了?");
    });

    $("#test_removeNode").click(function() {
        /**
         * 从DOM中删除所有匹配的元素。 这个方法不会把匹配的元素从jQuery对象中删除，
         * 因而可以在将来再使用这些匹配的元素。
         * 但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
         * 使用detach删除该元素绑定的事件，附加的数据等就会被保留
         */
        //$("#ul li").remove();
        //$("#ul li").detach();
        //删除id为btn的元素之后再插入到ul之后
        //var btn = $("#btn").remove();
        var btn = $("#btn").detach();
        $("#ul").after(btn);

    });
    $("#test_emptyNode").click(function() {
        //document.getElementById("ul").innerHTML = "";
        //$("#ul").text("");
        $("#ul").empty();
    });
});

$(function() {

    $("#btn_clone").click(function() {
        alert("点击了我...");
    });

    $("#test_clone").click(function() {
        // 克隆匹配的DOM元素并且选中这些克隆的副本。
        //var clone = $("#btn_clone").clone();//不加参数true,不拷贝绑定的事件，附加的数据等
        var clone = $("#btn_clone").clone(true);//加参数true,拷贝绑定的事件，附加的数据等
        $("#ul").after(clone);

    });

    $("#test_replace1").click(function() {
        // replaceWith将所有匹配的元素替换成指定的HTML或DOM元素。
        //被替换对象.replaceWith(新对象)
        $(":button").replaceWith("<span style='color:red;'>蒂花之秀</span>")
    });

    $("#test_replace2").click(function() {
        // replaceAll用匹配的元素替换掉所有 selector匹配到的元素。
        //新对象.replaceAll(被替换对象)
        $("<span style='color:gray;'>我是松鼠航</span>").replaceAll($(":button"));
    });

});
$(function() {

    $("#test_getterAttr").click(function() {
        // jquery凡是取值的方法,如果是多个元素,那么只会取第一个元素的值.
        //console.debug($("div").attr("name"));//div1,只获取到了第一个元素的值
        $("div").attr("name", function(index,attrValue){
            console.debug(attrValue);
            return attrValue+"书航牛批";//给元素值添加内容再返回
        });
    });

    $("#test_setterAttr").click(function() {
        // jquery凡是设置值的方法,都是对所有元素操作.并且返回值都为操作jquery对象
        $("div").attr("style","background-color:gray");
    });
});
$(function() {
    $("#test_addClass").click(function() {
        // 为每个匹配的元素添加指定的类名。注意不要加"."
        $(":button").addClass("mybtn");
    });
    $("#test_removeClass").click(function() {
        // 为每个匹配的元素添加指定的类名。注意不要加"."
        $(":button").removeClass("mybtn");
    });

    $("#test_toggleClass").click(function() {
        // 如果存在（不存在）就删除（添加）一个类。
        $(":button").toggleClass("mybtn");
    });

    $("#test_hasClass").click(function() {
        // hasClass 判断是否纯在该Css
        //console.debug($("#test_hasClass").hasClass("mybtn"));
        //因为是判断当前按钮是否存在"mybtn"css所以可以使用this
        console.debug($(this).hasClass("mybtn"));
    });
});

jQuery的Ajax请求

传统的Ajax操作:
　　1:创建Ajax对象(XMLHttpRequest/ActiveXObject);
　　2:开启一个请求.
　　　ajax.open("get/post",url,true);
　　4:监听readystate改变的事件
　　　ajax.onreadystatechange=function(){
　　　　if(ajax,readyState == 4 && ajax.status == 200){
　　　　　处理正确的响应操作
　　　　}
　　}
　　3:发送Ajax请求:
　　　send([data]);

使用jQuery发送Ajax的GET请求,并传递参数.

案例:检查注册账号是否已经存在.

//简单使用jQuery对象发送Ajax请求,判断输入的用户名是否可用
$(function(){
    //给username绑定失去焦点事件
    /*
     * 传统绑定事件方式
     * $("#username").bind("blur",function(){
     *
     *    });
    */
    $("#username").blur(function(){
        //jQuery.get(url,data(参数),callback(回调函数))
        $.get("/ajax/getUsername.action",{username:$("#username").val()},function(data){
            $("#msg").text(data);
        });
    });
});

    //创建数组模拟数据库里面的用户名，使用Struts2框架
    List<String> names = Arrays.asList("will","server","ajax");

    public String execute() throws Exception {
        String msg = "账号名可用";
        //判断传入的值是否存在数组中
        if(names.contains(username)){
            msg = "账号已经存在！！！";
        }
        //设置响应编码
        ServletActionContext.getResponse().setCharacterEncoding("utf-8");
        //设置响应信息
        ServletActionContext.getResponse().getWriter().print(msg);
        return NONE;
    }

使用jQuery的Ajax发生POST请求,并传递参数.

案例:使用Ajax完成登陆操作.

//简单使用jQuery对象发送Ajax请求,登录判断
$(function(){
    //给按钮绑定点击事件
    $("#btn").click(function(){
        var username = $("#username").val();
        var password = $("#password").val();
        //console.debug(username+", "+password);
        //jQuery.post(url,data(参数),callback(回调函数),响应数据格式)
        $.post("/ajax/loginbyjQuery.action",
                {
                    username:username,
                    password:password
                },
                function(data){
                    if(data.success){
                        window.location.href="/jQuery/07_Ajax/post/welcome.html";
                    }else{
                        $("#msg").text(data.msg).css("color","red");
                    }
                },
                "json"
        );
    });
});

    public String execute() throws Exception {
        Map<String,Object> datas = new HashMap<>();
        if("admin".equals(username) && "123".equals(password)){
            datas.put("success", true);
        }else{
            datas.put("success", false);
            datas.put("msg", "登录失败");
        }
        //设置响应编码
        ServletActionContext.getResponse().setCharacterEncoding("utf-8");
        //设置响应信息
        ServletActionContext.getResponse().getWriter().print(JSON.toJSON(datas));
        return NONE;
    }

jQuery操作练习题

实现代码：

//是否全部选择复选框
function isAllChecked(checked){
    $(":checkbox[name='hobby']").prop("checked",checked);
}
$(function(){
    //全选
    $("#btn_checkYes").click(function(){
        isAllChecked(true);
    });
    //全不选
    $("#btn_checkNo").click(function(){
        isAllChecked(false);
    });
    //反选
    $("#btn_checkRe").bind("click",function(){
        $(":checkbox[name='hobby']").prop("checked", function(index,value){
            return !value;
        });
    });
    //全选:全不选
    $("#checkAll").click(function(){
        var checkedValue = $("#checkAll").prop("checked");
        if(checkedValue){
            isAllChecked(true);
        }else{
            isAllChecked(false);
        }
    });
});

实现代码：

//把某一边选中的选项移动到另一边
function this2other(srcSelect, targetSelect){
    $("#"+srcSelect+" option:selected").appendTo($("#"+targetSelect));
}

//把某一边所有的选项移动到另一边
function thisAll2other(srcSelect, targetSelect){
    $("#"+srcSelect+" option").appendTo($("#"+targetSelect));
}

实现代码：

$(function(){
    //增加用户
    $("#addUser").click(function(){
        var username=$("#username").val();
        var email=$("#email").val();
        var tel=$("#tel").val();
        var id=new Date().getTime();
        var tr="<tr id='"+id+"'>" +
                    "<td>"+username+"</td>" +
                    "<td>"+email+"</td>" +
                    "<td>"+tel+"</td>" +
                    "<td><a href='javascript:deleteUser("+id+");'>删除</a></td>" +
                "</tr>";
        $(tr).appendTo($("#userTbody"));
    });

    //删除所有
    $("#deleteAll").click(function(){
        $("#userTbody").text("");
    });
});

//删除单个用户
function deleteUser(id){
    $("#"+id).remove();
}

实现代码：

$(function(){
    $("#addMoreItem").click(function(){
        //拷贝id为productTbody的第一个tr
        var item = $("#productTbody tr:first").clone();
        //找到tr中所有的input元素,并且把其文本内容设置为空字符串
        item.find("input").val("");
        //把拷贝的tr追加到id为productTbody元素内
        item.appendTo($("#productTbody"));
    });
});

今日小结：