jQuery中事件及常用事件总结、jQuery中常见效果、隐式迭代、链式编程、样式操作、动画队列、不同元素绑定同一个事件

jQuery事件:

jQuery中的事件和javascript中的事件基本相似,不同的是jQuery中的事件处理函数写在事件后面的括号中,如:

	<script>$('input').click(function() {alert('hello word');});</script>

jQuery中常见事件:
在这里插入图片描述

jQuery中常见效果:

jQuery中常见的效果有:hide()/show()/toggle():隐藏/显示/切换hide()和show()、slideDown()/slideUp()/slideToggle():滑出/滑入/slideDown和slideUp切换,更多如下表:

效果函数描述案例
toggle()和slideToggle()两种方法都有对元素显示和隐藏的作用,toggle控制元素hide和show,slideToggle控制元素slideDown和slideUp,里面传入毫秒数则控制效果的时间$(‘input’).click(function() {$(“div”).slideToggle();});
show()和hide()控制元素的显示和隐藏,从左上角开始显示或隐藏,里面传入毫秒数则控制效果的时间$(‘input’).click(function() {$(“div”).hide(1000);});
slideDown()和slideUp()控制元素向下 显示或向上隐藏,从元素的上边发生变化,里面传入毫秒数则控制效果的时间$(‘input’).click(function() {$(“div”).slideUp(1000);});
animate(styleObj,speed,easing,fn)自定义动画,可以出入四个参数,第一个参数是控制元素属性的对象,第二个参数是控制速度的,可省略;第三个是控制运动轨迹的,可省略;第四个参数是一个回调函数,当animate执行完后,回调函数会被调用$(‘input’).click(function() {$(“div”).animate({height: ‘300px’,width: ‘300px’}, function() {$(“div”).css(‘backgroundColor’, ‘green’);});});
clearQueue()当有多组动画时,停止当前运动后的动画,即这次动画运动完后,下一动画被停止$(‘input’).click(function() {$(“div”).animate({width: ‘500px’}, 2000);$(“div”).animate({height: ‘500p’}, 2000);});$(‘button’).click(function() {$(“div”).clearQueue();});
dequeue()当前动画没有运动完,直接进入下一动画$(‘input’).click(function() {$(“div”).animate({width: ‘500px’}, 2000);$(“div”).animate({height: ‘500p’}, 2000);});$(‘button’).click(function() {$(“div”).dequeue();});
fadeIn()和fadeOut()渐变的控制元素的显示和隐藏,可以传入毫秒数控制效果时间$(‘input’).click(function() {$(“div”).fadeIn()});
fadeTo(speed,opacity,fn)控制元素的透明度,第一个参数传入毫秒数,表示渐变过程的时间;第二参数表示透明值,第三个参数是回调函数$(‘button’).click(function() {$(“div”).fadeTo(null, 0.1);});
stop()暂停当前运动的动画或效果$(‘button’).click(function() {$(“div”).stop();});

隐式迭代:

隐式迭代:jQuery中遍历内部 DOM 元素(伪数组形式存储)的过程。简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。

	 $('div').hide();  // 页面中所有的div全部隐藏,不用循环操作

链式编程:

jQuery中允许我们在一条语句中写多个 jQuery 方法在相同的元素上,链式编程可以节省代码量,看起来更优雅美观,如:

	$(this).css('color', 'red').sibling().css('color', 'white'); 

jQuery 样式操作:

jQuery中常用的样式操作有两种:css() 和 设置类样式。

使用CSS操作样式:

jQuery 可以使用 css 方法来修改简单元素样式,css() 多用于样式少时操作,多了则不太方便,常用以下三种形式 :

	// 1.参数只写属性名,则是返回属性值var strSize = $('p').css('fontSize');// 2.  参数是属性名+属性值,中间用逗号分隔,是设置一组样式,属性必须加引号$('div').css('color', 'red');// 3.  参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号连接$('p').css({ "color":"white","font-size":"20px"});

通过设置类名设置样式:

jQuery提供了可以删除添加及删除添加互相转换的方法来操作某个类名,提醒:操作某个类时,其他类不会发生改变(原生javascript中的className会覆盖所有类名),类名前面不需要加点;设置类样式方法比较适合样式多时操作,可以弥补css()的不足,如:

	// 1.添加类$("div").addClass("hide");// 2.删除类$("div").removeClass("show");// 3.切换类$("div").toggleClass("showHide");

动画队列:

动画一旦触发必将执行完,才可以进入下一动画,这样会发生在连续触发动画时,动画会产生不友好的体验,可以使用jQuery提供的stop()方法来停止当前动画,这样就解决了不友好的体验,如:

	<script>$('button').click(function() {$('div').stop().slideToggle(2000);});</script>

hover事件切换:

