Day44 jQuery-2

最新推荐文章于 2022-01-19 19:28:05 发布

原创最新推荐文章于 2022-01-19 19:28:05 发布 · 208 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

HTML+CSS

JavaScript

本文详细介绍了jQuery的基础事件机制、动画效果、表格操作、表单校验等实用功能，并通过具体示例展示了简易计算器和闪图特效的实现过程。

01-jquery的事件机制学习

<html>
    <head>
        <title>jquery的事件机制学习</title>
        <meta charset="UTF-8"/>
        <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <!--
            jquery的事件机制：
                作用:
                    使用jQuery方式给HTML页面元素完成事件的添加和修改
                好处：
                    解耦
                注意：
                    事件的使用在页面载入时完成事件的添加和修改。
                页面载入事件：
                    作用：当HTML页面完成加载时触发函数指定的函数的执行，类似onload事件
                    使用：
                        $(dcoument).ready(function(){函数体})
                        $(function(){函数体})
                    特点:
                        可以同时声明多个函数，不会被覆盖。
                bind事件：
                    元素对象名.bind("事件名",fn)
                    作用：
                        给指定的元素添加调用指定函数的指定事件
                    使用:
                        结合页面载入事件使用。
                    特点：
                        可以给元素对象多次添加事件，并且同类型事件不会覆盖。
                one事件：
                    元素对象名.one("事件名",fn)
                    作用:给元素添加一次性事件。结合页面载入事件使用。
                    特点：
                        事件被触发一次后即销毁。
                unbind事件：
                    元素对象名.unbind("事件名")
                    作用：将指定的元素对象的指定的事件（解绑）删除。
                trigger事件：
                    元素对象名.trigger("事件名")
                    作用：将指定的元素的指定事件触发执行。
                指明事件名添加事件：
                    元素对象名.事件名(fn)
                    作用：给指定的元素添加指定的事件。




        -->
        <script type="text/javascript">
            //页面载入事件
                //js方式：
                    window.onload=function(){
                        alert("哈哈");
                    }
                    window.onload=function(){
                        alert("嘿嘿");
                    }
                //jQuery方式：
                    $(document).ready(function(){
                        alert("页面加载完成啦");
                    })

                    $(document).ready(function(){
                        alert("页面加载完成啦111");
                    })
                    //简写方式
                    $(function(){
                        alert("是因为今天元宵节不放假，你们才这么低落的吗？");
                    })
            //bind事件
                $(function(){
                    //给按钮添加单击事件
                        $("#btn").bind("click",function(){
                            alert("测试bind绑定1");
                        })
                        $("#btn").bind("click",function(){
                            alert("测试bind绑定2");
                        })
                        $("#btn").bind("click",function(){
                            alert("测试bind绑定3");
                        })
                    //给按钮添加one事件
                        $("#btn2").one("click",function(){
                            alert("我是一次性事件");
                        })
                    //unbind--解绑事件
                    $("#btn3").bind("click",function(){
                        $("#btn").unbind("click");
                        $("#btn2").unbind("click");
                    })
                    //trigger 触发事件
                    $("#btn4").bind("click",function(){
                        $("input[type=button]:not(input[type=button]:last)").trigger("click")
                    })
                    //指明事件名
                    $("#btn5").click(function(){
                        alert("别回味了，不是你，代入感不要太强");
                    })
                })



        </script>
    </head>
    <body>
        <h3>jQuery的事件机制学习</h3>
        <hr />
        <input type="button" id="btn" value="测试bind"/>
        <input type="button" id="btn2" value="测试one"/>
        <input type="button" id="btn3" value="测试unbind"/>
        <input type="button" id="btn4" value="测试trigger"/>
        <input type="button" id="btn5" value="指明事件名"/>
    </body>
</html>

02-jQuery的动画效果

<html>
    <head>
        <title>jquery的动画效果</title>
        <meta charset="UTF-8"/>
        <!--声明css代码域-->
        <style type="text/css">
            #div01{
                height: 400px;
                background-color: orange;
                /*隐藏div*/
                display: none;
            }
            #div02{
                height: 400px;
                background-color: darkmagenta;
            }
        </style>
        <!--引入jQuery-->
        <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                $("#div01").show(2000);
                $("#div02").hide(2000);
                $("div").toggle(2000);
                $("#div01").slideDown(2000);
                $("#div02").slideUp(2000);
                $("#div02").slideToggle(2000);
                $("#div01").fadeOut(2000);
                $("#div01").fadeIn(2000);
            })
        </script>
    </head>
    <body>
        <div id="div01">

        </div>
        <div id="div02">

        </div>
    </body>
