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

来源:互联网 发布:vb中 是什么意思 编辑:程序博客网 时间:2024/06/10 13:18
 <!--网页中的某些元素是有自己的默认行为的,比如果超链接单击后需要跳转,提交按钮点击后需要提交表单, 有时需要阻止这些行为,也就是默认行为。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.50可以省略     *滑动     *$(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>
原创粉丝点击