jQuery常用方法中文解析

jQuery常用方法中文解析jQuery設(shè)計(jì)思想【目錄】一、選擇網(wǎng)頁元素二、改變結(jié)果集三、鏈?zhǔn)讲僮魉?、元素的操作：取值和賦值五、元素的操作：移動(dòng)六、元素的操作：復(fù)制、刪除和創(chuàng)建七、工具方法八、事件操作九、特殊效果一、選擇網(wǎng)頁元素jQuery的基本設(shè)計(jì)和主要用法，就是"選擇某個(gè)網(wǎng)頁元素，然后對(duì)其進(jìn)行某種操作"。這是它區(qū)別于其他函數(shù)庫的根本特點(diǎn)。使用jQuery的第一步，往往就是將一個(gè)選擇表達(dá)式，放進(jìn)構(gòu)造函數(shù)jQuery()(簡寫為$)，然后得到被選中的元素。選擇表達(dá)式可以是CSS選擇器：$(document)//選擇整個(gè)文檔對(duì)象$('#myId')//選擇ID為myId的網(wǎng)頁元素$('div.myClass')//選擇class為myClass的div元素$('input[name=first]')//選擇name屬性等于first的input元素也可以是jQuery特有的表達(dá)式：$('a:first')//選擇網(wǎng)頁中第一個(gè)a元素$('tr:odd')//選擇表格的奇數(shù)行$('#myForm:input')//選擇表單中的input元素$('div:visible')//選擇可見的div元素$('div:gt(2)')//選擇所有的div元素，除了前三個(gè)$('div:animated')//選擇當(dāng)前處于動(dòng)畫狀態(tài)的div元素二、改變結(jié)果集如果選中多個(gè)元素，jQuery提供過濾器，可以縮小結(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);//選擇第6個(gè)div元素有時(shí)候，我們需要從結(jié)果集出發(fā)，移動(dòng)到附近的相關(guān)元素，jQuery也提供了在DOM樹上的移動(dòng)方法：$('div').next('p');//選擇div元素后面的第一個(gè)p元素$('div').parent();//選擇div元素的父元素$('div').closest('form');//選擇離div最近的那個(gè)form父元素$('div').children();//選擇div的所有子元素$('div').siblings();//選擇div的同級(jí)元素三、鏈?zhǔn)讲僮鬟x中網(wǎng)頁元素以后，就可以對(duì)它進(jìn)行某種操作。jQuery允許將所有操作連接在一起，以鏈條的形式寫出來，比如：$('div').find('h3').eq(2).html('Hello');分解開來，就是下面這樣：$('div')//找到div元素.find('h3')//選擇其中的h3元素.eq(2)//選擇第3個(gè)h3元素.html('Hello');//將它的內(nèi)容改為Hello這是jQuery最令人稱道、最方便的特點(diǎn)。它的原理在于每一步的jQuery操作，返回的都是一個(gè)jQuery對(duì)象，所以不同操作可以連在一起。jQuery還提供了.end()方法，使得結(jié)果集可以后退一步：$('div').find('h3').eq(2).html('Hello').end()//退回到選中所有的h3元素的那一步.eq(0)//選中第一個(gè)h3元素.html('World');//將它的內(nèi)容改為World四、元素的操作：取值和賦值操作網(wǎng)頁元素，最常見的需求是取得它們的值，或者對(duì)它們進(jìn)行賦值。jQuery使用同一個(gè)函數(shù)，來完成取值(getter)和賦值(setter)。到底是取值還是賦值，由函數(shù)的參數(shù)決定。$('h1').html();//html()沒有參數(shù)，表示取出h1的值$('h1').html('Hello');//html()有參數(shù)Hello，表示對(duì)h1進(jìn)行賦值常見的取值和賦值函數(shù)如下：.html()取出或設(shè)置html內(nèi)容.text()取出或設(shè)置text內(nèi)容.attr()取出或設(shè)置某個(gè)屬性的值.width()取出或設(shè)置某個(gè)元素的寬度.height()取出或設(shè)置某個(gè)元素的高度.val()取出某個(gè)表單元素的值需要注意的是，如果結(jié)果集包含多個(gè)元素，那么賦值的時(shí)候，將對(duì)其中所有的元素賦值;取值的時(shí)候，則是只取出第一個(gè)元素的值(.text()例外，它取出所有元素的text內(nèi)容)。五、元素的操作：移動(dòng)如果要移動(dòng)選中的元素，有兩種方法：一種是直接移動(dòng)該元素，另一種是移動(dòng)其他元素，使得目標(biāo)元素達(dá)到我們想要的位置。假定我們選中了一個(gè)div元素，需要把它移動(dòng)到p元素后面。第一種方法是使用.insertAfter()，把div元素移動(dòng)p元素后面：$('div').insertAfter('p');第二種方法是使用.after()，把p元素加到div元素前面：$('p').after('div');表面上看，這兩種方法的效果是一樣的，唯一的不同似乎只是操作視角的不同。但是實(shí)際上，它們有一個(gè)重大差別，那就是返回的元素不一樣。第一種方法返回div元素，第二種方法返回p元素。你可以根據(jù)需要，選擇到底使用哪一種方法。使用這種模式的操作方法，一共有四對(duì)：.insertAfter()和.after()：在現(xiàn)存元素的外部，從后面插入元素.insertBefore()和.before()：在現(xiàn)存元素的外部，從前面插入元素.appendTo()和.append()：在現(xiàn)存元素的內(nèi)部，從后面插入元素.prependTo()和.prepend()：在現(xiàn)存元素的內(nèi)部，從前面插入元素六、元素的操作：復(fù)制、刪除和創(chuàng)建復(fù)制元素使用.clone()。刪除元素使用.remove()和.detach()。兩者的區(qū)別在于，前者不保留被刪除元素的事件，后者保留，有利于重新插入文檔時(shí)使用。清空元素內(nèi)容(但是不刪除該元素)使用.empty()。創(chuàng)建新元素的方法非常簡單，只要把新元素直接傳入jQuery的構(gòu)造函數(shù)就行了：$('Hello');$('newlistitem');$('ul').append('listitem');七、工具方法除了對(duì)選中的元素進(jìn)行操作以外，jQuery還提供一些工具方法(utility)，不必選中元素，就可以直接使用。如果你懂得Javascript語言的繼承原理，那么就能理解工具方法的實(shí)質(zhì)。它是定義在jQuery構(gòu)造函數(shù)上的方法，即jQuery.method()，所以可以直接使用。而那些操作元素的方法，是定義在構(gòu)造函數(shù)的prototype對(duì)象上的方法，即jQtotype.method()，所以必須生成實(shí)例(即選中元素)后使用。如果不理解這種區(qū)別，問題也不大，只要把工具方法理解成，是像javascript原生函數(shù)那樣，可以直接使用的方法就行了。常用的工具方法有以下幾種：$.trim()去除字符串兩端的空格。$.each()遍歷一個(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ì)象的類別(函數(shù)對(duì)象、日期對(duì)象、數(shù)組對(duì)象、正則對(duì)象等等)。$.isArray()判斷某個(gè)參數(shù)是否為數(shù)組。$.isEmptyObject()判斷某個(gè)對(duì)象是否為空(不含有任何屬性)。$.isFunction()判斷某個(gè)參數(shù)是否為函數(shù)。$.isPlainObject()判斷某個(gè)參數(shù)是否為用"{}"或"newObject"建立的對(duì)象。$.support()判斷瀏覽器是否支持某個(gè)特性。八、事件操作jQuery可以對(duì)網(wǎng)頁元素綁定事件。根據(jù)不同的事件，運(yùn)行相應(yīng)的函數(shù)。$('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()按下鍵盤(長時(shí)間按鍵，只返回一個(gè)事件).keypress()按下鍵盤(長時(shí)間按鍵，將返回多個(gè)事件).keyup()松開鍵盤.load()元素加載完畢.mousedown()按下鼠標(biāo).mouseenter()鼠標(biāo)進(jìn)入(進(jìn)入子元素不觸發(fā)).mouseleave()鼠標(biāo)離開(離開子元素不觸發(fā)).mousemove()鼠標(biāo)在元素內(nèi)部移動(dòng).mouseout()鼠標(biāo)離開(離開子元素也觸發(fā)).mouseover()鼠標(biāo)進(jìn)入(進(jìn)入子元素也觸發(fā)).mouseup()松開鼠標(biāo).ready()DOM加載完成.resize()瀏覽器窗口的大小發(fā)生改變.scroll()滾動(dòng)條的位置發(fā)生變化.select()用戶選中文本框中的內(nèi)容.submit()用戶遞交表單.toggle()根據(jù)鼠標(biāo)點(diǎn)擊的次數(shù)，依次運(yùn)行多個(gè)函數(shù).unload()用戶離開頁面以上這些事件在jQuery內(nèi)部，都是.bind()的便捷方式。使用.bind()可以更靈活地控制事件，比如為多個(gè)事件綁定同一個(gè)函數(shù)：$('input').bind('clickchange',//同時(shí)綁定click和change事件function(){alert('Hello');});有時(shí)，你只想讓事件運(yùn)行一次，這時(shí)可以使用.one()方法。$("p").one("click",function(){alert("Hello");//只運(yùn)行一次，以后的點(diǎn)擊不會(huì)運(yùn)行});.unbind()用來解除事件綁定。$('p').unbind('click');所有的事件處理函數(shù)，都可以接受一個(gè)事件對(duì)象(eventobject)作為參數(shù)，比如下面例子中的e：$("p").click(function(e){alert(e.type);//"click"});這個(gè)事件對(duì)象有一些很有用的屬性和方法：event.pageX事件發(fā)生時(shí)，鼠標(biāo)距離網(wǎng)頁左上角的水平距離event.pageY事件發(fā)生時(shí)，鼠標(biāo)距離網(wǎng)頁左上角的垂直距離event.type事件的類型(比如click)event.which按下了哪一個(gè)鍵event.data在事件對(duì)象上綁定數(shù)據(jù)，然后傳入事件處理函數(shù)event.target事件針對(duì)的網(wǎng)頁元素event.preventDefault()阻止事件的默認(rèn)行為(比如點(diǎn)擊鏈接，會(huì)自動(dòng)打開新頁面)event.stopPropagation()停止事件向上層元素冒泡在事件處理函數(shù)中，可以用this關(guān)鍵字，返回事件針對(duì)的DOM元素：$('a').click(function(){if($(this).attr('href').match('evil')){//如果確認(rèn)為有害鏈接e.preventDefault();//阻止打開$(this).addClass('evil');//加上表示有害的class}});有兩種方法，可以自動(dòng)觸發(fā)一個(gè)事件。一種是直接使用事件函數(shù)，另一種是使用.trigger()或.triggerHandler()。$('a').click();$('a').trigger('click');九、特殊效果jQuery允許對(duì)象呈現(xiàn)某些特殊效果。$('h1').show();//展現(xiàn)一個(gè)h1標(biāo)題常用的特殊效果如下：.fadeIn()淡入.fadeOut()淡出.fadeTo()調(diào)整透明度.hide()隱藏元素.show()顯示元素.slideDown()向下展開.slideUp()向上卷起.slideToggle()依次展開或卷起某個(gè)元素.toggle()依次展示或隱藏某個(gè)元素除了.show()和.hide()，所有其他特效的默認(rèn)執(zhí)行時(shí)間都是400ms(毫秒)，但是你可以改變這個(gè)設(shè)置。$('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,//持續(xù)時(shí)間function(){alert('done!');}//回調(diào)函數(shù));.stop()和.delay()用來停止或延緩特效的執(zhí)行。$.fx.off如果設(shè)置為true，則關(guān)閉所有網(wǎng)頁特效。jQueryMobile設(shè)計(jì)思想是本文要介紹的內(nèi)容，主要是來了解jQueryMobile的使用方法技巧的學(xué)習(xí)，具體內(nèi)容來看本文詳解。一、選擇網(wǎng)頁元素jQuery的基本設(shè)計(jì)思想和主要用法，就是"選擇某個(gè)網(wǎng)頁元素，然后對(duì)其進(jìn)行某種操作"。這是它區(qū)別于其他Javascript庫的根本特點(diǎn)。使用jQuery的第一步，往往就是將一個(gè)選擇表達(dá)式，放進(jìn)構(gòu)造函數(shù)jQuery()（簡寫為$），然后得到被選中的元素。選擇表達(dá)式可以是CSS選擇器：$(document)//選擇整個(gè)文檔對(duì)象$('#myId')//選擇ID為myId的網(wǎng)頁元素$('divmyClass')//選擇class為myClass的div元素$('input[name=first]')//選擇name屬性等于first的input元素也可以是jQuery特有的表達(dá)式：$('a:first')//選擇網(wǎng)頁中第一個(gè)a元素$('tr:odd')//選擇表格的奇數(shù)行$('#myForm:input')//選擇表單中的input元素$('div:visible')//選擇可見的div元素$('div:gt(2)')//選擇所有的div元素，除了前三個(gè)$('div:animated')//選擇當(dāng)前處于動(dòng)畫狀態(tài)的div元素二、改變結(jié)果集jQuery設(shè)計(jì)思想之二，就是提供各種強(qiáng)大的過濾器，對(duì)結(jié)果集進(jìn)行篩選，縮小選擇結(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);//選擇第6個(gè)div元素有時(shí)候，我們需要從結(jié)果集出發(fā)，移動(dòng)到附近的相關(guān)元素，jQuery也提供了在DOM樹上的移動(dòng)方法：$('div')next('p');//選擇div元素后面的第一個(gè)p元素$('div')parent();//選擇div元素的父元素$('div')closest('form');//選擇離div最近的那個(gè)form父元素$('div')children();//選擇div的所有子元素$('div')siblings();//選擇div的同級(jí)元素三、鏈?zhǔn)讲僮鱦Query設(shè)計(jì)思想之三，就是最終選中網(wǎng)頁元素以后，可以對(duì)它進(jìn)行一系列操作，并且所有操作可以連接在一起，以鏈條的形式寫出來，比如：$('div')find('h3')eq(2)html('Hello');分解開來，就是下面這樣：$('div')//找到div元素find('h3')//選擇其中的h3元素eq(2)//選擇第3