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上；

巴特西

jQuery_03之事件、动画、类数组操作

最新文章

热门文章