</html>

03-jquery操作表格

<html>
    <head>
        <title>操作表格</title>
        <meta charset="UTF-8"/>
        <style type="text/css">
            table{
                border: solid 1px;
            }
            tr{
                height: 35px;
            }
            td{
                width: 50px;
                border: solid 1px;
            }
        </style>
        <!--引入jquery-->
        <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <!--
            jQuery事件机制
            常用的jQuery函数：
                prop("属性名")//返回属性的状态
                prop("属性名","值")//重新赋值
                each(fn)        //遍历jQuery元素对象集合，并给每个对象执行一个指定的函数
                parents("标签名")//获取指定的祖先元素对象
        -->
        <script type="text/javascript">
            $(function(){
                //全选
                $("#btn1").click(function(){
                    //获取checkbox元素对象
                    $("input[type=checkbox]").prop("checked","true");

                })
                //反选
                $("#btn2").click(function(){
                    //获取checkbox元素对象
                    $("input[type=checkbox]").each(function(){
                        $(this).prop("checked",!$(this).prop("checked"));
                    })

                })
                //删除选中行
                $("#btn3").click(function(){
                    $("input[type=checkbox]:checked").each(function(){
                        $(this).parents("tr").remove();
                    })

                })
                //添加    
                $("#btn4").click(function(){
                    $("tr:last").clone().appendTo("table");


                })
                //隔行变色
                $("#btn5").click(function(){
                    $("tr:even").css("background-color","orange");
                    $("tr:odd").css("background-color","darkcyan");
                })
            })
        </script>
    </head>
    <body>
        <h3>jquery操作表格</h3>
        <input type="button" id="btn1" value="全选" />
        <input type="button" id="btn2" value="反选" />
        <input type="button" id="btn3" value="删除" />
        <input type="button" id="btn4" value="添加" />
        <input type="button" id="btn5" value="隔行变色" />
        <hr />
        <table cellpadding="0px" cellspacing="0">
            <tr id="t">
                <td><input type="checkbox" name="" id="" value="" /></td>
                <td>1122222222</td>
                <td>333</td>
                <td>444</td>
                <td>55666</td>
                <td>666</td>
                <td>777</td>
                <td>8888</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id="" value="" /></td>
                <td>1122</td>
                <td>333</td>
                <td>444</td>
                <td>55666</td>
                <td>666</td>
                <td>777</td>
                <td>8888</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id="" value="" /></td>
                <td>1122</td>
                <td>333</td>
                <td>444</td>
                <td>55666</td>
                <td>666</td>
                <td>777</td>
                <td>8888</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id="" value="" /></td>
                <td>1122</td>
                <td>333</td>
                <td>444</td>
                <td>55666</td>
                <td>666</td>
                <td>777</td>
                <td>8888</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id="" value="" /></td>
                <td>1122</td>
                <td>333</td>
                <td>444</td>
                <td>55666</td>
                <td>666</td>
                <td>777</td>
                <td>8888</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id="" value="" /></td>
                <td>1122</td>
                <td>333</td>
                <td>444</td>
                <td>55666</td>
                <td>666</td>
                <td>777</td>
                <td>8888</td>
            </tr>
        </table>


    </body>
</html>