jQuery提供了一个新事件 hover() ; 类似 css 中的伪类 :hover ,hover(fn1,fn2)里面传入两个函数做为参数,第一个参数表示鼠标移入某个元素时触发的函数,第二个参数表示鼠标移出某个元素时触发的函数;如果只传入一个函数作为参数,则移出和移入都执行这个函数,如:

	<script>$('div').hover(function() {$('li').hide();}, function() {$('li').show();});</script>

jQuery中不同元素绑定相同事件:

jQuery中on支持给不同元素绑定相同的处理事件,其元素之间仅用逗号隔开即可,如:

$('.btn2,input,a').on('click', function() {$box.toggleClass('fade');
});

提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者 删除。
笔者:苦海

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575356.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

atitit.提升开发效率---mda 软件开发方式的革命

atitit.提升开发效率---mda 软件开发方式的革命 1. 软件开发方式的革命开发工具的抽象层次将再次提升 1 2. 应用框架和其实现相分离 2 3. 目前的问题模型和代码不同步 2 4. MDA的历史及其由来 2 5. MDA的三个主要目标是&#xff1a;轻便性、 互操作性和可重用性。 3 6. MDA跟代…

BigQuery 分区表简介和使用

大纲 什么是分区表 我们先看定义&#xff1a; 分区表是一种数据库表设计和管理技术&#xff0c;它将表中的数据划分为逻辑上的多个分区&#xff0c;每个分区包含一组特定的数据。每个分区都根据定义的分区键&#xff08;通常是一个列或字段&#xff09;的值进行分类&#xff…

jQuery操作属性、设置文本、遍历元素、元素创建添加删除、操作元素尺寸、操作元素位置、注册事件、事件处理、解绑事件、拷贝、多库共存、jQuery插件

jQuery操作属性&#xff1a; jQuery中提供三种方法操作属性&#xff0c;分别是&#xff1a;prop()、arrt()、data(),具体如下&#xff1a; prop()操作自带属性&#xff1a;用来操作元素本身自带的属性&#xff08;包括没有显示在DOM上的自带属性&#xff09;&#xff0c;如:a…

C_文件读写流

strcmp() 所在头文件&#xff1a;string.h 功能&#xff1a;比较俩个字符串 一般形式&#xff1a;strcmp(字符串1&#xff0c;字符串2) 说明&#xff1a; 当S1<S2时&#xff0c;返回为负数return result,result<0 当S1S2时&#xff0c;返回值0 当S1>S2时&#xff0c;返…

初次使用Apache、ip地址、防火墙、域名、DNS、hosts文件、端口、URL介绍、Apache配置文件、配置虚拟主机、请求响应、http协议、

Apache提供web服务&#xff1a; 启动Apache&#xff0c;让其客户端可以使用你机器上安装的Apache提供的web服务&#xff0c;访问你机器上的网站。这种情况下你的计算机就是服务器&#xff0c;别人的机器就是客户端。 注意&#xff1a;确保配置文件语法检查通过&#xff0c;确…

量子计算机算法与应用研究论文(转载务必注明出处)

量子计算机算法与应用研究 学科分类&#xff1a;计算机科学 湖北省沙市中学 谢晓啸 摘要 1.量子计算机 2.量子计算机算法 3.移动互联 4.云计算 5.经典计算机的局限 6.量子计算前景 二零一四年一月十二日 目 录 摘 要......................................................…

cookie和session、web服务工作原理、Apache配置php扩展、php简介

cookie和session: cookie和session区别&#xff1a;cookie数据是存在本地的&#xff0c;而session数据是存在服务端的&#xff0c;session比cookie更安全。 cookie&#xff1a;用于http做会话时记住客户端所做的事,这里可以解决首次登陆页面广告等问题。 服务端与客户端在做开…

分享MYSQL中的各种高可用技术(源自姜承尧大牛)

图片和资料来源于MYSQL大牛姜承尧老师&#xff08;MYSQL技术内幕作者&#xff09; 姜承尧&#xff1a; 网易杭州研究院 技术经理 主导INNOSQL的开发 mysql高可用各个技术的比较 数据库的可靠指的是数据可靠 数据库可用指的是数据库服务可用 可靠的是数据&#xff1a;例如工商银…

php中数据类型、数组排序、循环语句、混编、操作本地文件流程、常用API、函数、魔术常量

php中数据类型&#xff1a; php中有7种数据类型&#xff0c;分别是&#xff1a; //1.String字符串&#xff0c;用引号包裹的字符&#xff0c;如&#xff1a;$str hello word;//2.Integer整型&#xff0c;可以是正数或负数&#xff0c;有十进制、十六进制、八进制&#xff0c;…

J2ME游戏中的图片处理

