zoukankan      html  css  js  c++  java
  • JQuery基础原理 与实例 验证表单 省市联动 文本框判空 单选 复选 判空 下拉判空 确认密码判等

    JQuery 基础原理

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <script src="js/jquery-1.11.0.min.js" type="text/javascript" ></script>
    <!--
            原来使用jquery(function(){})来表示window.onload(function(){})
            现在用$代替jquery(),节省代码$(function(){})
            1.DOM对象和JQuery对象互相不通用
            DOM 
            window.onload=function(){var input=document.getElementById("in");alert(input.value);}
            JQuery
            var $in=$("#in");
            alert($in.val()); JQuery中函数val()获得值,不能调用.value拿值
            2.把input变成JQuery对象
            var $in2=$("input");穿上马甲
            alert($in2.val());
            3.把Jquery对象变成Dom对象
            俗称脱马甲
            JQuery对象本质是存储多个DOM对象的数组
            $(JQuery对象)[0]=DOM对象
            例子
            var in2= $in2[0];
            alert(in2.value);
            4.JQuery最厉害的是 选择器 ,提供了N多种方式,与样式表css是一样的
            ../表示上一层文件夹
            id选择器
            $("#b1").click(function(){
                使用css函数修改
                $("#one").css("background","red");
                且支持方法调用链
                $("#one").css("background","red").css("color","green");
            });
            标签选择器
            $("#b2").click(function(){
                $("div").css("background","red");
            })
            类选择器
            $("#b3").click(function(){
                $(".mini").css("background","red");
            })
            多个选择的选择器,可以写两个,也可以用,分开
            $("#b4").click(function(){
                $("span").css("background","red");
                $("#two").css("background","red");
                $("span,#two").css("background","red");
            })
            
            二.层次选择器
            1.所有后代div
            $("#b1").click(function(){
                $("body div").css("background","red");
            })
            2.只找子div
            $("#b2").click(function(){
                $("body>div").css("background","red");
            })
            3.下一个弟弟是红色的,但是他儿子不是红的
            $("#b3").click(function(){
                $("#one+div").css("background","red");
            })
            4.同辈分的弟弟是红色的,但是他们儿子不是红的
            $("#b4").click(function(){
                $("#two~div").css("background","red");
            })
            5.同辈分的所有兄弟是红色的,不包括自己,但是他们儿子不是红的
            $("#b5").click(function(){
                $("#two").sibling("div").css("background","red");
            })
            
            三.属性选择器
            1.div中含有属性title
            $("#b1").click(function(){
                $("div[title]").css("background","red");
            })
            2.div所有title属性是test
            $("#b2").click(function(){
                $("div[title=test]").css("background","red");
            })
            3.div所有title属性不是test 其他都变
            $("#b3").click(function(){
                $("div[title!=test]").css("background","red");
            })
            4.div所有title属性是te开头
            $("#b4").click(function(){
                $("div[title^=te]").css("background","red");
            })
            5.div所有title属性是xt结尾
            $("#b5").click(function(){
                $("div[title$=est]").css("background","red");
            })
            6.div所有title属性含有es
            $("#b6").click(function(){
                $("div[title*=es]").css("background","red");
            })
            7.有id属性且有含有es
            $("#b7").click(function(){
                $("div[id][title*=es]").sibling("div").css("background","red");
            })
            
            三.基本过滤选择器
            1.div中的第一个
            $("#b1").click(function(){
                $("div:first").css("background","red");
            })
            2.div中的最后一个
            $("#b2").click(function(){
                $("div:last").css("background","red");
            })
            3.div class不为one
            $("#b3").click(function(){
                $("div:not(.one)").css("background","red");
            })
            4.div索引值为偶数 索引算子索引
            $("#b4").click(function(){
                $("div:even").css("background","red");
            })
            5.div索引值为奇数 索引算子索引
            $("#b5").click(function(){
                $("div:odd").css("background","red");
            })
            6.div索引值大于3的
            $("#b6").click(function(){
                $("div:gt(3)").css("background","red");
            })
            7.div索引值等于3的
            $("#b7").click(function(){
                $("div:eq(3)").css("background","red");
            })
            8.div索引值小于3的
            $("#b8").click(function(){
                $("div:lt(3)").css("background","red");
            })
            9.h1-h6
            $("#b9").click(function(){
                $(":header").css("background","red");
            })
            10.h1-h6
            $("#b10").click(function(){
                $(":animated").css("background","red");
            })
            
            四.基本过滤选择器
            1.可用 属性
            $("#b1").click(function(){
                var $input=("input[type=text]:enabled");
                alert($input.val());是拿值
                $input.val(1);传值就是赋值$input.val("随便");
                
            })
            2.不可用
            $("#b2").click(function(){
                var $input=("input[type=text]:disabled");
                alert($input.val());是拿值
                $input.val(1);传值就是赋值$input.val("随便");
                
            })
            3.复选框被选中
            $("#b3").click(function(){
                $("input[type=checkbox]:checked").css("background","red");
            })
            4.下拉菜单中被选中的选项
            $("#b4").click(function(){
                $("#job>option:selected").css("background","red");
                for(var i=0;i<$select.length;i++){
                    遍历变成DOM对象
                    var $text=$($select[i]).text();
                    alert($text);
                }
                html();也行,不传参获取,传参设置
                
            
            })
            5.div索引值为奇数 索引算子索引
            $("#b5").click(function(){
                $("div:odd").css("background","red");
            })
            
            
    -->
            
            
            
            <script type="text/javascript">
                $(function(){
    //                var $in=$("#in");
    //                alert($in.val());
                    
                    var $in2=$("input");
    //                alert($in2.val());
    
                    var in2= $in2[0];
                    alert(in2.value);
                    
                    /*增加动画效果*/
                    $("#mover").slideUp(6000,function(){});
                        
                })
                
            </script>
            <input type="text" value="swift" id="in"/>
            <div id="mover" width="100px" style="background-color: blue;">
                
            </div>
        </body>
    </html>

    JQuery 验证表单

    <!DOCTYPE html>
    <html>
        <meta charset="utf-8">
        <title></title>
        <head>
            
        <style type="text/css">
            .errorspan {
                color: red;
                font-size: 12px;
            }
        </style>
        <!--<script type="text/javascript">
            //定义一个正则 非空
            var reg = /^s*$/;
            
            //校验表单主方法
            function run(){
                clearSpan();//清空span校验信息 
                var flag1=checkNotNull("username");//用户名校验
                var flag2=checkNotNull("pwd");//密码校验
                var flag3=checkNotNull("pwd2");//确认密码校验
                var flag4=checkIschoice("utype");//用户类型校验
                var flag5=checkIsSelected("city");//所在城市校验
                var flag6=checkpwd(flag2,flag3);//验证密码和确认密码是否一致
                return flag1&&flag2&&flag3&&flag4&&flag5&&flag6;
            }
            //清空span校验信息
            function clearSpan(){
                document.getElementById("usernamespan").innerHTML="";
                document.getElementById("pwdspan").innerHTML="";
                document.getElementById("pwd2span").innerHTML="";
                document.getElementById("utypespan").innerHTML="";
                document.getElementById("cityspan").innerHTML="";
            }
            //通过元素ID进行元素非空判断
            function checkNotNull(nodeid){
                //获取表单元素
                var nodex = document.getElementById(nodeid);
                //获取span元素
                var spann = document.getElementById(nodeid+"span");
                if(reg.test(nodex.value)){
                    spann.innerHTML="不能为空";
                    return false;
                }else{
                    return true;
                }
            }
            
            //用户类型  radio   checked=true
            function checkIschoice(nodename){
                //获取表单元素
                var nodex = document.getElementsByName(nodename);
                //获取span元素(显示校验信息)
                var spann = document.getElementById(nodename+"span");
                
                //遍历数组
                for(var i=0;i<nodex.length;i++){
                    if(nodex[i].checked){
                        return true;
                    }
                }
                spann.innerHTML="不能为空";
                return false;
            }
            
            //所在城市校验     option value
            function checkIsSelected(nodeid){
                //获取select表单元素
                var nodex = document.getElementById(nodeid);
                //获取span元素
                var spann = document.getElementById(nodeid+"span");
                
                //获取select option子元素
                var options=nodex.options;
                //获取value
                var val=options[nodex.selectedIndex].value;
                
                //判断
                if(reg.test(val)){
                    spann.innerHTML="不能为空";
                    return false;
                }else{
                    return true;
                }
            }
            var cities = new Array(4);
            cities[0] = new Array("昌平","丰台","大兴","海淀","顺义","延庆");
            cities[1] = new Array("长春市","吉林市","松原市","延边市");
            cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
            cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
            cities[4] = new Array("南京市","苏州市","扬州市","无锡市");
            
            //通过选择的省,显示对应的所有的市
            function selectCity(index){
                //通过索引获得对应的所有的市
                var allCity = cities[index];
                // 获得city select 对象
                var cityObj = document.getElementById("city");
                cityObj.innerHTML = "<option value=''>----请-选-择-市----</option>";
                //遍历所有的市
                for(var i = 0 ; i < allCity.length ; i ++){
                    // 获得具体的市
                    var cityName = allCity[i];
                    // 创建option
                    var option = document.createElement("option");
                    // 创建文本节点
                    var textNode = document.createTextNode(cityName);
                    //将文本添加到option中
                    option.appendChild(textNode);
                    // 将option追加到select中
                    cityObj.appendChild(option);
                }
            }
            
            //校验密码和确认密码是否一致
            function checkpwd(a,b){
                var pwd = document.getElementById("pwd");
                var pwd2 = document.getElementById("pwd2");
                //获取span(显示校验信息)
                var pwd2span = document.getElementById("pwd2span");
                if(a&&b&&pwd.value!=pwd2.value){
                    //不一致
                    pwd2span.innerHTML="密码和确认密码不一致";
                    return false;
                }else{
                    return true;
                }
            }
        </script>-->
    
        <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
        </head>
    
        <body>
            <form action="#" method="get" id="f1" onsubmit="return run()">
                <table>
                    <tr>
                        <td>用户名</td>
                        <td><input type="text" name="username" id="username" />
                            <span id="usernamespan" class="errorspan"></span></td>
                    </tr>
                    <tr>
                        <td>密码</td>
                        <td><input type="password" name="pwd" id="pwd" />
                            <span id="pwdspan" class="errorspan"></span></td>
                    </tr>
                    <tr>
                        <td>确认密码</td>
                        <td><input type="password" name="pwd2" id="pwd2" />
                            <span id="pwd2span" class="errorspan"></span></td>
                    </tr>
                    <tr>
                        <td>用户类型</td>
                        <td><input type="radio" name="utype" value="vip" />vip<br/>
                            <input type="radio" name="utype" value="normal" />一般用户<br/>
                            <span id="utypespan" class="errorspan"></span>
                        </td>
                    </tr>
                    <tr>
                        <td>所在地区</td>
                        <td>
                            <select id="provinceId" onchange="selectCity(this.value)" style="150px">
                                <option value="">----请-选-择-省----</option>
                                <option value="0">北京</option>
                                <option value="1">吉林省</option>
                                <option value="2">山东省</option>
                                <option value="3">河北省</option>
                                <option value="4">江苏省</option>
                            </select>
                            <select id="city" style="150px">
                                <option value="">----请-选-择-市----</option>
                            </select>
                            <span id="cityspan" class="errorspan"></span>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="submit" value="注册提交" />
                            <input type="reset" value="重置" /></td>
                    </tr>
                </table>
            </form>
        </body>
        <script type="text/javascript">
            function run() {
                var flag1 = isnull("username");
                var flag2 = isnull("pwd");
                var flag3 = isnull("pwd2");
                var flag4 = ischoice("utype");
                var flag5 = isselect("city");
                var flag6= pwdconfirm(flag2,flag3)
    
                return flag1 && flag2 && flag3&& flag4 && flag5&& flag6;
            }
    
            function isnull(id) {
                if(!$("#" + id).val()) {
                    $("#" + id + "span").html("<b>不能为空</b>");
                    return false;
                } else {
                    return true;
                }
            }
    
            function ischoice(id) {
                var choice = $("input[name=" + id + "]");
                for(var x = 0; x < choice.length; x++) {
                    if(choice[x].checked) {
                        return true;
                    }
                }
                $("#" + id + "span").html("<b>用户类型没有选择</b>");
                return false;
            }
    
    //        var regex=/^s*$/;
            function isselect(id) {
                var select = $("#" + id);
    //            alert(regex.test(select.val()));
                if(select.val()=="") {
                    $("#" + id + "span").html("<b>所在城市没有选择</b>");
                    return false;
                }
                return true;
            }
    
            var cities = [
                ["昌平", "丰台", "大兴", "海淀", "顺义", "延庆"],
                ["长春市", "吉林市", "松原市", "延边市"],
                ["济南市", "青岛市", "烟台市", "潍坊市", "淄博市"],
                ["石家庄市", "唐山市", "邯郸市", "廊坊市"],
                ["南京市", "苏州市", "扬州市", "无锡市"]
            ];
    
            function selectCity(index) {
                $("#city").html("<option>----请-选-择-省----</option>");
                for(var x = 0; x < cities[index].length; x++) {
                    $("#city").html($("#city").html() + "<option value='"+x+"'>----" + cities[index][x] + "----</option>");
                }
            }
            
            function pwdconfirm(a,b){
                if(a&&b&&$("#pwd").val()==$("#pwd2").val()){
                    return true;
                }else{
                    $("#pwd2span").html("<b>两次密码不一致</b>");
                    return false;
                }
            }
            
        </script>
    
    
    </html>
  • 相关阅读:
    COJ979 WZJ的数据结构(负二十一)
    COJ980 WZJ的数据结构(负二十)
    奇怪的错误
    COJ883 工艺品
    COJ885 LCS???
    COJ559 回文
    hdu1505(dp求最大子矩阵)
    hdu1506(dp求最大子矩阵)
    hdu2569(递推dp)
    hdu1081(最大子矩阵)
  • 原文地址:https://www.cnblogs.com/qingyundian/p/8667473.html
Copyright © 2011-2022 走看看