HTML教学课件：D04 Jquery及日历控件制作_第1页
HTML教学课件：D04 Jquery及日历控件制作_第2页
HTML教学课件：D04 Jquery及日历控件制作_第3页
HTML教学课件：D04 Jquery及日历控件制作_第4页
HTML教学课件：D04 Jquery及日历控件制作_第5页
已阅读5页，还剩15页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Jquery常用方法介绍

什么是Jquery$()获得Jquery对象$()返回的对象中包含原生DOM对象Jquery对象与Dom对象的区别与联系$(function(){})$(function(){})和window.onload的区别与联系

Jquery常用方法介绍

$().offset()获取位置

例：varoffset=$().offset()

alert(offset.left+“-”+offset.top);$().width()$().height()

Jquery常用事件处理

$().click(function(){ $(other).show(); ……}).blur(function(){ $(other).hide(); ……}).dblclick(…);

Jquery常用事件处理

JQuery提供了两种方式来阻止事件冒泡。方式一：event.stopPropagation();$("#div1").mousedown(function(event){

event.stopPropagation();

});方式二：returnfalse;$("#div1").mousedown(function(event){

returnfalse;

});returnfalse不仅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation()则只阻止事件往上冒泡，不阻止事件本身。

Jquery常用方法介绍

$().append($child)附加一个子元素

$().appendTo($parent)追加到一个父元素内，其子元素之后$().prependTo($parent)追加到一个父元素内，其子元素之前

Jquery

之日历控件

第一步：生成日历外框架，增加相关事件，使当击输入框时能弹出日历，失去焦点时日历消失，效果如下

Jquery

之日历控件

关键代码：

Jquery

之日历控件

第二步：在日历外框架中增加年和月的选择框，使通过选择不同的年月，生成不同的日历

Jquery

之日历控件

关键代码：

Jquery

之日历控件

第三步：在日历外框架中增加周一到周日的表格，效果如下

Jquery

之日历控件

关键代码：

Jquery

之日历控件

第四步：在日历外框架中增加当月的所有日期，效果如下

获取某月具体天数数组

关键代码

填空某月所有日期

关键代码

给每个日期增加事件处理

关键代码

Jquery

之日历控件

增加所有日期的事件代码后，效果如下

Jquery

之日历控件

增加所有日期的事件代码后，双击日期效果如下课堂练习：请同学们运用我们上节课所介绍的转变数字为两位的函数来实现－将上面的月和日部分，转变为两位数

Jquery

之日历控件

第五步：给年份，月份下拉框增加事件，当改变任一值时，重新生成新是日历，效果如下

给年月下拉框增加事件

关键代码

结束语

日历控件的基本功能已经实现，但如果要使用在正式场

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论