jQueryday10补充(动画系统复习级联菜单冒泡默认 )

最新推荐文章于 2021-10-31 18:32:03 发布

wenchi2018

最新推荐文章于 2021-10-31 18:32:03 发布

阅读量320

点赞数

分类专栏： jquery

jquery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

 <!--网页中的某些元素是有自己的默认行为的，比如果超链接单击后需要跳转，提交按钮点击后需要提交表单，
 有时需要阻止这些行为，也就是默认行为。
jquery中可用用preventDefault()的方法来阻止元素的默认行为.-->
    <!--事件冒泡 点击a标签中的e会触发e和aa 
        Propagating 传播 因此要对事件的作用范围进行限制 可以用event.stopPropagating-->
    <div onclick="alert('aa');">
        <a href="#" onclick="alert('e');">e</a>

/*
     *jQuery动画系统
     *隐藏显示
     *$(selector).show(speed,callback);
     *$(selector).hide(1000);
     *$(selector).toggle("slow");
     *语法一致 参数可以有2个 第一个是动画的速度 第二个是命令完成后的回调函数
     *第一个参数可以是单词或者毫秒数
     *
     *淡入淡出
     *$(selector).fadeIn(speed,callback)
     *$(selector).fadeOut(1000)
     *$(selector).fadeToggle('fast',function(){})
     *参数等同于上面
     *$(selector).fadeTo(.5) 淡入到 0 透明 1不透明  0.5 的0可以省略
     *滑动
     *$(selector).slideDown(speed,callback);
     *$(selector).slideUp(speed,callback);
     *$(selector).slideToggle(speed,callback);
     *动画
     *$(selector).animate({params},speed,callback);
     *$("button").click(function(){
     *$("div").animate({left:'200px',opacity:'0.5',height:'150px',width:'140px'},2000)});
     *结束动画
     *$(selector).stop();
     *$(selector).stop(stopAll,goToEnd);
     * 第一个结束所有动画 第二个到最后一个动画 完成后结束
     * 
     * jQuery 补充
     * each函数
     * 全局的
     * $.each(array,function(index,object){})
     * 普通jQuery对象的each方法
     *  $("li").each(function(index,element){})
     *  参数的顺序是一致的
    */

<script>
    var array = {"1":["11","111","111"],"2":["2","22","222"]};
    jQuery(document).ready(function() {
        //初始化数据
        //each array:要遍历的数组
        //i key 索引编号
        //e value 索引对应的值
        $.each(array,function(key,value){
            var $pro =  $("<option>"+key+"</option>");
            $("#1").append($pro);
        });


        //有可能事件冒泡之类的 不建议使用
        $('#1').trigger('change');
        $("#1").change();
        //添加change事件
        $("#1").on('change',function function_name(argument) {
            //先获得索引值 
            var index =  $("#1 option:selected").text();

            //加载索引值的信息
            var values = array[index];
            //清空下拉菜单
            $("#2").empty();
            $.each(values,function function_name(i,value) {
                // body...
                var $content = $("<option>"+value+"</option>")
                $('#2').append($content);
            });
        });
        //要先绑定后才能触发 只触发事件响应方法 只执行方法
        $('#1').triggerHandler('change');
    });
</script>
</head>
<body>
    <select name="1" id="1">
    </select>
    <select name="2" id="2"></select>
</body>

wenchi2018

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQueryday10补充(动画系统复习级联菜单冒泡默认 )

/* *jQuery动画系统 *隐藏显示 *$(selector).show(speed,callback); *$(selector).hide(1000); *$(selector).toggle("slow"); *语法一致参数可以有2个第一个是动画的速度第二个是命令完成后的回调函数 *第一个参数可以是单词或者毫秒数
复制链接

扫一扫