图片资源乃是游戏的外衣&#xff0c;直接影响一个游戏是否看上去很美。在J2ME游戏开发中&#xff0c;由于受到容量和内存的两重限制&#xff0c;图片使用受到极大的限制。在这种环境中&#xff0c;处理好图片的使用问题就显得更加重要。 本文从容量和内存两个方面谈谈J2ME游戏图…

php中命名空间、面向对象、访问控制、接口

命名空间&#xff1a; php中命名空间&#xff1a;解决自己编写的代码和php内置及第三方的函数、常量、类命名冲突问题(在不同的命名空间可以定义相同名称的常量、类、函数)&#xff1b;及为繁琐的命名创建一个别名&#xff0c;具体如下&#xff1a; //1.简单定义命名空间&…

经典的十个机器学习算法

1、C4.5 机器学习中&#xff0c;决策树是一个预测模型&#xff1b;他代表的是对象属性与对象值之间的一种映射关系。树中每个节点表示某个对象&#xff0c;而每个分叉路径则代表的某个可能的 属性值&#xff0c;而每个叶结点则对应从根节点到该叶节点所经历的路径所表示的对象的…

JSON数据、字符串拼接、宽字符处理、数组、Notice警告、isset和empty、变量、作用域、常量、include和require

JSON数据&#xff1a; 字面量是代码中表述数据的手段&#xff0c;JSON是一门类似于js字面量表述数据的手段&#xff0c;JSON是现在市面上用的最广的数据表述手段。 1.JSON对象中属性名称必须用双引号引起来 2.JSON中字符串必须用双引号引起来 3.JSON中不允许使用注释 4.JS…

表单及数据提交、表单的作用、服务端接收提交的数据、php处理数据流程、文件域及文件域中数据处理、php展示数据(响应)

表单及数据提交&#xff1a; 表单的作用&#xff1a; 用于收集相关信息&#xff1b;html中有专门提交数据的标签&#xff0c;可以很容易的收集用户输入的信息&#xff0c;这个标签有两个重要的属性&#xff1a;action表单提交的地址和method以什么方式提交表单&#xff0c;通…

数据库、MySQL介绍及安装流程、SQL语句中增删改查、SQL注入、通过php操作数据库,plugin ‘caching_sha2_password加密规则,分表查询

MySQL数据库&#xff1a; 数据库&#xff1a; 存放数据的仓库&#xff0c;用来按照特定的结构去组织和管理我们的数据&#xff0c;有数据库就可以更加方便的储存数据&#xff1b; 数据库只是存储数据的一种手段&#xff0c;最终数据是存放在硬盘中的&#xff0c;只是存放的格…

可能 delphi7 下稳定的最后一版本 GDIPLUS

可能 delphi7 下稳定的最后一版本 GDIPLUS 可能 delphi7 下稳定的最后一版本 GDIPLUS万一的 blog 说"终于, Delphi XE2 携带 GDI 库了使用了较早的 http://www.progdigy.com"但这个网址已经下不了了,而 http://www.bilsen.com/gdiplus 的又要 delphi2009 以后版本,另…

ajax背景、ajax对象、ajax状态、ajax与http、ajax请求数据接口、同步与异步、ajax请求XML数据、封装ajax函数、artTemplate简介、同源策略和跨域请求、JSONP

AJAX简介&#xff1a; ajax背景&#xff1a; 1.AJAX(Asynchronous JavaScript And Xml)异步的 JavaScript 和 XML:ajax是浏览器提供的一套API&#xff0c;最早出现在谷歌浏览器&#xff0c;是在浏览器端进行网络编程(发送请求、接收响应)的技术方案。它可以使我们通过JavaScr…

我的第一个项目(人力资源管理之报表管理)

2014年暑期实习老师要求的是人力资源管理系统&#xff0c;组队后组长分配给的任务是报表管理。 我做的报表管理&#xff0c;主要的功能是用户输入查询的时间区间和查询部门&#xff0c;然后将数据据库返回的数据显示在浏览器上。用户可以选择是否生成excel表格&#xff08;表格…

jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据,表单序列化(异步获取表单内容)

jQuery中使用ajax&#xff1a; 在jQuery中使用ajax首先需要引入jQuery包&#xff0c;其引入方式可以采用网络资源&#xff0c;也可以下载包到项目文件中&#xff0c;这里推荐下载包到文件中&#xff1b;市面上有多个版本的jQuery库&#xff0c;这里到官网&#xff1a;https://…

chartjs和echartsjs库简介

chart.js和echarts.js: 尽管我们已经掌握了canvas绘图和SVG矢量图&#xff0c;在实际开发中我们依旧不会使用canvas和SVG&#xff0c;因为考虑到开发成本&#xff0c;一般会采用相关的图表库进行辅助开发&#xff0c;市面上常用的图表库有chart.js和echarts.js&#xff1b;如果…