zoukankan      html  css  js  c++  java
  • jquery的each用法以及表单选择的自动响应。

    each以及他的回调函数在jquery里面有强大的功能,下面自己先是用了百度文库里面的一些东西然后自己写了一个主动选择省市的函数[纯jquery]

    通过它,你可以遍历对象、数组的属性值并进行处理。
    
    使用说明
    
    each函数根据参数的类型实现的效果不完全一致:
    
    1、遍历对象(有附加参数)
    
    $.each(Object, function(p1, p2) {
    
         this;       //这里的this指向每次遍历中Object的当前属性值
    
         p1; p2;     //访问附加参数
    
    }, ['参数1', '参数2']);
    
    
    
    2、遍历数组(有附件参数)
    
    $.each(Array, function(p1, p2){
    
         this;       //这里的this指向每次遍历中Array的当前元素
    
         p1; p2;     //访问附加参数
    
    }, ['参数1', '参数2']);
    
    
    
    3、遍历对象(没有附加参数)
    
    $.each(Object, function(name, value) {
    
         this;      //this指向当前属性的值
    
         name;      //name表示Object当前属性的名称
    
         value;     //value表示Object当前属性的值
    
    });
    
    
    
    4、遍历数组(没有附加参数)
    
    $.each(Array, function(i, value) {
    
         this;      //this指向当前元素
    
         i;         //i表示Array当前下标
    
         value;     //value表示Array当前元素
    
    });
    
    下面提一下jQuery的each方法的几种常用的用法
    
    Js代码
     var arr = [ "one", "two", "three", "four"];     
     $.each(arr, function(){     
        alert(this);     
     });     
    //上面这个each输出的结果分别为:one,two,three,four    
    
    var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]     
    $.each(arr1, function(i, item){     
       alert(item[0]);     
    });     
    //其实arr1为一个二维数组,item相当于取每一个一维数组,   
    //item[0]相对于取每一个一维数组里的第一个值   
    //所以上面这个each输出分别为:1   4   7     
    
    
    var obj = { one:1, two:2, three:3, four:4};     
    $.each(obj, function(key, val) {     
        alert(obj[key]);           
    });   
    //这个each就有更厉害了,能循环每一个属性     
    //输出结果为:1   2  3  4

    然后自己写了一个可以自主选择省市的,当然还可以添一个环节反正原理差不多这里自己就不过多地考虑了。

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery-2.1.3.min.js"></script>
    </head>
    <body>
    <form>
        请选择你的省市
        <select name="selectp" id="selectp">
            <option>请选择</option>
        </select>
        <select name="selectc" id="selectc">
            <option>请选择</option>
        </select>
    </form>
    <script>
        $(document).ready(function(){
            function init(obj){
                return $(obj).html("<option>请选择</option>");
            }
            var data={
                "河北省":"衡水,邢台,唐山,保定,石家庄",
                "河南省":"杭州,宁波,桂林"
            };
            $.each(data,function(pp){
                $("#selectp").append("<option>"+pp+"</option>");
            });
            $("#selectp").change(function(){
                init("#selectc");
                $.each(data,function(pp,ps){
                    if($("#selectp option:selected").text()==pp){
                        $.each(ps.split(","),function(){
                            $("#selectc").append("<option>"+this+"</option>");
                        });
                    }
                });
            });
        });
    </script>
    </body>
    </html>
  • 相关阅读:
    MD5加密
    input text 只能输入数字
    input date 支持placeholder属性
    实例表单的增改删
    jQuery 框架中$.ajax()的常用参数有哪些?
    jquery的相关属性和方法
    JS中实现继承的六种方式及优缺点
    c++类型转换
    c++动态内存与智能指针
    c++类的构造函数
  • 原文地址:https://www.cnblogs.com/zjunet/p/4559874.html
Copyright © 2011-2022 走看看