WEB学习——JQury

1.what
　　Jquery它是javascript的一个轻量级框架，对javascript进行封装，它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。
2.how
　　Jquery它是一个库(框架)，要想使用它，必须先引入！

<script type="text/javascript" src="jqury库文件"></script>

　　　　jquery-1.8.3.js：一般用于学习阶段。
　　　　jquery-1.8.3.min.js：用于项目使用阶段
3.所有的jquery代码写在页面加载函数

$(function(){
    Jquery代码
}); 

4.获取元素

　JS:document.getElementById();
　JQ:$(“#id”);

5.Jquery对象与DOM对象转换
例如：向页面<span></span>标签的元素添加/修改信息

<script>
//js方式实现
function JSWrite(){
    //document.getElementById("span1").innerHTML="美美哒！";
    var spanEle = document.getElementById("span1");
    //DOM对象转换成JQ对象的第一种方式
    $(spanEle).html("美美哒！");
}

//JQ方法实现        
$(function(){
    /*document.getElementById("btn1").onclick = function(){
    document.getElementById("span1").innerHTML="帅帅哒！";
}*/
    $("#btn1").click(function(){
    //JQ对象转换成DOM对象的第一种方式
    //$("#span1")[0].innerHTML="呵呵哒！";
    //JQ对象转换成DOM对象的第二种方式
    $("#span1").get(0).innerHTML="呵呵哒！";
    });

});
</script>

6.效果

7.JQury选择器
　　1）基本选择器
　　id选择器：$(“#id名称”);
　　元素选择器：$(“元素名称”);
　　类选择器：$(“.类名”);
　　通配符：*
　　多个选择器共用(并集)

        <script>
            $(function(){
                $("#btn1").click(function(){
                    <!--选择为one的元素-->
                    $("#one").css("background-color","pink");
                });
                $("#btn2").click(function(){
                    <!--选择样式为mini的元素-->
                    $(".mini").css("background-color","pink");
                });
                $("#btn3").click(function(){
                    <!--选择所有的div元素-->
                    $("div").css("background-color","pink");
                });
                $("#btn4").click(function(){
                    <!--选择所有元素-->
                    $("*").css("background-color","pink");
                });
                $("#btn5").click(function(){
                    <!--选择id为two并且样式为mini的元素-->
                    $("#two .mini").css("background-color","pink");
                }); 
            });
        </script>       

　　2）层级选择器
　　ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
　　parent > child : 在给定的父元素下匹配所有的子元素(儿子)
　　prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)
　　prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)

        <script>
            $(function(){
                $("#btn1").click(function(){
                    <!--选择body中的所有的div元素-->
                    $("body div").css("background-color","pink");
                });
                $("#btn2").click(function(){
                    <!--选择body中的第一级的孩子-->
                    $("body>div").css("background-color","pink");
                });
                $("#btn3").click(function(){
                    <!--选择id为two的元素的下一个元素-->
                    $("#two+div").css("background-color","pink");
                });
                $("#btn4").click(function(){
                    <!--选择id为one的所有的兄弟元素-->
                    $("#one~div").css("background-color","pink");
                });
            }); 
        </script>

　　3）基本过滤选择器
　　$('li').first() 等价于：$(“li:first”)
　　

        <script>
            $(function(){
                $("#btn1").click(function(){
                    <!--body中的第一个div元素-->
                    $("div:first").css("background-color","pink");
                });
                $("#btn2").click(function(){
                    <!--body中的最后一个div元素-->
                    $("div:last").css("background-color","pink");
                });
                $("#btn3").click(function(){
                    <!--选择body中的奇数的div（按照顺序，不分父子）-->
                    $("div:odd").css("background-color","pink");
                });
                $("#btn4").click(function(){
                    <!--选择body中的偶数的div（按照顺序，不分父子）-->
                    $("div:even").css("background-color","pink");
                });
            });
        </script>

　　4）属性选择器

        <script>
            $(function(){
                $("#btn1").click(function(){
                    <!--选择有id属性的div-->
                    $("div[id]").css("background-color","pink");
                });
                $("#btn2").click(function(){
                    <!--选择有id属性的值为two的div-->
                    $("div[id='two']").css("background-color","pink");
                });
            }); 
        </script>

　　5）表单选择器
　　

        <script>
            $(function(){
                <!--选择所有input元素-->
                $("#btn1").click(function(){
                    $(":input").css("background-color","pink");
                });
                <!--选择文本框-->
                $("#btn2").click(function(){
                    $(":text").css("background-color","pink");
                });
            });
        </script>

8.数组遍历操作
　　方式1：
　

$(function(){
    // 全选/ 全不选
    $("#checkallbox").click(function(){
        var isChecked = this.checked;
        //使用对象访问的方式进行遍历，语法：$().each(function(){})
        $("input[name='hobby']").each(function(){
            this.checked = isChecked;
        });
    });
});

　　方式2：
　　

$.each( [0,1,2], function(i, n){
    //[0，1，2]是一个数组
    //i表示下标
    //n表示每次根据下标遍历到的数据
    alert( "Item #" + i + ": " + n );
});

9.文档处理操作
　　追加内容
　　　　apend: A.append(B) 将B追加到A的内容的末尾处
　　　　appendTo: A.appendTo(B) 将A加到B内容的末尾处，如果A是页面中的一个标签，即是把A标签和其内容添加到B中。

    <body>
        <script>
            $(function(){
                $("p").append("123") ;
                $("p").appendTo("div") ;
            });
        </script>

        <p>hello jqury</p>
        <div>viddiv</div>
    </body>
    <!--
        输出结果：
        viddiv
        hello jqury123
    -->

