你的位置:首页 > Java教程

[Java教程]jQuery_03之事件、动画、类数组操作


一、事件:
 1、模式触发事件:
  ①DOM:elem.onXXX();只能触发直接用onXXX绑定的事件处理函数;用addEventistener添加的事件监听无法模拟出发触发;
  ②jQuery:$(...).trigger("事件名");可简写:$(...).事件名;
 2、页面加载后执行:
  ①jQuery:$(document).ready(function(){...});底层事件——DOM中的ondocumentcontentloaded,只要DOM树加载完成,js执行完毕就触发;
  ②DOM:window.onload=function(){...};底层——必须等到html,css,jsimg全部加载完成才会触发;
  ③优化:将原本在load之后执行的任务(事件绑定,修改DOM树),提前到ready之后执行,可缩短页面加载事件;将script放在body的结尾可实现DOM加载后立刻执行;
 3、hover事件:其实是mouseover和mouseout的合体,须绑定两个事件处理函数;    当须同时相应mouseover和mouseout时,可简写为hover;
二、动画:
 1、简化版动画函数:显示/隐藏:$(...).show(); $(...).hide();    $(...).toggle();
  * 无参数的show()/hide()使用的是display属性;瞬间显示和隐藏;
  动画参数:speed:fast/normal/slow;或者使用毫秒数自定义动画时长;
  动画速度变化参数:easing:linear/swing;
  伸缩:slideUp()、slideDown()、slideToggle();
  淡入淡出:fadeIn()、fadeOut()、fadeToggle();
 2、万能动画函数:animate():可对数值类型的CSS样式执行定时器动画;
  使用:$(...).animate(params,speed,easing,fn);
   其中:params:所有变化的css属性目标值;speed:动画持续时间/速度;easing:速度变化效果;fn:动画结束后自动调用的回掉函数;
  排队:多个动画顺序执行;
   $(...).animate({属性1:值1,...},ms).animate({属性2:值2,...},ms);
  并发:多个动画同时执行;
   $(...).animate({属性1:值1,属性2:值2},ms);
三、类数组操作:
 1、.each(function(i){i->当前元素的下标;this->当前元素});
  each为jQuery第三方定义类数组对象的方法;
  forEach是原生js中Array类型的方法;
  使用:$("要查找的元素").index("所有元素");返回要查找的元素在所有元素中的下标位置;
 2、jQuery UI:
  ①Effects:动画效果;
   addClass()/removeClass()/toggleClass():默认没动画;
   show/hide/toggle:扩展了动画效果;
   color animation:实现颜色动画;
   $(...).animate():支持颜色动画;
   $(...).toggle(Effecta,speed)中:effects参数:
    blind(遮蔽)、bounce(弹跳)、clip(缩短)、puff(膨胀)、explode(爆炸)、fold(折叠)、highlight(高亮)、drop(丢弃)、pulsate(心跳)、shake(震动)、size、slide
  ②Interactions:交互
   拖曳:$(...).dragglable();API会悄悄为元素添加class;
   可选中:$(...).selectable();须手动定义同名样式类ui-selected的样式;
   可排序:$(...).sortable();
  ③Widget:小部件;
   a、Accordion:手风琴部件,引入jquery-ui.css,html:父元素>标题+内容div,js:$(父元素).accordion();
   b、AutoComplete:自动完成;html:input文本框,js:保存所有备选项的数组——$(文本框).autocomplete({source:数组});
   c、datepicker:日期选择框;html:input文本框,js:$(文本框).datepicker({dateFormat:"yyyy年mm月dd日"});*H5中不能修改样式且兼容性;
   d、dialog:对话框;html:定义外层元素,包含提示信息(须定义title属性,title属性会出现在对话框左上角),js:$(“外层元素”).dialog();*不带参数的dialog只负责将容器变成对话框,不控制显示与否;
    配置:$(...).dialog({
     autoOpen:false,//默认隐藏
     button:[
     {text:'文本',click:function(){this->dialog}}//按钮
     ....]
    });
    打开:$(...).dialog("open");
    关闭:$(...).dialog("close");
   e、按钮部件:$(button/input/a).button();
   f、tabs:标签页:html:父级div>标签页ul>li>a href="#id";*(内容页div的#id匹配);js:$(父元素).tabs();
   g、tooltip:工具提示;必须应用到document上;