資源描述:
《jquery核心操作》由會員上傳分享,免費在線閱讀,更多相關(guān)內(nèi)容在教育資源-天天文庫。
1、1.1$(document).ready()值整個jQuery運行的核心。在傳統(tǒng)的window.onload事件在整個HTML頁面元素全部加載完畢之后發(fā)生,這帶來了一定性能上的問題,現(xiàn)代網(wǎng)頁元素多,特別是圖像等,需加載很長的時間,所以window.onload事件需要等待很長的時間。而事實上只需要HTML代碼本身加載完畢就可以開始操作。也就是不需要等待圖片加載完畢了就可以操作。W3C定義了一個DOMContentLoaded事件,當DOM被載入之后。DOMContentLoaded事件就會發(fā)生,這個比window.loaded更早發(fā)生,這樣就提高了效率。但IE6/
2、IE7均不支持此事件。jQuery就解決了這個問題。即$(docuemnt).read()事件,它模擬了DOMContentLoaded事件。Document元素代表DOM樹,$(document)選取了這個document元素,它加載完成的時候,就意味著整個HTMLDOM樹加載完成,此時觸發(fā)ready()事件。1.1.1寫法:標準寫法一$(document).ready(function(){Alert(‘c’);});另類寫法jQuery(document).ready(function(){alert(‘c’);});簡潔寫法$(function(){Ale
3、rt(‘c’);});1.1.2優(yōu)點:1使用$(document).ready()之后,不需要在HTML中加入任何的行為代碼,更好實現(xiàn)代碼分離,可以將jQuery代碼和javascript代碼放置到外部的js中,而調(diào)用HTML頁面包含任何元素事件等行為的定義2$(document).ready()可以同時定義多個行為,而window.onload只能定義一次。$(document).ready(function(){//somecodehere});$(document).ready(function(){//someothercodehere})如果window
4、.onload被定義多此,那么只有最后一次才有效3$(document).ready()相比window.onload.大大提高了加載的速度和javascript代碼執(zhí)行的效率。1.2快速選擇頁面元素獲取第一個li元素$(‘li:eq(0)’)eq就是equal幾獲取所有奇數(shù)的li元素$(‘li:even’)$(‘li:odd’)獲取所有偶數(shù)的li元素獲取最開始的3個li元素$(‘li:lt(3)’)lt就是lessthan小于幾獲取樣式不是goofy的li元素$(‘li:not(.goofy)’)not不屬于獲取在一個p中包含一個href屬性,而且屬性href中
5、包含#的連接。pa表示作為p子元素的a。A[href*=#]表示a包含href屬性且屬性中包含#$(‘pa[href*=#]’)*包含什么獲取所有code元素以及所有樣式為goofy的li元素$(‘code,li.goofy’)1.2.1利用表達式獲取元素獲取所有ol元素中樣式為goofy且字體樣式為strong的元素$(‘ol.goofy>strong’)>所有的獲取所有以pdf結(jié)尾的鏈接,這些鏈接是li元素的子元素,并且這些父li元素之前存在li元素$(‘li+li>a[href$=pdf]’)$以什么結(jié)尾a[href$=pdf]表示a標簽的href屬性值以p
6、df結(jié)尾input[id$=txt]表示input標簽的id屬性值以txt結(jié)尾獲取所有hidden的span元素$(‘span:hidden’)此處的hidden是表示在頁面上隱藏的spansurprise1.2.2其他獲取id為jqdt元素中的第一個li子元素$(‘#jqdt’).find(‘li’).slice(0,1)Slice(v1,v2)v1開始位置(包含),v2結(jié)束位置(不包含)獲取id為jqdt元素中的前3個li$(‘#jqdt’).find(‘li’).slice(0,3)$(‘#j
7、qdt’).find(‘li.funny’).siblings()獲取id為jqdt的li元素中id為funny的補集Siblings()補集獲取所有包含silly字符串的元素,并且他們不能處于第3個li后面$(‘#jqdt’).find(‘li’).not(‘:gt(2)’).filter(‘:contains(silly)’)Find()是在$(‘#jqdt’)元素內(nèi)查找操作,filter()是在$(‘#jqdt’)元素本身查找:Contains(silly)匹配元素中包含silly這個變量的文本集合獲取jqdt所有的li元素,然后過濾,只獲取樣式為goofy
8、的元素$(