JQUERY(很好的PPT教程,技術(shù)較為全面,分享給大家)

1、Jquery內(nèi)容簡(jiǎn)介 什么是Jquery 萬(wàn)能的選擇器 管理jQuery包裝集 使用jQuery操作元素的屬性與樣式 事件與事件對(duì)象 jQuery中的Ajax jQuery動(dòng)畫(huà)-讓頁(yè)面動(dòng)起來(lái)! 插播:jQuery實(shí)施方案 jQuery工具函數(shù) jQueryUI常用功能實(shí)戰(zhàn) 實(shí)戰(zhàn)表單驗(yàn)證與自動(dòng)完成提示插件Jquery概述 Jquery是一套Javascript腳本庫(kù) JQuery = JavascriptLibrary Jquery != JavascriptFrameWork 提供了強(qiáng)大的功能函數(shù)提供了強(qiáng)大的功能函數(shù) 解決瀏覽器兼容性問(wèn)題解決瀏覽器兼容性問(wèn)題 實(shí)現(xiàn)豐富的實(shí)現(xiàn)豐富的UI Jque

2、ry的選擇器 一個(gè)簡(jiǎn)單的Jquery的功能實(shí)現(xiàn) var $=function(id)return document.getElementById(id);Jquery的選擇器 在Dom編程中只能使用有限的函數(shù)根據(jù)id或者TagName獲取Dom對(duì)象. jQuery提供了異常強(qiáng)大的選擇器用來(lái)幫助我們獲取頁(yè)面上的對(duì)象, 并且將對(duì)象以以jQuery包裝集包裝集的形式返回的形式返回. 只有Jquery對(duì)象才能調(diào)用Jquery方法 通過(guò)索引器返回的不再是通過(guò)索引器返回的不再是jQuery包裝集包裝集, 而而是一個(gè)是一個(gè)Dom對(duì)象對(duì)象 “$”符號(hào)在jQuery中代表對(duì)jQuery對(duì)象的引用, “jQuer

