HTML教學(xué)課件：D04 Jquery及日歷控件制作

Jquery常用方法介紹

什么是Jquery$()獲得Jquery對(duì)象$()返回的對(duì)象中包含原生DOM對(duì)象Jquery對(duì)象與Dom對(duì)象的區(qū)別與聯(lián)系$(function(){})$(function(){})和window.onload的區(qū)別與聯(lián)系

Jquery常用方法介紹

$().offset()獲取位置

例：varoffset=$().offset()

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

Jquery常用事件處理

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

Jquery常用事件處理

JQuery提供了兩種方式來(lái)阻止事件冒泡。方式一：event.stopPropagation();$("#div1").mousedown(function(event){

event.stopPropagation();

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

returnfalse;

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

Jquery常用方法介紹

$().append($child)附加一個(gè)子元素

$().appendTo($parent)追加到一個(gè)父元素內(nèi)，其子元素之后$().prependTo($parent)追加到一個(gè)父元素內(nèi)，其子元素之前

Jquery

之日歷控件

第一步：生成日歷外框架，增加相關(guān)事件，使當(dāng)擊輸入框時(shí)能彈出日歷，失去焦點(diǎn)時(shí)日歷消失，效果如下

Jquery

之日歷控件

關(guān)鍵代碼：

Jquery

之日歷控件

第二步：在日歷外框架中增加年和月的選擇框，使通過(guò)選擇不同的年月，生成不同的日歷

Jquery

之日歷控件

關(guān)鍵代碼：

Jquery

之日歷控件

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

Jquery

之日歷控件

關(guān)鍵代碼：

Jquery

之日歷控件

第四步：在日歷外框架中增加當(dāng)月的所有日期，效果如下

獲取某月具體天數(shù)數(shù)組

關(guān)鍵代碼

填空某月所有日期

關(guān)鍵代碼

給每個(gè)日期增加事件處理

關(guān)鍵代碼

Jquery

之日歷控件

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

Jquery

之日歷控件

增加所有日期的事件代碼后，雙擊日期效果如下課堂練習(xí)：請(qǐng)同學(xué)們運(yùn)用我們上節(jié)課所介紹的轉(zhuǎn)變數(shù)字為兩位的函數(shù)來(lái)實(shí)現(xiàn)－將上面的月和日部分，轉(zhuǎn)變?yōu)閮晌粩?shù)

Jquery

之日歷控件

第五步：給年份，月份下拉框增加事件，當(dāng)改變?nèi)我恢禃r(shí)，重新生成新是日歷，效果如下

給年月下拉框增加事件

關(guān)鍵代碼

結(jié)束語(yǔ)

日歷控件的基本功能已經(jīng)實(shí)現(xiàn)，但如果要使用在正式場(chǎng)