一、事件:
 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之事件、动画、类数组操作的更多相关文章

  1. JQUERY-事件-动画-类数组对象-添加自定义API

    正课: 1. 事件: 2. 动画: 3. 类数组对象操作: 4. 添加自定义API: 1. 事件: 1. 页面加载后执行: 2个时机 1. DOM内容加载完成: 仅包括html, js DOMCont ...

  2. 前端(十八)—— jQuery高级操作:选择器、文本属性与类、事件、文档操作、动画、结构关系

    JQ选择器.文本属性与类.事件.文档操作.动画.结构关系 可参考jQuery的API文档 一.选择器 1.css语法匹配 标签 | 类 | id | 交集 群组 | 后代 | 兄弟 伪类 | 属性 $ ...

  3. 第三章 JQuery: HelloWorld--常见方法--css--选择器--筛选器--属性--效果--事件--数组操作--字符串操作--对象转换

    1.jQuery简介 为了简化JavaScript 的开发, 一些JavsScript 库诞生了. JavaScript库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的页面, 并且兼 ...

  4. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  5. JQuery操作类数组的工具方法

    JQuery学习之操作类数组的工具方法 在很多时候,JQuery的$()函数都返回一个类似数据的JQuery对象,例如$('div')将返回div里面的所有div元素包装的JQuery对象.在这中情况 ...

  6. C++走向远洋——38(用对象数组操作长方柱类)

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:changfangzhu.cpp * 作者:常轩 * 微信公众号 ...

  7. php 数组操作类(整合 给意见)

    数组操作函数整理: /* 将一个二维数组按照指定字段的值分组 * * @param array $arr * @param string $keyField * * @return array */ ...

  8. 实现类数组转化成数组(DOM 操作获得的返回元素值是一个类数组)

    目标 实现类数组转化成数组 实例 链接地址 使用方法 const foo = document.querySelectorAll('.result') //链接地址输入控制台输入这行代码 const ...

  9. Jquery数组操作技巧

    Jquery对数组的操作技巧. 1. $.each(array, [callback]) 遍历[常用]  解释: 不同于例遍 jQuery 对象的 $.each() 方法,此方法可用于例遍任何对象(不 ...

随机推荐

  1. 使用CSS设置行间距,字间距.

    字间距1.text-indent设置抬头距离css缩进即对,对应div设置css样式text-indent : 20px; 缩进了20px 2.letter-spacing来设置字与字间距_字符间距离 ...

  2. java-7311练习(上)

    java练习,仅供参考! 欢迎同学们交流讨论. JDK 1.8 API帮助文档 JDK 1.6 API中文文档 Java GUI -------------------------2016-10-23 ...

  3. jquery 监听input输入值事件

    <html> <head> <title></title> <script type="text/javascript" sr ...

  4. XPath使用示例

    1.查找空节点//*[not(text())]        表示内容为空的节点//*[count(*)=0]         表示没有子节点的节点"//*[count(*)=0 and n ...

  5. 父窗口window.showModalDialog传值 子窗口window.returnValue返回值

    父窗口打开子窗口页面: var fatherWindow = document.all.dealReason;//想传的值 win = window.showModalDialog(strUrl, f ...

  6. cocos2d-x项目实现android视频播放参考链接

    http://blog.csdn.net/xiaominghimi/article/details/6870259 http://blog.csdn.net/kaitiren/article/deta ...

  7. tomcat 8在win8.1中的配置

    配置jdk: 三个步骤: 1.环境变量=>新建 JAVA_HOME C:\Program Files\Java\jdk1.8.0_40 2.环境变量=>新建 CLASS_PATH .;%J ...

  8. poj 1702 三进制问题

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 3906   Accepted: 1924 Description Eva h ...

  9. 循环处理--sqlserver

    alter PROCEDURE [dbo].[sp_gongzi] @gongzi_yf varchar(7) as DECLARE  @input_id varchar(20)DECLARE  @s ...

  10. DataTable汇总

    一.排序 1 获取DataTable的默认视图 2 对视图设置排序表达式 3 用排序后的视图导出的新DataTable替换就DataTable (Asc升序可省略,多列排序用"," ...