10.属性操作

　　
11.案例
　　案例1：使用JQ完成表格的隔行换色

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
<script>
    $(function(){
        //CSS文件中配置好even和odd两个class类
        $("tbody tr:even").addClass("even");
        $("tbody tr:odd").addClass("odd");
    });
</script>

　　案例2：使用JQ完成全选和全不选

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
    $(function(){
        //找到下面所有的复选框并设置属性checked()
        /*if($("#select")[0].checked==true){
            $(".selectOne").attr("checked",true)
        }*/
        $("#select").click(function(){
            //$(".selectOne").attr("checked",this.checked);
            //注意：attr在jquery1.11版本不适用，采用prop()来替代(在各个版本都适用)。
            $(".selectOne").prop("checked",this.checked);
        });
    });
</script>

　　3）使用JQ实现省市二级联动

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
    $(function(){
        //2.创建二维数组用于存储省份和城市
        var cities = new Array(3);
        cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
        cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
        cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
        cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");

        $("#province").change(function(){
            //10.清除第二个下拉列表的内容
            $("#city").empty();

            //1.获取用户选择的省份
            var val = this.value;
            //alert(val);
            //3.遍历二维数组中的省份
            $.each(cities,function(i,n){
                //alert(i+":"+n);
                //4.判断用户选择的省份和遍历的省份
                if(val==i){
                    //5.遍历该省份下的所有城市
                    $.each(cities[i], function(j,m) {
                        //alert(m);
                        //6.创建城市文本节点
                        var textNode = document.createTextNode(m);
                        //7.创建option元素节点
                        var opEle = document.createElement("option");
                        //8.将城市文本节点添加到option元素节点中去
                        $(opEle).append(textNode);
                        //9.将option元素节点追加到第二个下拉列表中去
                        $(opEle).appendTo($("#city"));
                    });
                }
            });

        });
    });
</script>

　　4）使用JQ完成下拉列表左右选择

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
    $(function(){
        /*1.选中单击按钮去右边*/
        $("#selectOneToRight").click(function(){
            $("#left option:selected").appendTo($("#right"));
        });

        /*2.单击按钮全部去右边*/
        $("#selectAllToRight").click(function(){
            $("#left option").appendTo($("#right"));
        });

        /*3.选中双击内容去右边*/
        $("#left option").dblclick(function(){
            $("#left option:selected").appendTo($("#right"));
        });
    });
</script>

　　5）表单验证插件——Validation
　　首先导入两个validation的库文件

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <!--引入validate插件js文件-->
        <script type="text/javascript" src="../js/jquery.validate.min.js" ></script>
        <!--引入国际化js文件-->
        <script type="text/javascript" src="../js/messages_zh.js" ></script>
        <script>
            $(function(){
                $("#registForm").validate({
                    rules:{
                        user:{
                            required:true,
                            minlength:3
                        },
                        password:{
                            required:true,
                            digits:true,
                            minlength:6
                        },
                        repassword:{
                            required:true,
                            equalTo:"[name='password']"
                        },
                        email:{
                            required:true,
                            email:true
                        },
                        username:{
                            required:true,
                            maxlength:5
                        },
                        sex:{
                            required:true
                        }
                    },
                    messages:{
                        user:{
                            required:"用户名不能为空!",
                            minlength:"用户名不得少于3位!"
                        },
                        password:{
                            required:"密码不能为空!",
                            digits:"密码必须是整数!",
                            minlength:"密码不得少于6位!"
                        },
                        repassword:{
                            required:"确认密码不能为空!",
                            equalTo:"两次输入密码不一致!"
                        },
                        email:{
                            required:"邮箱不能为空!",
                            email:"邮箱格式不正确!"
                        },
                        username:{
                            required:"姓名不能为空!",
                            maxlength:"姓名不得多于5位!"
                        },
                        sex:{
                            required:"性别必须勾选!"
                        }
                    },
                    errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label
                    success: function(label) { //验证成功后的执行的回调函数
                        //label指向上面那个错误提示信息标签label
                        label.text(" ") //清空错误提示消息
                            .addClass("success"); //加上自定义的success类
                    }
                });
            });
        </script>

<html部分代码>
<form action="#" method="get" id="registForm">
    <div id="father">
                        <div id="form2">
                            <table border="0px" width="100%" height="100%" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
                                <tr>
                                    <td colspan="2" >
                                        <font size="5">会员注册</font>&nbsp;&nbsp;&nbsp;USER REGISTER 
                                    </td>
                                </tr>
                                <tr>
                                    <td width="180px">
                                        <label for="user" >用户名</label>
                                    </td>
                                    <td>
                                        <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="user" size="35px" id="user"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        密码
                                    </td>
                                    <td>
                                        <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="password"  name="password" size="35px" id="password" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        确认密码
                                    </td>
                                    <td>
                                        <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="password" name="repassword" size="35px"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Email
                                    </td>
                                    <td>
                                        <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="email" size="35px" id="email"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        姓名
                                    </td>
                                    <td>
                                        <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="username" size="35px"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        性别
                                    </td>
                                    <td>
                                        <span style="margin-right: 155px;">
                                            <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="radio" name="sex" value="男"/>男
                                            <input type="radio" name="sex" value="女"/>女<em></em>
                                            <label for="sex" class="error" style="display: none;"></label>
                                        </span>

                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        出生日期
                                    </td>
                                    <td>
                                        <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="birthday"  size="35px"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        验证码
                                    </td>
                                    <td>
                                        <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="yanzhengma" />
                                        <img src="../img/yanzhengma.png" style="height: 18px;width: 85px;"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <input type="submit" value="注      册" height="50px"/>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </form>