3、y”是核心對(duì)象 Returns: jQuery包裝集 $( html, ownerDocument ) 根據(jù)HTML原始字符串動(dòng)態(tài)創(chuàng)建Dom元素. $( elements ) 將一個(gè)或多個(gè)Dom對(duì)象封裝jQuery函數(shù)功能(即封裝為jQuery包裝集) $( callback ) $(document).ready()的簡(jiǎn)寫(xiě)方式j(luò)Query( selector, context ) Selector選擇器選擇器 選擇和過(guò)濾. 選擇 不會(huì)有默認(rèn)的范圍 過(guò)濾 指定條件從前面匹配的內(nèi)容中篩選 可以單獨(dú)使用, 表示從全部 (*“) 中篩選$(:title)等同于:$(*:title)選擇器示例 $(“

4、#divId) 選擇ID為divId的元素$(.bgRed) 選擇所用CSS類(lèi)為bgRed的元素 $(a) 選擇所有元素 $(*)選擇頁(yè)面所有元素 $(“#divId, a, .bgRed”)依次選擇對(duì)應(yīng)元素alert($($(#dv,.dv)1).text(); $(.bgRed div) 選擇CSS類(lèi)為bgRed的元素中的所有元素. $(.myListli) 選擇CSS類(lèi)為myList元素中的直接子節(jié)點(diǎn)對(duì)象. $(#hibiscus+img) 選在id為hibiscus元素后面的img對(duì)象.(同級(jí)節(jié)點(diǎn)) $(#someDivtitle) 選擇id為someDiv的對(duì)象后面所有帶有title

5、屬性的元素 $(tr:first) 查找表格的第一行 $(tr:last“) 查找表格的最后一行 $(input:not(:checked) 查找所有未選中的 input $(“tr:even”) 查找表格的奇數(shù)行 $(“tr:odd”) 查找表格的偶數(shù)行 $(“tr:eq(1)”)查找第二行 即索引值是1 $(tr:gt(3)查找大于給定索引值的元素 $(“tr:lt(3)”) 查找小于給定索引值的元素 $(:header).css(background, #EEE); 給頁(yè)面內(nèi)所有標(biāo)題加上背景色 $(#run).click(function() $(div:not(:animated).a

6、nimate( left: +=20 , 1000); ); 只有對(duì)不在執(zhí)行動(dòng)畫(huà)效果的元素執(zhí)行一個(gè)動(dòng)畫(huà)特效 $(“div:contains(John) 查找所有包含 John 的 div 元素 $(td:empty) 查找所有不包含子元素或者文本的空元素 $(div:has(p).addClass(test); 給所有包含 p 元素的 div 元素添加一個(gè) text 類(lèi) $(td:parent) 查找所有含有子元素或者文本的 td 元素 $(tr:hidden) 查找所有不可見(jiàn)的 tr 元素 $(tr:visible) 查找所有可見(jiàn)的 tr 元素 $(divid) 查找含有 id 屬性的 di

7、v 元素 $(inputname=newsletter).attr(checked, true); 查找 name 屬性是 newsletter 的 input 元素 $(inputname!=newsletter).attr(checked, true); 查找 name 屬性不是 newsletter 的 input 元素 $(inputname=news) 查找 name 屬性以news開(kāi)頭的 input 元素 $(inputname$=letter) 查找 name 屬性以letter結(jié)尾的 input 元素 $(inputname*=man) 查找所有 name 包含 man 的 i

8、nput 元素 $(inputidname$=man) 找到所有含有 id 屬性，并且它的 name 屬性是以 man 結(jié)尾的元素 $(ul li:nth-child(2) 在每個(gè) ul 查找第 2 個(gè)li $(ul li:first-child) 在每個(gè) ul 中查找第一個(gè) li $(ul li:last-child) 在每個(gè) ul 中查找最后一個(gè) li $(ul li:only-child) 在 ul 中查找是唯一子元素的 li $(:input)查找所有的input元素 $(:text) Radio Checkbox Submit Image Reset Button File查找所有文

9、件域 $(input:enabled) 查找所有可用的input元素 $(input:disabled) $(input:checked) $(select option:selected) 查找所有選中的選項(xiàng)元素Jquery中的方法中的方法:改變結(jié)果集改變結(jié)果集： $(div).has(p); 選擇包含p元素的div元素 $(div).not(.myClass); 選擇class不等于myClass的div元素 $(div).filter(.myClass); 選擇class等于myClass的div元素 $(div).first(); 選擇第1個(gè)div元素 $(div).eq(5); 選擇

10、第6個(gè)div元素Jquery中的方法中的方法:DOM樹(shù)上的移動(dòng) $(div).next(p); 選擇div元素后面的第一個(gè)p元素 $(div).parent(); 選擇div元素的父元素 $(div).closest(form); 選擇離div最近的那個(gè)form父元素 $(div).children(); 選擇div的所有子元素 $(div).siblings(); 選擇div的同級(jí)元素 .end()方法，使得結(jié)果集可以后退一步 $(div) .find(h3).eq(2).html(Hello).end() /退回到選中所有的退回到選中所有的h3元素元素.eq(0) /選中第一個(gè)h3元素.h

11、tml(World); /將它的內(nèi)容改為World元素的操作：取值和賦值元素的操作：取值和賦值 同一個(gè)函數(shù)，來(lái)完成取值和賦值 到底是取值還是賦值，由函數(shù)的參數(shù)決定。 $(h1).html(); html()沒(méi)有參數(shù)，表示取出h1的值 $(h1).html(Hello); html()有參數(shù)Hello，表示對(duì)h1進(jìn)行賦值常見(jiàn)的取值和賦值函數(shù) .html() 取出或設(shè)置html內(nèi)容 .text() 取出或設(shè)置text內(nèi)容 .attr() 取出或設(shè)置某個(gè)屬性的值 .width() 取出或設(shè)置某個(gè)元素的寬度 .height() 取出或設(shè)置某個(gè)元素的高度 .val() 取出某個(gè)表單元素的值 如果結(jié)果集包

12、含多個(gè)元素,那么賦值的時(shí)候，將對(duì)其中所有的元素賦值,取值的時(shí)候，則是只取出第一個(gè)元素的值(.text()例外，它取出所有元素的text內(nèi)容)元素的操作：移動(dòng)元素的操作：移動(dòng) 第一種方法是使用.insertAfter() 把div元素移動(dòng)p元素后面： $(div).insertAfter(p); 第二種方法是使用.after() 把p元素加到div元素前面： $(p).after(div); 第一種方法返回div元素，第二種方法返回p元素 .insertAfter()和.after()： 在現(xiàn)存元素的外部，從后面插入元素 .insertBefore()和.before()： 在現(xiàn)存元素的外部，從

13、前面插入元素 .appendTo()和.append()： 在現(xiàn)存元素的內(nèi)部，從后面插入元素 .prependTo()和.prepend()： 在現(xiàn)存元素的內(nèi)部，從前面插入元素元素的操作：復(fù)制、刪除和創(chuàng)建元素的操作：復(fù)制、刪除和創(chuàng)建 復(fù)制元素使用.clone() 刪除元素使用.remove()和.detach() 前者不保留被刪除元素的事件，后者保留，有利于重新插入文檔時(shí)使用。 清空元素內(nèi)容（但是不刪除該元素）使用.empty()。 創(chuàng)建新元素的方法非常簡(jiǎn)單，只要把新元素直接傳入jQuery的構(gòu)造函數(shù) $(Hello);工具方法工具方法$.trim() 去除字符串兩端的空格。$.each()

14、遍歷一個(gè)數(shù)組或?qū)ο蟆?.inArray() 返回一個(gè)值在數(shù)組中的索引位置。如果該值不在數(shù)組中，則返回-1。$.grep() 返回?cái)?shù)組中符合某種標(biāo)準(zhǔn)的元素。$.extend() 將多個(gè)對(duì)象，合并到第一個(gè)對(duì)象。$.makeArray() 將對(duì)象轉(zhuǎn)化為數(shù)組。$.type() 判斷對(duì)象的類(lèi)別（函數(shù)對(duì)象、日期對(duì)象、數(shù)組對(duì)象、正則對(duì)象等等）。$.isArray() 判斷某個(gè)參數(shù)是否為數(shù)組。$.isEmptyObject() 判斷某個(gè)對(duì)象是否為空（不含有任何屬性）。$.isFunction() 判斷某個(gè)參數(shù)是否為函數(shù)。$.isPlainObject() 判斷某個(gè)參數(shù)是否為用或new Object建立的對(duì)象。

15、$.support() 判斷瀏覽器是否支持某個(gè)特性。事件操作事件操作 事件直接綁定在網(wǎng)頁(yè)元素之上。$(p).click(function()alert(Hello););jQuery主要支持以下事件 .blur() 表單元素失去焦點(diǎn)。 .change() 表單元素的值發(fā)生變化 .click() 鼠標(biāo)單擊 .dblclick() 鼠標(biāo)雙擊 .focus() 表單元素獲得焦點(diǎn) .focusin() 子元素獲得焦點(diǎn) .focusout() 子元素失去焦點(diǎn) .hover() 同時(shí)為mouseenter和mouseleave事件指定處理函數(shù) .keydown() 按下鍵盤(pán)（長(zhǎng)時(shí)間按鍵，只返回一個(gè)事件）

16、.keypress() 按下鍵盤(pán)（長(zhǎng)時(shí)間按鍵，將返回多個(gè)事件） .keyup() 松開(kāi)鍵盤(pán) .load() 元素加載完畢 .mousedown() 按下鼠標(biāo) .mouseenter() 鼠標(biāo)進(jìn)入（進(jìn)入子元素不觸發(fā)） .mouseleave() 鼠標(biāo)離開(kāi)（離開(kāi)子元素不觸發(fā)） .mousemove() 鼠標(biāo)在元素內(nèi)部移動(dòng) .mouseout() 鼠標(biāo)離開(kāi)（離開(kāi)子元素也觸發(fā)） .mouseover() 鼠標(biāo)進(jìn)入（進(jìn)入子元素也觸發(fā)） .mouseup() 松開(kāi)鼠標(biāo) .ready() DOM加載完成 .resize() 瀏覽器窗口的大小發(fā)生改變 .scroll() 滾動(dòng)條的位置發(fā)生變化 .select(

17、) 用戶(hù)選中文本框中的內(nèi)容 .submit() 用戶(hù)遞交表單 .toggle() 根據(jù)鼠標(biāo)點(diǎn)擊的次數(shù)，依次運(yùn)行多個(gè)函數(shù) .unload() 用戶(hù)離開(kāi)頁(yè)面 這些事件在jQuery內(nèi)部，都是.bind()的便捷方式。 使用.bind()可以更靈活地控制事件 /同時(shí)綁定click和change事件$(input).bind(click change, function() alert(Hello);); /只運(yùn)行一次，以后的點(diǎn)擊不會(huì)運(yùn)行$(p).one(click, function() alert(“Hello”); ); /.unbind()用來(lái)解除事件綁定。$(p).unbind(click)

18、; 所有的事件處理函數(shù)，都可以接受一個(gè)事件對(duì)象（event object）作為參數(shù)，比如下面例子中的e：$(p).click(function(e) alert(e.type);); event.pageX 事件發(fā)生時(shí)，鼠標(biāo)距離網(wǎng)頁(yè)左上角的水平距離 event.pageY 事件發(fā)生時(shí)，鼠標(biāo)距離網(wǎng)頁(yè)左上角的垂直距離 event.type 事件的類(lèi)型（比如click） event.which 按下了哪一個(gè)鍵 event.data 在事件對(duì)象上綁定數(shù)據(jù),然后傳入事件處理函數(shù) event.target 事件針對(duì)的網(wǎng)頁(yè)元素 event.preventDefault() 阻止事件的默認(rèn)行為（比如點(diǎn)擊鏈接，

19、會(huì)自動(dòng)打開(kāi)新頁(yè)面） event.stopPropagation() 停止事件向上層元素冒泡 在事件處理函數(shù)中，可以用this關(guān)鍵字，返回事件針對(duì)的DOM元素：$(a).click(function() if ($(this).attr(href).match(evil) /如果確認(rèn)為有害鏈接e.preventDefault(); /阻止打開(kāi)$(this).addClass(evil); /加上表示有害的class); 有兩種方法，可以自動(dòng)觸發(fā)一個(gè)事件。一種是直接使用事件函數(shù)，另一種是使用.trigger()或.triggerHandler()。$(a).click();$(a).trigger

20、(click);特殊效果特殊效果 .fadeIn() 淡入 .fadeOut() 淡出 .fadeTo() 調(diào)整透明度 .hide() 隱藏元素 .show() 顯示元素 .slideDown() 向下展開(kāi) .slideUp() 向上卷起 .slideToggle() 依次展開(kāi)或卷起某個(gè)元素 .toggle() 依次展示或隱藏某個(gè)元素 除了.show()和.hide()，所有其他特效的默認(rèn)執(zhí)行時(shí)間都是400ms（毫秒） $(h1).fadeIn(300); / 300毫秒內(nèi)淡入 $(h1).fadeOut(slow); / 緩慢地淡出 在特效結(jié)束后，可以指定執(zhí)行某個(gè)函數(shù)。$(p).fadeOut(300, function() $(this).remove(); ); 更復(fù)雜的特效，可以用.animate()自定義$(div).animate(left : “+=50”, opacity : 0.25, 300, function() alert(done!); ); .stop()和.delay()用來(lái)停止或延緩特