文档章节

jQuery基础知识02

x
 xwminren
发布于 2015/10/12 22:09
字数 490
阅读 14
收藏 1
一,jQuery事件处理
	1,使用jQuery实现事件处理
		1)实现事件绑定
		-$obj.bind(事件类型,事件处理函数)  如:$button.bind('click',func);
		 简写形式:$button.click(func)
		2)获得事件对象event
		-为事件处理函数传递任一参数   如:$button.click(function(e){})
		 e就是事件对象,但经过jQuery对底层事件对象的封装,封装后的事件对象可以方便地兼容各浏览器
		3)事件对象的常用属性
		-获取事件源      e.target  返回DOM对象
		-获取鼠标点击点  e.pageX,e.pageY
	2,使用jQuery实现事件冒泡
		1)事件冒泡
			a,事件冒泡:子节点产生的事件会以此向上抛给父节点
			b,取消事件冒泡:e.stopPropagation()----组织事件向父节点上传
	3,使用jQuery实现合成事件
		-hover(mouseenter,mouseleave)  传入两个函数,实现鼠标悬停和离开的方法
			$("img").hover(
			  function(){$(this).css("width","500px")},//鼠标悬停时调用
			  function(){$(this).css("width","400px")} //鼠标离开时调用
			);
		-toggle()  一般是切换对象的可见/隐藏属性
			$("#chg").click(
			  function(){
				//将图片在显示与隐藏状态之间切换
				$("img").toggle();
			  }
			);
	4,使用jQuery实现模拟操作
		语法:
		$obj.trigger(事件类型)  如:$button.trigger("focus");模拟光标切换,简写:$obj.focus()
			var id = setInterval(function(){
			  //执行$("").length次结束
			  if(i==$texts.length){
				clearInterval(id);
			  }
			  //随机算出一个值
			  var rp = Math.round(Math.random()*100);
			  //设置给当前(第i个)文本框,模拟光标切入事件
			  //然后给这个框设置值
			  $texts.eq(i++).trigger("focus").val(rp);
			},1000);

二,jQuery动画
	1,显示、隐藏动画
		show()/hide()
		$obj.show(执行时间,回调函数); 回调函数--动画执行完毕后要执行的函数
	2,上下滑动式动画实现
		slideDown()/slideUp()
		slideDown(执行时间,回调函数)
	3,淡入、淡出式动画效果
		fadeIn()/fadeOut()
		fadaIn(执行事件,回调函数)
	4,自定义动画效果
		animate(偏移位置,执行时间,回调函数)
		$obj.animate({'left','400px'},1000)


© 著作权归作者所有

上一篇: JDBC03
下一篇: jQuery基础知识01
x
粉丝 1
博文 10
码字总数 8101
作品 0
太原
私信 提问
jQuery小测试系列之jQuery基础知识

日期:2012-4-17 来源:GBin1.com 这是jQuery小测试系列第一部分:基础知识。 来源:jQuery小测试系列之jQuery基础知识

gbin1
2012/04/17
44
0
Web前端开发必备:《Jquery实战》第3版 介绍

目标读者 本书适合想深入学习jQuery的Web开发人员、全栈工程师、架构师。jQuery是互联网上最流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员,无论起点如何。本书深入介绍了...

frankxulei
2018/06/26
0
0
python前端jQuery入门

知识点预习 1.jQuery的加载2.jQuery选择器 3.jQuery的click事件 4.jQuery的样式操作 5.jQuery动画 01- 封闭函数 作用:避免在修改他人代码时出现 方法同名替换的情况想让一个函数直接执行用封...

czbkzmj
2018/12/07
0
0
jQuery源码剖析(五) - 事件绑定原理剖析

jQuery 源码解析代码及更多学习干货:猛戳GitHub 本篇代码为 my-jQuery 1.0.5.js 一、基础知识 1.DOM 0级事件模型: 通过JS指定事件处理程序传统方式,就是将一个函数赋值为一个事件处理程序属性...

极客James
07/27
0
0
PHP职业规划

PHP职业规划 初级PHP程序员 需要掌握知识点: HTML 熟练 CSS 熟练 Javascript 基础 jQuery 基础 SQL 基础 PHP 熟练 职业要求 能够独立进行网页制作与排版 能够制作简单的前端效果 或 将前端效...

染墨青衿
2014/12/22
6
0

没有更多内容

加载失败,请刷新页面

加载更多

Android面试常客之Handler全解

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/fnhfire_7030/article/details/79518819 前言:又到了一年...

shzwork
18分钟前
4
0
position sticky 定位

本文转载于:专业的前端网站➫position sticky 定位 1、兼容性 https://caniuse.com/#search=sticky chrome、ios和firefox兼容性良好。 2、使用场景 sticky:粘性。粘性布局。 在屏幕范围内时...

前端老手
25分钟前
4
0
CentOS 7 yum 安装 PHP7.3 教程

参考:https://www.mf8.biz/centos-rhel-install-php7-3/ 1、首先安装 EPEL 源: yum install epel-release 安装 REMI 源: yum install http://rpms.remirepo.net/enterprise/remi-release......

dragon_tech
40分钟前
4
0
Linux物理网卡聚合及桥接

Linux内部实现的bridge可以把一台机器上的多张网卡桥接起来,从而把自己作为一台交换机。同时,LInux bridge还支持虚拟端口,即桥接的不一定都是物理网卡接口,还可以是虚拟接口。目前主要表...

xiangyunyan
41分钟前
4
0
一起来学Java8(一)——函数式编程

在这篇文章中,我们将了解到在Java8下如何进行函数式编程。 函数式编程 所谓的函数式编程就是把函数名字当做值进行传递,然后接收方拿到这个函数名进行调用。 首先来看下JavaScript如何进行函...

猿敲月下码
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部