04-jquery表单校验

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表单校验</title>
        <!--

            技能点总结：
                1、事件机制
                2、is()   元素对象.is("选择器") 判断一个元素对象是否是要选择的元素对象。
                3、this 在jQuery事件机制中调用的函数中this代表当前jQuery元素对象
                        注意：this是js对象需要转为jQuery对象--$(this)
                4、js对象转换为jQuery对象：$(js对象)
                5、siblings("标签名") 获取指定的同级元素对象
                6、submit()事件，返回false表单不提交，返回true表单提交。
        -->
        <!--引入css-->
        <link rel="stylesheet" type="text/css" href="css/my.css"/>
        <!--引入jQuery-->
        <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <!--声明js代码域-->
        <script type="text/javascript">
            //页面加载成功，添加表单校验
            $(function(){          
                //校验用户名
                $("#uname").blur(function(){
                    checkData(this,/^[\u4e00-\u9fa5]{2,4}$/)
//                  //获取用户数据
//                  var data=$(this).val()
//                  //声明正则表达式
//                  var reg=/^[\u4e00-\u9fa5]{2,4}$/
//                  //校验
//                  if(data==""||data==null){
//                      $(this).next().html("*"+this.alt+"不能为空").css("color","red");
//                  }else if(reg.test(data)){
//                      $(this).next().html("*"+this.alt+"符合规则").css("color","green");
//                  }else{
//                      $(this).next().html("*"+this.alt+"不符合规则").css("color","red");
//                  }   
                })
                //校验密码
                $("#pwd").blur(function(){
                    checkData(this,/^[a-z]\w{5,7}$/)
                })
                //校验邮箱
                $("#mail").blur(function(){
                    checkData(this,/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/)
                })
                //校验手机号
                $("#phone").blur(function(){
                    checkData(this,/^1[3|4|5|6|7|8|9][0-9]\d{4,8}$/)

                })
                //校验个人介绍
                $("#intro").blur(function(){
                    //获取用户数据
                    var data=$(this).val();
                    //校验
                    if(data==""||data==null){
                        $(this).siblings("span").html("*个人介绍不能为空").css("color","red").addClass("error");
                    }else if(data.length<5){
                        $(this).siblings("span").html("*个人介绍符合规则").css("color","green").addClass("success");
                    }else{
                        $(this).siblings("span").html("*个人介绍不符合规则").css("color","red").addClass("error");
                    }   
                })
                //校验爱好
                $("input[name=fav]").click(function(){
                    if($("input[name=fav]:checked").length>0){
                        $("input[name=fav]:last").next().html("*爱好选择成功").css("color","green").addClass("success");
                    }else{
                        $("input[name=fav]:last").next().html("*爱好至少选择一个").css("color","red").addClass("error");
                    }
                })
                //校验是否同意协议
                $("#agree").click(function(){
//                  if($(this).prop("checked")){
//                      $("#sub").prop("disabled",false);
//                  }else{
//                      $("#sub").prop("disabled",true);
//                  }
                    $("#sub").prop("disabled",!$(this).prop("checked"));

                })
                //点击提交时校验全部
                $("form").submit(function(){
                    $("input[type=text]").trigger("blur");//触发用户名、邮箱、手机号
                    $("input[type=password]").trigger("blur");//触发密码
                    $("#intro").trigger("blur");//触发个人介绍
                    //校验爱好
                    if($("input[name=fav]:checked").length>0){
                        $("input[name=fav]:last").next().html("*爱好选择成功").css("color","green").addClass("success");
                    }else{
                        $("input[name=fav]:last").next().html("*爱好至少选择一个").css("color","red").addClass("error");
                    }
                    //获取错误提示span
                    if($(".error").length>0){
                        return false;
                    }else{
                        return true;
                    }
                })
                //声明公共校验
                function checkData(obj,reg){
                    //获取用户数据
                    var data=$(obj).val();
                    //校验
                    if(data==""||data==null){
                        $(obj).next().html("*"+obj.alt+"不能为空").css("color","red").addClass("error");
                    }else if(reg.test(data)){
                        $(obj).next().html("*"+obj.alt+"符合规则").css("color","green").addClass("success");
                    }else{
                        $(obj).next().html("*"+obj.alt+"不符合规则").css("color","red").addClass("error");
                    }   
                }

            })

        </script>
    </head>
    <body>
        <hr />
        <form action="#" method="get">
        <div id="showdiv">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>用户名:</td>
                <td>
                    <input type="text" name="uname" id="uname" value="" alt="用户名"/><span></span>
                </td>
            </tr>
            <tr>
                <td width="70px">密码:</td>
                <td width="310px">
                    <input type="password" name="pwd" id="pwd" value="" alt="密码"/><span></span>
                </td>
            </tr>
            <tr>
                <td>邮箱:</td>
                <td>
                    <input type="text" name="mail" id="mail" value="" alt="邮箱"/><span></span>
                </td>
            </tr>
            <tr>
                <td>手机号:</td>
                <td>
                    <input type="text" name="phone" id="phone" value="" alt="手机号"/><span></span>
                </td>
            </tr>
            <tr>
                <td>性别:</td>
                <td>
                    男: <input type="radio" name="sex" id="" value="1" checked="checked"/>
                    女: <input type="radio" name="sex" id="" value="0" />
                </td>
            </tr>
            <tr>
                <td>爱好:</td>
                <td>
                    唱歌<input type="checkbox" name="fav" id="" value="1" />
                    跳舞<input type="checkbox" name="fav" id="" value="2" />
                    打球<input type="checkbox" name="fav" id="" value="3" />
                    <span></span>
                </td>
            </tr>
            <tr>
                <td>籍贯:</td>
                <td>
                    <select name="address" id="">
                        <option value="1">北京</option>
                        <option value="2">上海</option>
                        <option value="3">商丘</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>个人介绍:</td>
                <td>
                    <textarea name="intro" id="intro" rows="4" cols="20"></textarea><br /><span></span>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="checkbox" name="" id="agree" value="" />是否同意协议
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" name="" id="sub" value="注册" disabled="disabled" />
                </td>
            </tr>
        </table>
        </div>
        </form>
    </body>
