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之事件、动画、类数组操作的更多相关文章
- JQUERY-事件-动画-类数组对象-添加自定义API
正课: 1. 事件: 2. 动画: 3. 类数组对象操作: 4. 添加自定义API: 1. 事件: 1. 页面加载后执行: 2个时机 1. DOM内容加载完成: 仅包括html, js DOMCont ...
- 前端(十八)—— jQuery高级操作:选择器、文本属性与类、事件、文档操作、动画、结构关系
JQ选择器.文本属性与类.事件.文档操作.动画.结构关系 可参考jQuery的API文档 一.选择器 1.css语法匹配 标签 | 类 | id | 交集 群组 | 后代 | 兄弟 伪类 | 属性 $ ...
- 第三章 JQuery: HelloWorld--常见方法--css--选择器--筛选器--属性--效果--事件--数组操作--字符串操作--对象转换
1.jQuery简介 为了简化JavaScript 的开发, 一些JavsScript 库诞生了. JavaScript库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的页面, 并且兼 ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- JQuery操作类数组的工具方法
JQuery学习之操作类数组的工具方法 在很多时候,JQuery的$()函数都返回一个类似数据的JQuery对象,例如$('div')将返回div里面的所有div元素包装的JQuery对象.在这中情况 ...
- C++走向远洋——38(用对象数组操作长方柱类)
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:changfangzhu.cpp * 作者:常轩 * 微信公众号 ...
- php 数组操作类(整合 给意见)
数组操作函数整理: /* 将一个二维数组按照指定字段的值分组 * * @param array $arr * @param string $keyField * * @return array */ ...
- 实现类数组转化成数组(DOM 操作获得的返回元素值是一个类数组)
目标 实现类数组转化成数组 实例 链接地址 使用方法 const foo = document.querySelectorAll('.result') //链接地址输入控制台输入这行代码 const ...
- Jquery数组操作技巧
Jquery对数组的操作技巧. 1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍 jQuery 对象的 $.each() 方法,此方法可用于例遍任何对象(不 ...
随机推荐
- 使用CSS设置行间距,字间距.
字间距1.text-indent设置抬头距离css缩进即对,对应div设置css样式text-indent : 20px; 缩进了20px 2.letter-spacing来设置字与字间距_字符间距离 ...
- java-7311练习(上)
java练习,仅供参考! 欢迎同学们交流讨论. JDK 1.8 API帮助文档 JDK 1.6 API中文文档 Java GUI -------------------------2016-10-23 ...
- jquery 监听input输入值事件
<html> <head> <title></title> <script type="text/javascript" sr ...
- XPath使用示例
1.查找空节点//*[not(text())] 表示内容为空的节点//*[count(*)=0] 表示没有子节点的节点"//*[count(*)=0 and n ...
- 父窗口window.showModalDialog传值 子窗口window.returnValue返回值
父窗口打开子窗口页面: var fatherWindow = document.all.dealReason;//想传的值 win = window.showModalDialog(strUrl, f ...
- cocos2d-x项目实现android视频播放参考链接
http://blog.csdn.net/xiaominghimi/article/details/6870259 http://blog.csdn.net/kaitiren/article/deta ...
- tomcat 8在win8.1中的配置
配置jdk: 三个步骤: 1.环境变量=>新建 JAVA_HOME C:\Program Files\Java\jdk1.8.0_40 2.环境变量=>新建 CLASS_PATH .;%J ...
- poj 1702 三进制问题
Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 3906 Accepted: 1924 Description Eva h ...
- 循环处理--sqlserver
alter PROCEDURE [dbo].[sp_gongzi] @gongzi_yf varchar(7) as DECLARE @input_id varchar(20)DECLARE @s ...
- DataTable汇总
一.排序 1 获取DataTable的默认视图 2 对视图设置排序表达式 3 用排序后的视图导出的新DataTable替换就DataTable (Asc升序可省略,多列排序用"," ...