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() 方法,此方法可用于例遍任何对象(不 ...
随机推荐
- python+selenium+Robot
准备工作: 1.下载python2.7 http://python.org/getit/ 2.下载下载setuptools [python 的基础包工具] 可以帮助我们轻松的下载,构建,安装,升级,卸 ...
- git ignore
我最初将整个项目push到远程仓库,但是项目代码里面有大文件,从而传输太费时间了. 看网上的说法,可以通过ignore文件达到不提交某些文件的效果,尝试了一下发现不行. 后来尝试清除缓存 $ git ...
- [转] spring @Entity @Table
实体bean,entity 注解设置 持久化是位于JDBC之上的一个更高层抽象.持久层将对象映射到数据库,以便在查询.装载.更新或删除对象的时候,无须使用像JDBC那样繁琐的API.EJB的早期版本中 ...
- 用javascript写Android和iOS naitve应用,实在炫酷。
关注NativeScript有一段时间了,说好了的三月发第一个Beta版,终于发布了. // declare the extended NativeScriptActivity functionali ...
- 如何在ASP.NET 5上搭建基于TypeScript的Angular2项目
一.前言 就在上月,公司的一个同事建议当前的前端全面改用AngularJs进行开发,而我们采用的就是ASP.NET 5项目,原本我的计划是采用TypeScript直接进行Angular2开发.所以借用 ...
- .NET Framework3.0/3.5/4.0/4.5新增功能摘要
Microsoft .NET Framework 3.0 .NET Framework 3.0 中增加了不少新功能,例如: Windows Workflow Foundation (WF) Windo ...
- 精神哥讲Crash(一):UnsatisfiedLinkError
版权声明:本文为腾讯Bugly原创文章,如需转载,请标明出处. 大家好,我是腾讯Bugly的精神哥(英文名:spirit),是Bugly资深码奴的同时,又是Bugly神秘的Crash实验室研究员哦 ...
- Java虚拟机3:常用JVM命令参数
之后写的东西就会用到虚拟机参数了,现在这里汇个总自己平时用到的.看到的一些虚拟机参数.现在看不懂没关系,反正之后都会用到的: (1)-Xms20M 表示设置堆容量的最小值为20M,必须以M为单位 (2 ...
- windbg 基础命令实战 - 简单程序破解
以前玩游戏遇到一些实在过不去的管卡,经常会找一些游戏修改软件来修改游戏,让自己变得无比强大,将boss一路砍瓜切菜过足游戏瘾.其实游戏修改软件的功能大多都比较简单,我们可以通过windbg的一些简单命 ...
- SQL SERVER--DBA 常用到的一些脚本
自己整理了一些常用到的脚本,希望对各位有用 下载地址 --================================== 妹子不能少,是吧 BTW, 妹子是我辛苦百度来的,请不要求种求介绍各种求 ...