</html>

my.css:

/*设置body*/
body{background-color: gray;}
/*设置表格样式*/
table{margin: auto;margin-top: 10px;}
    tr{height: 35px;}
/*设置div样式*/
#showdiv{border: solid 1px; width: 400px; height: 450px;margin: auto;margin-top: 40px;
        border-radius: 10px;background-color: orange;
}

jQuery实现简易计算器

cls.css

h3{
    text-align: center;
}
body{
    background-color: gray;
}
#div1{
    margin: auto;
    border: solid 1px;
    width: 300px;
    height: 400px;
    background-color: pink;
    border-radius: 10px;
    text-align: center;
}
input[type=text]{
    width: 280px;
    height: 30px;
    margin-top:20px ;
    margin-bottom:20px ;
}
input[type=button]{
    width: 60px;
    height: 40px;
    margin: 5px;
    border-radius: 10px;
    font-size: 30px;
    margin-top: 25px;
    background-color: aquamarine;
}

cls.js:

$(function(){
    $("input[type=button]").click(function(){
        var value=$(this).val();
        switch(value){
            case "C":
             $("#t").val("");
                break;
            case "=":
            $("#t").val(eval($("#t").val()));
             break;
            default:
            $("#t").val($("#t").val()+value);
            break;
        }
    })

})

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>简易计算器</title>
        <link rel="stylesheet" type="text/css" href="css/cls.css"/>
        <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/cls.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <h3>简易计算器</h3>
        <div id="div1">
            <input type="text" name="" id="t" value="" /><br />
            <input type="button" id="" value="7" />
            <input type="button" id="" value="8" />
            <input type="button" id="" value="9" />
            <input type="button" id="" value="*" />
            <input type="button" id="" value="4" />
            <input type="button" id="" value="5" />
            <input type="button" id="" value="6" />
            <input type="button" id="" value="-" />
            <input type="button" id="" value="1" />
            <input type="button" id="" value="2" />
            <input type="button" id="" value="3" />
            <input type="button" id="" value="+" />
            <input type="button" id="" value="/" />
            <input type="button" id="" value="0" />
            <input type="button" id="" value="C" />
            <input type="button" id="" value="=" />
        </div>
    </body>
</html>

jQuery实现闪图

flash.css

#div1{
    margin: auto;
    margin-top: 50px;
    width: 300px;
    height: 300px;
    border: solid 1px;
    background-color: red;
}
#1{

}
body{
    background-color: gray;
    text-align: center;
}

flash.js:

$(function(){
    var id;
    $("#1").click(function(){
        id=window.setInterval(function(){
        var color=["red","green","yellow","pink","blue","black"];
        var num=Math.floor(Math.random()*6);
        $("#div1").css("background-color",color[num]);
        },500)
    })
    $("#2").click(function(){
        $("#div1").css("background-color","#808080");
    })
    $("#3").click(function(){
        window.clearInterval(id);
    })
    $("#4").click(function(){
        window.location.href="about:blank";
        window.close();
    })
})

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>闪图</title>
        <link rel="stylesheet" type="text/css" href="css/flash.css"/>
        <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/flash.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <input type="button" id="1" value="开始" />
        <input type="button" id="2" value="修改" />
        <input type="button" id="3" value="暂停" />
        <input type="button" id="4" value="关闭" />
        <div id="div1">

        </div>
    </body>
</html>

小结：

01-jQuery的事件机制学习
02-jQuery的动画效果
03-jQuery操作表格
04-jQuery表单校验
05-jQuery实现简易计算器
06-jQuery实现闪图
注意:

1.words： onload  ready   unbind  trigger   display   show   hide  toggle
slideToggle fadeOut  fadeIn     prop   parents   remove  checked  even  odd
val 真正的值   alt   prop  查看属性

2.HBuilder判断颜色是否为某个值：注意rgb值中间有空格
if($("span").css("color")=="rgb(255, 0, 0)"){
                        return false;
                    }else{
                        return true;
                    }
3.用jQuery给指定的标签属性值赋值
$("标签").val(要赋的值);
4.封装：相同的保留，不同的传参。

资料：jquery-1.9.1.js